es6（五） 数组扩展

目录

1. Array.from(v): 将伪数组对象或可遍历对象转换为真数组

2. Array.of(v1, v2, v3): 将一系列值转换成数组

3. find(): 找出第一个满足条件返回true的元素

4. findIndex(): 找出第一个满足条件返回true的元素下标

5.fill() 数组批量替换 

6.for of数组遍历

7.copyWithin 数组浅复制

8.filter 数组过滤

9.keys(), values(), entries()

10. includes()   判断数组是否包含给定的值，返回布尔值，NaN 也能识别

11. forEach() 遍历数组

12. map()  遍历数组，返回一个新数组，不改变原数组

13. filter()  过滤掉数组中不满足条件的值

14. some()  遍历数组每一项,只需满足一个

15. every()  遍历数组每一项,需全部满足

---

1. Array.from(v): 将伪数组对象或可遍历对象转换为真数组

// Array.from()
let btns = document.getElementsByTagName('button')
// btns是伪数组,直接使用数组的方法会报错,
// 使用Array.from(btns)后,将btns转为了真数组
Array.from(btns).forEach(function(item, index) {
    console.log(item)
})

//对每个元素进行操作
let array = Array.from([1,2,3],(item) =>{
    return item * 2
})
console.log(array) // [2, 4, 6]

2. Array.of(v1, v2, v3): 将一系列值转换成数组

//Array.of()
let arr = Array.of(1, 4, 'abc', true);
console.log(arr) // [1, 4, "abc", true]

3. find(): 找出第一个满足条件返回true的元素

let arr2 = [1, 2, 4, 5, 45, 422];
// 找出arr2中第一个大于4的数
let result = arr2.find(function(item, index) {
    return item > 4
})
console.log(result) // 5

4. findIndex(): 找出第一个满足条件返回true的元素下标

// 找出arr2中第一个大于4的数的下标
let result2 = arr2.findIndex(function(item, index) {
    return item > 4
})
// 复习下模板字符串
console.log(`index=${result2}`) // 3

5.fill() 数组批量替换 

//fill (替换的数值，起始位置，结束位置)
console.log([1,'hello',undefined].fill(7))
console.log(['a','b','c','d','e','f','g'].fill(7,1,3))
// 输出结果
(3) [7, 7, 7]
(7) ["a", 7, 7, "d", "e", "f", "g"]

6.for of数组遍历

for (let index of ['a','b','c']){
    console.log(index)
}
// 输出结果 abc

for (let index of ['a','b','c'].keys()){
   console.log(index)
}
// 输出结果  0 1 2


for (let [index,value] of ['a','b','c'].entries()){
    console.log(index,value)
}
// 输出结果
0 "a"
1 "b"
2 "c"

7.copyWithin 数组浅复制

// 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。
// array.copyWithin(target, start, end)
// target	必需。复制到指定目标索引位置。
// start	可选。元素复制的起始位置。
// end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
console.log([33,38,39,40,50].copyWithin(0,3,4))
// 输出结果
// (5) [40, 38, 39, 40, 50]

8.filter 数组过滤

let result = [1,2,3,4,5,6].filter((item)=>{
    return item > 3;
})
console.log(result)

// 输出结果
(3) [4, 5, 6]

9.keys(), values(), entries()

返回一个迭代器对象

可以理解为是一个指针

指向了改数据结构的第一个元素

遍历时，指针不断后移， 直到结束

可以使用for ... of 来遍历获取

let arr = ["a", "b", "c"]
let arrKey = arr.keys()
console.log(arrKey.next());  // 0
console.log(arrKey.next());  // 1
console.log(arrKey.next());  // 2

let arrVal = arr.values(); 
console.log(arrVal.next());  // a
console.log(arrVal.next());  // b
console.log(arrVal.next());  // c
 
let arrEntries = arr.entries();
console.log(arrEntries.next());  // [0,"a"]
console.log(arrEntries.next());  // [1,"b"]
console.log(arrEntries.next());  // [2,"c"]

10. includes()   判断数组是否包含给定的值，返回布尔值，NaN 也能识别

arr = ["a","b","c"]
arr.includes("b")  // true
arr.includes("66") // false

11. forEach() 遍历数组

在遍历的时候, 会执行给定函数, 并传值给该函数

第一个参数，就是当前正在遍历的元素

第二个参数，就是当前正在遍历的元素的索引

第三个参数，就是正在遍历的数组

arr.forEach(function(value , index , obj){
    console.log(value);
});

12. map()  遍历数组，返回一个新数组，不改变原数组

arr.map(function(value , index , obj){
    return value * 2;
});

let arr = ["a", "b", "c"]
let result = arr.map((v, i) => {
    return [v, i]
})
console.log(result)
// ["a",0]
// ["b",1]
// ["c",2]

13. filter()  过滤掉数组中不满足条件的值

返回一个新数组,不改变原数组

arr.filter(function(value , index , obj){

    return value >= 2;

});

14. some()  遍历数组每一项,只需满足一个

遍历数组每一项,有一项返回true,则停止遍历，并返回true

arr.some(function(value , index , obj){

    return value % 2 === 0;

});

15. every()  遍历数组每一项,需全部满足

遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,停止遍历,结果返回为false

arr.every(function(value , index , obj){

    return value % 2 === 0;

});