ES6新增内容

ES6

ES的全称是ECMAScript，是ECMA国际标准化组织制定的一项脚本语言的标准化规范

let

新增的用于声明变量的关键字

1. let声明的变量只在所处于的块级有效一对{}代表一个块级作用域
2. 不存在变量提升，只能先声明再使用

			var arr = [];
			for(var i = 0;i < 2;i++) {
				arr[i] = function() {
					console.log(i);
				}
			}
			arr[0]();//2
			arr[1]();//2

                        let arr = [];
			for(let i = 0;i < 2;i++) {
				arr[i] = function() {
					console.log(i);
				}
			}
			arr[0]();//0
			arr[1]();//1

const

作用：声明常量，常量就是值（内存地址）不能变化的量。

1. 具有块级作用域
2. 声明常量时必须赋初值
3. 声明常量后，值不能修改

新增语法

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

数组解构

			var arr = [1,2,3];
			let [a,b,c,d] = arr;
			console.log(a);
			console.log(b);
			console.log(c);
			console.log(d);//undefined

对象解构

			var obj = {name: 'zhangsan',age: 18,sex: '男'};
			let {name,age,sex} = obj;
			console.log(name);
			console.log(age);
			console.log(sex);
			let {name: myName,age: myAge,sex: mySex} = obj;
			console.log(myName);
			console.log(myAge);
			console.log(mySex);

箭头函数

() => {}

const fn = () => {}

在箭头函数中 如果函数体只有一句代码并且执行结果就是函数的返回值 此时可以省略大括号

			const sum = (num1,num2) => num1 + num2;
			const sum = (num1,num2) => {
                            return num1 + num2;
                        }

如果形参只有一个，小括号也可以省略

			const fn = m => m+1;

箭头函数不绑定this、箭头函数中没有this关键字、如果在箭头函数中使用this，this指向箭头函数定义位置上下文中的this

剩余参数

			const sum = (...args) => {
				let total = 0;
				args.forEach(item => total += item);
				return total;
			}
			console.log(sum(10,20,30));//60

剩余参数和解构配合使用

			let students = ['zhangsan','lisi','wangwu'];
			let [s1,...s2] = students;
			console.log(s1);
			console.log(s2);

ES6内置对象的扩展

Array的扩展方法

扩展运算符可以将数组或对象转为用都好分隔的参数序列

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

数组合并

			let arr1 = [5,6,7,8];
			let arr2 = [1,2,3,4];
			let arr = [...arr2,...arr1];
			console.log(arr);//[1,2,3,4,5,6,7,8]
			let arr3 = arr2.push(...arr1);

将类数组或可遍历对象转化成真正的数组

			var divs = document.querySelectorAll('div');
			console.log(divs);
			var arr = [...divs];
			console.log(arr);

Array.from()

			console.log(Array.from('foo'));
			// expected output: Array ["f", "o", "o"]

			console.log(Array.from([1, 2, 3], x => x*3));
			// expected output: Array [2, 4, 6]　

find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

			arr.find(callback[, thisArg])

			const array1 = [5, 12, 8, 130, 44];
			const found = array1.find(element => element > 10);
			console.log(found);
			// expected output: 12

findIndex()

用于找出第一个符合条件的数组成员的位置(索引)，如果没有找到返回-1

			arr.findIndex(callback[, thisArg])

			const array1 = [5, 12, 8, 130, 44];
			const isLargeNumber = (element) => element > 13;
			console.log(array1.findIndex(isLargeNumber));
			// expected output: 3

includes()

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

                        arr.includes(valueToFind[, fromIndex])
                        //fromIndex:从哪个位置开始查找，默认为0

			const array1 = [1, 2, 3];
			console.log(array1.includes(2));
			// expected output: true
			const pets = ['cat', 'dog', 'bat'];
			console.log(pets.includes('cat'));
			// expected output: true
			console.log(pets.includes('at'));
			// expected output: false

模版字符串

ES6新增的创建字符串的方式，使用反引号定义

			let uname = `zhangsan`;

模版字符串中可以解析变量

			let uname = `zhangsan`;
			let sayHello = `hello,my name is ${uname}`;
			console.log(sayHello);//hello,my name is zhangsan 

模版字符串中可以换行

			let result = {
				uname: "zhangsan",
				age: 18
			}
			let html = `
				<div>
					<span>${result.uname}</span>
					<span>${result.age}</span>
				</div>
			`;
			console.log(html);

模版字符串中可以调用函数

				return '我是fnn';
			}
			
			let html = `
				"hello,${fnn()}"
			`;
			console.log(html);

String的扩展方法

startsWith(): 表示参数字符串是否在原字符串的头部，返回布尔值。

startsWith(): 表示参数字符串是否在原字符串的头部，返回布尔值。

			let str = 'hello,world!';
			str.startsWith('hello');//true
			str.endsWith('!');//true

repeat(): 将原字符串重复n次，返回一个新字符串，默认1次

			console.log('y'.repeat(3));/yyy 

Set 数据结构

ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。

			const s1 = new Set([1,2,3,4,4,5,5,5,6]);
			console.log(s1);//[1,2,3,4,5,6]
			console.log(s1.size);//6
			const s2 = new Set(['a','b','c','c']);
			console.log(s2);//['a','b','c']

实例方法

add(value):添加某个值，返回set结构本身

			const s = new Set();
			let a = s.add(1).add(2);
			console.log(a);[1,2]

delete(value):删除某个值，返回一个布尔值，表示是否删除成功

			const s = new Set([1,2,3,4,5]);
			let a = s.delete(3);
			console.log(a);//true
			console.log(s);//[1,2,4,5]

has(value):返回一个布尔值，表示该值是否为Set成员

			const s = new Set([1,2,3,4,5]);
			let a = s.has(3);
			let b = s.has(6);
			console.log(a);//true
			console.log(b);//false

clear():清除所有成员，没有返回值

			const s = new Set([1,2,3,4,5]);
			s.clear();
			console.log(s);

遍历

			const s = new Set([1,2,3,4,5]);
			s.forEach(value => console.log(value));