数组是js中常见的类型,与其他语言不同的是,js中的数组每一项可以保存任意类型的数据,且js中数组的大小可以动态调整
数组中包含了很多的API,在这篇文章中总结一下数组中的API,方便以后查阅
-
1.数组的创建
//创建数组的方法有两种 //1.使用Array构造函数 var arr = new Array() //[] var arr = new Array(3) //[,,] var arr = new Array('a','b','c')//['a','b','c'] //使用Array时可以省略new操作符 var arr = Array //2.字面量法 var arr = [];//[] var arr = [1,2,3] //[1,2,3]
es6 Array.of 方法
-
Array.of方法返回由参数构成的数组,可以替代Array构造函数,Array.of方法当只有一个参数时返回的是包含参数的一个数组,Array构造函数返回的则是参数长度的数组
var arr = Array.of(3,8,11)//[3,8,11] var arr = Array.of(3)//[3] //Array.of方法可以用下面的代码实现 function ArrayOf(){ return [].slice.call(arguments) }
es6 Array.from 方法
Array.from可以将两类对象转换成为真正的数组,类似数组的对象,以及可遍历的对象
var obj = {'0':a,'1':'b','2':'c',length:3}
//ES5的写法
var arr1 = [].slice.call(obj)//[a,b,c]
//ES6的写法
var arr1 = Array.from(obj)//[a,b,c]
//可以操作DOM返回的NodeList的集合
let arr = ['a','b','w','dd','a']
console.log(Array.from(new Set(arr)))
console.log([...(new Set(arr))])
在这里插入一下ES6中的数组的展开运算符
//展开运算符可以将数组转化为用逗号分割的参数序列
console.log(...[1,2,3])
//1 2 3
//可以代替ES5中数组的apply方法将数组转化为函数的参数
function f(x,y,z){
//...
}
var args = [0,1,2]
f.apply(null,args);
f(...args)
关于数组的检测
var arr = [1,2,3,4,5,6]
console.log(arr instanceof Array) //true
//instanceof的方法用于检测数组,适用于只有一个全局对象
console.log(Array.isArray(arr)) //true
2.数组的方法
能改变原数组的方法 9个
let a = [1,2,3];
ES5:
a.splice()/ a.sort() / a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse()
ES6:
a.copyWithin() / a.fill
数组的栈方法 push() pop() 以及队列方法shift() unshift() 都会改变原数组
数组的排序方法
var arr1 = [1,2,3,4,5]
console.log(arr.reverse())//[5,4,3,2,1]
//sort 排序
console.log(arr.sort((a,b)=>{return a-b}))//升序排列
数组的操作方法splice
let a = [2,3,5,4,2,67,88,34]
console.log(a.splice(1,3)) //返回要删除的值
console.log(a) // 返回删除指定项的数组 改变了原数组
//可以添加和删除元素,也可以替换数组中的元素
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素
ES6中的 copyWithin() 和 fill()方法
Array.prototype.copyWithin(target,start = 0,end= this.length)
//数组的fill方法
['a','b','c'].fill(7) //[7,7,7]
不改变原数组的方法(8个)
ES5:
slice、join、toLocateString、toString、cancat、indexOf、lastIndexOf、
ES7:
includes
数组的转换方法 toString ,valueOf(),toLocalString()
数组的合并concat()
数组的slice 方法 相当于给数组做浅拷贝
let a = [2,3,5,4,2,67,88,34]
console.log(a.slice(1,3)) // 3,5
console.log(a) //原数组
JS中遍历数组且不改变原数组的方法(12个)
ES5:
forEach、every 、some、 filter、map、reduce、reduceRight、
ES6:
find、findIndex、keys、values、entries
let a = [2,3,5,4,2,67,88,34]
console.log(a.every(item=>{
return item > 2
})) //false
console.log(a.some(item=>{
return item > 2
})) //true
console.log(a.filter(item=>{
return item > 2
})) //返回大于2的所有元素
console.log(a.find(item=>{
return item > 2
}))//返回大于2的第一个元素
console.log(a.map(item=>{
return item
})) //返回操作后的结果
console.log(a.forEach(item=>{
return item
})) //无返回值
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"