码迷,mamicode.com
首页 > 其他好文 > 详细

es6实用特性小结

时间:2019-11-04 15:14:33      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:使用   扩展   ``   回调函数   sea   clu   特性   router   界定   

  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" });


 

es6实用特性小结

标签:使用   扩展   ``   回调函数   sea   clu   特性   router   界定   

原文地址:https://www.cnblogs.com/js0618/p/11792045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!