ES6新增的特性有哪些及怎么用(es6,web开发)

理解ES6

ECMAScript ，是由网景公司制定的一种脚本语言的标准化规范；最初命名为 Mocha ，后来改名为 LiveScript ，最后重命名为 JavaScript
ECMAScript 2015（ES2015），第 6 版，最早被称作 ECMAScript 6（ES6），添加了新的特性。

ES6 块级作用域 let

首先，什么是作用域？作用域简单讲就是声明一个变量，这个变量的有效范围，在 let 没来之前。js 只有 var 的全局作用域和 函数作用域 ，ES6 为 js 带来了块级作用域。【相关推荐：javascript学习教程】

{
vara="?";
letb="⛳";
}
console.log(a);
console.log(b);

?
UncaughtReferenceError:bisnotdefined

可以看到，我们使用 var 关键字在块中定义了变量 a，其实全局可以访问到，所以说，var声明的变量是全局的，但我们想让变量就在块中生效，出了块就访问不了了，这时就可以使用 ES6 新增的块级作用域关键字 let 来声明这个变量 a，当我再次访问，报错了，说 a is not defined ，a 没有定义

ES6 解构数组

如下所示，首先定义了一个函数，返回一个数组，在未使用解构数组前，调用数组并把返回值赋值给 temp ，然后打印 temp 数组，使用了解构数组后，直接定义一个数组变量，然后将函数返回值指向该变量，他会自动把第一项的值赋值给第一个数组变量，第二项赋值给第二个数组变量，以此类推，最后打印三个变量，看到没有问题

functionbreakfast(){
return['?','?','?'];
}
vartemp=breakfast();
console.log(temp[0],temp[1],temp[2]);
let[a,b,c]=breakfast();
console.log(a,b,c);

???
???

ES6 解构对象

首先 breakfast 函数返回一个对象，使用解构对象，定义对象，键值对中键表示映射的实际对象的键名，值就是自定义变量，解构完成，会自动完成赋值，然后调用 breakfast 函数，返回对象，随后打印变量 a，b，c ，可以看到没问题

functionbreakfast(){
return{a:'?',b:'?',c:'?'}
}
let{a:a,b:b,c:c}=breakfast();
console.log(a,b,c);

???

ES6 模板字符串

在使用模板字符串前，我们拼接字符串变量使用 +

使用 ES6 提供的模板字符串，首先使用 `` 把字符串包起来，当要使用变量时 ，使用 ${变量}

leta='?',
b='?️';
letc='今天吃'+a+'吃完看'+b;
console.log(c);
letd=今天吃${a}吃完看${b};
console.log(d);

今天吃?吃完看?️
今天吃?吃完看?️

ES6 判断字符串里是否包含其他字符串

使用这些函数，可以轻松的完成是不是以什么开头的字符串，是不是以什么结尾的字符串，是不是包含了什么字符串等的操作

letstr='你好，我是小周❤️';
console.log(str.startsWith('你好'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('你好'));
console.log(str.includes(""));

true
true
false
true

ES6 默认参数

ES6里，可以使用默认参数，当调用函数时，没有给参数进行赋值时，就使用设置的默认参数执行，当给参数赋值时，就会使用新赋的值执行，覆盖默认值，使用如下：

functionsay(str){
console.log(str);
}
functionsay1(str='嘿嘿'){
console.log(str);
}
say();
say1();
say1('❤️');

undefined
嘿嘿
❤️

ES6 展开操作符

使用 ... 可以展开元素，方便操作，使用如下：

letarr=['❤️','?','?'];
console.log(arr);
console.log(...arr);
letbrr=['王子',...arr];
console.log(brr);
console.log(...brr);

['❤️','?','?']
❤️??
['王子','❤️','?','?']
王子❤️??

ES6 剩余操作符

... 操作符用在函数参数上，接收一个参数数组，使用如下：

functionf1(a,b,...c){
console.log(a,b,c);
console.log(a,b,...c);
}
f1('?','?','☃️','㊙️');

??['☃️','㊙️']
??☃️㊙️

ES6 函数名字

使用 .name 可以获取函数的名字，具体使用如下：

functionf1(){}
console.log(f1.name);
letf2=function(){};
console.log(f2.name);
letf3=functionf4(){};
console.log(f3.name);

f1
f2
f4

ES6 箭头函数

使用箭头函数可以让代码更简洁，但是也要注意箭头函数的局限性，以及箭头函数中自身没有 this，this指向父级

letf1=a=>a;
letf2=(a,b)=>{
returna+b;
}
console.log(f1(10));
console.log(f2(10,10));

10
20

ES6 对象表达式

使用es6的对象表达式，如果对象属性和值一样，可以省略值，函数写法可以省去function，用法如下：

leta='㊙️';
letb='☃️';
constobj={
a:a,
b:b,
say:function(){
}
}
constes6obj={
a,
b,
say(){
}
}
console.log(obj);
console.log(es6obj);

{a:'㊙️',b:'☃️',say:[Function:say]}
{a:'㊙️',b:'☃️',say:[Function:say]}

ES6 恒量

使用 const 关键字定义衡量，const 限制的是给衡量分配值的动作，并不限制衡量中的值，使用如下：

constapp=['☃️','?'];
console.log(...app);
app.push('?');
console.log(...app);
app=10;

可以看到当再次给衡量分配值就报错了

☃️?
☃️??
app=10;
^
TypeError:Assignmenttoconstantvariable.

ES6 对象属性名

使用点定义对象属性时，如果属性名中含有空格字符，是不合法的，语法通不过的，使用 [属性名] 可以完美解决，并且不仅可以直接写明属性名，还可以使用变量来指定，具体使用如下：

letobj={};
leta='littlename';
obj.name='王子';
//使用点定义属性中间有空格是不合法的
//obj.littlename='小王子';
obj[a]='小王子';
console.log(obj);

{name:'王子','littlename':'小王子'}

ES6 判断两个值是否相等

一些特殊值使用 === 或 == 进行比较的结果，可能不满足你的需求，这是你可以使用Object.is(第一个值，第二个值) 来进行判断，可能你就开心的笑了

console.log(NaN==NaN);
console.log(+0==-0);
console.log(Object.is(NaN,NaN));
console.log(Object.is(+0,-0));

false
true
true
false

ES6 复制对象

使用 Object.assign() 可以把一个对象复制到另一个对象，使用如下：

letobj={};
Object.assign(
//源
obj,
//复制目标对象
{a:'☃️'}
);
console.log(obj);

{a:'☃️'}

ES6 设置对象的 prototype

使用es6可以设置对象的 prototype，使用如下：

letobj1={
get(){
return1;
}
}
letobj2={
a:10,
get(){
return2;
}
}
lettest=Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test)===obj1);
Object.setPrototypeOf(test,obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test)===obj2);

1
true
2
true

ES6 proto

letobj1={
get(){
return1;
}
}
letobj2={
a:10,
get(){
return2;
}
}
lettest={
proto:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test)===obj1);
test.proto=obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test)===obj2);

1
true
2
true

ES6 super

letobj1={
get(){
return1;
}
}
lettest={
proto:obj1,
get(){
returnsuper.get()+'☃️';
}
}
console.log(test.get());

1☃️

ES6 生成迭代器

在学习前，先首写一个迭代器

functiondie(arr){
leti=0;
return{
next(){
letdone=(i>=arr.length);
letvalue=!done?arr[i++]:undefined;
return{
value:value,
done:done
}
}
}
}
letarr=['☃️','?','?'];
letdieArr=die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());

{value:'☃️',done:false}
{value:'?',done:false}
{value:'?',done:false}
{value:undefined,done:true}

OK，看看简化的生成器

function*die(arr){
for(leti=0;i<arr.length;i++){
yieldarr[i];
}
}
lettest=die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next());

{value:'?',done:false}
{value:'☃️',done:false}
{value:undefined,done:true}

ES6 类

使用es6可以快速方便的构建类，好耶

classstu{
constructor(name){
this.name=name;
}
say(){
returnthis.name+'说奥里给';
}
}
letxiaoming=newstu("小明");
console.log(xiaoming.say());

小明说奥里给

ES6 get set

定义get/set方法，用于获取或者修改类的属性

classstu{
constructor(name){
this.name=name;
}
get(){
returnthis.name;
}
set(newStr){
this.name=newStr;
}
}
letxiaoming=newstu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());

小明
大明

ES6 static

使用static关键字修饰的方法，不用实例化对象也可以直接使用

classstu{
staticsay(str){
console.log(str);
}
}
stu.say("奥里给静态方法");

奥里给静态方法

ES6 extends

使用继承，可以减少代码冗余，比如：

classPerson{
constructor(name,bir){
this.name=name;
this.bir=bir;
}
showInfo(){
return'姓名：'+this.name+'生日：'+this.bir;
}
}
classAextendsPerson{
constructor(name,bir){
super(name,bir);
}
}
letzhouql=newA("周棋洛","2002-06-01");
//周棋洛本身是没有showInfo方法的，是继承自Person的
console.log(zhouql.showInfo());

姓名：周棋洛生日：2002-06-01

ES6 Set

Set 集合，与数组不同，Set 集合中不允许有重复元素

//创建Set集合
letfood=newSet('??');
//重复添加，只有一个能进去
food.add('?');
food.add('?');
console.log(food);
//当前集合大小
console.log(food.size);
//判断集合中是否存在某一元素
console.log(food.has('?'));
//删除集合中某一元素
food.delete('?');
console.log(food);
//循环遍历集合
food.forEach(f=>{
console.log(f);
});
//清空集合
food.clear();
console.log(food);

Set(3){'?','?','?'}
3
true
Set(2){'?','?'}
?
?
Set(0){}

ES6 Map

Map结合存储键值对

letfood=newMap();
leta={},b=function(){},c="name";
food.set(a,'?');
food.set(b,'?');
food.set(b,'?');
food.set(c,'米饭');
console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));
food.forEach((v,k)=>{
console.log(${k}+${v});
});
food.clear();
console.log(food);

Map(3){{}=>'?',[Function:b]=>'?','name'=>'米饭'}
3
?
Map(2){{}=>'?',[Function:b]=>'?'}
true
[objectObject]+?
function(){}+?
Map(0){}

ES6 模块化

使用模块化开发，es6可以方便的导入和导出一些内容，还有默认导出等等细节

leta='?';
letf1=function(str='你丫的写参数'){
console.log(str);
}
export{a,f1};

import{a,f1}from'./27模块测试.js';
console.log(a);
f1();
f1('知道了');