ES6新特性

最新推荐文章于 2025-03-31 21:08:31 发布

转载最新推荐文章于 2025-03-31 21:08:31 发布 · 288 阅读

文章标签：

#ES6

ES6 专栏收录该内容

3 篇文章

订阅专栏

函数

面向对象内

data:function(){ } => data(){ }
render:function(h){ return h(App) } => render:h => h(App)

let

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

`let`与`var`区别：

let声明的变量仅仅在自己的块级作用域起作用，出了这个块级作用域就不起作用。

任何一对花括号中的语句都属于一个块，在花括号里面用let定义的所有变量在花括号外都是不可见的，我们称之为块级作用域。

//var
var arr = [ ];
for(var i=0;  i<10;  i++){
    arr [i] = function(){
         alert(i)
    }
}
arr [8]();  //结果：10

//let
var arr = [ ];
for(let i=0;  i<10;  i++){
    arr[i] = function(){
         alert(i)
    }
}
arr[8]();   //结果：8

用let声明变量的时候不会出现“变量提升”

//var
var a = 1;
(function(){
   alert(a);
   var a = 2;
})();   //结果：undefined

//let
var a = 1;
(function(){
   alert(a);
   let a = 2;
})();   // 结果：报错a未定义

解析：用let声明的变量，在其块级作用域内是封闭的，是不会受到外面的全局变量a影响的，并且要先声明再使用，所以a的值即不是1（因为不受外面的影响），也不是undefined（因为先声明后使用），更不是2，未声明定义就使用，只有报错啦。

`let`注意事项：

同一个块级作用域内，不允许重复声明同一个变量。

错误示范一：

{
  var a =1;
  let a =2;  //报错，因为 a 已经用 var 声明过
}

错误示范二：

{
  let a =1;
  let a= 2;  //还是报错，因为 a 已经用 var 声明过
}

函数内不能用let重新声明函数的参数

错误示范：

function say(word){
    let word = 'hello Jack';
    alert(word)
}
say('hello Lili');
//say() 函数内用 let 重新声明了 word 这个参数，会报错的。

const

const是constant（常量）的缩写，用于声明一个常量并必须赋值，声明后不可修改。跟let一样只在块级作用域起作用，不可重复声明同一个变量，不会变量提升，声明引用类型的常量时，要注意是传址赋值。

常量为对象时，传址赋值：

const Person = {"name":"张三"};
Person.name = "李四";
Person.age = 20;
console.log(Person);
//结果：正常输出{name: "李四", age: 20}

const Person = {"name":"张三"};
Person.age = 20;
Person = {}; 
//错误，企图给常量Person赋新值（新地址）

解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

传统的变量赋值：

    var arr = [1,2,3];//把数组的值分别赋给下面的变量；
    var a = arr[0];
    var b = arr[1];
    var c = arr[2];

    console.log(a);//a的值为1
    console.log(b);//b的值为2
    console.log(c);//c的值为3

变量的解构赋值：

    var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量；
    console.log(a);//a的值为1
    console.log(b);//b的值为2
    console.log(c);//c的值为3

数组的解构赋值

数组及 JSON 对象均可以解构赋值

结构赋值可以嵌套的

    var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];
    console.log(c1);//结果：c1的值为3.1
    console.log(c2);//结果：c2的值为3.2

不完全解构

    var [a,b,c] = [1,2];
    console.log(a);//结果：a的值为1
    console.log(b);//结果：b的值为2

赋值不成功，变量的值为undefined

注意：解构不成功，变量的值就等于undefined。相当于只声明了变量 c，但是没赋值。

    var [a,b,c] = [1,2];
    console.log(a);//结果：a的值为1
    console.log(b);//结果：b的值为2
    console.log(c);//结果：c的值为undefined

允许设定默认值

注意：当新的值为undefined的时候，是不会覆盖默认值的。

    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

对象的解构赋值

对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。如果变量找不到与其名字相同的属性，就会赋值不成功，值为undefined。

如果想给一个变量名与属性名不一样的变量解构赋值，可以这样写：

var { b:a,} = {"b":2};
console.log(a);//结果：a的值为2

对象解构赋值也可以嵌套

    var {a:{b}} = {"a":{"b":1}};
    console.log(b);//结果：b的值为1

可以指定默认值

    var {a,b=2} = {"a":1};
    console.log(b);//结果：b的值为默认值2

字符串的解构赋值

在解构赋值的过程中，字符串被转换成了一个类似数组的对象，变量都分别赋上了对应的值。

    var [a,b,c] = "我是萌";
    console.log(a);//我
    console.log(b);//是
    console.log(c);//萌

解构赋值的用途

1. 交换变量的值

    var x = 1;
    var y = 2;
    [x,y] = [y,x];

2. 提取函数返回的多个值

函数只能返回一个值，我们可以将多个值装在一个数组或者对象中，再用解构赋值快速提取其中的值。将demo函数的运行结果直接通过结构赋值赋给变量name和age，实现快速的提取对应的值。

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

3. 定义函数参数

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

4. 函数参数的默认值

    //旧：
    function demo(a){
        var name;
        if(a === undefined){//判断参数书否是否传值
       name= "张三"; //没传，赋默认值
     }else{
            name= a;
        }
        console.log(name);
    }
    
    //新
    function demo({name="张三"}){
        console.log("姓名："+name);//结果：姓名：张三
    }
    demo({});