JavaScript(ES6-10)语法详解 —— ES6基础知识【数组】

ES5中数组有多少种遍历的方法

JS中遍历的方法

• for (针对于数组遍历)- 写法繁琐，但支持break和continue
• forEach (针对于数组遍历)- 写法简洁，但不支持break和continue
• every (针对于数组遍历)- 向下遍历时需要返回true，若不返回true则相当于break【故可以支持break和continue的概念】
• for-in (针对于对象遍历)- 由于数组也是对象，故若无故给数组了对应的属性值，则也会通过for-in遍历出来。且for-in是可以使用break和continue的，但是for-in的index是string类型
• 实例代码

let array = [1, 2, 3, 4, 5]
// for 循环
for (let i = 0; i < array.length; i++) {
  console.log(array[i])
}
// forEach循环
array.forEach((item) => console.log(item))
// every循环
array.forEach((item) => {
  console.log(item)
  return true
})
// for in 循环
// for in 主要用于遍历对象
// 之所以可以遍历数组是因为数组也是对象的一种,数组也是可遍历的
// 因为数组也是对象,故我们通过属性赋值的方式也是可以通过for in 遍历的
array.name = 'Jack'
for (let index in array) {
  console.log(index, array[index])
  // 输出结果
  // 0 1  1 2  2 3  3 4  4 5  name Jack
}

ES6中数组有多少种遍历的方法

• for-of (可以遍历数组/对象/其他自定义数据结构) - 直接输出item内容，且不会遍历出数组的属性
• 实例代码

// for of 循环
for (let item of array) {
  console.log(item)
}

// 自定义数据结构遍历
const Price = {
  A: [1.5, 2.3, 4.5],
  B: [3, 4, 5],
  C: [0.5, 0.8, 1.2]
}
// 使用for-in遍历就需要对结果值取最小值才能实现获得每组数组的最小值
for (let key in Price) {
  console.log(key, Price[key])
  // 输出
  //   A [1.5, 2.3, 4.5]
  //   B [3, 4, 5]
  //   C [0.5, 0.8, 1.2]
}

Array.from（如何将伪数组转换成数组）

什么是伪数组

• 伪数组是具有数组的特性但不能直接调用数组的方法，如arguments不具有slice方法等等
• 当对象按照索引方式存储数据;具备length属性时这个对象就是伪数组 -> 即 {0: ‘a’, 1: ‘b’, length:2}

ES5将伪数组转换成数组

function test1 () {
  // arguments是collection, 注意: ES6已经废弃arguments
  let args = [].slice.call(arguments) // ES5: 实现arguments到数组的转换
  // 同理可以使用 let imgs = [].slice.call(document.querySelectorAll('img')) querySelectorAll结果是一个NodeList
}

• 使用[].slice.call(伪数组)

ES6将伪数组转换成数组

function test2 () {
  // arguments是collection, 注意: ES6已经废弃arguments
  let args = Array.from(arguments)
  // 同理可以使用 let imgs = Array.from(document.querySelectorAll('img'))
}
// 将collection和NodeList转换后可以成为数组,即可以使用对应数组的方法了

• 使用Array.from(伪数组)

实际Array.from的参数与应用举例

// Array.from(伪数组arrayLike, 遍历的函数mapFn, 接受的this对象thisArg)
// 使用Array.from初始化长度为5,每个值都为1的数组
let array = Array.from({ length: 5 }, () => 1)
console.log(array) // [1, 1, 1, 1, 1]

Array.of-fill

ES5创建新数组的方法

// ES5
let array1 = Array(5) // 生成长度为5,每个元素为empty的数组
let array2 = [] // 使用自变量对象,只有指定元素才能指定长度

• 使用Array(length)或[]定义

ES6创建新数组的方法

• Array.from(...)
• Array.of(...)
• Array.fill(...)

let array3 = Array.from({ length: 5 })
// Array.prototype.of 将多个数据放到数组中
let array4 = Array.of(1, 2, 3, 4, 5) // 参数是不定项的
console.log(array4) // [1,2,3,4,5]
// Array.prototype.fill 填充所有数组值
// 语法: Array.fill(value, 开始下标start[有默认值0], 结束下标end[有默认值length-1])
// Array.fill通常用于批量填充/替换数组值
let array5 = Array(5).fill(7)
console.log(array5) // [7, 7, 7, 7, 7]

Find & FindIndex（如何查找数组）

// 查找一个元素
let array = [1, 2, 3, 4, 5]
// ES5
// 找为3的元素

// Array.prototype.filter:满足条件的所有元素返回
// filter的弊端是: 如果只是想知道一个元素是否存在,数组中元素很多时即不适用
// 注意: filter会返回满足条件的所有值
let find1 = array.filter((item) => item === 3)
console.log(find1) // [3]

// ES6
// Array.prototype.find:数组中是否存在2,返回数组中满足条件的第一个数据,若存在则直接返回数据,若不存在则返回undefined
// 注意: find只会返回满足条件的第一个值
let find2 = array.find((item) => item === 3)
console.log(find2) // 3 - 满足条件的第一个值

// Array.prototype.findIndex: 返回数组中满足条件的第一个元素的下标
let find3 = array.findIndex((item) => item === 3)
console.log(find3) // 2 - 满足条件的第一个元素的下标

ES5的数组查找API

• filter - 返回满足条件的所有元素【数组】

ES6的数组查找API

• find - 返回数组中满足条件的第一个元素
• findIndex - 返回数组中满足条件的第一个元素的下标