主要总结一些 ES6 常用的语法及知识点，其次就是总结一下在 ES6 使用过程需要注意的重点
常用语法
常量
// es5常量
var person = {'name': 'shi'
}
Object.defineProperty(person, 'sex', {writable: false,value: 'man'
})// es6常量
const sex = 'man';
复制代码多行字符串和模板变量
方便了很多，不需要在拼接字符串的时候换行使用加号拼接
let name = 'shi';
let age = 20;
let html = `<div><p>${name}</p><p>${age}</p>
</div>`;
复制代码结构赋值
在 es5 中获取对象或者数组的某个值是下面这样的操作
// 获取对象其中的值
var obj = {a: 2,b: 4
};var a = obj.a;
var b = obj.b;
console.log(a);
console.log(b);// 获取数组中的值
var arr = [1, 2, 3];
var arr1 = arr[0];
复制代码在 es6 中相对来说就很方便了，请看下面的例子
// 获取对象中的值
const obj = {a: 2,b: 4,c: 5
};const { a, c } = obj;
console.log(a);
console.log(c);// 获取数组中的值
const arr = [1, 3, 4];
const [a, b, c] = arr;
复制代码箭头函数
不改变this的指向，this指向定义时候的实例
() => {}
复制代码块级作用域
// let
const arr = [];
for (let index = 0; index < 3; index++) {arr[index] = function () {return index * 2;}
}
console.table([arr[0](), //0arr[1](), //2arr[2]() //4
]);// var
const arr1 = [];
for (var i = 0; i < 3; i++) {arr1[i] = function () {return i * 2;}
}console.table([arr1[0](), //6arr1[1](), //6arr1[2]() //6
]);
复制代码默认参数
默认参数
function f (x, y = 7, z = 21) {return x+y+z
}
复制代码必填参数检查
es6还可以对必填参数进行检查
function checkParams() {throw new Error('params can\'t be empty')
}function f(x=checkParams(), y = 2, z = 3) {return x + y + z;
}try {f();
} catch (error) {console.log(error)
}
复制代码可变参数操作
用一个求和的例子去说明es6对于可变参数的操作
// ES5对数据可变参数进行求和
function sum() {// arguments是伪数组，需要通过array的原型方法对其进行操作var arr = Array.prototype.slice.call(arguments);var sum = 0;arr.forEach(function (item) {sum += item * 1;});return sum;
}
console.log(sum(1, 2, 3, 6));// ES6对于可变参数进行求和
// ...扩展运算符
function sum1(...arr) {let sum = 0;arr.forEach(item => {sum += item * 1;});return sum;
}
console.log(sum1(1, 2, 3, 6));
复制代码扩展运算符
有很多用途，这里只是简单的介绍一下
- 数组合并
// es5写法
var params = [1, true, 'test'];
var arr = [2, '合并'].concat(params);
console.log(arr);// es6的写法
var params = [1, true, 'test'];
var arr = [2, '合并', ...params];
console.log(arr);
复制代码继承
在 es5 中继承都是绑定原型，实现继承
例子：
function Animal() {this.eat = function() {console.log('Animal eat');};
}function Dog() {this.bark = function() {console.log('Dog bark');};
}// 绑定原型，实现继承
Dog.prototype = new Animal();var hashiqi = new Dog();hashiqi.bark();
hashiqi.eat();
复制代码在 es6 中通过使用 class 定义原型及实现原型的继承
class Animal {constructor(name) {this.name = name;}eat() {alert(this.name + 'eat');}
}class Dog extends Animal {constructor(name) {super(name);this.name = name;}say() {alert(this.name + 'say');}
}const dog = new Dog('哈士奇');dog.say();
dog.eat();
复制代码重点问题
有时候前端面试可能会用到哦
Class 和普通构造函数有什么区别
- Class 在语法上更加贴合面向对象的写法
- Class 实现继承更加易读，易理解
- Class 更加易于 java 等后端学习
- 本质还是语法糖，还是使用 prototype
promise 基本使用
其他
本篇文章只是 ES6 中很小的一部分，ES6开发很方便，想详细学可以看阮一峰老师的 ECMAScript 6 入门
