前端 JavaScript 中 ES6的常见语法

ECMAScript 6.0（也可以称为 ECMAScript2015），ECMAScript 6.0 简称 ES6，是语言的标准。

出来的时间已经很久了，但是我们在工作中，有时候也不会使用。今天我们就来介绍一下。

1、块级作用域（let、const）

块级作用域，就是有{}括号中可用范围，不像之前 var 定义的变量都是函数作用域。
let 定义的变量可以改变值，const 定义的都是静态变量，不可以修改的。但是像数组，只对数据进行 push 操作的话，也可以定义成 const 的。

2、模版字符串

反引号（``）,变量（${}）

const msg = 'hello world';
const str =`你好，
${msg}
再见`;
console.log(str);
12345

3、解构赋值

从数组和对象中提取值 ，对变量进行赋值 ，这被叫作解构赋值。

// 数组解构
let [a,b,c]=[1,2,3];
console.log(c);
// 对象解构
let {name:myname,age}={name:'lily',age:12};
console.log(myname,age)
// 字符串解构
let str = 'qaz';
let [a,b,c]=str;
console.log(a,b,c);
12345678910

4、箭头函数

箭头函数作为普通函数的一个补充，将 this 指向了函数体之外最近一层的 this，而不是向普通 JS 一样将 this 指向 window 变量。

 function fn(){
    console.log('real',this)     //{a:100}
    var arr = [1,2,3]
    //普通JS
    arr.map(function (item){
      console.log('js',this)     //window
      return item + 1
    })
    //箭头函数
    arr.map(item => {
      console.log('es6',this)     //{a:100}
      return item + 1
    })
  }
  fn.call({a:100})     //将{a:100}设置为this
123456789101112131415

5、函数默认参数

  function(a, b=0){   //如果b为空，默认b等于0
  }
12

6、剩余参数&扩展运算符

语法都是...arr。不同在于，剩余参数是将一个不定数量的参数表示为一个数组。扩展运算符是将数组（对象）转为用逗号分隔的参数序列。

//剩余参数是把参数转成数组
function func(arg1, ...args){
    // arg1 == 1,   args == [2,3,4]
}
func(1,2,3,4);

const sum = (...args) =>{
    let total = 0;
    arrgs.foreach(item => total += item);
    return total;
}
1234567891011

//扩展运算符，合并数组
let arr1 = [1,3,5];
let arr2 = [2,4,6];
let arr3 = [...arr1, ...arr2];   // arr3 == [1,3,5,2,4,6];

// 或者
arr1.push(...arr2);     // arr1 = [1,3,5,2,4,6];
1234567

剩余参数是把参数转成数组，扩展运算符是把数组转成非数组。

7、对象新增方法，Object.assign()

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target); // Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }
123456

8、Set 和 Map 数据结构

Set 类似于数组，但是成员的值都是唯一的，没有重复的值。

const s = new Set([1,2,3,4,5,5]); // 会剔除重复的值，实际上 s=={1,2,3,4,5}
s.size;       // 5, 数据结构的大小
12

add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表该值是否为 Set 的成员
clear(value)：清除所有成员，没有返回值

s.add(6).add(7);++

s.delete(7);   //true
s.delete(8);   //false

s.has(6);     //true
s.has(7);     //false

s.clear()      // s.size === 0

s.forEach( value => console.log(value));    //遍历s数据结构的值
1234567891011

Map 是类似 Object 的一种键值对集合

9、最后其他 es6 常用的语法

es6 模块化 中 import 和 export 用法
(前端工程化以及如何通过 Node.js 中 babel 来编译 es6 模块化代码)

es6 的 promise 对象 (JavaScript 进阶之 Ajax 的问题和什么是 promise)

asyn 和 await 函数 (fetch 和 axios 接口调用方式的用法)

(Es6 简化操作的一些数组方法使用及原理)