ECMAScript 2015(ES6)新特性
ECMAScript 是 JavaScript 所基于的脚本语言。Ecma 国际组织负责将ECMAScript标准化。
ES6 新特性:
- let、const、块级作用域
- 解构赋值
- 模板字符串
- 展开操作符
- 箭头函数
- 允许函数的默认值设置参数
- 迭代器
- 生成器
- promise
- symbol 独一无二的值
- set、Map集合
- 对象属性简写
- class 类
- 模块化
把这些变化简单的归为四大类。
- 第一类:解决原有语法上的一些问题或者不足。例如像 let 或者 const 所提供的块级作用域。
- 第二类:对原有语法进行增强使之变得更为便捷,易用。例如像解构,展开还有参数默认值,模板字符串等等。
- 第三类:全新的对象,全新的方法还有全新的功能。例如像 Promise 还有 Proxy,以及像 Object.assign 方法之类的。
- 第四类:全新的数据类型和数据结构。例如像是 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