ES6中常用语法_es6语法

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

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

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

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

2、模版字符串

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

const msg = 'hello world';
const str =`你好，
${msg}
再见`;
console.log(str);
1
2
3
4
5

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);
1
2
3
4
5
6
7
8
9
10

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、函数默认参数

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

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;
}
1
2
3
4
5
6
7
8
9
10
11

//扩展运算符，合并数组
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];
1
2
3
4
5
6
7

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

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 }
1
2
3
4
5
6

8、Set和Map数据结构

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

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

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数据结构的值	
1
2
3
4
5
6
7
8
9
10
11

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

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

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

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

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

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

谢谢大家！欢迎留言讨论！