ES6常用语法-白红宇

主要总结一些 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 = `
      
     ${name}
  
     ${age}
    
`;复制代码

结构赋值

在 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指向定义时候的实例

() => {}复制代码

块级作用域

// letconst arr = [];for (let index = 0; index < 3; index++) {    arr[index] = function () {        return index * 2;    }}console.table([    arr[0](),   //0    arr[1](),   //2    arr[2]()    //4]);// varconst arr1 = [];for (var i = 0; i < 3; i++) {    arr1[i] = function () {        return i * 2;    }}console.table([    arr1[0](),      //6    arr1[1](),      //6    arr1[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开发很方便，想详细学可以看阮一峰老师的