转载

细说JS数组

此乃犀牛书(第七章数组)读书笔记。

灵活运用数组的各种方法是基本功，是基本功，是基本功，重要的事情说三遍。

好了，正文从下面开始~

数组的基本概念

什么是数组，数组元素，数组索引

对象是属性的无序集合，数组是值的有序集合；每个值叫做一个元素，每个元素在数组中的位置称为索引；

JS数组有什么特点

JS数组是无类型的：数组元素可以是任意类型，同一个数组中的元素也可能有不同类型；
JS数组是动态的：可根据需要增长或缩减；
JS数组可能是稀疏的：数组元素的索引不一定是连续的。

稀疏数组

稀疏数组length属性值大于元素的个数
创建稀疏数组的两种方法：

a= []; a[1000] =1

var a = [1,2,3,4,5,6]; delete a[0];

数组对象和普通对象的联系和区别？

数组是特殊的对象，使用[]访问数组元素就像使用[]访问对象属性一样(索引就是属性名)
数组的特别之处在于，当使用小于2的32次方的非负整数作为属性名时数组会自动维持其length属性值，length属性使得数组区别于常规JS对象。

当为数组元素赋值时，索引i大于或等于length,length属性变为i+1；

当设置数组length属性小于当前数组长度时，大于的部分将被删除；

也可以设置数组的length属性大于当前数组长度，这时后面会创建空区域；

可以使用Object.defineProperty（）将数组length属性设置为只读的。

如何判断一个对象是数组对象？

ES5提供了一个方法：
```
Array.isArray(a)    //true or false
```
还可以检查对象的类属性（class）

Object.prototype.toString.call(a) == '[object array]'//这里需要使用Object的toString方法，因为Array的toString方法被重写了。

这里要注意：使用instanceof判断数组对象是不靠谱滴。这是因为当多个窗体时，检测会失败。

类数组对象

类数组对象：拥有length属性，属性是非负整数的对象
数组方法在类数组对象上也能work, 类数组对象不能直接调用数组的方法，但可以间接调用
常见的类数组对象：arguments对象、一些DOM方法的返回

数组的操作（创建、读写、添加、删除、遍历）及方法

下面用按照ES标准用一张图来总结一下数组的方法：

细说JS数组

画完图的我表示吓了一跳。ES6竟然提供了这么多新的方法。看来使用的是相当不充分。以后要考虑少用underscore了。。。

每个方法可能可以实现不止一种功能，按照功能分，这张图又可以变成下面这个样子：

细说JS数组下面对照两张图里面的部分知识点，进行详细说明和demo演示。

创建数组

有三种方法：

数组直接量

var a = [1, true,'hi'];
var b = [,,]  //undefined*2

new + Array

var a = new Array()
var b = new Array(10)
var c = new Array(1,2)

Array.of()

Array.of(1,2,3)  //[1,2,3]

数组元素的读写

[]

使用'[]'访问数组元素时，js将索引转换为字符串，然后将其作为属性名一样使用。

//注意使用负整数和浮点数作为索引时：
a[-123]   //同a['-123']
a[1.000]  //同a[1]

数组元素的添加和删除

为数组添加元素：

var a = [];
a[1] = 1; 
a.push(1)
a.unshift(1)  //以上都使得a变成了[1]

删除数组元素

删除数组元素不改变数组的length，也不会让其他数组元素索引发生改变，会让数组变为稀疏数组。

数组元素的遍历

for循环遍历

使用for循环遍历数组时可以有哪些优化点？

首先，如果数组不是稠密的，应该加判断排除null, undefined和不存在的元素，以避免多余循环；

其次，数组长度应该先求出来，而非每次循环都去查询长度；

上图每个方法都可以写个小demo。这里针对部分函数做些demo:

reverse(), join()

var a = [1,2,3];
a.reverse() //  [3,2,1]
var b = a.join() //'3,2,1'

sort()

var a= [33,4,1111,222]
a.sort()  //[1111,222,33,4]
a.sort((a,b)=>{
  return a-b  //<0  第一个参数应该在前
}) //[4,33,222,1111]

concat()

var a = [1,2,3]
var b = a.concat(4,5) //a不变，返回[1,2,3,4,5]

concat只拼接第一层

splice()

splice既能删除元素，也能插入元素，取决于有咩有第三个参数

splice是修改数组本身的，但是slice方法是不修改数组本身的。

var a = [1,2,3,4,5,6]
a.splice(4)   //a: [1,2,3,4]
a.splice(2,1) //[1,2,4]
a.splice(2,1,3)  //[1,2,3]

ES5数组的方法

ES5数组方法的特点：

第一个参数是函数，对数组的每个元素调用一次该函数
如果是稀疏数组，对不存在的元素不调用传递的函数(wow)
不修改原始数组

forEach

forEach 不能break ，想break 需要try catch

forEach不修改原始数组，想修改，可以借助第三个参数

var data = [1,2,3,4,5,6]
data.forEach((ele, index, dd)=>{
  dd[index] = ele + 1
})
//data: [2,3,4,5,6,7]

map 通常都需要一个return:

var b = a.map(function(ele){return ele+1})

未完待续~

原文 https://segmentfault.com/a/1190000008211717

正文到此结束

所属分类：编程技术

本文标签： CEO 删除 UI http map core cat src 总结 js 参数 IO https DOM Property 遍历 1111
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二