| 概述
1.1 构造函数
Array是Javascript的原生对象,同时也是一种构造函数,用来生成新的数组。
let arr1 = new Array(2)
等同于
let arr2 = Array(2)
1.2 缺陷
Array()构造函数中不同的参数会导致行为不一致。
1. new Array() // []
2. new Array(2) // [empty*2] value为undefined
3. new Array(3.2) // 3.2/-3 RangeError
4. new Array('abc') // ['abc']
5. new Array([1]) // [Array[1]] => [[1]]
6. new Array('a', 'b', 'c') // ['a','b','c']
建议: let arr = [1, 2]
| 方法
一)静态方法
Array.isArray()
弥补typeof 判断类型的不足
let arr = [1, 2, 3]
typeof arr // 'object'
arr instanceof Array //true
Array.isArray(arr) //true
二)实例方法
1. valueOf(), toString()
这两个方法,是对象通用的方法,表示对该对象求值
let arr = [1, 2, 3]
arr.valueOf() // [1, 2, 3]
arr.toString() //"1,2,3"
2. push()
- 在数组末端添加元素
- 返回添加后元素的长度,改变原数组
- 多个参数
1. push 与 pop 结合使用,构成“后进先出”的栈结构
let arr = [];
arr.push(1, 2);
arr.push(3);
arr.pop();
arr // [1, 2]
2. push 与 shift 结合使用,构成“先进先出”的队列结构
3. pop()
- 删除数组的最后一个元素
- 返回删除的最后一个元素,改变原数组
- 无参数
- 对空数组使用pop方法,不报错,返回undefined
4. unshift()
- 在数组头部添加元素
- 返回新添加后的长度,改变原数组
- 多个参数
5. shift()
- 删除数组的第一个元素
- 返回删除的第一个元素,改变原数组
- 无参数
6. concat()
- 多个数组合并
- 返回新数组,不改变原数组
- 多个参数,多种类型
例1
let arr1 = [1, 2, 3, 4]
let arr2 = [4, 5, 6, 6]
let arr3 = ['!']
arr1.concat(arr2, arr3) // [1, 2, 3, 4, 4, 5, 6, 6, "!"]
arr1 // [1, 2, 3, 4]
arr2 // [4, 5, 6, 6]
例2
let obj = {a: 1}
let oldArr = [obj]
let newArr = oldArr.concat()
obj.a = 2
newArr[0].a // 2 拷贝的是对象的引用
oldArr === newArr // false
oldArr[0] === newArr[0] // true
7. slice(begin, end)
- 1.截取数组,2.将类数组的对象转为真正数组
- 返回截取的数组,不改变原数组
- 两个参数(包括begin, 不包括end)与数组的slice使用相同
begin为起始位置,end为终止位置
1. 不传,截取整个数组
2. 传1个参数,从该参数所在的数组下标,截取到最后
3. 传2个参数,截取指定区间,不包括后一个参数所在的元素
4. 如果参数为负数,则倒数计算位置
5. begin大于数组长度/begin > end ,返回空数组
** 重要 将类数组对象转为真正数组
Arr.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// ['a', 'b']
8. join()
- 分隔数组,以指定字符连接分隔的数组元素
- 返回字符串, 不改变原数组
- 如果数组成员是undefined/null/空位,会被转成空字符串,即字符占位
- 通过call方法,可以用于字符串/类数组对象
[undefined, null].join('#') // '#'
['a',, 'b'].join('-') // 'a--b'
Array.prototype.join.call('hello', '-')
// "h-e-l-l-o"
var obj = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.join.call(obj, '-')
// 'a-b'
9. reverse()
- 颠倒数组元素的排序
- 返回改变后的数组,改变原数组
- 无参数
10. splice(start, count, addEle1, addEle2, …)
- 删除原数组的元素,同时,可以在删除位置添加新的数组成员
- 返回被删除的元素的集合,改变原数组
- 多个参数
1. 删除的元素,包括start位置
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]
2. 起始位置为负,则从倒数位置开始删
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(-4, 2) // ["c", "d"]
3. 如果只插入元素,则count设为0, 则在start后插入元素
var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]
4. 如果只有start参数,则将原数组拆分成两个数组
let a = [1, 2, 3, 4]
a.splice(2) // [3, 4]
a // [1, 2]
11. arr.sort()
- 对数组排序,按字典顺序【数值转会字符串】
- 返回排序后的数组,改变原数组
- 可接收函数作为参数,自定义排序
方案1:从小到大
let arr = [1, 3, 2, 4, 6, 5]
arr.sort(function (a, b) {
return a - b;
})
arr // [1, 2, 3, 4, 5, 6]
方案二:从大到小
[1, 4, 2, 6, 0, 6, 2, 6].sort((a, b) => b - a)
// [6, 6, 6, 4, 2, 2, 1, 0]
12. map()
- 遍历数组
- 返回数组,不改变原数组
- 两个参数
- 1.接收一个函数,函数可有3个参数
- 2.第二个参数,回调函数内部的this
arr.map(function(elem, index, arr){})
elem: 当前元素
index: 当前位置
arr: 数组本身
例1:二个参数
var arr = ['a', 'b', 'c'];
[1, 2].map(function (e) {
return this[e];
}, arr)
// ['b', 'c']
例2:数组有空位,map会跳过,但除undefined, null
let f = function (n) { return 'a' }
[1, undefined, null, , 2].map(f) // ["a", "a", "a", , "a"]
13. forEach()
- 遍历数组
- 不返回值,只操作数组
- 二个参数
- 两个参数
var out = [];
[1, 2, 3].forEach(function(elem) { //不能用箭头函数
this.push(elem * elem);
}, out);
out // [1, 4, 9]
- forEach 不能通过break 中断执行
14. filter()
- 过滤数组
- 返回新数组,不改变原数组
- 二个参数
- 参数是函数,返回结果为true的成员组成新数组
- 第二个参数,绑定this
[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
return index % 2 === 0;
});
// [1, 3, 5]
15. some()
- 判断数组成员是否符合条件
- 返回一个 Boolean 值
- 只要一个成员为true, 则为true
- 空数组,some返回false
16. every
- 判断数组成员是否符合条件
- 返回一个 Boolean 值
- 所有成员为true, 则为true
- 空数组,every返回true
17. reduce() / rediceRight()
- 累计数组中的每个成员
- 四个参数
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
Accumulator (acc) (累计器)[必传] 默认数组的第一个成员
Current Value (cur) (当前值) [必传]默认数组的第二个成员
Current Index (idx) (当前索引) 从0开始
Source Array (src) (源数组)
[1, 2, 3, 4, 5].reduce(function (a, b) {
console.log(a, b);
return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果:15
18. indexOf()
- 查找元素出现的位置
- 返回给定元素在第一次出现的位置
- 没有找到返回 -1
19. lastIndexOf()
- 查找元素出现的位置
- 返回给定元素最后一次出现的位置
- 没有找到返回 -1
20. 链式调用
- 从头开始往后算