Array 的扩展方法
扩展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分割的参数序列
例子：将数组拆分成以逗号分割的参数
let arr = [1, 2, 3, 4]
console.log(...arr)
//等价于 console.log(1,2,3,4)
注意：可以看到这里输出了1 2 3 4 而不是数组，这里就是将arr 以逗号分割的方式传给了 console.log()
例子：以逗号隔开传给函数
let arr = [1, 2, 3, 4]
function echo(str1, str2, str3, str4){
console.log(str1) //1
console.log(str2) //2
console.log(str3) //3
console.log(str4) //4
}
echo(...arr)
例子：利用加 [] 合并数组
let arr1 = [1, 2, 3, 4]
let arr2 = ['a', 'b', 'c', 'b']
let arr3 = [...arr1,...arr2]
//我们可以通过再加一个 [] 让他变成新数组
console.log(arr3) //[1, 2, 3, 4, "a", "b", "c", "b"]
例子：利用 Array.push() 合并数组
let arr1 = [1, 2, 3, 4]
let arr2 = ['a', 'b', 'c', 'b']
//其实 push 也是可以接收多个参数的
//这里等价于 arr1.push('a', 'b', 'c', 'b')
arr1.push(...arr2)
console.log(arr1)
例子：利用扩展运算符可以将伪数组转换为真正的数组
<div>11</div>
<div>21</div>
<div>31</div>
<div>41</div>
<div>51</div>
<div>61</div>
<div>71</div>
<div>81</div>
<div>91</div>
<div>101</div>
<div>111</div>
<div>121</div>
<div>131</div>
<div>141</div>
<div>151</div>
<div>161</div>
<div>171</div>
<div>181</div>
<div>191</div>
<div>201</div>
let ele = document.getElementsByTagName('div')
console.log(ele)
console.log(ele instanceof Array)
//利用展开运算之转换为真的数组
ele = [...ele]
console.log(ele)
console.log(ele instanceof Array)
构造函数方法
语法：
Array.from()
将类数组或可变量的对象转换为真正的数组
例子：
<div>11</div>
<div>21</div>
<div>31</div>
<div>41</div>
<div>51</div>
<div>61</div>
<div>71</div>
<div>81</div>
<div>91</div>
<div>101</div>
<div>111</div>
<div>121</div>
<div>131</div>
<div>141</div>
<div>151</div>
<div>161</div>
<div>171</div>
<div>181</div>
<div>191</div>
<div>201</div>
//对象
let obj = {
'0':'a',
'1':'b',
'2':'c',
'3':'d',
length:3
}
//伪数组
let ele = document.getElementsByTagName('div')
console.log(obj instanceof Array)
console.log(ele instanceof Array)
let new_obj = Array.from(obj)
let new_ele = Array.from(ele)
console.log(new_obj instanceof Array)
console.log(new_ele instanceof Array)
console.log(new_obj)
console.log(new_ele)
Array.from() 还有第二个参数与map() 方法相似，用来对每个元素进行处理，将处理后的值放入返回的数组。
例子：
//对象
let obj = {
'0':'a',
'1':'b',
'2':'c',
'3':'d',
length:4
}
let new_arr = Array.from(obj, item => item + '新增字符串')
console.log(new_arr) //["a新增字符串", "b新增字符串", "c新增字符串", "d新增字符串"]
find() 方法
用于找出第一个符合条件的数组成员，如果没有找到返回 undefined。
例子：找到 id 为 2 的元素
let arr = [
{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
}
]
let target = arr.find( item => item.id == 2)
console.log(target) //{id: 2, name: "李四"}
findIndex() 方法
用于找出第一个符合条件的数组成员的位置，如果没有就返回 1 。
例子：找出大于 6 的元素的位置
const arr = [1, 5, 7, 12]
const res_index = arr.findIndex((value, index) => {
return value > 6
})
console.log(res_index) //2
includes() 方法
表示某个数组是包含给定的值，返回布尔值
语法:
includes(你要找的值)
例子：
const arr = [1, 5, 7, 12]
console.log(arr.includes(5)) //true
console.log(arr.includes(7)) //true
console.log(arr.includes(2)) //false
注意：在 ES6 之前我吗一般用 indexOf 但是书写比较晦涩，这里 includes 可以替代 indexOf 使用
String 的扩展方法
- startsWith() //表示参数字符串是否在原字符串的开头，返回布尔值。
- endsWith() //便是参数字符串是否在原字符串的结尾，返回布尔值。
例子：
let str = 'Javascript hi!'
console.log(str.startsWith('Java')) //true
console.log(str.startsWith('java')) //false
console.log(str.endsWith('!')) //true
注意：是区分大小写的
repeat() 方法
repeat() 表示将原字符串重复 n 次，返回一个新字符串。
例子：
let str = 'Javascript hi!'
let new_str = str.repeat(3)
console.log(new_str) //Javascript hi!Javascript hi!Javascript hi!
set 数据结构
ES6 提供了新的数据结构 Set 。它类似于数组，但是成员的值都是唯一的，没有重复的值。
应用场景：例如存储用户输入过的历史关键字，因为用户可能多次输入，所以在用户重复输入时，会自动比对，如果有重复的值将不再储存。
如果创建 Set 数据结构
Set 本身是一个构造函数，我们可以生产一个 set 数据结构。
语法：
const s = new Set()
Set 可以接受一个数组作为参数，用来初始化。
const set = new Set([1, 2, 3, 4,])
利用 Set 数据结构可以实现数据去重
例子：
const arr = [1 ,1 ,1 ,2 ,2 ,3 ,3 ,4 ,4]
const new_set = new Set(arr)
//注意这里拿到的是 set 数据结构
console.log(new_set) //Set(4) {1, 2, 3, 4}
//利用扩展运算符将 set 数据结构变成以逗号分隔的零散量，再给一个[]变为属于组
const new_arr = [...new_set]
console.log(new_arr) //(4) [1, 2, 3, 4]
Set 的常用方法
- add() //添加某个值返回 Set 本身结构
- delete() //删除某个值，返回一个布尔值，便是删除是否成功
- has() //返回一个布尔值，表示该值是否为 Set 成员。
- clear() //清除所有成员，没有返回值。
例子：
const arr = [1, 2, 3, 4]
const arr_set = new Set(arr)
arr_set.add(5).add(6) //添加了 5 和 6
arr_set.delete(1) //删除了 1
console.log(arr_set.has(3)); //true
console.log(arr_set); //Set(5) {2, 3, 4, 5, 6}
arr_set.clear() //清除所有值
console.log(arr_set) //Set(0) {}
注意：这里的 add() 方法时可以使用链式调用的。
Set 的值也是可以使用 forEach 遍历的
例子：
const arr = [1, 2, 333, 444, 555]
const arr_set = new Set(arr)
arr_set.forEach((item) => {
console.log(item)
})
