ECMAScript 2015（ES6）新特性

ECMAScript 是 JavaScript 所基于的脚本语言。Ecma 国际组织负责将ECMAScript标准化。

ES6 新特性：

• let、const、块级作用域
• 解构赋值
• 模板字符串
• 展开操作符
• 箭头函数
• 允许函数的默认值设置参数
• 迭代器
• 生成器
• promise
• symbol 独一无二的值
• set、Map集合
• 对象属性简写
• class 类
• 模块化

把这些变化简单的归为四大类。

1. 第一类：解决原有语法上的一些问题或者不足。例如像 let 或者 const 所提供的块级作用域。
2. 第二类：对原有语法进行增强使之变得更为便捷，易用。例如像解构，展开还有参数默认值，模板字符串等等。
3. 第三类：全新的对象，全新的方法还有全新的功能。例如像 Promise 还有 Proxy，以及像 Object.assign 方法之类的。
4. 第四类：全新的数据类型和数据结构。例如像是 Symbol, Set, Map等等。




let、const、块级作用域

if (true) {
    let foo = 'yd';
}
console.log(foo); // yd

const name = 'yd';




解构赋值

const arr = [100, 200, 300];

const foo = arr[0];
const bar = arr[1];
const baz = arr[2];
console.log(foo, bar, baz);

const obj = { name: 'yd', age: 18 };
const { name: name1 } = obj;
console.log(name1);




模板字符串

const name = 'yd';
const age = 18;

const str = `my name is ${name}, I am ${age} years old`;




...展开扩展操作符

function add(x, y) {
  return x + y;
}
 
const numbers = [1, 2];
add(...numbers) // 3

var [head, ...body] = [1, 2, 3, 4];
console.log(body);  // [2, 3, 4]




箭头函数

const func = (a, b) => a + b;
func(1, 2); // 3




允许函数的默认值设置参数

function foo(age = 25,){ // ...}




声明对象简写

const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)

// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}




定义方法简写

// 传统
const person1 = {
     sayHi:function(){
     	console.log("Hi")
     }
}
person1.sayHi();//"Hi"

// ES6
const person2 = {
     sayHi(){
     	console.log("Hi")
     }
}
person2.sayHi() //"Hi"




类（Class）

class Man {
  constructor (name) {
     this.name = name;
  }
  console() {
    console.log(this.name);
  }
}
const man = new Man('john');
man.console(); // john




模块化（ES Module）

// module A
export const sub = (a, b) => a + b;
// module B
import {sub} from './A';
console.log(sub(1, 2)) // 3




Promise

Promise.resolve().then(() => {console.log(2);});
console.log(1);
// 1, 2

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com