JavaScript基础总结（1）

本文主要是介绍JavaScript基础总结（1），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Javascript简介

弱类型的脚本语言。代码是逐行执行的

分为嵌入式，外链式{<script scr=''></script>}

与用户交互

1.alert :弹出警示框 2.prompt:弹出输入框

3.console.log:在控制台上打印 4.document.write:在页面输出、显示

一. 变量

1.JS定义或者叫做声明变量

语法： var 变量名 = 值

var 定义变量的关键字

空格分割变量名和关键字的必须有空格

变量名你自己起的一个名字用来代表后面的一串东西的

等于号在js里面等于号就是赋值的意思把右边的内容赋值给左边的变量名

值你定义的变量代表的内容

##变量的命名规范和命名规则

1.规则：

1.1 一个变量只能有数字(0-9) 字母(a-zA-Z) 美元符($) 下划线(_) 组成

1.2 一个变量不能有数字开头

1.3 在JS中严格区分大小写比如说 num Num nUm nuM 等等都不是同一个变量

1.4 不能使用关键字或者保留字

关键字：现在JS语法中正在使用的关键字(比如说var)

保留字：现在JS还没用但是将来可能会用

2.规范：建议你去遵守，因为大家都这样

2.1 不要使用中文命名

2.2 变量命名应该语义化

2.3 驼峰命名法当一个变量是由多个单词组成的时候第二个单词开始首字母大写

变量的语法：

情况	说明	结果
var age;console.log(age);	只声明，不赋值	undefined
console.log(age);	不声明，不赋值直接使用	报错
age=10;console.log(age);	不声明，只赋值	10

console.log(num);变量提升//undefined

var num=1；

2.数据的类型

1.数值类型 number （表示整数和浮点数）

2.字符型 string （表示字符串）

3.布尔型 boolean{有两个值1.ture 2.false} flag是布尔型的变量

4.未定义型 undefined （声明变量，但没有给值）

5.空型 null （清空变量）

6.数组 arr

7.对象 obj

2.1数据类型的转换

1.数组类型转换为字符串类型 to string()

var num=100;

console.log(num tostring());

console.log(typeof num tostring()) {这里typeof是检测数据类型的}

2.利用string() 这是强制转换，任何数据类型都可以转换为子符串

var num1=100;

console.log(string(num1));

console.log(typeof string(num1))

3.利用加号拼接字符串的方法实现转换效果

var num2=100;

console.log(num2+' ');

console.log(typeof (num2+' '))

4.其他类型的转换位数字型

1.parseInt() 得到的是整数,没有四舍五入

2.paseFloat() 得到的是浮点小数

3.number 强制转换

二.比较、执行算数运算

1.算数运算符

1.是由数字运算符变量等组成的式子。表达式最终都会有一个结果，返回给我们

2.递增递减

1.让变量自己加一，不管是放在变量前面还是后面，递增运算符都必须配合变量使用

++num 前置递增先自加一后返回值

num++ 后置递增先返回值后自加一

3.比较运算符

1.比较运算符

两个数据进行比较的符号

// 1. > 左边大于右边得到true

左边不大于右边得到false

// 2. < 左边小于右边得到true

// 左边不小于右边得到false

// 3. >=

// 左边大于或者等于右边得到true

// 左边小于右边得到false

// 4. <=

// 左边小于或者等于右边得到true

// 左边大于右边得到false

// 5. ==

// 比较两边的数据值是不是相等,不管数据类型

// 6. ===

// 比较两边的数据是不是相等值和数据类型都要比较

// 7. !=

// 比较两边的数据值是不是不等不管数据类型

// 8. !==

// 比较两边的数据是不是不等值和数据类型都要比较

// 值不一样那可定是true 当数据类型不一样的时候那就是true 不再管值了

4.逻辑运算符

1.&& 逻辑与都要满足。两侧都为真的，一个假的，结果就是假的

2.|| 逻辑或多个条件有一个都可以满足两侧只要一个为真，他就是真。两侧只要都是假，结果就是假

3.！逻辑非就是取反的意思 console.log(!true) //false 真的都能变为假的

5.赋值运算符

//赋值运算符：进行数据赋值的符号

// 1. =

// 赋值：把等于号右边的赋值给左边的变量

// 2. +=

// 这个是加法和赋值的合作

// a+=b 等价于 a=a+b 注意顺序一定不能写反了就是自己在自己的基础上叠加

// 因为你在计算数的时候是一样的 a+b 和 b+a 没区别

// 但是字符串在拼接的时候谁在前面谁在后面就有区别了

// 3. *=

// 这个是乘法和赋值的合作

// a=b 等价于 a=ab

// 在自己的基础上进行叠加

// 4. /=

// 5. %=

// 6. -=

// = 直接赋值 var num=10;

// += -= 加减一个数后再赋值 var age=10; age+=5; console.log(age)

// = /= %= 乘等除等取模赋值 var age=2; age=5; console.log(age)

6.运算符的优先级(权重)

优先级运算符顺序

// 1 小括号 ()
// 2 一元运算符 ++ -- !
// 3 算术运算符先* / % 再+ -
// 4 关系运算符 > >= < <=
// 5 相等运算符 == ！= === ！==
// 6 逻辑运算符先逻辑与&& 再逻辑或 ||
// 7 赋值运算符 =
// 8 逗号运算符，声明多个变量用逗号隔开
// 总结一元运算符里面的逻辑非！优先级很高
// 逻辑与比逻辑或优先级高

2.短路运算符

1.表达式1&&表达式2
    如果表达式1为真则返回表达式2，如果表达式均为真，则返回为真的最后一个表达式
    如果表达式1为假则返回表达式1，如果表达式中任何一个为真，则返回第一个为假的表达式
    如果有空或者否定意义的为假，其余都是真的
2.表达式1||表达式2(多个两两比较)
    如果1为真，则返回表达式1，后面的不在运算
    如果表达式为假，则返回最后一个为假的表达式
    如果表达式为1为假，则返回表达式2
    五种情况下为假：0,'_',Nan,null,undefined

三.流程控制

流程控制：简单理解就是控制我们的代码按照什么结构顺序来执行，以便达到不同的运算结果
流程控制主要有三种结构：顺序结构分支结构循环结构代表三种代码执行顺序
顺序流程控制：是程序中最简单，最基本的流程控制，他没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多是这样执行的，我们以前写的代码大部分就是按照顺序结构来执行的
分支流程控制：就是由上到下的执行过程中，可以根据不通的条件，执行不同的路径代码，从而得到不同的结果。
分支流程控制主要有两种语句：if语句 switch语句
语句：理解成一个行为或者小动作循环语句和分支语句就是典型的语句，一个程序有很多的语句构成，一般情况下，会分割成一个一个的语句。

1.if语句

1.1if条件语句：四种书写方式

// 1-1. if(条件){要执行的代码} (分支结构)
// 当条件满足的时候(也就是表达式为true)的时候执行大括号里面的代码
// 当条件不满足的时候(也就是表达式为false)的时候不执行大括号里面的代码
// 1-2. if(条件){要执行的代码} else {要执行的代码} (双分支语句)
// 当条件满足的时候执行if后面大括号里面的代码
// 当条件不满足的时候执行else后面大括号里面的代码
// 1-3. if(条件1){ 条件1要执行的代码} else if(条件2){条件2要执行的代码} (多分支语句)
// 从第一个开始哪一个条件满足了就执行哪一个{}里面的代码
// 如果前面的满足了那么后面的就都不执行了
// 若干个大括号最多只能够执行一个
// 1-4. if(条件1){条件1要执行的代码} else if(条件2){条件2要执行的代码} else{所有的条件都不满足的时候执行的代码}
// 从第一个开始满足哪一个条件执行哪一个大括号里面的代码
// 前面的满足了后面的就都不执行了
// 所有的条件都不满足的时候执行else里面的代码
// 若干个大括号必然会执行其中的一个

// 1-1 if语句

    //var n = 28;
    // if (n >= 18) {
    //     console.log('可以进入网吧');
    // }
    // console.log('后续的代码');

    // 1-2 if else 语句
    // var n = 16;
    // if (n >= 18) {
    //     console.log('成年');
    // } else {
    //     console.log('未成年');
    // }

    // console.log('后续代码');

    // 1-3   if else if 语句
    // var n = 7;
    // if (n >= 23) {
    //     console.log('已成年');
    // } else if (n >= 13) {
    //     console.log('青少年');
    // } else if (n >= 7) {
    //     console.log('儿童');
    // }

    // console.log('后续代码');

    // 1-4 if else if else 语句
    var n = 5;
    if (n >= 23) {
        console.log('已成年');
    } else if (n >= 13) {
        console.log('青少年');
    } else if (n >= 7) {
        console.log('儿童');
    } else {
        console.log('在家和小姨一起玩');
    }

    // console.log('后续代码');

2.三元表达式

结构：条件表达式？表达式1：表达式2；
var result=num<5?'你答对了'：'你答错了';
alert(result)
由？和冒号组成的式子叫三元表达式

3.switch case 多分支判断语句

switch(){
    case 1;
    console.log('');
    break;
    case 2;
    console.log('');
    default;
}
switch 语句执行效率更高比if else语句。但主要适用于针对特殊值

四.循环结构

1.for循环
    for(var i=1;i<=100;i++){
        console.log();循环体
    }
    var i=1;初始变量 i<=100;终止条件  
    目的：可以重复使用此代码
2.for双循环
    for(){
        for(){
        
        }
    }
    外层for循环是遍历的次数，内层是交换的次数
3.while 循环
    var n = 8;
    while (n < 10) {
      console.log('我被执行了');
      n++;
    }
    console.log('后续代码');
4.do while循环
    var i = 8;
    do{
        console.log('我被执行了');
        i++;
    }while(i<=100);

continue和break的区别：

    1.continum 结束本次循环,继续执行下一次代码
     //continue案例 求1——100之间，除了能被7整除的数字之和  
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) { //如果能够被7整除
                continue; //就结束当前循环
            };
            sum += i;

        }
        console.log(sum);
    2.break    结束整个循环，只要遇到break，立马退出循环
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break;
            }
            console.log('我正在吃第' + i + '个包子');
        }
        console.log('没吃饱');

五.数组

1.Array 数组：有两种
- var arr=new Array()；
- var arr=[ ]；

总：数组和变量之间的区别：普通变量一次只能存储一个值(数值型，字符串，布尔型，空值和undefined),数组一次可以存储多个值，其中可含有有多个数据类型

2.数组的访问 [ ]索引号
- 索引号，就是数组对象中每个数组元素对应的序号从0开始
- 不仅可以通过索引号来访问咱们的数组元素，还可以通过索引来设置，修改相对应得数组元素数组名[索引]=值
- 给数组添加新元素通过数组名[新的索引]
3.数组遍历
- 本质就是把数组的元素从头到尾访问一次，用for循环
- for里面的数组元素 arr[i]，里面的i是计数器，把i当做数组的索引号来用，从0开始；
4.数组长度
- arr.length(长度)
- 通过length这个属性来完成数组的长度。arr.length可以监测数组元素的个数
- 数组的索引号和数组的长度有什么关系呢？
  - 索引号是从0开始的，数组长的是元素的个数

数组的最大值

max 最大值 min 最小值

//遍历数组中的最大值
// [2,6,1,77,52,25,7]
//案例分析
//1.声明一个保存最大值的变量max
//2.默认最大值就是取数组中的第一个元素
//3.遍历这个数组，把里面的每个数组元素和max相比较
//4.如果这个数组元素大于max就把这个数组元素保存到max里面，否则继续下一轮比较
//5.最后输出这个max即可
//var arr = [2, 6, 1, 77, 52, 25, 7, 102, 89, 98, 253];
    var max = arr[0];
        for (var i = 0; i < arr.length; i++) {
        // console.log(arr[i]);
         if (arr[i] > max) { 
            max = arr[i];
          }
        }
   console.log('这个数组的最大值就是：' + max);
最小值同理

新增数组元素

修改length的长度来新增数组

修改索引号在结尾添加数组，但不要给数字名字直接赋值

//1.新增数组元素的方法有两种
        //1.新增数组元素  通过修改length长度  增加空元素
        var arr = ['关羽', '张飞', '刘备', '诸葛亮'];
        console.log(arr.length); //4
        arr.length = 7; //把我的数组长度改为7，里面应该有7个数组元素  本来就4个，强制改成7，就会在原来基础上加上3个空元素
        console.log(arr); //['关羽', '张飞', '刘备', '诸葛亮','empty','empty','empty'];
        console.log(arr[4]); //新增的空元素只是声明了，没有给赋值，所以就是undefined
        console.log(arr[5]); //新增的空元素只是声明了，没有给赋值，所以就是undefined
        console.log(arr[6]); //新增的空元素只是声明了，没有给赋值，所以就是undefined
 //2.新增数组元素  通过修改索引号 追加数组元素  增加或者替换实体元素
        var arr1 = ['关羽', '张飞', '刘备', '诸葛亮'];
        console.log(arr1); //['关羽', '张飞', '刘备', '诸葛亮']
        arr1[4] = '赵云';
        console.log(arr1); //索引号没出现的叫做追加元素/['关羽', '张飞', '刘备', '诸葛亮','赵云']
        arr1[5] = '马超';
        console.log(arr1); //索引号没出现的叫做追加元素
        arr1[0] = '曹操';
        console.log(arr1); //索引号出现的叫做替换
        arr1 = '三国混战';
        console.log(arr1); //千万不要直接给数组名字赋值，否则里面的数组元素都没有了

翻转数组

(var i=arr.length-1;i >=0;i - -)

1.//将数组['关羽','张飞','赵云','马超','诸葛亮']的内容反过来存放
        //1.声明一个新数组 newArr
        //2.把旧数组的索引号第5个取过来（arr.length-1）,给新数组索引号第0个元素（newArr.length）
        //3.我们采取递减的方式   i--
        var arr = ['关羽', '张飞', '赵云', '马超', '诸葛亮', '曹操'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
 2.var str1='Hell0 world';
    console.log(str1.split('').reverse().join(''))  这里的split('')不能添加任何东西

筛选元素

数组去重或删除指定的元素数组名+索引的格式

 //将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的数组元素筛选出来，并且放到新数组
        //1.声明一个新的数组用于存放大于等于10的数组元素 var newArr
        //2.遍历原来的旧数组，找出大于等于10的元素
        //3.使用新数组的数组长度属性    newArr.length  刚开始length是0
        //4.依次追加给新数组newArr
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 105];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                //新数组索引号应该从0开始，依次递增
                newArr[newArr.length] = arr[i];
                //newArr.push(arr[i]);
            }
        }
        console.log(newArr);

冒泡排序

执行的是从小到大，从大到小
比如：1---4 arr.length 4---1 arr.length-1
外层for遍历的是次数内层for交换的次数
if(比较运算符决定了从大到小还是从小的大)
转换 var a=10,b=20;
- var temp=' ';
- temp=a;
- a=b;
- b=temp;

var arr=[1,3,5,7,9,10];
for(var i=0;i<arr.length;i++){
    for(var j=0;j<arr.length-1;j++){
        第一种
        if(arr[j]>arr[j+1]){
            var temp=arr[j]
            arr[j]=arr[j+1]
            arr[j+1]=temp
        }
        第二种
        if(arr[j]>arr[j+1]){
            [arr[j],arr[j+1]]=[arr[j+1],arr[j]]
        }
    }
}
console.log(arr)

六.函数

用function表示，是声明函数的关键字。
就是封装了一段代码可以重复执行调用的代码块
目的：让大量的代码可以重复使用
使用函数分为两部分：声明函数和调用函数
- function 函数名(){
  
  }
  
  函数名()
  
  函数不调用，自己不执行

函数的参数

function 函数名(形参){
    代码块
}
函数名(实参)
形参是接受实参
多个参数之间用逗号隔开

函数的返回值

function 函数名(){
    return;
}
函数名()
reture需要返回的结果
函数reture的特点
1.终止函数，reture后面的代码不会被执行
2.只能返回一个值，返回的结果是最后一个值.(谁在最后返回谁，逗号的情况下)
当我们的函数有return的时候，则返回return后面的的值，如果没有return则返回undefined
总结：
//break和continue和return的区别
        //break:结束当前循环(如for，while循环)
        //continue：就跳出本次循环，继续执行下次循环(如for，while循环)

        //上面两个主要针对循环  
        //return 不仅可以退出循环，还能够针对函数，结束当前函数，并且返回return语句后面的值

arguments使用

只有函数才可以使用arguments，arguments是函数所独有的内置对象，存放所有的参数，arguments是一个伪数组，并不是真正意义上的数组

//1.具有数组的length属性

//2.按照索引的方式进行存储

//3.它没有真正数组的一些方法 pop() push()等

简单总结一下：

    •    //什么是arguments  arguments是函数所独有的内置对象 它的展示形式就是一个伪数组

    •    //做什么用     里面存放了用户传递过来的所有实参

    •    //什么情况下使用：  当我们也不知道用户到底传多少个实参的时候，就用arguments 

    •    //有了arguments，我们不需要再去写形参了，这就是arguments


 //利用arguments求任意个数的最大值
        function getMax() { //这里的arguments就相当于数组[1,2,3,4]  就是求数组[1,2,3,4]中的最大值
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3, 4));

函数的两种声明

 //函数的两种声明方式
        //1.利用函数关键字定义函数(命名函数)
        function fn() {

        }
        fn();
        //2.利用函数表达式(匿名函数)声明函数 不传参数
        //var 变量名=function(){}
        var fun = function() {
            console.log('我是函数表达式');

        }
        fun();

        //传参数
        var fun1 = function(aru) {
            console.log(aru);

        }
        fun1('陈飞燕');
        //1.fun是变量名 不是函数名
        //2.函数表达式声明方式跟变量声明差不多，只不过变量里面存的是值，var num=10 而函数表达式里面存的是函数
        //3.函数表达式也可以进行传递参数

七.作用域

分为两种
- 1.全局作用域
  - 在整个script标签中，或者是一个单独的JS文件(链入)
- 2.局部作用域
  - (又称为函数作用域)，在函数内部就是局部，这个代码的名字只在函数内部起效果和作用
- 作用域：就是代码名字(经常使用变量)，在摸个范围内起作用和效果，目的是为了提高程序的可靠性。更重要的是减少命名冲突
- javascript 没有块级作用域，但在ES6新增了块级
- 块级作用域：{}表示的，如：if{}，for{}

作用域链

1.内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称之为作用域链
采取就近原则

//作用域链案例2
        var a = 1;

        function fn1() {
            var a = 2;
            var b = '22';
            fn2();
            console.log(b);


            function fn2() {
                var a = 3;
                fn3();
                console.log(b)
                console.log(a);


                function fn3() {
                    var a = 4;
                    console.log(a);
                    console.log(b);


                }
            }
        }
        fn1();

八.预解析

js引擎运行js代码分为两步：预解析，代码执行
1.什么叫预解析？
- JS引擎会把JS里面的所有的var，还有function提升到当前作用域的最前面
2.什么叫代码运行？
- 按照代码书写顺序从上往下执行

预解析分为两种：变量预解析(变量提升)和函数预解析(函数提升)

1.变量提升：就是把所有变量提升到当前作用域的最前面，不提升赋值操作
2.函数提升：就是把所有函数声明提升到当前作用域的最前面，不调用函数

//案例2
       // var num = 10;
 
       // function fn() {
       //     console.log(num);
       //     var num = 20;
       //     console.log(num);
       // }
       // fn();
       // console.log(num);
 
       //相当于执行以下代码
       // var num;
 
       // function fn() {
       //     var num;
       //     console.log(num); //undefined
       //     num = 20;
       //     console.log(num); //20
       // }
       // num = 10;
 
       // fn();

九.对象

object 对象·简称 obj
是一组无序的相关属性和方法的集合具体的实实在在存在的
对象是由属性和方法组成的
- 属性：事物的特征(常用名字)
- 方法：事物的行为(常用动词)

创建语法格式

对象的字面量{ }大括号

语法格式
 var obj = {
            uname: '可可',
            type: '阿拉斯加犬',
            age: '5岁',
            hair: 'Brownish red', //hair 头发
          skill: function() {
                return '技能是：' + '汪汪汪' + '演电影';

            }
        };

        console.log(obj);
        console.log(obj.uname);
        console.log(obj['type']);
        console.log(obj.age);
        console.log(obj.hair);
        console.log(obj.uname, obj['type'], obj.age, obj.hair, obj.skill());
符号：毛豆
 //区别
        //变量 单独声明并且赋值  使用的时候直接写变量名 单独存在
        //属性 在对象里面的不需要声明  使用的时候必须是  对象.属性 对象['属性']
        //2.函数和方法的相同点 都是实现某种功能  做某件事情
        //函数是单独声明的  并且调用的时候是   函数名()   函数是单独存在的
        //方法  在对象里面   调用的时候  是 对象.方法()
        //变量：单独声明赋值 单独存在
        //属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
        //函数：单独存在的 通过函数名()的方式就可以调用
        //方法：对象里面的函数称为方法，方法不需要声明，使用 对象.方法名()方式就可以调用 方法是用来描述对象的行为和功能

用new object 创建对象

//利用new Object创建对象
       var obj = new Object(); //这里创建一个空对象
       obj.uname = '张三丰'; //等分
       obj.age = 18;
       obj.sex = '男';
       obj.sayHi = function() {
           console.log('我的子弹已经准备好了，臭哥哥');
 
       };
       //注意 (1)我们是利用等号赋值的方法 追加对象的属性和方法
       //     (2)每个属性和方法之间用分号结束
       //在调用对象的时候是一样的方法
       console.log(obj.uname);
       console.log(obj['sex']);
       obj.sayHi();
       符号：等分

构造函数

就是把我们对象里面一些相同的属性和方法抽取出来封装到函数里面
泛指某一大类，首字母要大写，不需要reture就可以返回结果
调用构造函数必须使用new new star()

语法格式
function Star(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.skill = function() {
                return '唱歌';
            }

        }
        console.log(new Star('张学友', '18岁', '男'));

遍历对象
- 用for in
- 语法格式
  - ```
  for(变量  in   对象名){
   }
```
对象总结
- 对象是复杂类型：object
- 简单的数据类型：number,string,boolean,nall,undefined
- 本质：是一组无序的相关属性和方法的集合

九.内置对象

javascript分为三种：自定义，内置，浏览器对象是独有的
优点：帮助我们快速开发
Math.pI 圆周率，属性不带小括号，方法带小括号
Math.min()最小值
1.绝对值和三个取整
- Math.abs()
- Math.random() 随机数
2.三个取整
- 1.Math.floor()向下取整，往小的取
- 2.Math.ceil()向上取整，往大的取
- 3.Math.round()四舍五入
- 得到一个两数之间的随机整数，可以取得到最小值，但最大值取不到
  - Math.floor(Math.randow()*(max-min))+min
- 两个数都可以取到
  - Math.floor(Math.randow()*(max-min+1))+min

是的，没有高深的知识，没有进阶的技巧。只要肯努力相信你也可以成为大佬的。一起加油(＾Ｕ＾)ノ~ＹＯ

这篇关于JavaScript基础总结（1）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！