ES6全新的声明及数据赋值方式

新的变量声明关键字let与const

let ⽤法:声明⼀个变量

特点:

只在声明的代码块内有效 {} 

let
{
    for(var i=1;i<=10;i++){}
    console.log(i);//var 定义是全局作用域
    for(let j=1;j<=10;j++){}
    console.log(j);//j is not defined  let声明是块级作用域
}

在同⼀作⽤域内不允许重复声明

if(true){
        // let c = 10;//Identifier 'c' has already been declared
        let c =20;
        var d = 10;
        var d = 20;
        console.log(d);
    }

没有变量提升

暂时性死区(在声明变量之前无法操作或读取这个变量)

  !(function(){
        console.log(b);//undefined
        var b = 10
        /* 
            JS域解析,变量声明被提升了
            var b 
            console.log(b)
            b=10        
        
        */
    })()

    !(function(){
        console.log(b);//Cannot access 'b' before initialization初始化之前无法访问‘b’
        let b=10
    })()

const用法:声明并初始化一个只读的变量(可理解为常量)

特点:同let命令

注意事项:

变量声明的同时必须立即赋值

如声明的是简单类型的数据,变量的值不可改变

实质:保证变量指向的内存地址所保存的数据不允许改动。

// const 只能保证指针固定
/* 
    只是保证内存地址是不变的(对于简单数据类型,字符串、数字、布尔型等数据就保存在
    相应内存地址上,而复杂类型,如对象、数组等,实际上只是保存了指向其的指针    )

*/
{
    // const a =1;//"a" is read-only
    // a=2
    var obj = {
        name:'xiaoming'
    }
    const constobj = obj;
    console.log(constobj.name);//xiaoming
    obj.name='Jim'
    console.log(constobj.name);//Jim
}

Symbol

对象的属性名容易产生命名冲突,为保证键名的唯一性,故es6引入Symbol这种新的原始数据类型确保创建的每个变量都是独一无二的

特点

Symbol类型的数据是类似字符串的数据类型,由于Symbol函数返回的值是原始类型的数据,不是对象,故Symbol函数前不能使用new命令,否则会报错。

let a1 = 'xxx'
let a2 = 'xxx'
console.log(a1===a2);//true
let a1 = Symbol('xxx')
let a2 = Symbol('xxx')
console.log(a1===a2);//false
console.log(a1);//Symbol(xxx)

// Symbol.for()这个API会在全局查找指定的变量,如果不存在就会创建一个并且把Symbol赋值到这个变量里,
// 如果存在就把找到Symbol值赋值到变量里
let a1 = Symbol.for('xxx')
let a2 = Symbol.for('xxx')
console.log(a1===a2);//true

应用场景:Symbol作为对象key
let obj = {
    a1:'123',
    b1:'456',
    a1:'789'
}

console.log(obj);//{a1: "789", b1: "456"}

let a1=Symbol('a1')
let obj = {
    [a1]:'123',
    b1:'456',
    a1:'789'
}
console.log(obj);//{b1: "456", a1: "789", Symbol(a1): "123"}

解构赋值

数组解构

/* 解构赋值可以理解为赋值操作的语法糖,
它是针对数组或者对象进行模式匹配,然后对其中的变量进行赋值 */

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

    let a,b,c 
    [a,b,c=6] = [1,2]
    console.log(a,b,c);//1 2 6
}
//  ... 为es6中的扩展运算符(展开)
{
    let a,other
    [a,...other] = [1,2,3,4,5,6]
    console.log(a);//1
console.log(other);//[2, 3, 4, 5, 6]

    //  [a,...[2, 3, 4, 5, 6]] => [1,2,3,4,5,6]
}

{//取第一和第三个值(占位)
    let a,b
    [a,,b] = [1,2,3]
    console.log(a,b);//1 3
}

对象解构

{
    let a,b 
    ({a,b}={a:3,b:4})  //()区分块级作用域和对象
    /*  ({a:a,b:b}={a:3,b:4}) */
    console.log(a,b);//3 4

    let num,total
    ({a:num,b:total}={a:3,b:4})
    console.log(num,total);//3 4
}
// 应用场景:后端返回数据与前端变量名不同
{
    function fn(){
        return {
            name:'xiaoming',
            nameList:{
                name:'JIM'
            }
        }
}

    let b = fn();
    let {name:person,nameList:{name:otherperson}}=b
    console.log(name,otherperson);//xiaoming JIM
}

猜你喜欢

转载自blog.csdn.net/qq_51402804/article/details/123706239