掘金之旅---JS 常用对象之Array

109 阅读5分钟

Array对象

Array对象属性 511641278516_.pic.jpg

 let arr=['1','2','cat'];
 arr.constructor;//Array()
 arr.constructor.constructor;//Function()

Array对象方法

531641281346_.pic.jpg

举例说明

const array1=[5,6,8,130,44];
//获取数组长度
    array1.length//5
//at(index)获取指定位置元素
array1.at(2)//8
array1.at(-2)//130
const array2=['a','b','c'];
//concat合并数组
const array3=array1.concat(array2);
console.log(array3);//[5, 6, 8, 130, 44, 'a', 'b', 'c']
//copyWithin(target,start,end)
array1.copyWith(0,3,4)//[130,6,8,130,44]

Array.prototype.entries()

数组迭代器 541641288421_.pic.jpg

迭代器.next()

561641296354_.pic.jpg

每次迭代时更新next,直到done的值为true才会停止迭代。

521641281329_.pic.jpg

Array.prototype.every()

检测所有的元素是否满足某个条件,都满足返回true,否则返回false;

let array1=[20,10,11];
array1.every((item,index,arr)=>{
    item<10
})//false

Array.prototype.forEach()

除了抛出异常外,没有办法中止或跳出forEach()循环。

 let array1=[1,3,5]
 array1.forEach((item,index,arry)=>{
 console.log(item)
 })

Array.prototype.some()

至少有一个元素通过了被提供的函数测试。如果用一个空数组进行测试,在任何情况下他都会返回false.

let array1=[10,12,30];
array1.some((item,index,arr,thisArg)=>{item>21})//true

Array.prototype.fill()

使用指定的值填充数组

let array1=[1,2,3];
array1.fill(4,1,2)//[1,4,4]
//arr.fill(value,start,end)

Array.prototype.filter()

返回一个新的数组,里面包含所有通过所提供的函数实现的测试的所有元素

let words=['apple','cat','orange'];
words.filter((item,index,arr)=>{
item.length>3;//['apple','orange']
})

Array.from()

对一个类似数组或可迭代对象创建一个新的、浅市实例的实例。 示例:

Array.form('foo');//['f','o','o'],string生成数组
//从set生成数组
const set=new Set(['foo','bar','baz','foo']);
Array.from(set);//['foo','bar','baz']
//从Map生成数组
const map=new Map([[1,2],[24],[4,8]]);
Array.from(map);//[[1,2],[2、4],[4,8]]
//从类数组对象(参数)生成数组
function f(){
return Array.from(arguments);
}
f(1,2,3);//[1,2,3]
//序列生成器(指定范围)
Array.from({length:5},(v,i)=>i);//[0,1,2,3,4]
const range=(start,stop,step)=>{
  Array.from({length:(stop-start)/step+1},(_,i)=>{
    start + (i * step)
  })
})
range(0,4,1)//[0,1,2,3,4]
range(1,10,2)//[1,3,5,7,9]
range('A'.charCodeAt(0),'Z'.charCodeAt(0),1).map(x=>String.fromCharCode(x));
//["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

Array.prototype.find()

返回数组中第一个满足所提供的测试函数的元素的值,否则返回undefined。

 let array=[{name:"apples",age:'10'},{name:'bananas',age:'11'}];
 let fruit=array.find((item,index)=>{
 return item.name=='apples'
 })//{name:"apples",age:'10'}

Array.prototype.findIndex()

返回第一个满足条件的数组的元素的索引值

let array=[13,20,120,9];
let index=array.findIndex((item,index,arr)=>{return item>20})//2

Array.prototype.flat()

按照一个可指定的深度循环数组,将所有元素与遍历到的子数组中的元素合并为一个新数组返回

const arr1=[0,1,[2,[3,4]]];
arr1.flat(1)//[0,1,2,[3,4]];
arr1.flat(2)//[0,1,2,3,4]
//使用Infinity,可以展开任意深度的前套数组
arr1.flat(infinity);//[0,1,2,3,4]
//会移除数组中的空项
let arr2=[0,1,'',2];
arr2.falt();//[0,1,2]

Array.prototype.flatMap() Array.prototype.map()

返回一个新数组,包含元素都调用的结果,并且结构深度为1.

let arr1=[1,2,3,4];
arr1.map(x=>[x*2]);//[[2],[4],[6],[8]]
arr1.flatMap(x=>[x*2]);//[2,4,6,8]

Array.prototype.includes()

返回布尔值,如果找到了value则返回true,反之返回false

[1,2,3].includes(3,-1)//true
[1,2,3].includes(3,3)//false
//作为通用方法的includes()
//该方法有意设计为通用方法,它不要求this值是数组对象,所以它可以用于其他类型的对象function(){console.log([].includes.call(arguments,'a'))})('a','b','c')

Array.prototype.indexOf()、Array.prototype.lastIndexOf()

Array.prototype.indexOf():首个被找到的元素在数组中的索引位置;如果没有找到则返回-1 Array.prototype.lastIndexOf():数组中该元素最后一次出现的索引,如果未找到就返回-1

//找到指定元素出现的所有位置
let indexList=[];
let arr=['a','b','a'];
let ele='a';
let idx=arr.indexOf(ele);
while(idx!=-1){
indexLsit.push(idx);
idx=arr.indexOf(ele,idx+1);
//[0,2]
let index=arr.lastIndexOf('a')//2
}

Array.isArray(obj)

如果值是Array,则为true,反之是false

Array.isArray(Array.prototype)//true
Array.isArray([])//true

Array.prototype.join()

将一个数组的所有元素连接一个字符串并返回这个字符串

let arry=['a','b','c'];
arry.join('-');//"a-b-c"

Array.prototype.keys()、Array.prototype.values()

返回数组中每个索引键的 Array Iterator对象

const arry=['a','b','c'];
const iterator=arry.values();
const keyList=arry.keys();//0 1 2

for(const value of iterator){console.log(value)}//'a' 'b' 'c'
//Array.prototype.valuesArray.prototype[Symbol.iterator]默认实现。
Array.prototype.values===Array.prototype[Symbol.iterator]//true

Array.of()

创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。Array.of(),与Array()之间的区别在于处理整数参数

Array.of(7);//[7]
Array.of('a','b');//['a','b']
Array(3);//[,,,]

Array.prototype.pop()、Array.prototype.push()、 Array.prototype.shift()、Array.prototype.unshift()

pop()从数组中删除最后一个元素,并返回该元素的值,此方法更改数组的长度;push()将一个或多个元素添加到数组末尾,并返回该数组的新长度;shift()从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度;unshift()将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组);

let arr=['a','b','c','d'];
arr.pop();//'d'
arr.push('e');
console.log(arr);//['a','b','c','e']
arr.shift();//'a'
console.log(arr);//['b','c','e']
arr.unshift('f');
console.log(arr);//['f','b','c','e']

Array.prototype.reduce()、Array.prototype.reduceRight()

reduce()方法对数组中的每个元素执行一个reducer函数(升序执行),将其结果汇总为单个返回值。 reduceRight()接受一个函数作为累加器和数组的每个(从右到左),将其减少为单个值

let arr=[[0,1],[2,3],[4,5]].reduceRight((accumulator,currentValue)=>{accumulator.concat(currentValue)});
console.log(arr);//[4,5,2,3,0,1]

Array.prototype.reverse()、Array.prototype.sort()

reverse()方法将数组中元素的位置颠倒,并返回该数组。 sort()用原地算法对数组的元素进行排序,并返回数组。默认排序是将元素转换为字符串然后比较他们的utf-16代码但愿值序列时构建的

let arr=[1,2,3];
arr.reverse();//[3,2,1]
let arr1=[1,30,24,3];
arr1.sort();//[1,3,24,30]

Array.prototype.slice()、Array.prototype.splice()

slice()  方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

let arr=['a','d','e','c'];
arr.slice(1,2);//['d']
arr.splice(1,2,'f');
console.log(arr);//['a','f','f','c']
//splice(start,deleteCount,item)

Array.prototype.toLocaleString()、Array.prototype.toString()

toString() 返回一个字符串,表示指定的数组及其元素。 toLocaleString()  返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

let arr=[1,3,'a','b'];
arr.toString();//"1,3,a,b"

以上是对于Array对象的简单介绍,更深的应用,后期会补上。