es6基础知识2

作者: Cuckoos定投笔记 | 来源:发表于2019-06-10 22:40 被阅读5次

    1. 块作用域

    作用域指的是变量的作用范围,js本身具有了全局作用域和函数作用域,es6中新增了块作用域。块作用域可以理解为由{}包含的代码所产生的作用范围

    es6中还新增了两种变量声明方式let和const,原来的var不支持块作用域

    var与let的区别
    var支持变量声明预解析,不支持块作用域,允许重复声明
    let不支持变量声明预解析,支持块作用域,不允许重复声明

    {
        var a = 1;  //var 不支持 {}
        let b = 2;
        const c = 3;
    }
    
    console.log(a);
    console.log(b);
    console.log(c);
    

    const不支持变量声明预解析,支持块作用域,不允许重复声明,并且是一个常量(值一旦确认,不允许修改),同时声明常量必需复制,不允许声明后再赋值。

    2. 解构赋值

    解构赋值的含义是允许按照一定的模式从数组或者对象中提取值,并对变量进行赋值。

    2.1 数组解构

    数组解构的写法:

    let arr = [1, 2, 3];
    
    let [a, b, c] = arr; //提取数组中的值,并一一赋值给a,b,c
    
    console.log(a, b, c); //1 2 3
    

    上面这种写法等价于:

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

    强调一点的是,使用数组解构需要值一一对应,比如说上面的那个例子,如果只是想把1,3赋值给a,b,那么应该这样写[a, , c] = arr

    2.2 对象解构

    对象解构的写法:

    let { game, level } = { game: "bird", level: "king" };  // 左侧中变量的名称必须是右侧对象中存在的key,解构的顺序不需要对应
    
    console.log(game, level);
    

    对象解构需要注意变量中的名称需要和右边对象的键值(key值)对应,但是不要求顺序上对应。

    有时候,不想用对象的key值作为变量名,这个时候可以在左侧给变量取一个别名

    let  {left: L, top: T} = {left: 100, top: 200};
    console.log(L, T);//100 200
    
    // 这段代码就相当于
    let obj = {left: 100, top: 200};
    
    let L = obj.left;
    let T = obj.top;
    

    2.3 多重解构

    一个简单的例子:

    let { scores: [english, math], year} = {scores: [99, 98], 2019}
    
    // 这样的写法相当于:
    let english = 99;
    let math = 98;
    let year= 2019;
    

    3. 扩展运算符

    扩展运算符的含义是将数组或者对象转化为参数序列,可以理解为将数组外面的[]和对象外面的{}去掉,然后将数组或者对象转化为,分隔的参数化序列

    // 解构赋值可以这样来理解
    ['a‘,'b','c'] => 'a','b','c'
    
    {left:100, top:200} => left: 100, top: 200
    

    解构赋值的表示法是...,在一个对象或者数组前面加上...代表对其进行解构

    let arr = [1, 3, 4]
    
    // ...arr表示 1,3 4
    

    构赋值在一些函数的使用和对象、数组的合并方面非常好用,比如说想求得一个数组的最大值:

    let arr = [1, 2, 3, 4, 5];
    
    // 没有解构赋值的化可能需要这么做
    let max = Math.max(arr[0], arr[1], arr[2], arr[3], arr[4]);
    
    // 有了解构赋值,就可以这样做:
    let max = Math.max(...arr)
    

    使用解构赋值方便进行数组的合并

    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];
    let arr3 = [...arr1, ...arr2]; //arr3 = [1, 2, 3, 4, 5, 6]
    

    包括对象的合并:

    let obj1 = {left:100, top: 200};
    let obj2 = {width: 200, height: 200};
    
    let obj3= {
        ...obj1,
        ...obj2
    };
    

    4.模板字符串

    模板字符串是es6新增的一种字符串表示法,区别于之前的或者便是字符串,模板字符串使用反引号`表示

    模板字符串有两个主要的作用,一是保持字符串格式,二是变量表达式解析:

    // 保持字符串的格式:
    var str = `
    
        
    
        ${1+1}
        模板字符串
    
    `; 
    
    console.log(str);
    
    //变量表达式解析
    let score = 100
    
    // 打印分数的话以前可能这么写:
    console.log('your score is ' + score);
    // 现在可以这样写:
    console.log(`your score is ${score}`)
    

    5. 对象拓展

    在es6中,对于对象的拓展主要是对象简介表达式和属性名表达式。对象简介表达式指的是当对象的key与对应的属性所引用的变量或函数同名的时候,可以简写为一个;属性名表达式指的是对象的属性名可以接受表达式作为key,表达式计算的结果作为最终的key

    简介表达式举例:

    var name = 'john';
    var score = function () {
        return 100
    }
    
    // 当对象是下面这种形式的时候
    var obj = {
        name: name,
        score: score
    }
    
    // 就可以简写为
    var obj = {
        name,
        score
    }
    

    属性名表达式举例:

    在es6之前,对象的属性名只能是字符串,在es6中增加了属性名表达式,也就是说通过[]符号中的表达式计算出最终的值来作为属性名,满足了一些情况动态变化属性名的需求。

    // 定义一个变量
    var abc = 'name'
    
    var obj1 = {
        abc: 'something',
        [abc]: 'john'
    }
    
    // obj1对象相当于:
    var obj2 = {
        abc: 'something',
        name: 'john'
    }
    
    属性名表达式

    在使用属性名表达式进行访问的时候,一定得注意obj1["abc"]obj1[abc]是不同的,第一种是正常访问对象的属性,第二种是属性名表达式,需要先计算出真正的属性名然后在访问。

    注意访问上的区别

    相关文章

      网友评论

        本文标题:es6基础知识2

        本文链接:https://www.haomeiwen.com/subject/cxwmxctx.html