时间戳

首页 > 技术文章 > 数组操作

数组操作

fanshaokun 2017-05-24 13:52 原文

一、创建数组

使用 new 操作符调用构造函数

var arr = new Array(20)				// 创建了一个包含20项的数组
var arr = new Array('a', 'b', 'c')	// 创建了包含字符串 a b c 的三项数组

省略 new 操作符

var arr = Array(20)
var arr = Array('a', 'b', 'c')

数组字面量

var arr = []
var arr = ['a', 'b', 'c']

【ES6】、Array.of()

  • 描述：

用于创建数组，用法和 new Array() 一样。弥补 Array() 构造函数的不足（即参数不同，行为不同），Array.of() 的行为始终一致，将传入的值作为数组的项，产生数组

  • 参数：任意数量任意值
  • 返回值：创建的数组

【ES6】、Array.from(obj, func, context)

  • 描述：用于将 类数组对象(拥有length属性的对象) 和 可遍历对象(部署iterable接口的对象，包括 Set/Map) 转为真正的数组
  • 参数：
    • {Object} obj 要转为数组的对象
    • {Function} func 一个函数，功能类似于数组的map方法，对每一个对象属性执行该函数，并返回由该函数的返回值组成的数组
    • {Object} context 第二个函数参数的执行环境(this指向)
  • 返回值：生成的数组

二、数组检测

使用 instanceof 操作符

if(value instanceof Array){
    // 对数组执行某些操作
}

使用 Array.isArray() 方法

if(Array.isArray(value)){
    // 对数组执行某些操作
}

使用 Object.prototype.toString.call()

if(Object.prototype.toString.call(obj) === '[object Array]'){
    // 对数组执行某些操作
}

三、数组方法

转换方法

toLocalString()
toString()
valueOf()
join()

栈/队列 方法

push()
  • 描述：向数组的尾部追加项，并返回数组长度
  • 参数：n多个值，会依次推入数组尾部
  • 返回值：
    • {Number} 数组长度
  • 是否改变原数组：是
pop()
  • 描述：移除数组最后一项，并返回该项
  • 参数：无
  • 返回值：返回移除项
  • 是否改变原数组：是
shift()
  • 描述：移除数组第一项，并返回该项
  • 参数：无
  • 返回值：返回移除项
  • 是否改变原数组：是
unshift()
  • 描述：在数组最前端添加项，并返回数组长度
  • 参数：n多个值，会依次添加到数组前端
  • 返回值：
    • {Number} 数组长度
  • 是否改变原数组：是

排序方法

reverse()
  • 描述：反转数组项的顺序
  • 参数：无
  • 返回值：修改后的数组
  • 是否改变原数组：是
sort()
  • 描述：对数组进行排序，默认情况下，按照升序排序，sort方法调用每个数组项的 toString() 方法，进行字符串比较
  • 参数：【可选】函数 
    1、如果第一个参数 应该位于 第二个参数 之前 返回一个负数
2、如果第一个参数 应该位于 第二个参数 之后 返回一个正数
3、并列返回0
  • 返回值：排序后的数组
  • 是否改变原数组：是

####操作方法

concat()
  • 描述：基于当前数组的所有项创建一个新数组
  • 参数：【可选】任意数量的任意值
  • 返回值：返回新数组
  • 是否改变原数组：否
slice()
  • 描述：基于当前数组一或多个项创建新数组（截取数组片段）
  • 参数：接收一或两个参数，分别是返回项的起始和结束位置
  • 返回值： 
        1、只传起始位置（即一个参数）
        返回：从起始位置到数组末尾的项组成的数组
    2、传递两个参数
        返回：从起始位置到结束位置(不包含结束位置)的项组成的数组
    3、传递负数
        返回：会用数组长度加上该负数来确定相应的位置，并按照1、2的规则返回新数组
    4、起始位置大于结束位置
        返回：空数组
  • 是否改变原数组：否
splice()
  • 描述：对数组的项进行 删除、插入、替换 等操作，功能十分强大
  • 参数： 
    第一个参数：要删除的第一项的位置
第二个参数：要删除的项数
第三个参数（第四个、第五个......）：插入的项
  • 返回值：由删除的项组成的数组
  • 是否改变原数组：是
【ES6】copyWithin()
  • 描述：在数组内部，将指定位置的成员拷贝到其他位置（会覆盖原有成员）
  • 参数： 
    第一个参数：要拷贝的目标位置(target)
第二个参数：从该位置读取数据，默认是0，负值表示倒数
第三个参数：读取到该位置结束，默认是 数组的长度，不包含该位置，负值表示倒数
  • 返回值：修改后的数组
  • 是否改变原数组：是
【ES6】fill()
  • 描述：使用给定值，填充数组
  • 参数： 
    第一个参数：填充的值
第二个参数：填充的起始位置
第三个参数：填充的结束位置(不包含该位置)
  • 返回值：（待测）
  • 是否改变原数组：是

查找/位置方法

indexOf()
lastIndexOf()
  • 描述：在数组中查找某一项的位置 indexOf() 从前往后查找， lastIndexOf() 从后往前查找
  • 参数： 
    第一个参数：要查找的项
第二个参数：查找起点位置索引
  • 返回值：返回查找项在数组中的位置，未找到返回-1

注意：在查找过程中使用全等操作符(===)

【ES6】find()
  • 描述：用于找到第一个符合条件的数组成员
  • 参数：一个函数，函数的参数：1、项。2、项的索引。3、数组对象本身
  • 返回值：如果有符合添加的项，返回该项的值，如果没有找到符合条件的项，返回 undefined
【ES6】findIndex()
  • 描述：与find()方法功能一样，唯一不同的是，返回的是项的位置，未找到返回 -1
【ES7】includes()
  • 描述：查找数组中是否包含给定值
  • 参数： 
    第一个参数：要查找的值
第二个参数：查找的起始位置，默认是0，负数表示倒数，查出范围会重置为0
  • 返回值：true 包含， false 不包含

includes 相比于 indexOf 的优势有两点：1、更加语义化，不需要判断返回值是否为 -1。2、由于 indexOf 底层在判断是否相等时使用的是全等操作符 ===，这会导致使用 indexOf 查找 NaN 时查不到，而 includes 则不存在这样的问题

迭代方法

forEach()
every()
some()
filter()
map()
    描述：迭代数组，对数组的每一项执行给定函数
    参数：第一个参数：函数
                函数接收三个参数
                    1、数组的项
                    2、该项在数组中的位置
                    3、数组对象本身
            第二个参数：第一个参数的执行环境(this指向)
    返回值：
        forEach() 无返回值
        every() 对数组运行给定函数，如果该函数对每一项都返回true，则返回true
        some() 对数组运行给定函数，如果该函数对任意一项返回true，则返回true
        filter() 对数组执行给定函数，返回该函数返回true的项组成的数组
        map() 对数组执行给定函数，返回每次函数调用结果组成的数组
【ES6】entries()，keys()和values()
  • 描述：entries()，keys() 和 values() 都用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用 for...of 循环进行遍历，唯一的区别是 keys() 是对键名的遍历、values() 是对键值的遍历，entries() 是对键值对的遍历。

归并方法

reduce()
reduceRight()
  • 描述：迭代数组的所有项，构建一个最终的返回值
  • 参数： 
    第一个参数：函数，函数接收的参数：
    1、前一项(pre)
    2、当前项(cur)
    3、当前项的索引(index)
    4、数组对象本身(array)
第二个参数：归并的初始值
  • 返回值：迭代的最终值

注意：第一次迭代的时候，pre是数组的第一项，cur是数组的第二项，reduce() 和 reduceRight() 除了迭代方向不一致外，其他完全相同

推荐阅读