es6实用特性小结

Posted 2020-11-30 js0618

  1，const 和 let

    let表示声明局部变量，而const表示声明常量，两者都为块级作用域；

    const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了

 

  2，模板字符串

  在ES6之前，我们往往这么处理模板字符串： 通过“”和“+”来构建模板

 $("body").html("This is a description " + name + ", " + seatNumber +  ", " + sex + "and so on."); 

  而对ES6来说

1. 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定；
2. ES6反引号(``)直接搞定; 

例 : $("body").html( ` This is a description , ${name} , ${seatNumber} , ${sex} and son on. ` )


3,数组的扩展 --- 扩展运算符/include

a,扩展运算符（spread）是三个点（...）。
它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
用法例：后台返回数据全部作为参数传给跳转页面写法：
　　let params={
　　　　...res.body
　　}

          // this.$router.push({

          //   path:‘/pageTest/page‘,

          //   query:{

          //      params

          //   }

          // })   

b,include:方法返回一个布尔值，表示某个数组是否包含给定的值，

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

include和indexOf的区别：
indexOf方法有两个缺点：
一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。
二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

4,函数的扩展 --- 箭头函数
ES6 允许使用“箭头”（=>）定义函数。如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
箭头函数可以让this指向固定化，这种特性很有利于封装回调函数

 var f = () => 5; // 等同于 var f = function () { return 5 };

 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。


 var sum = (num1, num2) => { return num1 + num2; }

  由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

 // 报错

 let getTempItem = id => { id: id, name: "Temp" };

 // 不报错

 let getTempItem = id => ({ id: id, name: "Temp" });