这篇文章上次修改于 2079 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

let ~const ~ var

var

  1. 变量可以提升
  2. 可以声明多次
  3. 声明的全局变量,挂载在window上面
  4. 只有全局的作用域与函数作用域

let

  1. 暂时性死区
  2. 不可以重复的声明
  3. let 有块级作用域{}

       // console.log(a); // 暂时性死区

    // let a = 10;
    // let a = 5; // 不可以重复声明
    // var a = 5;
    // console.log(window.a); // undefined

  4. let 在for 循环中
    for (let i = 0; i < 3; i++) {

    let i = 5; // 在子的里面声明了一个变量
    console.log(i);

    };
    console.log(i);

2019-03-16_221221.jpg

不一样的结果

     // for (var i = 0; i < li.length; i++) {
        //     li[i].onclick = function() {
        //         console.log(i);
        //     }

     for (let i = 0; i < li.length; i++) {
            li[i].onclick = function() {
                console.log(i);
            }
        }

        // }

const 声明常量

const a = [1, 2, 3];
        a.push(4);
        // console.log(a);

        // a = [1, 2, 3, 4]; // 改地址
        // const对应是一个引用类型,可以修改这个引用类型的属性,但 

是不可以更改它的地址

如果函数没能传递参数,我们默认给它一个

    // function fn(a, b) {
    //     return a + b;
    // }

        // 给函数设置一个默认值
    // function fn(a, b) {
    //     a = a === undefined ? 0 : a;
    //     b = b === undefined ? 0 : b;
    //     return a + b;
    // }

    function fn(a = 0, b = 0) {
        return a + b;
    }
    console.log(fn());

rest参数

    // function fn() {
    //     // console.log(arguments); // 类数组(有长度,而且可以通过下标来获取)
    //     var num = 0;
    //     for (var i = 0; i < arguments.length; i++) {
    //         num += arguments[i];
    //     }
    //     return num;
    // }

   // rest参数,代替arguments
    // function fn(...arr) {
    //     // console.log(arr); // 数组,参数组成的数组
    //     var num = 0;
    //     for (var i = 0; i < arr.length; i++) {
    //         num += arr[i];
    //     };
    //     return num;
    // }

箭头函数

let fn1 = () => {};

    // let fn2 = function() {};

    // ----------------

    // let fn = (a, b) => {
    //     return a + b;
    // }
    // console.log(fn(1, 2));

    // --------------
    // 函数体只有一句话retur,可以不用写大括号,也可以不用写 

return

    // 函数体只有一行的时候,可以不用写大括号
    // let fn = (a, b) => a + b;
    // console.log(fn(10, 20));

    // ----------------
    // 如果函数只有一个参数,小括号可以不用写
    // 但是:如果有两个及以上的参数,或者没有参数,都得写小括号
    // let fn = a => a * a;
    // console.log(fn(3));

需要返回一个对象,但是这会又没有写{},则要用小括号包起来

    // let fn = (a, b) => {
    //     return {
    //         a: a,
    //         b: b
    //     }
    // };

    let fn = (a, b) => ({
        a: a,
        b: b
    });

    console.log(fn(3, 4));

箭头函数注意事项:

    // 1、没有自己的this
    // 2、箭头函数没有arguments对象,所以要用rest参数

解构赋值

本质上就是一种匹配模式,只要等号两边的模式相同,等号左边的变量就可以被赋予对应的值

    let [a, b, c] = [1, 2, 3];
    console.log(a, b, c);

    let arr = [1, 2, 3];
    let a = arr[0];
    let b = arr[1];
    let c = arr[2];

    数组的解构赋值(由位置决定)

    let [a, b, c] = [1, , 3];
    console.log(a, b, c);

    let [a, b = 5, c] = [1, , 3];
    console.log(a, b, c);

    let [a, ...r] = [1, 2, 3];
    console.log(a, r);

    对象的解构赋值(属性没有次序,同名的属性才能取得值)
    let {
        a,
        b
    } = {
        b: 'bbb',
        a: 'aaa'
    };
    console.log(a, b);
    let obj = {
        name: 'z3',
        age: 20
    };
    let name, age; // 先声明变量,后解购,要用小括号括起来
    ({
        name,
        age
    } = obj);
    console.log(name, age);

    let a = 10;
    let {
        a: n, // 别名,因为上面你声明过a,再声明,就存在重复声明报错,所以就改用别名
        b
    } = {
        a: 'aaa'
    };
    console.log(a, b, n);