摘要：简单总结一下ES6常用方法已经对应使用示例
1.1.1 Let
Let关键字是ES6中新增的一个声明变量的关键字。
Let声明的变量只在所处于的块级有效，作用范围变得更小了
if(true) {
let a = 10
}
console.log(a)
注意：使用let关键字声明的变量才有块级作用域的作用，var声明的不具备这个特性。
Let声明的变量不存在变量提升
console.log(a)
let a = 10
暂时性死区
var temp = 123
if(true) {
temp = 'abc'
let temp
console.log(temp)
}
经典面试题
var arr = []
for(var i = 0; i < 2; i++) {
arr[i] = function() {
console.log(i)
}
}
arr[0]()
arr[1]()
此题的关键点在于var i是全局的。函数运行的时候作用是输出i，此时i是2
var arr = []
for(let i = 0; i < 2; i++) {
arr[i] = function() {
console.log(i)
}
}
arr[0]()
arr[1]()
该代码使用let声明i，那么，每次循环的时候都会产生一个块级作用域，每个块级作用域中变量都是不同的，互不影响。
1.1.2 Const
作用：声明一个常量。常量就是值（内存地址）不能改变的量。
Const也具有块级作用域。
if(true) {
const a = 10
}
console.log(a)
声明常量的时候必须赋值，并且，常量赋值后，值不能修改
const a = 10
a = 100
一个const的数组。我们是否可以改变里面的元素？答案是可以。因为数组本身没有被改变，地址也没有被修改，只是修改了里面的元素。
const arr = [1,2,3]
console.log(arr)
arr.push(4)
console.log(arr)
arr[0] = 'hahaha'
console.log(arr)
arr = [1,2,3] // 报错
1.1.3 Var、let、const区别
1. 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用const声明的常量，在后面的代码中不能再修改常量的值。
1.1.4 解构赋值
ES6中允许从数组、对象中提取值，按照对应的位置，对变量赋值
const arr = [1,2,3]
let [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
如果结构不成功，变量的值是undefined
对象解构
const person = {
id: 1,
name: '张三',
age: 23
}
const {name, age, id:myId} = person
console.log(name)
console.log(age)
console.log(myId) // myId是在解构时赋予的别名
1.1.5 箭头函数
ES6中定义函数的新方式
语法：() => {}
function add(num1, num2) {
return num1 + num2
}
const num = add(1,2)
console.log(num)
const a = (num1, num2) => {
return num1+num2
}
console.log(a(1,2))
函数体中如果只有一句代码，并且代码的执行结果就是返回值，可以省略大括号
var fun = function(a) {
console.log(a)
}
fun(2)
const fun2 = a => console.log(a)
fun2(4)
箭头函数不绑定this关键字，箭头函数中的this指向的是函数定义位置的上下文。
class Person {
constructor(name) {
this.name = name
}
say() {
console.log('say中', this)
return () => {
console.log('function中', this)
}
}
}
const p = new Person('张三')
const r = p.say()
r()
1.1.6 剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
function sum(first, ...args) {
//...表示剩余参数
console.log(first)
console.log(args)
}
sum(10,20,30)
剩余参数一般和解构一起使用
const objArr = [
{id: 1, name: '张三', age: 23},
{id: 2, name: '李四', age: 24},
{id: 3, name: '王五', age: 25},
{id: 4, name: '赵六', age: 26}
]
const tempArr = [
{id: 5, name: '田七', age: 27},
{id: 6, name: '王八', age: 28},
{id: 7, name: '老九', age: 29}
]
// 把tempArr的元素全部放到objArr中
// objArr.push(tempArr) // 错的
// tempArr.forEach(e => {
// objArr.push(e)
// }) // 可以，但是还是有点麻烦
objArr.push(...tempArr) // 使用...和解构的方式
console.log(objArr)
1.2 ES6中内置对象的扩展
1.2.1 Array扩展方法
扩展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
const objArr = [
{id: 1, name: '张三', age: 23},
{id: 2, name: '李四', age: 24},
{id: 3, name: '王五', age: 25},
{id: 4, name: '赵六', age: 26}
]
console.log(...objArr)
构造函数方法：Array.from()
将类数组或者可比案例对象转换为真正的数组
const arr = ['a', 'b', 'c', 'd']
console.log(arr)
const obj = {
'0': 'a',
'1': 'b',
'2': 'c',
'3': 'd',
length: 4
}
const objArr = Array.from(obj)
console.log(objArr)
From方法有第二个参数，作用类似于数组中的map方法，用来对每个元素进行处理，将处理后的值，放入返回的数组
const obj = {
'0': 1,
'1': 2,
'2': 3,
length: 3
}
const objArr = Array.from(obj, item => item * 2)
console.log(objArr)
1.2.2 实例方法：find()
用于找出第一个符合条件的数组成员，如果没有找到，返回undefind
const objArr = [
{ id: 1, name: '张三', age: 23 },
{ id: 2, name: '李四', age: 24 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 26 }
]
const a = objArr.find(item => item.id > 2)
console.log(a)
const resultArr = objArr.filter(item => item.id < 3)
console.log(resultArr)
1.2.3 实例方法：findIndex()
用于找出第一个符合条件的数组成员的位置，如果没有找到，就返回-1
const objArr = [
{ id: 1, name: '张三', age: 23 },
{ id: 2, name: '李四', age: 24 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 26 }
]
const index = objArr.findIndex(e => e.id > 2)
console.log(index)
1.2.4 实例方法：includes()
表示某个数组是否包含给定的值
console.log([1,2,3].includes(2))
console.log([1,2,3].includes(4))
1.2.5 模板字符串
ES6中新增了创建字符串的方式。使用反引号定义。``
在模板字符串中，可以解析变量
let name = `zhangsan`
console.log(name)
let hello = `hello, my name is ${name}`
console.log(hello)
在模板字符串中，可以调用函数。
let name = `zhangsan`
console.log(name)
const fun = () => '我的名字是张三'
let hello = `hello, my name is ${name}, ${fun()}`
console.log(hello)
在模板字符串中，可以拼接字符串，可以任意的换行。
class Goods {
constructor(id, name, price) {
this.id = id
this.name = name
this.price = price
}
}
var dataList = [
new Goods(1, '篮球', 10.8),
new Goods(2, '足球', 50.4),
new Goods(3, '乒乓球', 5),
new Goods(4, '羽毛球', 9),
new Goods(5, '网球', 16),
new Goods(6, '排球', 8),
new Goods(7, '美式足球', 26)
]
$(function() {
let table = $("#goods-table")
let html = ''
// dataList.forEach(e => { // 拼接字符串，相当的麻烦，而且字符串复杂时，容易拼错
// let temp = '<tr>' +
// '<td>'+ e.id +'</td>' +
// '<td>'+ e.name +'</td>' +
// '<td>'+e.price+'</td>' +
// '</tr>'
// html += temp
// })
dataList.forEach(e => {
html += `
<tr>
<td>${e.id}</td>
<td>${e.name}</td>
<td onclick='clickPrice(${e.price})'>${e.price}</td>
</tr>
`
})
table.append(html)
})
1.2.6 实例方法startsWith和endsWith
startsWith()：表示参数字符串是否在指定字符串的头部
endsWith()：表示参数字符串是否在指定字符串的尾部
const str = 'hello world!'
console.log(str.startsWith('hello'))
console.log(str.endsWith('!'))
console.log(str.startsWith('稽哥最帅'))
1.2.7 实例方法 repeat
Repeat方法表示将原字符串重复n次，返回一个新的字符串
const str = '稽哥最帅'
const s = str.repeat(3)
console.log(s)
1.2.8 Set数据结构
ES6提供了新的数据结构，set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
const s = new Set()
s.add(1)
s.add(2)
console.log(s)
Set的构造函数还可以接收一个数组作为参数，用来初始化。
const s = new Set([1,2,3,4,4])
console.log(s)
Add(value)：添加一个值，返回的set本身
Delete(value)：删除某个值，返回一个布尔类型，表示是否删除成功
Has(value)：返回一个布尔值，表示该value是否是set的成员
Clear()：清除所有成员，没有返回值
const s = new Set([1,2,3,4,4])
s.add(5)
s.delete(4)
console.log(s.has(3))
console.log(s)
s.clear()
console.log(s)
遍历
Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作