转载

细说JS数组

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

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

好了,正文从下面开始~

数组的基本概念

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

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

JS数组有什么特点

  • JS数组是无类型的:数组元素可以是任意类型,同一个数组中的元素也可能有不同类型;

  • JS数组是动态的:可根据需要增长或缩减;

  • JS数组可能是稀疏的:数组元素的索引不一定是连续的。

稀疏数组

  • 稀疏数组length属性值大于元素的个数

  • 创建稀疏数组的两种方法:

  1. 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
    正文到此结束
    Loading...