【笔记】再学JavaScript ES(6-10)全版本语法——Array（遍历、转换、创建、查找）

---

一、数组遍历

const arr = [1, 2, 3, 4, 5]
arr.a = 6
/*
* 1.for 循环
*/
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

/*
* 2.forEach 循环
* *适用于全部遍历，不支持break和continue
*/
arr.forEach(function (item) {
  console.log(item)
})

/*
* 3.every 循环
* 默认return false， 因此默认只遍历第一个元素
*/
arr.every(function (item) {
  if (item === 2) {
    // 这里可以跳过对2的遍历
  } else {
    console.log(item)
  }
  return true
})

/*
* 4.for in 循环
* *会遍历自定义属性
*/
for (let index in arr) {
  console.log(index, arr[index])
}

/*
* 5.for of 循环
* *ES6新加，使用前可修改遍历机制
*/
for (let item of arr) {
  console.log(item)
}

==：值判断，
===：类型和值都判断

拓展：

• js数组遍历方法总结

二、伪数组转换为数组

1.什么是伪数组

伪数组定义

• 具有length属性
• 按索引方式存储数据
• 不具有数组的方法

常见的伪数组

arguments、NodeList、HTMLCollection、Jquery对象…

getElementsByName()和getElementsByTagName()都返回NodeList对象，而类似document.images和document.forms的属性为HTMLCollection对象。

{0:‘a’, 1:‘b’, length:2}、{length:2}——这也算伪数组

伪数组判断

《javascript权威指南》上给出了代码用来判断一个对象是否属于“类数组”。如下：

function isArrayLike(o) {   
  if (o &&                              // o is not null, undefined, etc.
    typeof o === 'object' &&            // o is an object
    isFinite(o.length) &&               // o.length is a finite number
    o.length >= 0 &&                    // o.length is non-negative
    o.length===Math.floor(o.length) &&  // o.length is an integer
    o.length < 4294967296)              // o.length < 2^32
    return true;                        // Then o is array-like
  else
    return false;                       // Otherwise it is not
}

2.ES5的做法

let args = [].slice.call(arguments) // collection, 相当于Array.prototype.slice.call()
let imgs = [].slice.call(document.querySelectorAll('img')) // NodeList

Array.prototype：数组原型对象

3.ES6新增的做法

let args = Array.from(arguments) // collection
let imgs = Array.from(document.querySelectorAll('img')) // NodeList

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike：被转换的的对象。
• mapFn：map函数。
• thisArg：map函数中this指向的对象。

指定长度并初始化赋值为1：

let array = Array.from({ length: 5 }, function () { return 1 })
console.log(array)

三、创建一个新数组

Array.fill(value, start, end)

• value：填充值。
• start：填充起始位置，可以省略。
• end：填充结束位置，可以省略，实际结束位置是end-1。

let array1 = Array(5) // (5)[empty × 5]
let array2 = [1, 2] // (2)[1, 2]
let array3 = Array.from({ length: 5 }) // (5)[undefined, undefined, undefined, undefined, undefined]
let array4 = Array.of(3, 4) // (2)[3, 4]
let array5 = Array(5).fill(6, 1, 3) // (5)[empty, 6, 6, empty × 2]
console.log(array1, array2, array3, array4, array5)

四、查找元素

let array = [1, 2, 3, 4, 5]
/*
* Array.filter
* 以一个数组的形式返回所有符合条件的元素
* 关注有哪些时使用
*/
let find1 = array.filter(function (item) {
  return item % 2 === 0
})
console.log('find1', find1) // [2, 4]

/*
* Array.find
* 返回第一个符合条件的元素
* 关注有没有时使用
*/
let find2 = array.find(function (item) {
  return item % 2 === 0
})
console.log('find2', find2) // 2

/*
* Array.findIndex
* 返回第一个符合条件的元素的索引
*/
let find3 = array.findIndex(function (item) {
  return item % 2 === 0
})
console.log('find3', find3) // 1

/*
* Array.indexOf
* 返回第一个符合条件的元素的索引
*/
let find4 = array.indexOf(3)
console.log('find4', find4) // 2

/*
* Array.includes
* 返回第一个符合条件的元素的索引
*/
let find5 = array.includes(3)
console.log('find5', find5) // false

拓展：

• Javascript 10种遍历方法
• JavaScript 数组遍历方法的对比
• js数组查找元素常用方法总结