ES6学习let const 解构赋值

ES6新增了let关键字

  1. 注意1:同一个块级作用域内,不允许重复声明同一个变量。
{
  var a =1;
  let a =2;  //报错,因为a已经用var声明过
}

{
  let a =1;
  let a= 2; //还是报错,a已经用let声明过。
}
  1. 注意2:函数内不能用let重新声明函数的参数
function say(word){
    let word = 'hello Jack';  //报错:用let重新声明word参数
   alert(word)
}
say('hello Lili');

总结:用let声明变量只在块级作用域起作用,适合在for循环使用,也不会出现变量提升现象。同一个代码块内,不可重复声明的相同变量,不可重复声明函数内的参数。

关键字const 常量赋值

  1. 不可修改
    const Name = '张三';
    Name = '李四';//错误,企图修改常量Name
  1. 只在块级作用域起作用,这点与let关键字一样。
 if(1){
       const Name = '张三';
     }
    alert(Name);//错误,在代码块{ }外,Name失效
  1. 不存在变量提升,必须先声明后使用,这点也跟let关键字一样。
if(1){
        alert(Name);//错误,使用前未声明
        const Name = '张三';
    }
  1. 不可重复声明同一个变量,这点跟let也一样。
 var Name  = '张三';
    const  Name = '李四';//错误,声明一个已经存在的变量Name
  1. 声明后必须要赋值
 const NAME; //错误,只声明不赋值
  1. 赋值一个对象,传址赋值
const Person = {"name":"张三"};
    Person.name = "李四";
    Person.age = 20;
    console.log(Person);
    //结果:正常输出{name: "李四", age: 20}
const Person = {"name":"张三"};
    Person.age = 20;
    Person = {}; 
    //错误,企图给常量Person赋新值(新地址)

总结:const也是用于声明一个常量,并必须赋值,声明后不可修改,跟let一样,只在块级作用域起作用,不可重复声明同一个变量,不会变量提升,声明引用类型的常量时,要注意是传址赋值

ES6新特性:解构赋值

  1. 变量的解构赋值
 var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量;
    console.log(a);//a的值为1
    console.log(b);//b的值为2
    console.log(c);//c的值为3
  1. 结构赋值可以嵌套的
var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];
    console.log(c1);//结果:c1的值为3.1
    console.log(c2);//结果:c2的值为3.2
  1. 不完全解构
 var [a,b,c] = [1,2];
    console.log(a);//结果:a的值为1
    console.log(b);//结果:b的值为2
  1. 赋值不成功,变量的值为undefined
 var [a,b,c] = [1,2];
    console.log(a);//结果:a的值为1
    console.log(b);//结果:b的值为2
    console.log(c);//结果:c的值为undefined
  1. 允许设定默认值
var [a,b,c=3] = [1,2];
    console.log(a);//结果:a的值为1
    console.log(b);//结果:b的值为2
    console.log(c);//结果:c的值为3
var [a,b,c=3] =[1,2,4];
    console.log(a);//结果:a的值为1
    console.log(b);//结果:b的值为2
    console.log(c);//结果:c的值为4
  1. 对象的解构赋值
var { a,b,c} = {"a":1,"b":2,"c":3};
    console.log(a);//结果:a的值为1    
    console.log(b);//结果:b的值为2
    console.log(c);//结果:c的值为3
  1. 字符串的解构赋值
var [a,b,c,d,e] = "我就是前端";
    console.log(a);//我
    console.log(b);//就
    console.log(c);//是
    console.log(d);//前
    console.log(e);//端
  1. 解构赋值的用途
    一、交换变量的值
var x = 1;
    var y = 2;
    [x,y] = [y,x];

二、提取函数返回的多个值

 function demo(){
        return {"name":"张三","age":21}
    }
    var {name,age} = demo();
    console.log(name);//结果:张三
    console.log(age);//结果:21

三、定义函数参数

function demo({a,b,c}){
        console.log("姓名:"+ a);
        console.log("身高:"+ b);
        console.log("体重:"+ c);
    }
    demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});

四、函数参数的默认值

function demo({name="张三"}){
        console.log("姓名:"+name);//结果:姓名:张三
    }
    demo({});

总结:解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等等,都给我们编程带来便利,在未来的代码中会见到越来越多人使用这个新特性。

你可能感兴趣的:(ES6学习let const 解构赋值)