1-4 数组的扩展方法

大家好，今天我们来学习一下数组的扩展方法，首先我们要搞清楚什么是类数组，什么是伪数组 从字面意义上来看，并不是真正意义上的数组

let divs = document.getElementsByTagName('div')
console.log(divs)  // HTMLCollection

let divs2 = document.getElementsByClassName('xx')
console.log(div2)  // HTMLCollection

let div3 = document.querySelectorAll('.xx')
console.log(div3)  // NodeList
// 我们来验证他是不是一个数组

console.log(div3 instanceof Array)   // false

我们使用数组的方法看一下
div3.push(123)  // 报错

• 因为push 这个方法是array下面的，虽然说我们拿到的参数也有长度，也可以循环遍历，但是他们并不是真正意义上的数组，我们可以把这种情况叫做类数组，或者伪数组，这样的数组并不具有数组的方法

那我们怎么把伪数组转成数组呢

在ES5 可以使用slice方法把一个伪数组转化成一个真正的数组

let arr = Array.prototype.slice.call(div3)
cosnole.log(arr)  // []
arr.push(123)
console.log(arr)  // [123]

function foo(){
  console.log(arguments)
  console.log(arguments instanceof Array) // fasle
}
foo(1, 'xiaobai', true)

在 ES6 里面有什么现成的方法可以直接转换吗？

Array.form

let arrayList = {
  0: 'es6',
  1: 'es7',
  2: 'es8',
  length: 3
}
let arr = Array.form(arrayList)
console.log(arr)  // ['es6', 'es7', 'es8']
// 通过下标也可以拿到对应的值
console.log(arr[0])  // es6
// 使用数组的方法添加一个新的值
arr.push('es9')
console.log(arr)  // ['es6', 'es7', 'es8', 'es9']

• 我们可以看到 Array.form() 方法是可以直接转化伪数组成一个真正的数组的

Array.of

可以用于数组初始化的时候进行使用

let arr = new Array(1, 2)
console.log(arr) // [1, 2] length: 2

let arr = new Array(3)
console.log(arr) // [empty x 3]   length: 3

// Array.of
let arr = Array.of(1, 2)
console.log(arr) // [1, 2] length: 2

let arr = Array.of(3)
console.log(arr) // [3]   length: 1

// 假设我们有很多类型的数据，使用Array.of 可以嘛
let arr = Array.of(1, true, [1,2,3], 'xiaobai')
console.log(arr) // [1, true, [1,2,3], 'xiaobai']

copyWithin

对于元素的替换、 第一个参数表示从第几个开始，第二个参数表示从哪个结束

let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1, 3)) // [1, 4, 5, 4, 5]

fill 填充

let arr = new Array(3).fill(7)
console.log(arr) // [7, 7, 7]
// 数组开始的位置
// 开始的位置
// 结束的位置
let arr2 = [1, 2, 3, 4, 5]
arr2.fill('xiaobai', 1, 3)
console.log(arr2) // [1, 'xiaobai', 'xiaobai', 4, 5]

includes

检测数组里面是否包括某个目标元素

let arr = [1, 2, 3, NaN]
console.log(arr.indexOf(2))  // 1
console.log(arr.indexOf(6))  // -1
// 使用indexOf不能显示NaN
console.log(arr.indexOf(NaN))  // -1

console.log(arr.includes(2)) // true
console.log(arr.includes(6)) //false
console.log(arr.includes(NaN)) // true

• indexOf跟includes都是检查数组里面是否包含目标元素
• indexOf 会返回目标元素的索引，如果不包含就返回一个-1
• includes 会返回一个布尔类型的值
• indexOf 不能显示是否包含NaN，includes 是可以的