ES6 变量与解构

Posted 2022-07-11 nzcblogs

一、变量的声明与使用 【测试示例需要在node环境中测试,浏览器环境下并不完全兼容ES6代码】
ES6中可以使用 来包含任意一段代码,被 包裹的内容称为一个代码块(局部作用域)

let关键字　【声明变量】
特性：
1.块级作用域    【局部作用于声明的代码块中】
2.变量声明不会提升    【变量未声明前无法使用该变量】
3.暂时性死区    【该变量声明前面的区域】
4.不能重复声明    【同一代码块中不能重复声明同一变量】

const关键字    【声明常量(一般用大写字母表示常量)】
特性：【在遵从let声明变量的特性上再添加如下两条特性】
1、声明时初始化    【声明的同时必须赋值】
2、值不可修改

二、解构
1、数组的解构赋值　【左边是变量,右边是值,左边无匹配值时为undefined】
完全解构【左右数据恰好匹配】
eg：

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

不完全解构【左右数据不同】
a、左边数据多则只声明该变量,其值为undefined
b、右边数据多余项则忽视不考虑
eg：

    let [a, [b], d] = [1, [2, 3], 4];     //a = 1; b = 2; d = 4 

集合解构【扩展运算符的使用...】
a、...tail返回目前右边未匹配的所有值组成的数组
eg：

    let [head, ...tail] = [1, 2, 3, 4]; //head = 1; tail = [2, 3, 4]
    //累加操作
    let sum = 0;
    function test(...arr)
        //rest参数【扩展运算符形式接受的参数,返回的为参数数组】 ------>不在推荐使用arguments参数类数组对象
        //arr = [1,2,3,4,5]
        for(let i=0;i<arr.length;i++)
            sum +=arr[i];
        
    
    
    test(1,2,3,4,5);

默认值【当匹配值严格等于undefined,默认值生效】
eg：

    let [x, y = ‘b‘] = [‘a‘]; 　　// x=‘a‘, y=‘b’

默认值为函数
注：先判断是否匹配到值,若匹配值严格等于undefined,再进行默认值的赋值运算;否则,默认值赋值操作不会执行
eg：

    function test() 
        console.log(‘test‘);
        return 2;
    
    let [x = test()] = [];
    console.log(x);        //test    2

    
2、对象的解构赋值　【右边不存在左边变量对应的属性名时,对象属性值为undefined;即对象中未声明的属性的值为undefined】
对象原始结构赋值【变量重命名后,最终声明的变量是重命名的变量】
eg：

    let name:myName,age:myAge = name:‘nzc‘,age:18
    //上面代码类比于下面代码【左边name匹配右边对象中同名属性获取其属性值并赋值给name重命名的myName变量==》将let myName = ‘nzc‘】
    let myName = ‘nzc‘;
    let myAge = 18;

   
对象的属性没有次序,变量必须与属性同名才能取到正确的值【重命名相同可以简写】
eg：

    let name:name,age:age = name:‘nzc‘,age:18
    //简写如下
    let name,age = name:‘nzc‘,age:18
    //类比于下面代码
    let name = ‘nzc‘;
    let age = 18;

对象嵌套解构
eg：

    let person =  param: [ ‘nzc‘,  age: 18  ] ;
    let  param: [name,  age ]  = person; //name=‘nzc‘ age=18
    //类比于下面   param变量被重命名为 [name,  age ],所以自身并未声明;即不存在param变量
    let  param: [name,  age ]  =  param: [ ‘nzc‘,  age: 18  ] 

   
默认值(默认值生效的条件是，对象的属性值严格等于undefined)
eg：

    //name=‘nzchs‘->name变量默认值;age:myAge=21->myAge默认值【age重命名为myAge再赋予默认值】
    let name=‘nzchs‘,age:myAge=21 = name:‘nzc‘,age:18
    let name=‘nzchs‘,age:myAge=21 = name:‘nzc‘  

    
3、字符串的解构赋值
解构时，字符串被转换成了一个类似数组的对象。
eg：

    let [a, b, c] = ‘hello‘; //a=h;b=e;c=l

length属性解构
eg：

    let length : len = ‘hello‘; //len = 5 【匹配右边字符串转换为的类数组对象的length属性并将其值赋值给重命名的len变量】

 

4、数值和布尔值解构赋值
解构时，如果等号右边是数值和布尔值，则会先转为相应的基本引用数据类型对象
eg：

    let toString: str1 = 123; //函数 str1 === Number.prototype.toString     返回true
    let toString: str2 = true; //函数 str2 === Boolean.prototype.toString        返回true

5、函数参数的解构赋值
基本数组解构赋值传参
eg：

    function add([x, y]) return x + y; 
    add([1, 2]);   //函数add返回值为3 

函数参数带有默认值
eg：

    function test(x = 0, y = 0) 
        return [x, y];
    
    //函数调用
    test(x: 3, y: 8); // 返回值为[3, 8]
    test(x: 3); // 返回值为[3, 0]
    test(); // 返回值为[0, 0]
    test(); //报错 Cannot destructure property `x` of ‘undefined‘ or ‘null‘

   
三、解构常用用途
1、变量值的交换
eg：

    let x = 1;
    let y = 2;
    [x,y] = [y,x];  
    console.log(x,y); //2 1    

2、函数参数的赋值：
eg：

    //[a=0,b=1] = [1]   a=1,b=1
    function test([a=0,b=1])
        return a+b;
    
    test([1]);  //返回值为2

3、提取对象中的数据
eg：

    let obj=  id: 42, status: "OK", data: [867, 5309] ;
    let  id, status, data: number  = obj;  //定义对应的变量 

4、输入模块的指定方法

    const  SourceMapConsumer, SourceNode  = require("source-map");

5、遍历map结构

    var map = new Map();
    map.set(‘name‘, ‘nzc‘);
    map.set(‘age‘, 18);
    for (let [key, value] of map) 
        console.log(key + " is " + value);    // name is nzc   age is 18