ES6

一、es6简介

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准

• 为什么使用es6
• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散，实现相同的功能，会有各种不同的代码

1、新增声明变量的语法

2、解构赋值

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

let arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a)
console.log(b)
console.log(c)

3、箭头函数

• 箭头函数是用来简化函数定义语法的，函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。
• 如果形参只有一个，可以省略小括号
• 箭头函数不绑定this关键字，箭头函数中的this，指向是函数定义位置的上下文

var age = 100;
var obj = {
    age: 20,
    say: () => {
         alert(this.age)
    }
}

4、剩余参数

• 剩余参数语法允许将一个不定数量的参数表示为一个数组
• 剩余参数和解构配合使用

function sum (first, ...args){
    console.log(first); 
    console.log(args);
}
sum(10,20,30)
let students = ['xiaoming','zhangsan','lisi']
let [s1, ...s2] = students;
console.log(s1);
console.log(s2);

5、Array的扩展方法

• 扩展运算符可以将数组和对象转为用逗号分隔的参数序列
• 扩展运算符可以应用于合并数组
• 将类数组或可遍历对象转换为真正的数组
• Array.from() 将类数组或可遍历对象转换为真正的数组
• Array.find() 用于找出第一个符合条件的数组成员，如果没有找到返回undefined
• Array.findindex() 用于找出第一个符合条件的数组成员，如果没有找到返回-1
• Array.includes() 表示某个数组是否包含给定的值，返回布尔值

let ary = ["a", "b", "c"];
...ary 
console.log(...ary)
let ary1 = [1,2,3]
let ary2 = [4,5,6]
let ary3 = [...ary1,...ary2]
console.log(ary3)
ary1.push(...ary2);
var oDivs = document,getElementsByTagName('div)
console.log(oDivs)
var ary = [...oDivs];
console.log(ary1) 

6、String的扩展方法

• 模板字符串，使用反引号定义，可以解析变量，换行
• startsWith()：表示参数字符串是否在原字符的头部，返回布尔值
• endWith()：表示参数字符串是否在原字符的尾部，返回布尔值
• repeat方法表示将原字符串重复n次，返回一个新字符串

let str = `这是一个模板字符串`
let sayHello = `Hello, 我的名字叫${name}`;
console.log(str)
let str = 'Hello World';
str.startsWith('Hello')
str.endsWith('l')
console.log("y".repeat(5))

7.Set数据结构

• 类似于数组，但是值都是唯一的，没有重复的，可以做数组去重
• add(value):添加某个值，返回Set结构本身
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
• has(value)：返回一个布尔值，表示该值是否为Set的成员
• clear(value):清除所有成员，没有返回值
• 遍历 Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

const s = new Set()
s.add(1)
s.delete(1)
s.has(1)
s.clear()
const s5 = new Set(['a','b','c']);
s5.forEach(value => {
    console.log(value)
})