WuLiSenSen

Appearance

Return to top
On this page

1、变量的 定义 let与const

a、为什么不用var：

var没有块级作用域，定义后在当前闭包中都可以访问，如果变量名重复，就会覆盖前面定义的变量，并且也有可能被其他人更改。

var在for循环标记变量共享，一般在循环中使用的i会被共享，其本质上也是由于没有块级作用域造成的，由于情况比较多见和特殊，单独算一个问题。

b、为什么用let：

let定义的变量有作用域： 在自己的作用域中不会被其他人访问

{
    let s = "s";
}
console.log(s);   ---> undefined
- 不会影响window
let win = "win";
console.log(window.win);   --->undefined
-嵌套循环不会相互影响
for (let i = 0; i < 3; i++) {
    console.log("out", i);
    for (let i = 0; i < 2; i++) {
        console.log("in", i);

    }
    console.log("");
}

c、为什么用const

const是静态变量，定以后不允许再被修改或者重新定义。 在严格模式下，重新定义或者修改静态变量会报错。 不同的块级作用域下，可以定义相同名字的静态变量。

const MAX_CNT = 10;
MAX_CNT = 11;    --->报错

2、解构赋值

a、解构赋值： 

let [a,b,c] = ["11","22","33"];

b、省略赋值： 

let [, , x] = [1, 2, 3];

c、不定参数： 

let [first, , ...other] = [1, 2, 3, 4, 5];

d、对写的解构赋值： 

let obj = {
    param1: "p1",
    param2: "p2"
};
let {param1, param2} = obj
console.log(param1, param2);
// 相当于
let param1 = obj.param1;
let param2 = obj.param2;
// 但是如果我非想叫p1和p2呢
let {param1: p1, param2: p2} = obj;
console.log(p1, p2);

e、默认值 

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

3、函数

a、默认参数 

function calc (x = 0, y = 0) {
    console.log(x, y);
}

b、默认参数作用域 

        let x = 2;
        function test (x, y = x) {
            console.log(x, y);
        }
        test(1)；

c、rest参数 ...（将非数组转换成 数组） 

        function add (...value) {
            let sum = 0;
            for (var val of value) {
                sum += val;
            }
            return sum;
        }
        console.log(add(1, 2, 3, 4, 5));

d、spread参数 ...（将数组转换成非数组） 

        var nums = [1, 3, 5, 6, 7];
        function calc (x, y) {
            let sum = x + y;
            console.log(sum);
        }
        calc(...nums);

e、箭头函数 

        // 箭头函数在语法上是匿名函数的一种简写方式
        let a = 123;
        let func1 = a => a;
        let func2 = function (a) {
            return a;
        };
        // 多个参数 还需要计算 就要用代码块包裹起来
        let func3 = (a, b) => {
            let res = a + b;
            res = res * 5;
            return res;
        }

f、箭头函数简单应用 

        // 处理数组中的数据
        let arr = [1, 5, 6];
        arr = arr.map(value => value + 1);
        arr = arr.map(function (value) {
            return value + 1;
        });
        // 找到数组中的数据
        let arr2 = [8, 6, 5];
        let findItem = arr2.findIndex(value => value === 6);

g、箭头函数this关键字不变 

        window.a = 'a';

        var obj = {
            a: 'obj_a',
            func: function () {
                setTimeout(function () {
                    console.log(this, this.a);
                }, 1000);
            },
            func2: function () {
                setTimeout(() => {
                    console.log(this, this.a);
                }, 1000);
            }
        };

        obj.func();
        obj.func2();

4、Symbol

a、Symbol基本使用 

    // Symbol 接受的参数是对 Symbol 的描述

    let s = Symbol();
    console.log(typeof s);

    let syb = Symbol('syb');
    let syb2 = Symbol('syb');
    console.log(syb, syb === 'Symbol(syb)', syb.toString() === 'Symbol(syb)', syb == syb2, syb.toString() == syb2.toString());

    // 不可以参与运算
    let str = 'str';
    str += syb.toString();
    console.log(str);

    // 强制类型转换
    let sybRe = Symbol(13);
   console.log(String(sybRe));
   console.log(Boolean(sybRe));
   console.log(Number(sybRe));

b、Symbol作为对象属性名 

    let syb = Symbol('s');

    let obj = {};
    obj[syb] = 'syb value';
    // .运算符 和 []运算符后面都是字符串, 但是我们的属性名是一个Symbol, 是一种极其特殊的字符串
    console.log(obj, obj[syb], obj['Symbol(s)'], obj.syb);
阅读量：