es6新特性

es6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

---

一、 es6新增

1.var，let，cont

1.1var 定义的变量：全局变量和局部变量（函数）:

function fn(){
	var num = 10;
	alert(num)
}
fn();
alert(num); //num is not define

for(var i=1;i<=10;i++){ //i是全局的
	
}

alert(i); //11

1.2let定义的变量：
let 定义变量，变量不可以再次定义，但可以改变其值

let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // 再次定义，报错：Identifier 'name' has already been declared

具有块级作用域（大括号）

{
    let age = 18;
    console.log(age); // 18
}
console.log(age); // 报错，此作用域中没有age的定义

for (let i = 0; i < 10; i++) {
    // i 只能在此范围内使用，因为有块级作用域
}
console.log(i);  // 报错，此作用域中没有i的定义

没有变量提升，必须先定义再使用

console.log(gender); // 报错，此时还没有定义gender
let gender = '男';

let声明的变量不会压到window对象中，是独立的

let hobby = '吃饭';
console.log(window.hobby); // undefined

如果使用var声明了变量，也不能再次用let声明了，反之也是不行的。原因也是这个变量已经被声明过了。
es6中新增了let命令，用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内{}有效​ 即let所声明的变量就“绑定”这个区域，不再受外部的影响,es6中还新增了const命令，它用来声明常量，一般被const声明的变量不可改变

1.3const
使用const关键字定义常量
常量是不可变的，一旦定义，则不能修改其值

// 1. 使用const关键字定义常量，常量名一般大写
// 2. 常量是不可变的，一旦定义，则不能修改其值
const PI = 3.1415926；
PI = 3.14; // 报错，常用一旦被初始化，则不能被修改

初始化常量时，必须给初始值

const PI; 
// 报错，Missing initializer in const declaration

具有块级作用域 没有变量提升，必须先定义再使用 常量也是独立的，定义后不会压入到window对象中

1.var 和let的区别：
​ 1.let声明的不存在变量提升

​ 2.let不允许在相同作用域内，重复声明同一个变量
​ 3.ES6中允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以

案例：

{
	alert(a); //a is not define
	let b = 10;
	{
		let a = 10;
		alert(b);	//10
	}

2.解构赋值

变量的结构赋值 – 快速的给变量赋值
2.1.解构赋值：数组，对象，字符串

let arr = [1,2,3,4,5];

//一般我们赋值
//let a = arr[0];
//let b =arr[1]

//解构赋值 赋值
let [a,b,c,d,e] = arr // a = 1 ，b =2 ....

2.2对象解构赋值
对象解构赋值，变量名和属性名保持一致，如果修改的话，得到的值是后者

let {name:xingming,age:nianling} = {name:'zhangsan',age:100};
console.log(xingming,nianling); //zhangsan,100

3.扩展运算符

3.1扩张运算符用三个点表示（…）,功能是把数组或类数组对象展开成一系列用逗号隔开的值

let arr=[1,2,3,4,5];
console.log(arr);
console.log(...arr); //1 2 3 4 5  用console.log输出看不到‘，’号

let arr=[1,6,7,3,5,6,8,9,0];
console.log(Math.max(...arr)) //9
console.log(Math.max(1,6,7,3,5,6,8,9,0)) //这里证明是用‘，’隔开

3.2扩展运算符还可以用于数组的合并

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];

console.log([...arr1,...arr2,...arr3]) //[1,2,3,4,5,6,7,8,9]

3.3扩展运算符还可以用于引用传递浅拷贝

let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); 	//[1,2,3]
console.log(arr2);	//[1,2,3,4]

4.对象浅拷贝

//obj1复制给obj2
const obj1 = {a: 1};
const obj2 = {...obj1};
字符串的扩展 --模板字符串
//1.模板字符串
let obj={
	name：'zxh',
	age:20,
	sex:'男'
}

document.body.innerHTML = '我的姓名是'+obj.name+',我今年'+.....等很麻烦
document.body.innerHTML = `我的姓名是${obj.name}，我今年${obj.age}`  结果一样

5.字符串的扩展 --字符串新加的方法

// repeat(n)方法返回一个新字符串，表示将原字符串重复n次
let str = 'hello';
console.log(str.repeat(10)); //输出10次hello

//includes():返回布尔值，表示是否找到了参数字符串
let str = 'javascript';
console.log(str.includes('ava'))  //返回true

//startsWith():放回布尔值，表示参数字符串是否在源字符串头部
let str = 'javascript';
console.log(str.startsWith('java')) //true

//endsWith():放回布尔值，表示参数字符串是否在源字符串尾部
let str = 'javascript';
console.log(str.endsWith('java')) //false
console.log(str.endsWith('t')) //true
console.log(str.endsWith('pt')) //true

6.函数

6.1函数的默认参数

<script>
	const sum = function(n1,n2){
		return n1+n2;
	}
	console.log(sum()) //NaN
	console.log(sum(1,2)) //3
</script>


//函数参数默认值

//在以前这样设置
const sum = function(){
	n1 = n1 || 10;
	n2 = n2 || 20;
	return n1+n2
}

//现在
const sum = function(n1=10，n2=10){
	return n1+n2
}

6.2箭头函数

const sum = function(a,b){
	return a+b
}

//用箭头函数表示
const sum1 = (a,b) => n1 + n2

重要：箭头函数里面的this是定义的时候确定的，this一旦确定无法改变

总结：1.箭头函数最吸引最吸引人的地方是简洁。同时函数体内this对象，就是定义时所在的 对象，而不是使用时所在的对象，this不会改变了

​ 2.不可以当做构造函数，也就是说不可以使用new命令，否则会抛出一个错误

​ 3.不可以使用arguments对象，该对象在函数体内不存在

​ 4.箭头函数一定是匿名函数

​ 5.箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如map，reduce， filter的回调函数（函数当作参数）定义中；

​ 6.不要在最外层定义箭头函数，因为在函数内部操作this会容易污染全局作用域。最起
码在箭头函数外部包一层普通函数，将this控制在可见的范围内

7.数组和对象的扩展

7.1数组的扩展

1.Array.from()方法用于将对象转为真正的数组（类数组转数组）

let obj={
	0:'zhangsan',
	1:'lisi',
	2:'wangwu',
	length:3
}
//需要固定的对象格式才可以使用Array.from()方法转成数组，否则无效
console.log(Array.from(obj))	//['zhangsan','kisi','wangwu']

7.2Array.of()方法用于将一组值，转换为数组

console.log(Array.of('zhangsan','lisi','wangwu')) //['zhangsan','lisi','wangwu']
​ 3.fill()方法使用给定值，填充一个数组

var a = [1,2,3,4,5]
console.log(a.fill('hello')) //['hello','hello','hello','hello','hello']

console.log(a.fill('hello',2,3)) //[1,2,'hello',4,5]

7.3对象的扩展

var num = 100
var obj = {
	num:100,
	shownum:function(){
		return this.num;
}
}

//当属性和属性名重名的时候可以省略	//方法可以省略function
var obj = {
	num，
	shownum(){
		return this.num;
}
}

8.新增对象Set

数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成 Set 数据结构。
Set的特点就是该对象里面的成员不会有重复。

8.1基本使用：

let set = new Set(); 得到一个空的Set对象。

8.2Set的成员

size：属性，获取 set 中成员的个数，相当于数组中的 length add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。 clear()：清除所有成员，没有返回值。

  let set = new Set();
    //调用set对象内置的add方法，想set中添加数据。
    set.add(3);
    set.add(8);
    set.add(9);
    set.add(3); //添加失败但不报错，set中的成员不能重复
    console.log(set); // {3,8,9}
    console.log(set.size); //3

8.3初始化Set的时候，也可以为其传入数组或字符串，得到的Set对象中的成员不会有重复。根据这个特点可以完成数组或字符串去重。

let set = new Set([4, 8, 9, 5, 4, 8, 4, 2]);
    console.log(set); //Set(5) {4,8,9,5,2}
    let arr = [...set]; //将set中的每个值展开，然后放到数组中
    console.log(arr); //(5) [4, 8, 9, 5, 2]
    let str = new Set('abcdacbdcbac'); 
    console.log(str); //Set(4) {"a", "b", "c", "d"}
    console.log([...str].join('')); //abcd

9.新增对象Map

9.1map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即：

object是 <string,object>集合 map是<object,object>集合

构造函数

// map接收一个数组，数组中的元素是键值对数组
const map = new Map([
    ['key1','value1'],
    ['key2','value2'],
])
// 或者接收一个set
const set = new Set([
    ['key1','value1'],
    ['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);

方法：

1.size

获取map的大小。

const map3 = new Map();
map3.set('k1', 1);
map3.set('k2', 2);
map3.set('k3', 3);
console.log('%s', map3.size)

2.set

设置键值对，键可以是各种类型，包括undefined，function。
const map4 = new Map();
map4.set('k1', 6)        // 键是字符串
map4.set(222, '哈哈哈')     // 键是数值
map4.set(undefined, 'gagaga')    // 键是 undefined

const fun = function() {console.log('hello');}
map4.set(fun, 'fun') // 键是 function

console.log('map4 size: %s', map4.size)
console.log('undefined value: %s', map4.get(undefined))
console.log('fun value: %s', map4.get(fun))
结果：

map4 size: 4
undefined value: gagaga
fun value: fun
也可对set进行链式调用。

map4.set('k2', 2).set('k3', 4).set('k4', 5)
console.log('map4 size: %s', map4.size)
结果：

map4 size: 7
 

3.get

获取键对应的值。

const map5 = new Map();
map5.set('k1', 6)  
console.log('map5 value: %s', map5.get('k1'))
结果：

map5 value: 6
 

4.has

判断指定的键是否存在。

const map6 = new Map();
map6.set(undefined, 4)
console.log('map6 undefined: %s', map6.has(undefined))
console.log('map6 k1: %s', map6.has('k1'))
结果：

map6 undefined: true
map6 k1: false
 

5.delete

删除键值对。

const map7 = new Map();
map7.set(undefined, 4)
map7.delete(undefined)
console.log('map7 undefined: %s', map7.has(undefined))
结果：

map7 undefined: false
 

6.clear

删除map中的所有键值对。

const map8 = new Map();
map8.set('k1', 1);
map8.set('k2', 2);
map8.set('k3', 3);
console.log('map8, pre-clear size: %s', map8.size)
map8.clear()
console.log('map8, post-clear size: %s', map8.size)

结果：

map8, pre-clear size: 3
map8, post-clear size: 0

10.模块

在 ES6 的模块语法中。模块设计围绕 export 和 import 关键词。

export function sum(x, y) {
   return x + y;

}

export var pi = 3.141593;

// app.js

 

import { sum, pi } from "lib/math";

console.log('2π = ' + sum(pi, pi));

总结

当然以上的只是es6新增的一小部分，如果想要知道全部的内容可以去看一下es6文档