第四篇 引用类型 - 数组类型 - Array
1、概述
1、所有数组实例都继承于 Array.protoptype
2、所有的数组方法都定义在 Array.prototype 身上，和其他的构造函数一样，你可以通过扩展 Array 的 prototype 属性上的方法来给所有数组实例增加方法。
3、还一个鲜为人知的事实：Array.prototype 本身也是个数组。
Array.isArray(Array.prototype); // true
2、数组的属性
Array.prototype.constructor
所有的数组实例都继承了这个属性，它的值就是 Array，表明了所有的数组都是由 Array 构造出来的。
Array.prototype.constructor.call([1]) // []
Array.prototype.length
因为 Array.prototype 也是个数组，所有它也有 length 属性，这个值为 0，因为它是个空数组。
作用: 1、设置或返回数组的长度 2、用来增加和删除数组项
3、数组的创建
字面量方式
let arr = ['a','b','c'] => 字面量方式,直接给数组赋值
构造函数方式
let arr = new Array(); => 创建一个空数组
let arr = new Array(10); => 创建长度为10的数组
let arr = new Array('a') => 创建包含一个字符串元素a的数组
let arr = new Array(10,'a') => 创建包含10和字符串a两个元素的数组
Array.of ( ES6 新增 )
Array.of ()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
let arr = Array.of(3) => [3]
let arr = Array(3) => [empty * 4]
let arr1 = Array.of(1, 'a', true, null, undefined, {name: "zhangsan"}, [45]); => [ 1, 'a', true, null, undefined, { name: 'zhangsan' }, [ 45 ] ]
4、数组的检测
两种较为准确的检测方法
利用对象的 toString 方法
Object.prototype.toString.call([]) === "[object Array]"
Array.isArray(); （ES6新增）
Array.isArray([1,2,3]) => true
5、数组的方法
数组的方法主要包括: 1、数组原型的方法。2、构造函数的方法 （ES6新增部分）
各方法主要学习: 1、作用 2、参数 3、返回值 4、原始数组是否改变
原型上的方法 （共 24 个）
push()
作用: 向数组的末尾添加一项或多项
参数: ele1,ele2,[...ele3]
返回值: push后数组的长度
原数组是否改变: 是
let arr = [1,2,3]
let arr_1 = arr.push(7,8)
console.log(arr) => [1,2,3,7,8]
console.log(arr_1) => 5
pop()
作用: 删除数组最后一项
参数: 无
返回值: 删除的那一项
原数组是否改变: 是
let arr = [1,2,3,4,5]
let arr_1 = arr.pop()
console.log(arr) => [1,2,3,4]
console.log(arr_1) => 5
unshift()
作用: 向数组的开头添加一项或多项
参数: ele1,ele2,[...ele3]
返回值: 添加元素后数组的长度
原始数组是否改变: 是
let uArr = [1,2,3]
let uArr_1 = uArr.unshift('a','b')
console.log(uArr) => ['a','b',1,2,3]
console.log(uArr_1) => 5
shift()
作用: 删除数组的第一项
参数: 无
返回值: 删除的那一项
原始数组是否改变: 是
let sArr = [1,2,3]
let sArr_1 = sArr.shift()
console.log(sArr) => [2,3]
console.log(sArr_1) => 1
splice()
作用: 删除、插入、替换数组项
参数: startIndex,deleteCount,item
返回值: 删除项组成的数组
是否改变数组: 是
let splArr = [1,2,3,4,5]
let splArr_1 = splArr.splice(2,1)
console.log(splArr) =>
console.log(splArr_1) =>
copyWithin()
作用: 将数组指定位置（start 到 end）的元素复制到当前数组的其他位置（target开始），这种复制会替换原来位置的元素（ES6新增）
参数: target[start,end]
参数说明:
target: 复制的目标位置（包括），即要被替换的元素开始的位置
start: 要copy的元素的开始位置，默认0
end: 要copy的元素的结束位置，默认为数组最后一个元素
返回值: 复制替换之后的数组
原始数组是否改变: 是
reverse()
作用: 翻转原数组
参数: 无
返回值: 翻转后的数组
愿数组是否改变: 是
let rArr = [1,2,3]
let rArr_1 = rArr.reverse()
console.log(rArr) => [3,2,1]
console.log(rArr_1) => [3,2,1]
sort()
作用: 数组排序
参数: compareFunction
参数说明:
compareFunction 的值大于 0 时 调换当前比对项的顺序，否则顺序不变；
参数可以不传，不传默认按照 Unicode 编码的顺序排列
返回值: 排序后的数组
原数组是否改变: 是
let sArr = [1,2,3,4]
let sArr_1 = sArr.sort((a,b) => {
return a - b
} )
console.log(sArr) => [4,3,2,1]
console.log(sArr_1) => [4,3,2,1]
concat()
作用: 居于当前数组拼接数组
参数: 参数的类型可以是任意类型
不是数组类型直接按顺序拼接到数组末尾
数组类型的则将数组元素逐一取出拼接到数组末尾
不传则相当于复制数组
返回值: 拼接后的数组
原数组是否改变: 否
let cArr = [1,2]
let cArr_1 = cArr.concat('a',{id:1},[3,4])
console.log(cArr) => [1,2]
console.log(cArr_1) => [1,2,'a',{id:1},3,4]
let cArr_2 = cArr.concat([5,6])
console.log(cArr_2) => [1,2,5,6]
slice()
作用: 基于当前数组的一项或多项创建一个新的数组
参数: startIndex endIndex
参数说明: 返回的元素包含 startIndex 位置的元素 但不包含 endIndex 的元素
返回值: 返回截取的元素组成的数组
原数组是否改变: 否
let slArr = [1,2,3,4,5]
let slArr_1 = slArr.slice(2,4)
console.log(slArr) => [1,2,3,4,5]
console.log(slArr_1) => [3,4]
// 用于复制数组
let slArr_2 = slArr.slice(0)
console.log(slArr_2) => [1,2,3,4,5]
indexOf() （ ES5 ）
作用: 从数组开头查找元素在数组中的索引位置
参数: searchElement fromIndex
返回值: searchElement在数组中的索引，没找到 searchElement 则 返回 -1
原数组是否改变: 否
let iArr = [1,2,3,4,5,6,7]
let iArr_1 = iArr.indexOf(3)
let iArr_2 = iArr.indexOf(9)
console.log(iArr) => [1,2,3,4,5,6,7]
console.log(iArr_1) => 2
console.log(iArr_2) => -1
lastIndexOf() ( ES5 )
作用: 从数组结尾查找元素在数组中的索引位置
参数: searchElement fromIndex
返回值: searchElement在数组中的索引，没找到 searchElement 则 返回 -1
原数组是否改变: 否
let lArr = [1,2,3,4,5,6,7]
let lArr_1 = lArr.indexOf(5)
let lArr_2 = lArr.indexOf(9)
console.log(lArr) => [1,2,3,4,5,6,7]
console.log(lArr_1) => 4
console.log(lArr_2) => -1
every() （ ES5 ）
作用: 对数组的每一项运行指定的函数，如果该函数对每一项都返回 true ，则返回 true
参数: callback thisArg
参数说明: callback 有三个参数 item（当前项） index（当前索引） array(数组对象本身)
返回值: true or false
原数组是否改变: 涉及 callback 不确定
let eArr = [1,2,3,4,5]
let eArr_1 = eArr.every((item,index,array) => {
return item > 2
})
console.log(eArr) => [1,2,3,4,5]
console.log(eArr_1) => false
注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
let eArr_2 = eArr.every(function(item,index,array){
return item > this.id
},{id:2})
console.log(eArr) => [1,2,3,4,5]
console.log(eArr_2) => false
some() （ ES5 ）
作用: 对数组中的每一项运行指定函数，如果该函数对任意一项返回 true 则返回 true
参数: callback thisArg
返回值: true or false
原始数组是否改变: 涉及 callback 不确定
let soArr = [1,2,3,4,5]
let soArr_1 = soArr.some((item,index,array) => {
return item > 2
})
console.log(soArr) => [1,2,3,4,5]
console.log(soArr_1) => true
注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
let soArr_2 = soArr.some(function(item,index,array){
return item > this.id
},{id:3})
console.log(soArr_2) => true
filter() （ ES5 ）
作用: 对数组每一项运行给定的函数，返回该函数返回 true 的项 组成的数组
参数: callback thisArg
参数说明: callback 有三个参数 item（当前项） index（当前索引） array（数组对象本身）
返回值: 函数返回 true 的项组成数组
原始数组是否改变: 涉及 callback 不确定
let fArr = [1,2,3,4,5]
let fArr_1 = fArr.filter((item,index,array) => {
return item > 2
})
console.log(fArr) => [1,2,3,4,5]
console.log(fArr_1) => [3,4,5]
注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
let fArr_2 = fArr.filter(function(item,index,array){
return item > this.id
},{id:3})
console.log(fArr_2) => [4,5]
map() （ ES5 ）
作用: 对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组
参数: callback thisArg
参数说明: callback 有三个参数 item（当前项） index（当前索引） array（数组对象本身）
返回值: 函数每次调用结果组成的数组
原始数组是否改变: 涉及 callback 不确定
let mArr = [1,2,3,4,5]
let mArr_1 = mArr.map((item,index,array) => {
return item * item
})
console.log(mArr) => [1,2,3,4,5]
console.log(mArr_1) => [1,4,9,16,25]
注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
let mArr_2 = mArr.map(function(item,index,array){
return item * this.id
},{id:2})
console.log(mArr_2) => [2,4,6,8,10]
forEach() （ ES5 ）
作用: 对数组中的每一项运行给定的函数。无返回值
参数: callback thisArg
参数说明: callback 有三个参数 item（当前项） index（当前索引） array（数组对象本身）
返回值: 无
原始数组是否改变: 涉及 callback 不确定
特别注意: 在所有项都遍历完成前 不能像 for 循环一样 提前终止循环
let foArr = [1,2,3,4,5]
let foArr_1 = forArr.forEach((item,index,array) => {
// 不会有返回值 但在这里可以执行某些操作
return item * item
})
console.log(foArr) => [1,4,9,16,25]
console.log(foArr_1) => undefined
注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
let forArr_2 = forArr.forEach(function(item,index,array){
return item + this.id
},{id:2})
console.log(foArr) => [3,4,5,6,7]
reduce() （ ES5 ）
作用: 从数组的第一项开始，逐步遍历到最后，迭代数组的所有项
参数: callback initialValue
参数说明:
callback迭代函数，有四个参数（pre,cur,index,array）
pre: 前一个值，（initialValue || 数组第一项 || 上一次迭代结果）
cur: 当前迭代项
index: 当前迭代索引
array: 迭代的原始数组
initialValue: 迭代的基础值，不传基础值是数组第一项
返回值: 数组迭代后，数组的迭代结果
原始数组是否改变: 涉及 callback 不确定
let rArr = [1,2,3]
let sum = rArr.reduce((pre,cue,index,array) => {
return pre + cur // 1 + 2 + 3 数组求和
})
console.log(rArr) => [1,2,3]
console.log(sum ) => 6
传 initialValue 基础值的示列
let sum_1 = rArr.reduce((pre,cur,index,array) => {
return pre + cur // 10 + 1 + 2 + 3
},10)
console.log(rArr) => [1,2,3]
console.log(sum_1) => 16
##### reduce() （ ES5 ）
作用: 从数组的第一项开始，逐步遍历到最后，迭代数组的所有项
参数: callback initialValue
参数说明:
callback迭代函数，有四个参数（pre,cur,index,array）
pre: 前一个值，（initialValue || 数组第一项 || 上一次迭代结果）
cur: 当前迭代项
index: 当前迭代索引
array: 迭代的原始数组
initialValue: 迭代的基础值，不传基础值是数组第一项
返回值: 数组迭代后，数组的迭代结果
原始数组是否改变: 涉及 callback 不确定
let rArr = [1,2,3]
let sum = rArr.reduce((pre,cue,index,array) => {
return pre + cur // 1 + 2 + 3 数组求和
})
console.log(rArr) => [1,2,3]
console.log(sum ) => 6
传 initialValue 基础值的示列
let sum_1 = rArr.reduce((pre,cur,index,array) => {
return pre + cur // 10 + 1 + 2 + 3
},10)
console.log(rArr) => [1,2,3]
console.log(sum_1) => 16
reduceRight() （ ES5 ）
作用: 从数组的最后一项开始，逐步遍历到最后，迭代数组的所有项
参数: callback initialValue
参数说明:
callback迭代函数，有四个参数（pre,cur,index,array）
pre: 前一个值，（initialValue || 数组第一项 || 上一次迭代结果）
cur: 当前迭代项
index: 当前迭代索引
array: 迭代的原始数组
initialValue: 迭代的基础值，不传基础值是数组第一项
返回值: 数组迭代后，数组的迭代结果
原始数组是否改变: 涉及 callback 不确定
let rightArr = ['h','e','l','l','o']
let str = rightArr.reduceRight((pre,cue,index,array) => {
return pre + cur // 从后向前拼接字符串
})
console.log(rightArr) => ['h','e','l','l','o']
console.log(str) => 'olleh'
find() （ ES6 ）
作用: 查找数组中第一个符合条件的元素，返回该元素
参数: callback thisArg
参数说明: 参数的使用同上述 forEach every map some filter 方法一致
返回值: 查找到则返回该元素，没有找到返回 undefined
原始数组是否改变: 涉及 callback 不确定
let findArr = [1,2,'a',3,4,9,10]
let findRe = findArr.find((item,index,array) => {
return item > 4
})
console.log(findArr) => [1,2,'a',3,4,9,10]
console.log(findRe) => 9
findIndex() （ ES6 ）
作用: 查找数组中第一个符合条件的元素所在位置的索引，返回该索引值
参数: callback thisArg
参数说明: 参数的使用同上述 forEach every map some filter 方法一致
返回值: 查找到则返回该索引值，没有找到返回 -1
原始数组是否改变: 涉及 callback 不确定
let findIndexArr = [1,2,'a',3,4,9,10]
let findIndexRe = findIndexArr.findIndex((item,index,array) => {
return item > 4
})
console.log(findIndexArr) => [1,2,'a',3,4,9,10]
console.log(findIndexRe) => 5
fill() （ ES6 ）
作用: 用指定的元素，填充数组 从 start（包括） 到 end（不包括）之间的元素，如果该区间内已经有元素，直接替换掉
参数: value startIndex endIndex
返回值: 填充后的数组
原数组是否改变: 是
let fillArr = [1,2,3,4,5]
let fillArr_1 = fillArr.fill('a',2,4)
console.log(fillArr) => [1, 2, 'a', 'a', 5]
console.log(fillArr_1) => [1, 2, 'a', 'a', 5]
includes() （ ES7 ）
作用: 判断数组中是否包含指定的元素
参数: searchElement fromIndex
返回值: true or false
原始数组是否改变: 否
let inArr = [1,2,3,4,5,6]
let inArr_1 = inArr.includes(3)
console.log(inArr) => [1,2,3,4,5,6]
console.log(inArr_1) => true
注意: 这个方法弥补了 indexOf 查看 元素时的一个不足，即查找 NaN 误差
let inArr_2 = [1,2,3,NaN,4,5]
let inArr_3 = inArr_2.includes(NaN)
let inArr_4 = inArr_2.indexOf(NaN)
console.log(inArr_3) => true includes 找到了 NaN
console.log(inArr_4) => -1 indexOf 找不到 NaN
toString() 、 toLocalString()（ ES7 ）
作用: 调用数组每一项的 toString() 方法，返回的是以逗号分隔的字符串
参数: 无
返回值: 转化后的字符串
原数组是否改变: 否
let stringArr = [1,[1,2,[4]],{name:"caixin"},3]
let stringArr_1 = stringArr.toString()
let stringArr_2 = stringArr.toLocalString() ? 报错
console.log(stringArr) => [1,[1,2,[4]],{name:"caixin"},3]
console.log(stringArr_1) => 1,1,2,4,[object Object],3
console.log(stringArr_2) => ? 报错
join()（ ES5 ）
作用: 将数组作为字符串返回
参数: 分隔符号 默认 为 ,
返回值: 转换后的字符串
原数组是否改变: 否
let joinArr = [1,'c','a','x',2,[1,[2]]]
let joinArr_1 = joinArr.join()
console.log(joinArr) => [1,'c','a','x',2,[1,[2]]]
console.log(joinArr_1) => 1,c,a,x,2,1,2
构造函数的方法
Array.from()
作用: 将类数组转换为数组
参数: arrLike [, mapFn [,thisArg]]
参数说明:
arrLike: 类数组对象，可以是我们常见的 nodeList arguments、字符串、iterable对象等
返回值: 转换后的数组，如果有 mapFn 则返回结果是经过 mapFn 处理的数组
原类数组是否改变: 不使用 mapFn 则类数组不改变。使用 mapFn 则结果同上述迭代方法中使用 callback 的情况一致
let fromStr = 'caixin'
let fromStr_1 = Array.from(fromStr)
console.log(fromStr) => 'caixin'
console.log(fromStr_1) => ['c','a','i','x','i','n']
let fromStr_2 = 'caixin'
let fromStr_3 = Array.from(fromStr_2,(item,index) => {
return item.toUpperCase()
})
console.log(fromStr_2) => 'caixin'
console.log(fromStr_3) => ['C','A','I','X','I','N']
特别注意:
Array.from() 等价于 Array.prototype.slice.call(argument,0)
数组扩展运算符 （ ES6 ）
数组的扩展运算符可以将数组转换为以逗号分割的参数序列
将数组通过扩展运算符转换为参数序列直接传参，无需使用apply转换了
let kArr = [1,2,3]
Math.min(...kArr) // Math.min(1,2,3)
apply 写法
Math.min.apply(null,kArr)
可以用于复制数组和拼接数组
let kArr_1 = [1,2,3]
let kArr_2 = ['a','b','c']
consle.log([...kArr_1,...kArr_2]) => [1,2,3,'a','b','c']
可以将字符串分解成真正的数组
let kStr = "caixin"
console.log([...kStr]) => ['c','a','i','x','i',''n]
总结
方法的总结
1、数组的方法无外乎是对数组的增、删、改、查、转换、迭代；增、删、改都会改变原始数组。
2、查、转换的方法不涉及 callback参数 的不会改变原数组，涉及到的则视情况而定。
3、迭代方法因为均会涉及到 callback参数 因此不确定 如果直接在 callback中操作原数组，那原数组肯定会改变；如果不是直接操作原数组，而是操作 callback的item参数时，如果item是基本数据类型则原数组中对应的该项元素不会改变，如果是引用类型则会改变。
4、所有涉及索引的方法，开始位置都是在操作范畴，结束位置都是不包括在操作范围内的。
归类总结
1、按功能归类
创建数组的方法
1、new Array()
2、let arr = []
3、Array.of()
检测数组的方法
1、Object.prototype.toString.call([]) === "[object,Array]" => true
2、Array.isArray([1,2,3]) => true
常规操作数组
1、push()
2、pop()
3、unshift()
4、shift()
5、splice()
复制、翻转、排序、拼接、填充数组
1、copyWithin()
2、reverse()
3、sort()
4、concat()
5、slice()
6、fill()
7、扩展运算符 [...Array1,...Array2]
8、valueOf() => 返回数组本身
查找数组项
1、indexOf()
2、lastIndexOf()
3、find()
4、findIndex()
5、includes()
运行给定函数，判断每一项是否符合条件
1、every()
2、some()
数组迭代循环 在 callback 里做一些操作
1、filter()
2、map()
3、forEach()
特殊方法 clalback 多个参数 可做一些深入操作
1、reduce()
转换为字符串操作
1、toString()
2、toLocalString()
3、join()
将类数组转换为数组
1、Array.from()
2、数组扩展运算符 [...String]
语句
for (let i of Array){}
for (let i in Array){}
2、按版本归类
ES5
1、let arr = new Array()
2、let arr = []
3、Object.prototype.toString.call([]) === "[object,Array]"
4、push()
5、pop()
6、unshift()
7、shift()
8、splice()
9、reverse
10、sort()
11、concat()
12、slice()
13、indexOf()
14、lastIndexOf()
15、every()
16、some()
17、filter()
18、map()
19、forEach()
20、reduce()
21、toString()
22、toLocalString()
23、valueOf() => 返回数组本身
ES6 +
1、Array.of()
2、copyWithin()
3、find()
4、findIndexOf()
5、fill()
6、includes()
7、Array.from()
8、扩展运算符 [...Array] [...String]
9、for (let i of Array){}
10、for (let i in Array){}
浙公网安备 33010602011771号