ES6特性总结

时间:2019-10-30
本文章向大家介绍ES6特性总结,主要包括ES6特性总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.const、let关键字

let用来声明一个局部变量,用法类似于var,但是它所声明的变量,只在let声明所在的块级作用域内有效。

1 {
2     let a = 1;
3     var b = 2;
4 }
5 console.log(b);      //2
6 console.log(a);      //ReferenceError: a is not defined

const用来声明一个只读的常量,作用域与let相同(声明所在的块级作用域),一旦定义之后不可以修改,不过如果声明的变量如果是引用类型的,可以修改它的属性。

1 const PI = 3.14;
2 PI = 3.1415926;                  //TypeError: invalid assignment to const `PI'
3 
4 const PERSON = {name: 'Tom'};
5 PERSON.name = 'Jack';
6 console.log(PERSON.name);        //'Jack'

2.函数

  • 箭头函数
1 let sum = (num1,num2) => {return num1 + num2};
2 //
3 let sum = (num1,num2) => num1+num2;
  • this在箭头函数中的使用

箭头函数体内的this对象,是定义时所在的对象,不是使用时所在的对象。

 1 var user = "Mike";
 2 let person = {
 3     user: "Tom",
 4     sayHello:function(){
 5         setTimeout(function(){
 6             console.log("hello",this.user);   //this指向运行时所在的作用域
 7         },1000);
 8         setTimeout(()=>{
 9             console.log("hello",this.user)    //this指向定义时的对象
10         },2000)
11     }
12 };
13 person.sayHello();        
14 //先后输出“hello,Mike”和“hello,Tom”
  • 函数参数的默认值
1 function log(x,y = 'world'){
2     console.log(x,y);
3 }
4 log('hello');   //hello,world
  • rest参数

  rest参数(形式为...变量名)用于获取函数的多余参数,rest参数是一个数组对象,可以用于替代arguments对象。

1 //普通排序写法,使用arguments
2 function sortNumbers(){
3     return Array.prototype.slice.call(arguments).sort();
4 }
5 //使用rest参数
6 const sortNumbers = (...numbers) => numbers.sort();

3.展开操作符

  • 用于函数调用
1 function sum(x,y,z){
2     return x+y+z;
3 }
4 let args = [1,2,3];
5 //ES6之前的用法
6 sum.apply(null,args);  
7 //使用展开操作符:
8 sum(...args);
  • 用于数组字面量
1 let arr1 = [1,2,3];
2 let arr2 = [4,5,6];
3 //es6之前的用法
4 let arr3 = arr1.concat(arr2);        //[1,2,3,4,5,6]
5 //展开操作符用法
6 let arr3 = [...arr1,...arr2];
  • 对象的展开运算符
1 let student = {name:'Tom',age:14};
2 student = {...student,sex:'male'};

4.模板字符串

1 let name = 'Mike';
2 let str = `My name is ${name}`;
3 console.log(str);          //‘My name is Mike’

5.解构语法

  • 解构数组
1 let arr = ['blue','green','red'];
2 let [a,b,c] = arr;        //按照数组序号,一一对应 a='blue',b='green',c='red'
  • 解构对象
1 let person = {name:'Jack',age: 20};
2 let {name,age} = person;  //与属性名一一对应 name='Jack',age=20

6.类

 1 class Animal {
 2     constructor(name,age){
 3         this.name = name;
 4         this.age = age;
 5     }
 6     shout(){
 7         return `My name is ${this.name}, age is ${this.age}`;
 8     }
 9     //静态方法
10     static foo(){
11         console.log('Here is a static method');
12     }
13 }
14 const cow = new Animal('betty', 2);
15 cow.shout();        //My name is betty, age is 2
16 Animal.foo();     //Here is a static method
17 
18 //派生类
19 class Dog extends Animal{
20     constructor(name, age=3,color='black'){
21         //继承父类属性
22         super(name,age);
23         this.color = color;
24     }
25     //重写shout方法
26     shout(){
27         //使用super调用父类方法
28         return super.shout() + `,color is ${this.color}`;
29     }
30 }
31 const dog = new Dog('Bagong');
32 dog.shout(); //My name is Bagong, age is 3, color is black

7.模块

  • 一个模块的导入/导出
 1 //func1.js文件
 2 //定义一个func1函数
 3 function func1(){
 4     console.log("this is func1");
 5 }
 6 
 7 //使用export导出这个模块
 8 export func1;
 9 
10 //func2.js文件
11 //使用import导入这个模块
12 import {func1} from './func1';       //假设两个文件在同级目录下
13 func1();          //"this is func1"
  •  一个模块的多个导出
 1 //func1.js文件
 2 export const PI = 3.14;
 3 export function func1(){
 4     console.log("this is func1");
 5 }
 6 export let person = {name: "Nike"};
 7 
 8 //func2.js文件
 9 //使用import导入模块
10 //导入方式1,使用对象解构加载
11 import {PI,func1,person} from './func1';
12 console.log(PI);             //3.14
13 
14 //导入方式2,作为一个整体导入
15 import * as util from './func1';
16 console.log(util.PI);          //3.14
  • 模块的默认导出
 1 //func1.js文件
 2 //定义一个func1函数
 3 export default function(){
 4     console.log("this is func1");
 5 }
 6 
 7 //func2.js文件
 8 //使用import导入这个模块
 9 import func1 from './func1';       //假设两个文件在同级目录下
10 func1();          //"this is func1"
 

原文地址:https://www.cnblogs.com/snaillu/p/11765256.html