JavaScript中的Array对象

本文参考javascript.ruanyifeng.com 和 (JavaScript高级程序设计(第三版)) 所整理的笔记, 不足之处请指正!

JavaScript中的Array用于构造数组的全局, 它是一个类似于列表的对象.

构造函数

Array构造函数时， 当参数为一个正整数时， 返回新数组的长度， 数组元素为取值为undefined，但无法取到键名
参数为多个时， 返回新数组的成员
复合类型使用new+构造函数和直接使用构造函数功能一致， 按原始类型不一致
原始类型使用new+构造函数返回的是对象， 直接使用构造函数返回的是相应的构造函数
建议使用方括号符产生数组
利用构造函数创建数组如下:

var arr = new Array(1, 2, 3)    // [1, 2, 3]

属性

Array.length 返回或设置数组中的元素个数

console.log(arr.length)     //3

length的值位动态值, 等于键名(索引)中最大的整数+1(重要), 这意味着length不一定准确.

即数组中有效元素(number类型)的最大索引值+1

当length>数组元素时, 换产生空位, 空位取值为undefined(注意是取值, 并不是空位就是undefined)

arr.length = 4
console.log(arr.length)     //4
console.log(arr[3])         //undefined
//承接上面的
arr[6] = 4                  //产生arr[5], arr[6]
console.log(arr[4])         //undefined(产生空位取值)
console.log(arr[5])         //4, 因为这个位置赋值为4时number类型所以arr[6]就是4
console.log(arr.length)     //6, length值为有效数组元素的最大索引值+1, 这里最大索引值为5

当我们给数组添加属性时也成立, 因为数组就是对象, 但是注意length的值

//arr 为[1, 2, 3]
arr.name = 'array'
arr.length  //3, length值并没有改变

提示: 下文会用到arr对象

Array本身的方法

Array.isArray() 用于确定传递的值是否是Array

Array.isArray(arr)          //true, arr为前文的数组对象

Array.from()从一个类似数组或可迭代对象中创建一个新的数组实例, 这个方法的用法比较复杂, 这里只使用简单的例子

Array.from(arr)     //[1, 2, 3]

详情点击这里看Array.from()的具体用法

Array.prototype 是数组的原型，它等于对象的__proto__属性(注意这个属性不是ES标准中的)

arr.__proto__ === Array.prototype   //返回true

栈方法: push()和pop()

我们可以将数组看成栈， 栈顶在length-1处! 栈顶在length-1处! 栈顶在length-1处!
可以通过push()和pop()的组合将数组模拟成栈结构
push(): 将接受的参数添加到数组末尾， 返回新数组的长度(Array.length)

//arr为[1,2,3]
arr.push(4) //arr为[1,2,3,4]

pop()：移除数组的最后一项（索引为length-1）并返回移除的项

//arr为[1,2,3,4]
arr.pop()   //arr为[1,2,3]

对空数组使用pop()返回undefined

[].pop()    //undefined

队列方法: shift()和unshift()

我们将数组看成队列
shift():移除数组中的第一项并返回移除的项

//arr = [1,2,3]
var del = arr.shift()
console.log(del)    //1

unshift():将接受的参数在数组的第一个项前添加，返回添加后的数组长度

//arr = [1,2,3]
var addLen = arr.unshift(0)
console.log(addLen)     //4

可以使用shift()和push()方法模拟队列， unshift()和pop()模拟反队列

反序方法: reverse()

reverse(): 将数组的顺序反序并返回新数组, 原数组改变

//arr=[2,1,3]
var newArr = arr.reverse()
console.log(arr)    //[2,1,3]
console.log(newArr) //[3,1,2], 注意是反序(原顺序颠倒), 不是反着排序

排序方法: sort()

sort(): 默认按字典顺序排序数组
sort()方法比较的是字符串, 即使数组元素是数值. sort()调用每个数组元素的toString()方法

//arr = [3, 10, 4]
arr.sort()  //[10, 3, 4], 注意比较的时数组元素toString()之后的值, 所以10和3比较实际是"10"和"3"比较, 其他类似

sort()可以接受一个函数参数用来决定返回的顺序, 它可以自定义排序

function compare(value1, value2) {
    return value1-value2;
}
//arr = [3, 10, 4]
arr.sort(compare)   //[3, 4, 10]

同样也可以定义一个函数从降序排列.

连接方法: join()和concat()

join(): 以接受的参数作为指定分隔符, 将数组成员连接为一个字符串并返回. 默认参数为逗号
若数组成员时undefined或null或空位, 则转成空字符串

//arr=[1,2,3]
arr.join('&&')  //'1&&2&&3'

concat(): 将接受的参数(0或多个)添加到原数组末尾并返回新的数组, 原数组不变

//arr = [1,2,3]
var newArr = arr.concat(4,5)
console.log(newArr) //[1,2,3,4,5]
console.log(arr)    //[1,2,3]

//当没有参数时, 生成一个原数组的副本, 新对象和原对象指向同一内存地址
var nArr = arr.concat()
console.log(nArr)   //[1,2,3]
console.log(arr)    //[1,2,3]
arr[2]=23233
console.log(nArr[2])    //23233, 可以看到arr的改变影响到了nArr

concat()的参数也可以是数组对象

切片方法: slice()

slice()用于提取数组的一部分并返回新数组, 原数组不变
slice(): 接受两个参数(第二个参数可省), 分别是起始位置和结束位置, 并返回这两个位置(不含结束位置)之间的值
只有起始位置时, 返回起始位置到数组的最后一项

//arr=[1,2,3,4,5]
var newArr = arr.slice(2,4)
console.log(newArr)     //[3,4]
console.log(arr)        //[1,2,3,4,5]

//arr=[1,2,3,4,5]
var newArr = arr.slice(2)
console.log(newArr)     //[3,4,5]
console.log(arr)        //[1,2,3,4,5]

若参数为负数, 则从数组最后一项算起(数组的最后一项为-1)

//arr=[1,2,3,4,5]
var newArr = arr.slice(-3, -1)      //[3,4]
var nArr = arr.slice(-3)    //[3,4,5]
var Arr = arr.slice(-3, -1) //[], 这里起始位置大于结束位置则返回空数组

剪接方法: splice()

splice()接受三个参数, 后两个参数可选, 它会改变原数组, 返回一个新数组(为删除的数组元素)
第一个参数表示要起始位置, 第二个表示要删除数组元素的个数, 第三个参数为多个参数, 表示从起始位置的要添加的元素
splice()可以对数组进行删除, 插入, 替换操作

//删除操作, arr=[1,2,3,4,5]
var newArr = arr.splice(2, 3)   //从索引值开始删除三个元素
console.log(newArr)     //[3,4,5]
console.log(arr)        //[1,2]

/插入操作, arr = [1,2,3,4,5]
var newArr = arr.splice(2, 0, 2.1, 2.2)
console.log(newArr)     // [], 返回空数组, 因为splice()返回删除的数组元素, 这里没有删除数组元素
console.log(arr)        //[1,2,2.1,2.2,3,4,5]

//替换就是将删除的位置插入元素, 且删除元素和插入元素个数相等, 这里不举例了

迭代方法: map(), forEach(), filter(),some(), every()

• 这些方法都接受一个函数(回调函数)和一个可选的回调函数的this变量, 并对数组元素依次调用回调函数.
• 回调函数有三个参数, 分别是当前元素item, 当前位置index, 数组本身array, 这三个参数都是可选的, 用哪个传哪个, 但是要用后面的参数(index, array)必须将前面的参数传入(item, index; item, index, array), 否则它会将后面的参数认为是前面的参数.

map(): 返回满足回调函数条件的值并组成新数组(不改变原数组). 若数组有空位(注意空位不是undefined和null, 只是空位取值为undefined), 则回调函数不执行这个空位, 它会跳过这个空位(空位不等于undefined和null)

//arr=[1,2,3,4,5]
function addOdd(item) {
    return item%2 === 1 //若是奇数则返回true, 反之返回false
}
var newArr = arr.map(addOdd)    
console.log(newArr)     //[true, false, true, false, true]
console.log(arr)        //[1,2,3,4,5]

下面各个方法的用法都差不多, 因此就不举例了

forEach(): 只操作数据, 没有返回值. 这个方法无法中断执行,它会遍历所有数组元素. 它也会跳过数组的空位
filter(): 用于过滤数组元素, 返回满足回调函数条件的成员(true)并组成新数组
下面两个函数类似于断言, 这两个函数返回布尔值
some(): 只要有一个数组元素满足回调函数(返回true), 那么some()就返回true, 否则返回false
every(): 只要有一个数组元素不满足回调函数(返回false), 那么every()就返回false, 否则返回true

some()对空数组返回false, every()对空数组返回true, 且它们都不会执行回调函数

位置方法: indexOf()和lastIndexOf()

这两个函数查找给定元素在数组中第一次出现的位置, 接受两个参数,
第一个参数为待查找的元素, 第二个参数为查找起点的索引(可选). 这两个查找都是严格相等查找. 若找到了返回该值的索引, 没有找到则返回-1

indexOf()和lastIndexOf()的查找方向反向

indexOf(): 从数组头部向后查找

//arr[1,2,3,2,5]
var index = arr.indexOf(2)
var noIndex = arr.indexOf(6)
console.log(index)  //1, 从数组头部向后查找, 注意和lastIndexOf()的区别
console.log(noIndex)    //-1

lastIndexOf(): 从数组的尾部向前查找

//arr=[1,2,3,4,5]
var lastIndex = arr.lastIndexOf(2)
console.log(lastIndex)  //4, 从数组尾部向前查找

归并方法: reduce()和reduceRigtht()

这两个函数接受两个参数, 第一个为回调函数, 回调函数有四个参数,累积变量(默认为第一个数组元素), 当前变量(默认为第二个数组元素), 当前位置(0开始, 可选), 原数组(可选)
第二个参数(可选)用于设置回调函数中累积变量的初始值, 若设置了这个参数, 则回调函数中的累积变量为设置的值, 且回调函数中的当前变量默认为第一个数组元素
reduce(): 从数组的头部向后归并并返回一个值

//arr=[1,2,3,4,5]
function Sum(prev, item) {
    return (prev+item)
}
var newArr = arr.reduce(Sum, 0) //计算数组和, 第二个参数为prev的初始值
console.log(newArr) //15

reduceRight(): 从数组的末尾向前归并并返回一个值. 这个方法和reduce()方法反向.

哪些方法会改变数组对象本身

• 修改器方法会改变调用它们对象自身的值
  所有函数统一加Array.prototype.
pop(), push(), shift(), unshift(), reverse(), sort(), splice()

• 访问方法不会改变调用它们的对象自身的值, 会返回一个新数组或它所期望的值
  同样前缀加Array.prototype.
concat(), join(), slice(), indexOf(), lastIndexOf()

• 迭代方法也不会改变调用它们的对象自身的值
  forEach(), every(), some(), filter(), map(), reduce(), reduceRight()

更多参考请阅读Array-MDN