数组定义
有次序和编号的一组值
类似数组对象
函数agruments对象,字符串,DOM元素集
实例属性
Array.prototype.length
length
可以赋值,用以改变数组长度
arr.length = 0 //清空数组
实例方法
所有使用的示例中let arr = [1,2,3]
push() pop() 分别在数组尾部添加,删除内容 ,改变原数组
// return array length
let arrLength = arr.push(6,9)
// return remove content
let remove = arr.pop()
shift() unShift() 分别在数组头部删除,添加内容,改变原数组
let remove = arr.shift() // 删除
let arrLength = arr.unshift('a','c',-1) // 添加
slice() 用于截取数组,返回截取到的新数组,也常用于将类似数组对象转换为数组
// none arrgument 返回新数组引用,常用类数组转换
let newArr0 = arr.slcie()
let argArr = Array.prototype.slice.call(arguments)
// one arrgument 从参数位置截取到最后
let newArr1 = arr.slice(1)
// two arrguments 从1参数位置,截取2参数的个数
let newArr2 = arr.slice(1,2)
splice() 截取并添加新元素,改变元素组,返回截取内容
let arr1 = arr.splice(1,2,'a','f')
reverse() 反转数组,改变原数组
arr.reverse()
sort() 默认按字典序排序,也可传函数参自定义排序,改变原数组
arr.sort()
concat() 合并多个数组,返回一新数组
let newArr = arr.concat(['a','g','c'])
join() 数组->字符串
let arrStr = arr.join();
let arrStr = arr.join('-')
indexOf() lastIndexOf() 获取索引
arr.indexOf(2)
valueOf() toString()
arr.valueOf() // [1,2,3]
arr.toSring() // 1,2,3,4
forEach() 无返回,跳过空位[''],不会跳过undefined和null
arr.forEach(function(item){
item += 1;
})
map() 返回新的一数组对象,跳过空位[''],不会跳过undefined和null
let newArr = arr.map( item => item +=1 )
filter() 返回符合条件的新数组对象
let newArr = arr.filter( item => item > 2 )
forEach() , map() , filter() 的异同
同:三个方法都会对数组进行遍历,参数都是一个回调。
异:
- forEach() 无返回
- map() 返回一个新数组,若对数组进行操作,该数组是原数组操作后的值组成的数组
- filter() 返回一新数组,返回的是符合条件的数组
var numbers = [1, 2, 3];
numbers.map(function (n) {
return n > 1;
}); // [false,true,true]
numbers.filter(function (n) {
return n > 1;
}); // [2,3]
numbers.filter(function (n) {
return n + 1;
}); // [1,2,3]
some() 返回布尔值,只要数组有一项符合条件就为true
let isOk = arr.some( item => item > 2)
every() 返回布尔值,全部符合才会true
let isOk = arr.every( item => item > 2)
ES6拓展内容
拓展运算符
拓展运算符,更像是函数res参数
的一种逆运算,基本使用是...[数组]
,不过也可以是表达式,使用后数组就会拓展开来
const a = [1,2,3]
console.log(...[1,23,2]) // 1,23,2
console.log(...a) // 1,2,3
// 可直接用在函数传参上
function foo(a,b,c){
return ''+a + b +c
}
console.log(foo(...[1,2,3])) // 123
foo(...[1,2,3]) 相当于 foo(1,2,3)
// 与解构赋值配合
const [first,...others] = [1,2,3,4]
console.log(first) // 1
console.log(others) // 2,3,4
[a,...rest] = others; // a为2,rest为[3,4]
// 字符串转数组
const arrStr = [..."string"] //arrStr为["s","t","r","i","n","g"]
静态方法
Array.from() 将类似数组对象转为数组
// ES6
Array.from(doucment.getElementsByTagName('p'))
// ES5
[].slice.call(document.getElementsByTagName('p'))
Array.of() es6提供的较为统一的将一组值转换为数组的方法
// Array.of()
// 无参数
Array.of() // []
// 一参数
Array.of(5) // [5]
// 多参数
Array.of(1,2,3) // [1,2,3]
// Array()
// 无参数
Array() // []
// 一参数
Array(3) // [,,]
// 多参数
Array(3,2,3) // [3,2,1]
实例方法
find() 返回第一个符合条件的值,参数为回调函数
[1,2,3,4].find((value,index,,arr) => { return value > 2}) // 3
findIndex() 返回第一个符合条件的索引,参数为回调函数
[1,2,3,4].findIndex((value,index,arr) => { return value > 2}) // 2
includes() 返回布尔值表示是否包含指定值,类似String中的
[12,22,3].includes(1) // false
// 可指定第二参数,表示查询的起始位置,0为开始
[12,22,3].includes(12,1) // false
fill() 填充数组,常用于初始化
new Array(6).fill('x')
const arr = ['6',6,1].fill(1)
console.log(arr) // [1,1,1]
copyWithin() 将数组内成员覆盖到其它位置,改变原数组
//copyWithin(target,start,end) 要覆盖的目标位置,起始位置,结束位
let arr = [0,9,8,6];
arr.copyWithin(1,0,2);
console.log(arr) // [0,0,9,6]
flat() 拉平数组,可以把多维数组降维
[1,[2,3],4].flat() // [1,2,3,4]
[1,[2,3,[3.1,3.2]],4].flat() // [1,2,3,[3.1,3.2],4]
// 可有参数指定拉平的次数(降的维次)
[1,[2,3,[3.1,3.2]],4].flat(2) // [1,2,3,3.1,3.2,4]
flatMap() 这个相当于将map()
和flat()
的结合
// 将数组进行map,如果map的结果有还有数组就flat
[[2,3],[7,6]].flatMap(([a,b]) => { return a + b }) //[5,13]
[[2,3],[7,6]].flatMap(([a,b]) => { return [a + b,'a'] }) //[5,"a",13,"a"]
[[2,3],[7,6]].flatMap(([a,b]) => { return [a + b,'a',['a-1','a-2']] }) // [5,"a",["a-1","a-2"],13,"a",["a-1","a-2"]]
keys() values() entries() keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。