Js中的数组Array
关于Array的常用方法和注意点
基础
字面量方式创建
let ary1 = []
let ary2 = [1,2,3]实例创建 当只有一个参数的时候 代表创建相同数量的空项
let ary1 = new Array() //[]
let ary2 = new Array(3) //[, , ,]
let ary3 = new Array(1,2,3) //[1, 2, 3]Array.of()是 ES6 为了弥补 new Array() 在创建数组的不足
let ary1 = Array.of() //[]
let ary2 = Array.of(3) //[3]
let ary3 = Array.of(1,2,3) //[1, 2, 3]length 是 Array 实例上的一个属性 返回数组元素的个数
let ary = [1,2,3,4,5]
let lengths = ary.length;
console.log(lengths) //5Array.isArray(value) value是否是一个 Array
Array.isArray([1,2,3]) // true
Array.isArray({}) //false
Array.isArray("foobar") //false
Array.isArray(undefined) //falseArray.from()
// 留个位置增, 删, 改
fill()
- 作用: 用一个固定值value填充一个数组中从索引start到索引end内的全部元素
- 参数: fill(value[, start = 0[, end = this.length]])
- 返回值: 填充后的数组
- 原有数组是否改变: 是
fill(value) 默认: start = 0 end = this.length
let ary = [1,2,3,4]
let returnValue = ary.fill(0)
console.log(ary) //[0, 0, 0, 0]
console.log(returnValue) //[0, 0, 0, 0]fill(value,start,end) start是开始填充的索引 end(不包含end) 结束填充的索引
let ary = [1,2,3,4]
let returnValue = ary.fill(0,1,3)
console.log(ary) //[1, 0, 0, 4]
console.log(returnValue) //[1, 0, 0, 4]如果添加的是一个对象 则是对同一个对象的引用
let ary = new Array(2)
ary.fill({sex:1})
ary[0].sex = 0
console.log(ary) //[{ sex: 1 }, { sex: 1 }]push()
- 作用: 向数组的末尾添加1个或多个新元素
- 参数: push(itemN)
- 返回值: 增加内容后数组的长度值
- 原有数组是否改变: 是
push() 向数组的末尾增加一个或多个新元素
let ary = []
ary.push(1)
let returnValue = ary.push(2,'3')
console.log(ary) //[1, 2, "3"]
console.log(returnValue) //3通过数组的索引和利用数组的length添加新元素
let ary = [1,2]
ary[ary.length] = 3
console.log(ary) //[1, 2, 3]pop()
- 作用: 删除数组最后一个元素
- 参数: 无
- 返回值: 删除的那项 如果数组为空 返回 undefined
- 原有数组是否改变: 是
pop() 删除数组最后一个元素
let ary = [1,2,3,4]
let returnValue = ary.pop()
console.log(ary) //[1, 2, 3]
console.log(returnValue) //4
通过减少数组的length删除最后一个元素
let ary = [1,2,3]
ary.length -= 1
console.log(ary) //[1, 2]unshift()
- 作用: 向数组的开头增加一个或多个新元素
- 参数: unshift(itemN)
- 返回值: 增加内容后数组的长度值
- 原有数组是否改变: 是
unshift()向数组的开头增加一个或多个新元素
let ary = [4,5]
ary.unshift(3)
let returnValue = ary.unshift(1,2)
console.log(ary) // [1, 2, 3, 4, 5]
console.log(returnValue) // 5shift()
- 作用: 删除数组的第一个元素
- 参数: 无
- 返回值: 删除的那项 如果数组为空 返回 undefined
- 原有数组是否改变: 是shift() 删除数组的第一个元素
let ary = [1,2,3,4]
let returnValue = ary.shift()
console.log(ary) //[2, 3, 4]
console.log(returnValue) //1splice()
- 作用: 删除多个 或者 添加/替换新元素
- 参数: splice(start[, deleteCount[, itemN])
- 返回值: 把删除的内容当做一个新的数组返回
- 原有数组是否改变: 是
let ary = [1,2,3,4,5,6,7]splice(start) 从索引start开始删除到末尾
let returnValue = ary.splice(3)
console.log(ary) //[1, 2, 3]
console.log(returnValue) //[4, 5, 6, 7]splice(start,deleteCount) 从索引 start 开始删除 deleteCount 个元素
let returnValue = ary.splice(0,4)
console.log(ary) //[5, 6, 7]
console.log(returnValue) //[1, 2, 3, 4]splice(start,deleteCount,itemN) 从索引start开始，删除deleteCount个元素，用itemN(n个)把这个位置填补上
let returnValue = ary.splice(3,1,'a','b')
console.log(ary) //[1, 2, 3, 'a', 'b', 5, 6, 7]
console.log(returnValue) //[4]查询
slice()
- 作用: 截取数组
- 参数: slice(n = 0[, m = this.length])
- 返回值: 把找到的内容当做一个新的数组返回
let ary = [1,2,3,4,5,6,7]slice(n) 从索引n找到数组末尾 如果 m 被省略 则slice会截取到数组末尾
let returnValue = ary.slice(2)
console.log(ary) //[1, 2, 3, 4, 5, 6, 7]
console.log(returnValue) //[3, 4, 5, 6, 7]slice(n,m) 从索引n找到索引m处(不包含m这一项)
let returnValue = ary.slice(2,6)
let returnValue1 = ary.slice(-4,-1)
console.log(ary) //[1, 2, 3, 4, 5, 6, 7]
console.log(returnValue) //[3, 4, 5, 6]
console.log(returnValue1) //[4, 5, 6]indexOf()
- 作用: 查询数组里面是否包含某个元素
- 参数: indexOf(value[,index])
- 返回值: 如果查询的元素存在 返回当前元素的索引; 如果查询的元素不存在 返回 -1
- 原有数组是否改变: 否
indexOf(value[,index])查询数组里面是否包含某个元素 index 查询开始的索引 默认为0
let ary = [1,2,3,'a','b','c',NaN]
let returnValue = ary.indexOf('a')
let returnValue1 = ary.indexOf('a',4)
let returnValue2 = ary.indexOf(NaN) //无法找到 NaN
console.log(returnValue,'&',returnValue1,'&',returnValue2) //3 '&' -1 '&' -1lastIndexOf()
- 作用: 查询数组里面的某个元素最后出现的位置
- 参数: lastIndexOf(value[,index])
- 返回值: 如果查询的元素存在 返回当前元素的索引; 如果查询的元素不存在 返回 -1
- 原有数组是否改变: 否lastIndexOf(value[,index]) 数组里面的某个元素最后出现的位置 从数组的[,index]开始往前查询 默认从最后一个
let ary = ['a','b','c','b']
let returnValue = ary.lastIndexOf('b')
let returnValue1 = ary.lastIndexOf('b',2) //从索引为2的往前查找 所以最后一个'b' 的索引为 1
let returnValue2 = ary.lastIndexOf('c',-3)
console.log(returnValue,'&',returnValue1,'&',returnValue2) //3 '&' 1 '&' -1includes()
- 作用: 判断一个数组是否包含某个元素
- 参数: includes(value[, start])
- 返回值: 如果包含则返回 true，否则返回false
- 原有数组是否改变: 否
同indexOf()相比 includes 可以找到 NaN
let ary = [1,2,3,'a','b','c',NaN]
let returnValue = ary.includes(NaN)
console.log(returnValue) //truefind()
- 作用: 返回数组中符合函数规则的第一个元素的值
- 参数: find(callback[,thisArg])
- 返回值: 如果有符合的返回这个元素的值, 没有符合的返回 undefined
- 原有数组是否改变: 否
callback(item, index ,array)可以传入3个参数(按需传入) item:当前元素 index:当前元素的索引 array:原数组
let ary = [1,3,5,66,8,99]
let returnValue = ary.find(function(item,index){
return item >= 66
})
console.log(returnValue) //66thisArg(可选参数) 指定callback的this值 注: callback 不能使用箭头函数 因为箭头函数绑定了this
let ary = [1,3,5,66,8,99]
ary.find(function(item,index){
console.log(this) //[1,3,5,66,8,99]
},ary)
// 不能使用箭头函数
ary.find((item) => {
console.log(this) //undefined
},ary)findIndex()
- 作用: 返回数组中符合函数规则的第一个元素的索引
- 参数: findIndex(callback[,thisArg])
- 返回值: 如果有符合的返回这个元素的索引, 没有符合的返回-1
- 原有数组是否改变: 否
callback(item, index ,array)可以传入3个参数(按需传入) item:当前元素 index:当前元素的索引 array:原数组
let ary = [1,3,5,66,8,99]
let returnValue = ary.findIndex(function(item,index){
return item >= 66
})
console.log(returnValue) //3thisArg(可选参数) 指定callback的this值 注: callback 不能使用箭头函数 因为箭头函数绑定了this
filter()
- 作用: 过滤数组中符合函数规则的元素
- 参数: filter(callback[,thisArg])
- 返回值: 把符合规则的元素组成一个新的数组返回,如果没有则返回空数组
- 原有数组是否改变: 否
callback(item, index ,array)可以传入3个参数(按需传入) item:当前元素 index:当前元素的索引 array:原数组
let ary = [1,3,5,66,8,99]
let returnValue = ary.filter((item) => {
return item > 5
})
console.log(returnValue) //[66, 8, 99]thisArg(可选参数) 指定callback的this值 注: callback 不能使用箭头函数 因为箭头函数绑定了this
遍历
forEach()
- 作用: 对数组的每个元素执行一次提供的函数
- 参数: forEach(callback[, thisArg])
- 返回值: undefined
callback(item, index ,array)可以传入3个参数(按需传入) item:当前元素 index:当前元素的索引 array:原数组
let ary = [1,2,3,4,5]
let ary1 = []
ary.forEach(function(item){
ary1.push(item + 'a')
})
console.log(ary1) //['1a', '2a', '3a', '4a', '5a']thisArg(可选参数) 指定callback的this值 注: callback 不能使用箭头函数 因为箭头函数绑定了this
ary.forEach(function(item){
console.log(this) //[1, 2, 3, 4, 5]
},ary)
//使用箭头函数将获取不到this
ary.forEach(() => {
console.log(this) //undefined
},ary1)map()
- 作用: 对数组的每个元素执行一次提供的函数并把执行后的结果组成一个新的数组返回
- 参数: map(callback[, thisArg])
- 返回值: 执行函数后的新数组
callback(item, index ,array)可以传入3个参数(按需传入) item:当前元素 index:当前元素的索引 array:原数组forEach并不会返回结果 而现在需要对结果进行处理后返回
let ary = [1,2,3,4,5]
let returnValue = ary.map(function(item){
return item + 'a'
})
console.log(returnValue) //['1a', '2a', '3a', '4a', '5a']entries(), keys(), values()
entries() keys() values() 都返回一个遍历器对象 可以用 for...of 遍历 也可以用遍历器对象的 next() 调用
entries()是对键值对的遍历 for...of循环数组是不可以取到索引的 可通过entries方法取到索引
let ary = ['a','b','v']
let ary1 = []
for(let [index, item] of ary.entries()){
ary.push({[index] : item})
}
console.log(ary1) //[{ '0': 'a' }, { '1': 'b' }, { '2': 'v' }]values() 是对键值的遍历
let ary = ['a','b','v']
let ary1 = []
for(let item of ary.values()){
ary.push(item)
}
console.log(ary1) //[a, b, v]keys() 是对键名的遍历
let ary = ['a','b','v']
let ary1 = []
for(let index of ary.keys()){
ary.push(index)
}
console.log(ary1) //[0, 1, 2]拼接
扩展运算符
... 留个位置
[...['a','b','c'], ...['d','e','f']] // ["a", "b", "c", "d", "e", "f"]concat()
- 作用: 数组的拼接
- 参数: concat([, ary])
- 返回值: 把拼接后的数组当做一个新的数组返回
let ary = [1,2,3,4]concat() 没有参数的时候实现数组的克隆
let returnValue = ary.concat()
console.log(ary) //[1, 2, 3, 4]
console.log(returnValue) //[1, 2, 3, 4]concat(ary1) 实现两个数据的拼接
let ary1 = [5,6,7]
let returnValue = ary.concat(ary1)
console.log(ary) //[1, 2, 3, 4]
console.log(returnValue) //[1, 2, 3, 4, 5, 6, 7]join()
- 作用: 以指定的分隔符把数组转换为字符串
- 参数: 分割的字符 如:,
- 返回值: 转换后的字符串
join() 以指定的分隔符把数组转换为字符串 默认是 ,
let ary = ['Chrome','IE','Firefox']
let returnValue = ary.join(',')
console.log(returnValue) //"Chrome,IE,Firefox"排序
reverse()
- 作用: 反转数组
- 参数: 无
- 返回值: 反转后的数组
- 原有数组是否改变: 是
let ary = [0,1,2,3,4,5,6]
let returnValue = ary.reverse()
console.log(ary) //[6, 5, 4, 3, 2, 1, 0]
console.log(returnValue) //[6, 5, 4, 3, 2, 1, 0]sort()
- 作用: 对数组的元素进行排序
- 参数: sort([, callback])
- 返回值: 排序后的数组
- 原有数组是否改变: 是
let ary = [2,32,4,23,62,99]a - b 正序
let returnValue = ary.sort(function(a,b){
return a - b
})
console.log(returnValue) //[2, 4, 23, 32, 62, 99]b - a 倒序
let returnValue = ary.sort(function(a,b){
return b - a
})
console.log(returnValue) //[ 99, 62, 32, 23, 4, 2 ]