Array对象-【学习笔记】

| 概述

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. 链式调用

• 从头开始往后算

| 学习参考链接