数组的扩展

我们在运用数组的时候有时候会混淆数组的类型和应用，以下对遇到的一些有关数组的小问题进行下记录

1. 类数组&伪数组：就是一些可以进行循环和有length属性，但是不能调用Array的方法的集合，例如getElementsByTagName() getElementsByClassName() querySelector()等

---

let div = document.getElementsByTagName('div')
console.log(div) // HTMLCollection 
let div2 = document.getElementsByClassName('div')
console.log(div2) // HTMLCollection 
let div3 = document.querySelector('div')
console.log(div3) // NodeList

function foo() {
    console.log('参数====',arguments)
    // arguments也不是真正意义上的数组
    console.log('参数====',arguments instanceof Array)
}
foo(1,'huanhuan',true)

检查当前集合是否为真实的数组

• XXX instanceof Array
• 是否可用数组的方法，如push()等 将伪数组转换成真实的数组
• slice()

let arr =  Array.prototype.slice().call(伪数组)

• es6 from()

let arrLike = {
    0: 'es5',
    1: 'es6',
    2: 'es7',
    length: 3
}
let arr = Array.from(arrLike)
arr.push('es9')
console.log("🚀 ~ file: 数组的扩展.js ~ line 30 ~ arr", arr) // ['es5','es6','es7','es9']

2.数组的创建方式

• new Array()
  new Array()会根据参数的不同展示出不同的创建形式，例如一个参数返回创建的数组的长度，两个及两个以上返回创建的数组

let arr = new Array(1,2)
console.log("🚀 ~ file: 数组的扩展.js ~ line 35 ~ arr", arr)// [ 1, 2 ]
let arr2 = new Array(3)
console.log("🚀 ~ file: 数组的扩展.js ~ line 37 ~ arr2", arr2) //[ <3 empty items> ]

• Array.of()不受参数的多少影响数组的生成,会把不同类型的参数组合成数组

let arr3 =  Array.of(1,2)
console.log("🚀 ~ file: 数组的扩展.js ~ line 41 ~ arr3", arr3) // [1,2]
let arr4 =  Array.of(3)
console.log("🚀 ~ file: 数组的扩展.js ~ line 43 ~ arr4", arr4) // [3]
let arr = Array.of(1,true,'huanhuan',[1,2])
console.log("🚀 ~ file: 数组的扩展.js ~ line 46 ~ arr", arr) // [ 1, true, 'huanhuan', [ 1, 2 ] ]

3.copyWithin(arg1.arg2,agr3)
agr1:必选从那个位置开始替换
arg2:可选从当前位置开始读取元素
arg3:可选到当前位置停止读取，如果不写直接到结束

let arr = [1,2,3,4,5]
arr.copyWithin(1,3)
// 从下标为1的位置开始替换下标为3 的元素 一直到结尾的元素
console.log("🚀 ~ file: 数组的扩展.js ~ line 52 ~ arr", arr)//[ 1, 4, 5, 4, 5 ]

4.fill()
fill(arg1.arg2,agr3) agr1:必选填充的元素
arg2:可选从当前位置开始读取填充
arg3:可选到当前位置停止填充，如果不写直接到结束，不包含右边界

let arr =new Array(3).fill(7)
console.log("🚀 ~ file: 数组的扩展.js ~ line 56 ~ arr", arr)// [ 7, 7, 7 ]
let arr = [1,2,3,4,5]
arr.fill('huan',1,3) // 不包含右边界
console.log("🚀 ~ file: 数组的扩展.js ~ line 61 ~ arr", arr)// [ 1, 'huan', 'huan', 4, 5 ]
arr.fill('huan')
console.log("🚀 ~ file: 数组的扩展.js ~ line 63 ~ arr", arr)// [ 'huan', 'huan', 'huan', 'huan', 'huan']

5.查看数组中是否包含某元素

• indexOf()
  indexOf()数组中是否包含某个元素，有返回对应的索引，不包含就返回-1 ，不能检测包含NaN

let arr = [1,2,3,NaN,5]
console.log(arr.indexOf(2))// 1
console.log(arr.indexOf(6))// -1
console.log(arr.indexOf(NaN))// -1

• includes()
  includes() 检查数组中是否包含某个元素，返回一个bool类型，有就返回true，没有就返回false，可以检测数组中是否包含NaN

let arr = [1,2,3,NaN,5]
console.log(arr.includes(2))// true
console.log(arr.includes(6))// false
console.log(arr.includes(NaN))// true