[重学前端基础] Javascript之数组

前言

数组在业务中很常用，这篇写写在业务中经常涉及到的一些关于数组的技术点。

数组常用方法

学习数组考虑三个方面：是否改变自身、返回值、回调函数返回值

Es5:

改变数组自身：pop、push、shift、unshift、splice、sort、reverse

不改变数组自身：reduce、slice、indexOf...

reduce:

reduce回调函数中包含4个参数：累积值、当前值、当前索引、原数组；
回调函数返回的是当前循环的累积值；
函数返回的是总的结果；
当不提供初始值时，累积值会将数组第一个值当作值，当前值会将数组第二个值当作值。

应用场景：需要进行累积计算的场景

Es6:

不改变数组自身：includes、find、from、of...

find:
找到停止循环，回调函数返回true，find返回找到的值；找不到回调函数返回false，find返回undefined。

from:
将伪数组对象或可迭代对象转化成数组；
from有3个参数：想要转换成数组的伪数组对象或可迭代对象、每个元素会执行的回调函数（可选）、执行回调函数mapFn时this对象；
返回新数组。

可迭代对象(部署了Iterator接口的数据结构): Set、 Map...

伪数组: 有length属性的对象(arguments、{length: 3}...)。

数组的初始化

* var arr = []; arr.length = 8;
* new Array(8)
* Array(8)
* Array.from({length: 8})
* arr[8] = null

以上得到的新数组数组长度都为8

通过下标指定的数组，数组长度为9

数组／对象的遍历

for、for...of、for...in、forEach、map

for...in遍历数组：

数组索引数字会变为字符串

会遍历数组的私有属性

let arr = ['you','uu','tt']
arr.b = 'haha'
<!--for(let i=0; i<arr.length; i++) {-->
<!--    console.log(arr[i])-->
<!--}-->

for(let key in arr) {
    console.log(key,arr[key])
}

类数组转化成数组的两种方法

//Es5写法
Array.prototype.slice.call(arguments)
//Es6写法
Array.from(arguments)

数组特点

索引值不存在当前数组中的情况:

1、数组通过数字进行索引，直接通过指定索引设置数组值会改变数组长度。

2、索引可以是字符串，索引如果可以强制转化成十进制数字，那么就可以计算在数组长度中，否则不可以

let a = [];
a[1] = 2
a.length //2
a['foobar'] = 'youyi'
a.foobar //'youyi'
a.length//2

let b = []
b["14"] = 34
console.log(b.length) //15

数组相关题目练习

1、 {1:123, 2:231, 5:888} 转化为 [123, 231, null, null, 888, null, null, null]

function objectToArr(obj,len) {
 
 let arr = [];

 for(let key in obj) {
    arr[key-1] = obj[key]
 }

  if(len)  arr.length = len;
  arr = Array.from(arr, function(v, i) {return v || null})
  
   return arr
}

console.log(objectToArr({1:123, 2:231, 5:888}, 8))

//[123, 231, null, null, 888, null, null, null]

更聪明简洁的写法：

function objectToArr(obj,len) {
 
  return Array.from({length: len}, function(v, i) {
     return obj[i+1] || null
  })
}

console.log(objectToArr({1:123, 2:231, 5:888}, 8))

参考资料

js中更好的使用数组

几个关于js数组方法reduce的经典片段