重学ES6：数组及其新方法

Posted 2021-03-12 xzweb

数组的遍历

1.传统for循环

2.forEach方法，不支持break和continue

const arr = [1, 2, 3, 4, 5]

arr.forEach(function (item) {
  console.log(item)
})

3.every方法，可以做到 break 那样的效果，return false 等同于 break，return true 等同于 continue

const arr = [1, 2, 3, 4, 5]
// every 默认return false（即遍历一项后跳出），要一直遍历需要加 return true
// return false 等同于 break，return true 等同于 continue
arr.every(function (item) {
  if (item === 2) {
    return false
  }
  console.log(item)
  return true
}) // 1 3 4 5

4.for…in可以遍历数组，而且还支持 continue、break等功能，但是会遍历出自定义属性，更适合用于对象的遍历

　const arr = [1, 2, 3, 4, 5]

// for in 主要为object进行遍历
// for in 为数组遍历时，如果有自定义属性，会遍历出自定义属性
// for in 支持break和continue
// arr.a = 100 遍历后会有 a 100
for (let index in arr) { 
  console.log(index, arr[index])
} 

5. for…of可遍历一切可遍历的数据结构

　const arr = [1, 2, 3, 4, 5]

// for of (ES6新增)
// for…of 遍历的是一切可遍历的元素（数组、对象、集合）等
for (let item of arr) {
  console.log(item)
}

 

伪数组（Array-Like）

函数中的 arguments、DOM中的 NodeList等，当然，还有一些可遍历的对象，看上去都像数组却不能直接使用数组的 API，它们是伪数组（Array-Like）。要想对这些对象使用数组的 API 就要想办法把它们转化为数组。

1.伪数组具备两个特征：

（1）按索引方式储存数据

（2）具有length属性

let arrLike = {
0: ‘a‘,
1: ‘b‘,
2: ‘c‘
}

2.ES5    arrayLike ---> array  通常使用[].slice.call

// ES5
let args = [].slice.call(arguments) // collection
let imgs = [].slice.call(document.querySelectorAll(‘img‘)) // NodeList

3.ES6    arrayLike ---> array  通常使用Array.from

// ES6
let args = Array.from(arguments)
let imgs = Array.from(document.querySelectorAll(‘img‘))

 

创建数组

1.Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

//只填写一个参数时Array.of()创建一个具有单个元素的包含该元素的数组
Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

//只填写一个参数时Array()创建长度为参数的空数组
Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

2.Array.fill() 填充数组，用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

// Array.fill() 填充数组
let array = Array(5).fill(9)
console.log(array) // [9, 9, 9, 9, 9]

// Array.fill(value,start,end)
// value用来填充数组元素的值，start起始索引，end终止索引
// fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
let array = [0, 11, 22, 33, 44, 55, 66, 77]
console.log(array.fill(‘replace‘, 1, 4)) // [0, "replace", "replace", "replace", 44, 55, 66, 77]

 

数组元素查找

1.ES5   filter()方法,返回符合测试函数的数据组成的数组,否则返回空数组

// ES5
let array = [0, 11, 22, 33, 44, 55, 66, 77]
// filter()方法,返回符合测试函数的数据组成的数组,否则返回空数组
// filter()方法会找出所有符合测试函数的数据组成数组返回，用于验证数据是否存在时效率低
let find = array.filter(function (item) {
    return item === 44
})
console.log(find) // [44]

2.ES6 find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

// ES6
let array = [0, 11, 22, 33, 44, 55, 66, 77]
// find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined
// find() 用于验证数据是否存在时效率高
let find = array.find(function (item) {
  return item === 22
})
console.log(find) // 22

3. ES6 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。
let array = [0, 11, 22, 33, 44, 55, 66, 77]
let findex = array.findIndex(function (item) {
  return item === 22
})
console.log(findex) // 2

4. filter()，find()，findIndex()比较

 filter()用于找出所有匹配的元素的数据

 find()主要用于验证元素是否存在

 findIndex()找出数组中满足提供的测试函数的第一个元素的索引