ES6核心特性(二)

作者 : 开心源码 本文共7359个字,预计阅读时间需要19分钟 发布时间: 2022-05-11 共44人阅读

ES6核心特性

一、箭头函数

ES6 允许用“箭头”(=>)定义函数。它主要有两个作使用:缩减代码和改变this指向,接下来我们详细详情:

1. 缩减代码

const double1 = function(number){   return number * 2;   //ES5写法}const double2 = (number) => { return number * 2;    //ES6写法}const double4 = number => number * 2; //能进一步简化

多个参数记得加括号

 const double6 = (number,number2) => number + number2;

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

 const double = (number,number2) => {   sum = number + number2    return sum; }

因为大括号被解释为代码块,所以假如箭头函数直接返回一个对象,必需在对象外面加上括号,否则会报错

// 报错let getTempItem = id => { id: id, name: "Temp" };// 不报let getTempItem = id => ({ id: id, name: "Temp" });

此外还有个好处就是简化回调函数

// 正常函数写法[1,2,3].map(function (x) {  return x * x;});// 箭头函数写法[1,2,3].map(x => x * x);//1 4 9

2. 改变this指向

长期以来,JavaScript 语言的this对象一直是一个令人头痛的问题,在对象方法中用this,必需非常小心。箭头函数”绑定”this,很大程度上处理了这个困扰。我们不妨先看一个例子:

const team = {  members:["Henry","Elyse"],  teamName:"es6",  teamSummary:function(){    return this.members.map(function(member){      return `${member}隶属于${this.teamName}小组`;    // this不知道该指向谁了    })  }}console.log(team.teamSummary());//["Henry隶属于undefined小组", "Elyse隶属于undefined小组"]

teamSummary函数里面又嵌了个函数,这导致内部的this的指向发生了错乱。
那如何修改:

方法一、let self = this

const team = {  members:["Henry","Elyse"],  teamName:"es6",  teamSummary:function(){    let self = this;    return this.members.map(function(member){      return `${member}隶属于${self.teamName}小组`;    })  }}console.log(team.teamSummary());//["Henry隶属于es6小组", "Elyse隶属于es6小组"]

方法二、bind函数

const team = {  members:["Henry","Elyse"],  teamName:"es6",  teamSummary:function(){    return this.members.map(function(member){      // this不知道该指向谁了      return `${member}隶属于${this.teamName}小组`;    }.bind(this))  }}console.log(team.teamSummary());//["Henry隶属于es6小组", "Elyse隶属于es6小组"]

方法三、 箭头函数

const team = {  members:["Henry","Elyse"],  teamName:"es6",  teamSummary:function(){    return this.members.map((member) => {      // this指向的就是team对象      return `${member}隶属于${this.teamName}小组`;    })  }}console.log(team.teamSummary());//["Henry隶属于es6小组", "Elyse隶属于es6小组"]

3.用注意点

(1)函数体内的this对象,就是定义时所在的对象,而不是用时所在的对象。

(2)不能当作构造函数,也就是说,不能用new命令,否则会抛出一个错误。

(3)不能用arguments对象,该对象在函数体内不存在。假如要使用,能使用 rest 参数代替。

(4)不能用yield命令,因而箭头函数不可以使用作 Generator 函数。

二、rest 参数

ES6 引入 rest 参数(形式为…变量名),使用于获取函数的多余参数,这样就不需要用arguments对象了。

rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
我们举个例子:如何实现一个求和函数?

传统写法:

function addNumbers(a,b,c,d,e){  var numbers = [a,b,c,d,e];  return numbers.reduce((sum,number) => {    return sum + number;  },0) } console.log(addNumbers(1,2,3,4,5));//15

ES6写法:

 function addNumbers(...numbers){  return numbers.reduce((sum,number) => {    return sum + number;  },0) } console.log(addNumbers(1,2,3,4,5));//15

也能与解构赋值组合用

var array = [1,2,3,4,5,6];var [a,b,...c] = array;console.log(a);//1console.log(b);//2console.log(c);//[3, 4, 5, 6]

rest 参数还能与箭头函数结合

const numbers = (...nums) => nums;numbers(1, 2, 3, 4, 5)// [1,2,3,4,5]  

注意:①每个函数最多只可以公告一个rest参数,而且 rest参数必需是最后一个参数,否则报错。

②rest参数不可以使用于对象字面量setter之中

let object = {    set name(...value){   //报错        //执行少量逻辑    }}

三、开展运算符

与剩余参数关联最密切的就是扩展运算符。剩余参数允许你把多个独立的参数合并到一个数组中;而扩展运算符则允许将一个数组分割,并将各个项作为分离的参数传给函数。

当使用在字符串或者数组前面时称为扩展运算符,个人觉得能了解为rest参数的逆运算,使用于将数组或者字符串进行拆解。有些时候,函数不允许传入数组,此时用开展运算符就很方便,不信的话,咱们看个例子:Math.max()方法,它接受任意数量的参数,并会返回其中的最大值。

let value1 = 25,                let value2 = 50;console.log(Math.max(value1, value2));  //  50

但若想解决数组中的值,此时该如何找到最大值?Math.max()方法并不允许你传入一个数组。其实你能像用rest参数那样在该数组前增加…,并直接将其传递给 Math.max()

let values = [25,50,75, 100]//等价于console.log(Math.max(25,50,75,100));console.log(Math.max(...values));   //100

扩展运算符还能与其余参数混使用

let values = [-25,-50,-75,-100]console.log(Math.max(...values,0)); //0

扩展运算符拆解字符串与数组

var array = [1,2,3,4,5];console.log(...array);//1 2 3 4 5var str = "String";console.log(...str);//S t r i n g

还能实现拼接

var defaultColors = ["red","greed"];var favoriteColors = ["orange","yellow"];var fallColors = ["fire red","fall orange"];console.log(["blue","green",...fallColors,...defaultColors,...favoriteColors]//["blue", "green", "fire red", "fall orange", "red", "greed", "orange", "yellow"]

四、解构赋值—-更方便的数据访问

ES6 新添加理解构,这是将一个数据结构分解为更小的部分的过程。

1.解构为何有使用?

在ES5及更早版本中,从对象或者数组中获取信息、并将特定数据存入本地变量,需要书写许多并且类似的代码。例如:

 var expense = {   type: "es6",   amount:"45" }; var type = expense.type; var amount = expense.amount; console.log(type,amount);

此代码提取了expense对象的type与amount值,并将其存在同名的本地变量上。尽管 这段代码看起来简单,但想象一下若有大量变量需要解决,你就必需一一为其赋值;并且若有一个嵌套的数据结构需要遍历以寻觅信息,你可可以会为了一点数据而挖掘整个结构。

这就是ES6为何要给对象与数组增加解构。当把数据结构分解为更小的部分时,从中提取你要的数据会变得容易许多。

2.对象

上个例子中假如采使用对象解构的方法,就很容易获取expense对象的type与amount值。

const { type,amount } = expense;console.log(type,amount);

我们再来看个例子:

let node = {type:"Identifier",  name:"foo"},    type = "Literal",name = 5;({type,name}= node);//  用解构来分配不同的值 console.log(type); //   "Identifier" console.log(name); //   "foo"

注意:你必需使用圆括号包裹解构赋值语句,这是由于暴露的花括号会被解析为代码块语句,而块语句不允许在赋值操作符(即等号)左侧出现。圆括号标示了里面的花括号并不是块语句、而应该被解释为表达式,从而允许完成赋值操作。

默认值:
能选择性地定义一个默认值,以便在指定属性不存在时用该值。若要这么做,需要在 属性名后面增加一个等号并指定默认值,就像这样:

let node = {  type: "Identifier",  name: "foo"};let {  type,  name,  value = true} = node;console.log(type); //   "Identifier" console.log(name); //   "foo" console.log(value); //  true

嵌套对象解构:
用相似于对象字面量的语法,能深入到嵌套的对象结构中去提取你想要的数据。

let node = {  type: "Identifier",  name: "foo",  loc: {    start: {      line: 1,      column: 1    },    end: {      line: 1,      column: 4    }  }};let { loc: { start }} = node;console.log(start.line); // 1 console.log(start.column); //   1

本例中的解构模式用了花括号,表示应当下行到node对象的loc属性内部去寻觅start属性。

必需传值的解构参数

function setCookie(name, value, {  secure,  path,  domain,  expires}) {  //    设置cookie的代码 }  setCookie("type", "js");//报错

在此函数内,name与value参数是必须的,而secure、path、domain与expires则不是。默认情况下调使用函数时未给参数解构传值会抛出错误。像上例中假如setCookie不传第三个参数,就会报错。若解构参数是可选的,能给解构的参数提供默认值来解决这种错误。

function setCookie(name, value, {  secure,  path,  domain,  expires} = {}) {}setCookie("type", "js");//不会报错

3.数组

const names = ["Henry","Bucky","Emily"];const [name1,name2,name3] = names;console.log(name1,name2,name3);//Henry Bucky Emilyconst [name,...rest] = names;//结合开展运算符console.log(rest);//["Bucky", "Emily"]

使用{}解构返回数组个数

const {length} = names;console.log(length);//3

数组解构也能使用于赋值上下文,但不需要使用小括号包裹表达式。这点跟对象解构的商定不同。

let colors = ["red", "green", "blue"],  firstColor = "black",  secondColor = "purple";[firstColor, secondColor] = colors;console.log(firstColor); // "red" console.log(secondColor);   // "green"

默认值:数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或者其值为undefined,那么该默认值就会被用。

let colors = ["red"];let [firstColor, secondColor = "green"] = colors;console.log(firstColor); // "red" console.log(secondColor);// "green"

与rest参数搭配

在ES5中常常用concat()方法来克隆数组,例如:

//在ES5中克隆数组 var colors = ["red", "green", "blue"];var clonedColors = colors.concat();console.log(clonedColors); //"[red,green,blue]"

在ES6中,你能用剩余项的语法来达到同样效果

//在ES6中克隆数组 let colors = ["red", "green", "blue"];let [...clonedColors] = colors;console.log(clonedColors); //[red,green,blue]

接下我们看个例子:如何将数组转化为对象

const points = [  [4,5],  [10,1],  [0,40]];//期望得到的数据格式如下,如何实现?// [//   {x:4,y:5},//   {x:10,y:1},//   {x:0,y:40}// ]let newPoints = points.map(pair => {  const [x,y] = pair;  return {x,y}})//还能通过以下办法,更为简便let newPoints = points.map(([x,y]) => {  return {x,y}})console.log(newPoints);

混合解构

const people = [  {name:"Henry",age:20},  {name:"Bucky",age:25},  {name:"Emily",age:30}];//es5 写法 var age = people[0].age;console.log(age);//es6 解构const [age] = people;console.log(age);//第一次解构数组 {name:"Henry",age:20}const [{age}] = people;//再一次解构对象console.log(age);//20

4.注意点

当用解构来配合var、let、const来公告变量时,必需提供初始化程序(即等号右边的值)。下面的代码都会由于缺失初始化程序而抛出语法错误:

var { type, name };//   语法错误! let { type, name };//   语法错误!const { type, name };// 语法错误!

五、模板字符串(template string)

模板字符串是加强版的字符串,使用反引号(`)标识。它能当作普通字符串用,也能使用来定义多行字符串,或者者在字符串中嵌入变量。
模板字符串中嵌入变量和函数,需要将变量名写在${}之中。

let name = "Henry";function makeUppercase(word){  return word.toUpperCase();}let template =   `  <h1>${makeUppercase('Hello')}, ${name}!</h1>//能存放函数和变量  <p>感谢大家收看我们的视频, ES6为我们提供了很多遍历好使用的方法和语法!</p>  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>  </ul>  `;document.getElementById('template').innerHTML = template;

image

再举个例子,工作中常使用到ElementUI库,在自己设置一个弹出框时,用模板字符串就很方便:

   await this.$alert(          `<p><strong>确认能否更新${            this.lectureName          }</strong><br>(若已存在讲义套件,更新后请重新生成)</p>`,          {            dangerouslyUseHTMLString: true          }        )

参考文章

ECMAScript 6 入门

深入了解ES6

ES6的rest参数和扩展运算符

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » ES6核心特性(二)

发表回复