JS中数组API解析集合

数组是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"
发布了12 篇原创文章 · 获赞 1 · 访问量 408

猜你喜欢

转载自blog.csdn.net/gdloveyl/article/details/104142596