JavaScript基础:数组

初始化数组

//Array.of() 返回参数值组成的数组。如果没有参数，就返回一个空数组
let arr = Array.of(1,2,3,4,5) // [1,2,3,4,5]
Array.of()  // []
let arr1 = Array(5).fill(1) // [1,1,1,1,1]

// 替换值 Array.fill(value, start, end)
[1,2,3,4,5].fill(8, 1, 2)  // [1, 8, 3, 4, 5]

检测数组

Array.isArray([]);   // true
Array.isArray(undefined); //false

// 检测对象的原型链是否指向构造函数的prototype对象
let arr = Array.of(1)
arr instanceof Array;  // true
arr.constructor === Array // true

if(!Array.isArray) {
  Array.isArray =function(arg){
    return Object.prototype.toString.call(arg) ==='[object Array]'; 
  }
}

伪数组

伪数组特点
伪数组是一个对象; 有length属性;其它属性（索引）为非负整数;无法调用数组的方法.
如: 函数中arguments代表的实参,document.getElementsByTagName/querySelectorAll的元素标签集合都是典型的伪数组
如何将伪数组转换成数组?
伪数组转换数组条件:

• 该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组
• 该类数组对象的属性名必须为数值型或字符串型的数字
  Array.from()更多介绍

// es5
[].slice.call(arguments) | Array.prototype.slice.call(arguments)
// es6
let arrayLike = {
    0: 'aley', 
    1: '18',
    2: ['a','b'],
    'length': 3
}
Array.from(arrayLike) //  ['aley', '18', ['a', 'b']]
Array.from(arrayLike, mapFn, thisArg)
// 初始化长度为5的数组
let arr = Array.from({length: 5}, () => {
   return 1
})
console.log(arr) // [1,1,1,1,1]

数组常用方法

数组遍历

• for循环(es5) 支持continue,break

• array.forEach(callback) 不支持continue,break

  let arr = [1,2,3,4,5]
  // callback定义如下： element:当前元素值；index：当前元素下标； array:当前数组
  arr.forEach((element, index, array) => {
   if (element === 2) {
     // 测试不通过
     return false
    }
    console.log(element)
  })
  

• for…in…
  针对对象而设计,虽然能遍历数组,但有瑕疵

  let arr = [1]
  arr.a = 8
  for (item in arr) {
    console.log(item, arr[item]) // 0,1  a,8
  }
  

• for…of… (es6新增)
  能够遍历自定义数据结构,不单单是遍历数组,对象

   let obj = {name: 'aley', age: '18'}
   // Object.entries() 可以把一个对象的键值以数组的形式遍历出来
   for (let [key, val] of Object.entries(obj)) {
     console.log(key, value)  // name aley , age 18
   }
  

• array.every(callback)
  不支持 continue/break,但回调函数 默认返回 return false 相当于 break 终止循环体
  检测数组中的每一个元素是否都通过了callback测试，全部通过返回true，否则返回false。

  let arr = [1,2,3,4,5]
  // callback定义如下： element:当前元素值；index：当前元素下标； array:当前数组
  let d =  arr.every((element, index, array) => {
   // callback函数必须返回true或者false告知every是否通过测试
    if (element === 2) {
      // 测试不通过,退出循环
      return false
    }
    console.log(element) // 1
  })
  console.log(d) // false
  

• array.some(callback)
  检测数组中是否包含可以通过测试的元素，与every不同的是，这里只要某一个元素通过测试，即返回true

    // callback定义如下： element:当前元素值；index：当前元素下标； array:当前数组
  [2, 2, 0, 9, 4].some(element=> element> 8); //  true
  

• array.map(callback)
  创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
  注意：如果没有return值，则新数组会插入一个undefined值!! array.map由于不具有过滤的功能，因此array调用map函数时，如果array中的数据并不是每一个都会return，则必须先filter，然后再map，即map调用时必须是对数组中的每一个元素都有效

  const result =[1, 4, 9].map(Math.sqrt) // [1,2,3]
  

• flatMap(callback(element[, index[, array]])[, thisArg])

  flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

  let arr1 = ["it's Sunny in", "", "California"];
  arr1.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]]
  arr1.flatMap(x => x.split(" "))// ["it's","Sunny","in", "", "California"]
  

• arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  reduce() 方法对数组中的每个元素执行reducer函数(升序执行)，将其结果汇总为单个返回值。

  // reducer 函数接收4个参数: accumulator (acc) (累计器) / currentValue (cur) (当前值)
  // currentIndex (idx) (当前索引) / sourceArray (src) (源数组)
  // 初始化时，如果initialValue有值，则accumulator初始化的值为initialValue，整个循环从第一个元素开始；initialValue无值，则accumulator初始化的 值为数组第一个元素的值
  const array1 = [1, 2, 3, 4];
  const reducer = (accumulator, currentValue) => accumulator + currentValue;
  
  // 1 + 2 + 3 + 4
  console.log(array1.reduce(reducer)); // 10
  console.log(array1.reduce(reducer, 20)) // 30
  

• arr.filter(callback(element[, index[, array]])[, thisArg])
  filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

  const  filtered = [12, 5, 8, 130, 44].filter(item => item > 11);  // [12, 130, 44] 
  

数组查找

• arr.includes(searchElement[, fromIndex])
  includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

  [1, 2, 3].includes(2, 2);   // false
  

• arr.find(callback[, thisArg])
  find() 方法返回数组中满足提供的测试函数的第一个元素的值, 否则返回 undefined

  const finded = [0, 1, 3, 8].find(element => element > 1);   // 3
  

• arr.findIndex(callback[, thisArg])
  findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1

  const index = [0, 1, 3, 8].findIndex(element => element > 1);   // index 2
  

• arr.lastIndexOf /indexOf(searchElement[, fromIndex])
  indexOf() 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。从数组的前面往后查找，从 fromIndex 处开始
  lastIndexOf() 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

  [2, 9, 7, 8, 9].indexOf(9);// 1
  [2, 9, 7, 8, 9].lastIndexOf(9);// 4
  

其它方法

方法	描述
arr.concat(arr1, arr2,…arrN)	合并多个数组，返回合并后的新数组，原数组没有变化)
arr.join(sep=’,’)	通过sep连接成字符串，并返回该字符串，sep默认为","
arr.pop()	删除并返回最后一个元素，原数组的最后一个元素被删除, 数组为空返回undefined
arr.shift()	删除并返回第一个元素，原数组的第一个元素被删除。数组为空返回undefined
arr.push()	添加一个或多个元素至数组的末尾，并返回新数组的长度
arr.unshift()	添加一个或多个元素至数组的首部，并返回新数组的长度
arr.fill(value[, start[, end]])	用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
arr.slice(begin, end)	返回一个包含从begin 到 end(不包含end)索引位置的所有元素的新数组
arr.splice(start[, delCou, item1, item2, …])	通过删除现有元素或添加新元素来更改一个数组的内容,返回值是由被删除的元素组成的一个数组, start:指定修改的开始位置；delCou：从 start位置开始要删除的元素个数；item:要添加进数组的元素,从start 位置开始
arr.sort([compareFunction])	用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的, [1, 8, 5].sort((a, b) => { return a-b; // 从小到大排序}); // [1, 5, 8]
arr.flat([depth])	按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回,depth: 指定要提取嵌套数组的结构深度，默认值为 1
更多…