zoukankan      html  css  js  c++  java
  • ES6--JavaScript扩展知识点(let、const、解构)

    一,ES2015(ES6)新增了两个声明变量的关键字:let、const

    let:只在代码块内{}有效,不可重复声明,不会提前初始化

      1.只在代码块内有效

    {
        let a = 1;    
        var b = 2;
    }
    console.log(b);
    console.log(a);//输出a会报错 因为let声明只在代码块内有效
        

      2.不可重复声明 

    let a = 1;
    let a = 2;//报错Uncaught SyntaxError: Identifier 'a' has already been declared

      3.不会提前初始化

    console.log(b);//undefined
    var b = 2;
    console.log(a);//报错 Cannot access 'a' before initialization
    let a = 1;

    const:规则与let相似,但声明必须赋值,且基础数据类型不可更改(数值 number、字符串 string 、布尔值 boolean),引用数据类型(对象 object,数组 array,函数 function)只可更改其引用内容

      1.声明必须赋值

    const PI = "3.1415926";
    PI  // 3.1415926
    const MY_AGE;  // SyntaxError: Missing initializer in const declaration    

      2.基础数据类型不可更改,引用数据类型可更改内容

    const a = 1;
    a = 2;//Uncaught TypeError: Assignment to constant variable.
    const arr = [1,2,3];
    arr.push(4);
    console.log(arr);//[1, 2, 3, 4]

    二,解构赋值:用来解决赋值时需要产生大量新的变量的问题,对赋值运算的扩展

    任何解构都有两个部分 
    1 解构源: 等号右边是要解构的对象。 
    2 解构目标:等号左边是要解构的对象。

    数组解构模型(Array):

    1.基本数据

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

      2.数组中嵌套数组

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

      3.忽略某个元素

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

      4.不完全解构:当解构对象属性不存在或无值或为undefined时取属性它的默认值

    let[a=2,b]=[];
    console.log(a,b);//2 undefined

      5.解构可遍历对象(数组,对象,字符串)

    let[a,b,c,d,e] = 'hello';
    console.log(a,b,c,d,e);//h e l l o

      6.剩余运算符:将未被解构的剩余对象解构到一个对象中,只能放在最后

    let [a,b,...c] = [1,2,3,4,5,6];
    // a=1
    // b=2
    // c=[4,5,6]

      

      对象解构模型(Object):

      1.基本

    let {a,b} = {a:1,b:2};
    // a:1
    // b:2

      2.嵌套、忽略

    let obj = {a:1,b:{c:1}};
    let {a,b:{c}} = obj;
    console.log(a,c);//1 1
    let obj = {a:1,b:{c:1}};
    let {a,b:{}} = obj;
    console.log(a);//1 

      3.不完全解构、默认值

    let obj = {p: [{y: 'world'}] };
    let {p: [{ y }, x=1 ] } = obj;
    // x = 1
    // y = 'world'

      4.剩余运算符:只能放在最后

    let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
    // a = 10
    // b = 20
    // rest = {c: 30, d: 40}

      

      

      

      

  • 相关阅读:
    个人永久性免费-Excel催化剂功能第86波-人工智能之图像OCR文本识别全覆盖
    git删除远程仓库的文件或目录
    使用document.execCommand复制内容至剪贴板
    使用clipboard.js实现复制内容至剪贴板
    正则匹配目标字符串不等于某些特定的字符串
    substr与substring的用法
    使用hexo搭建个人博客
    git修改最后一次commit的内容
    gulp压缩文件最简示例
    gulp最简示例
  • 原文地址:https://www.cnblogs.com/blogzzy/p/11443577.html
Copyright © 2011-2022 走看看