新标准ES6中几个JS简化表达式语法功能解读

冷月秋风尚

于 2024-09-17 07:36:26 发布

阅读量327

点赞数 12

文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/m0_74157361/article/details/142310436

版权

JS是一门弱语言，不能对比其他强语言，进化出一些简洁、高效、实用的表达式语法。随着Web迅猛发展和高效进化需求，逐步引入了一此简短高效的语法结构，使得经松就可实现以前需要大量代码才能完成的功能。

一、箭头函数

箭头函数的引用，大大减少了函数编写代码量，特别是当函数作为回调函数、参数引入箭头函数后，让代码立即变得清晰简洁、一目了然。

let numbers=[34,16,87,29,39,63,98];//定义一个数组，要求对其进行排序

console.log(numbers.sort((a,b)=>a-b));//输出结果：16,29,34,39,63,87,98

//相当于原表达式,代码量从5行减少为1行

console.log(

numbers.sort(function(a,b){

return a-b;

});

);

二、对象字面量简写

1.属性初始值简写

//ES5及早期版本中，对象字面量必须形成键值对组合，如果键名与值名相同，也必须写两个，如下函数：

function createPerson(name,age){

return{

name:name,

age:age

}

在ES6中，通过使用属性初始化的简写法，可以消除这种键值名重复书写，如下

function createPerson(name,age){

return{

name,

age

}

当对象字面量里只有一个属性名时，JS引擎会在可访问作用域中查找并赋予其同名变量名，对于较多属性时，大大减少了工作量。

2.对象方法简写

简化前对象方法如下：

var person={

name:"张小玉",

sayName:function(){

console.log(thi.name);

}

};

简化后如下：

var person={

name:"张小玉",

sayName(){

console.log(thi.name);

}

};

三、可计算属性名

早期属性名字符串无法在运行中进行计算改变，要实际类似功能，需要增加中间对象进行过渡，无形中增加了代码工作量。在ES6中，引入可计算属性名功能，让代码变得易于理解和简洁。其实质，是增加了将变量嵌入字符串中进行识别及运算的能力。

var suffix="Name";

var person={

["first"+suffix]:"张小玉",

["last"+suffix]:"张小小"

};

console.log(person["firstName"]);//输出结果：张小玉

console.log(person["lastName"]);//输出结果：张小小

如上代码，由于属性名可进行计算，使不同的属性名可以进行各类自由组合运算，大大增加了程序的灵活性和实现更为复杂功能的可能。

四、简化原型访问的Super引用

在ES5及早期版本中，要实现在原型方法的引用，代码量较多，如下实例：

let person={//原型

getGreeting(){

return "Hello";

}

};

let friend={//准备以person为原型

getGreeting(){

return super.getGreeting()+",Hi!";//ES6版本实现

//ES5及以前实现语句如下：

//return Object.getPrototypeOf(this).getGreeting.call(this)+",Hi!";

}

Object.setPrototypeOf(friend,person);//将person设置为friend原型

console.log(friend.getGreeting());//输出结果：Hello,hi!

五、默认参数简化

ES5及早期版本，实现默认参数的函数：

function markeRe(url,timeout,callback){

timeout=timeout || 2000;

callback=callback || function(){};

//函数的其余部分

}

而ES6中，默认参数可写成如下函数，大大的简化了代码工作量：

function markeRe(url,timeout=2000,callback=function(){}){//一般性函数定义

//函数的其余部分

}

var add=new Function("first","second","return first+second");//构造函数定义

console.log(add(1,1));//输出结果：2

console.log(add("Hello","你好！"));//输出结果：Hello你好！

六、不定参数运算符

在ES5及早期版本中，要实现不定参数的函数效果，需要利用arguments对象进行遍历，代码量大又容易出错。而在ES6中引入了不定参数运算符(…)，它可以让你指定的多个各自独立的参数通过整合后的数组来进行访问，大大简化了不定参数函数的使用。如下例，在ES5中要实现如下一句代码输出效果console.log (markeRe(first,...keys));，得遍历arguments对象，即不容易理解和代码实现，工作量更是成倍增加。

function markeRe(first,...keys){

let result=first;

for(let i=0,len=keys.length;i<len;i++){

result+=keys[i];

}

return result;

}

var first=10;

console.log(markeRe(first,1,2)); //输出结果:13

console.log(markeRe(first,1,2,3)); //输出结果:16

console.log(markeRe(first,1,2,3,4)); //输出结果:20

console.log(markeRe(first,1,2,3,4,5)); //输出结果:25

//其他更多参数，如first,1,2,3,4,5,6...

var keys=[1,2,3,4,5]

console.log (markeRe(first,...keys)); //输出结果:25

//其他更多参数，如var keys=[1,2,3,4,5,6…]

七、展开运算符

展开运算符其实是不定参数运算符的延展，是将你指定的一个数组，将它们打散后作为各自独立的参数传入函数，从而使复杂的算法简单化。

用法一：找到数组中最大值

let values=[25,50,75,100];//对数组类，无法直接代入Math.max()方法中去，因为max方法只接收确定的分散的元素，在ES5中只能通过特殊解决方案，如下句代码

console.log(Math.max.apply(Math,values));//这是ES5中经典求数组最大值解决方案，这个方法虽然可行，但是很难让人看懂代码的真正意图

console.log(Math.max(...values));//这是ES6中利用展开运算符求数组最大值方案，即让人能看懂，又使代码更加简洁，展开运算符的作用是将数组中的各个元素拆散，分别代入Math.max()中进行比较，相当于console.log(Math.max(25,50,75,100))

用法二：对数组轻松去重

如将产生一批具有大量重复值的数组，需要去重复后使用。如果通过遍历算法去重，将是产生非常巨大的去重代码。而利用Set集合的展开运算符特性，可以轻松实现去重，得到没有重复的干净数组。其实现过程如下：

let numbers=[1,2,3,3,3,4,5];//有重复值的数组

let set=new Set(numbers);//将数组转换为Set集合，利用Set集合自身去重功能

let arr=[...set];//利用展开运算符，将Set集合赋值给新数组

console.log(arr);//输出结果：[1,2,3,4,5]

八、模板字面量简化

1.简化定义多行字符串

ES5中定义多行字符串方案：

var message1=[//方法1

"第一行",

"第二行"