(1)concat:将多个数组合并成一个数组
<script>
//concat数组合并
let arrOne = ['梦','为','努',';力'];
let arrTwo = ['浇','了','水'];
let arrThree = ['L','J','J'];
let arrAll = arrOne.concat(arrTwo,arrThree);
console.log(arrAll); // ["梦", "为", "努", ";力", "浇", "了", "水", "L", "J", "J"]
</script>
(2)every:every会遍历数组内的所有元素,直到返回false
<script>
//every
let isShow = (x) =>{
console.log(x); //输出:1
return x % 2 == 0 ? true : false;
}
let number = [1,2,3,4,5,6,7,8,9,10];
console.log(number.every(isShow)); //输出:false
</script>
(3)some:和every相似,some同样会遍历数组内的所有元素,不同的是,直到返回true终止
<script>
//some
let isShow = (x) =>{
console.log(x); //输出:1,2
return x % 2 == 0 ? true : false;
}
let number = [1,2,3,4,5,6,7,8,9,10];
console.log(number.some(isShow)); //输出:true
</script>
(4)forEach:如果要遍历整个数组,可以使用forEach,它和for循环的结果相同(这里使用了ES6的箭头函数)
<script>
//forEach
let number = [1,2,3,4,5,6,7,8,9,10];
number.forEach((x)=>{
console.log((x % 2 == 0)); //输出:false,true,false,true,false,true,false,true,false,true
})
</script>
(5)reduce:reduce方法接收一个函数作为参数,这个函数有四个参数(previousValue、currentValue、index、array),这个函数会返回一个将被叠加到叠加器的值,reduce方法停止执行后会返回这个累加器。如果要对一个数组进行求和,reduce比较好用
<script>
//reduce
let number = [1,2,3,4,5,6,7,8,9,10];
number.reduce((previous,current,index)=>{
console.log(previous + current) //输出:3,6,10,15,21,28,36,45,55
return previous + current;
})
</script>
(6)find:遍历出数组内符合条件的元素,Array.find(当前的值、当前的位置和原数组)同时,也可以接受函数作为参数
<script>
//find
let person = {name:"前小端",age:18};
let array = [10,2,77,23];
function F(ind){
if(ind<this.age){
console.log(ind); //输出10,2
}
}
array.find(F,person);
</script>
(7)map:ES6中定义的一个遍历API,它有几个特点需要说明一下
- 三个参数分别是:某项元素的键值,元素的索引,数组本身;
- 不能使用break,return,continue跳出循环;
- 返回一个新数组;
- 可以记录索引;
<script>
//map
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
let isShow = function(x){
console.log(x)
};
let myMap = numbers.map(isShow) //输出:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
//console.log(myMap) //请问:这里输出应该是什么?请万能的小伙伴帮忙解决一下,并且希望能解释一下为什么会出现这样的结果!知道的小伙伴请于下方评论区留言。
</script>
友情提示:请注意上放的提问环节哦-。——!
(8)filter:同map一样;
(9)使用for...of循环迭代(个人更喜欢使用循环遍历),同样是ES6的方法
<script>
//for...of
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
for(let i of numbers){
console.log((i % 2 == 0) ? '偶数' : '奇数') //输出:奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数
}
</script>
并且for...in与之相同,这里就不再举例;
(10)iterator:是ES6为数组类添加的一个属性,需要通过Symbol.iterator来访问
<script>
//iterator
let numbers = [1,2,3,4];
let iterator = numbers[Symbol.iterator]();
console.log(iterator.next()); //输出:{ value: 1, done: false }
console.log(iterator.next()); //输出:{ value: 2, done: false }
console.log(iterator.next()); //输出:{ value: 3, done: false }
console.log(iterator.next()); //输出:{ value: 4, done: false }
console.log(iterator.next()); //输出undefined
</script>
该操作可以理解为使得数组具有了线性属性,各个元素以排队的方式出现,当超出元素索引时,线性结束,以undefined的形式结尾。这里推荐参考一篇关于Symbol.iterator的详解博客,地址 =>点击这里<= 。
(11)数组的entrise(),keys()和values()方法:
<script>
//entries
let numbers = [1,2,3,4];
let aEntrise = numbers.entries();
console.log(aEntrise.next()) //输出:{value:[0,1],done:false}
console.log(aEntrise.next()) //输出:{value:[1,2],done:false}
console.log(aEntrise.next()) //输出:{value:[2,3],done:false}
console.log(aEntrise.next()) //输出:{value:[3,4],done:false}
console.log(aEntrise.next()) //输出:{value:undefined,done:false}
</script>
此方法包含键值对的形式,可以将数组每个索引下所对应的value渲染出来;
<script>
//keys
let numbers = [1,2,3,4];
let aEntrise = numbers.keys();
console.log(aEntrise.next()) //输出:{value:0,done:false}
console.log(aEntrise.next()) //输出:{value:1,done:false}
console.log(aEntrise.next()) //输出:{value:2,done:false}
console.log(aEntrise.next()) //输出:{value:3,done:false}
console.log(aEntrise.next()) //输出:{value:undefined,done:false}
</script>
如果理解了entrise,那么keys方法就更容易理解了,keys用来获取到数组内每个元素的索引值;
values()就不再举例说明了。
算了,还是用values()附上一个懒省劲的小栗子:
<script>
//values
let numbers = [1,2,3,4];
let aEntrise = numbers.values();
for(let i=0;i<numbers.length;i++){
console.log(aEntrise.next())
}
//输出:{value: 1, done: false},{value: 2, done: false},{value: 3, done: false},{value: 4, done: false}
</script>
(12)form:Array.form(数组,过滤条件)方法根据已有的数组创建一个新数组,比如要复制numbers数组,可以
<script>
//form
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
let newNumbers = Array.from(numbers);
console.log(newNumbers); //输出:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
let events = Array.from(numbers,x=>(x % 2 == 0 ? '偶数' : '奇数'));
console.log(events); //输出:["奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数"]
</script>
(13)of:根据传入的参数组建一个新的数组
<script>
//of
let number = Array.of(1,2,3,4,5,6);
console.log(number); //输出:[1, 2, 3, 4, 5, 6]
</script>
(14)fill:使用静态值填充数组
<script>
//fill
let number = Array.of(1,2,3,4,5,6);
console.log(number.fill(0)); //输出:[0, 0, 0, 0, 0, 0]
</script>
并且可以从指定位置填充fill(x,y),x是要填充的内容,y是要开始填充的位置索引:
console.log(number.fill(22,2)); //输出:[0, 0, 22, 22, 22, 22]
还可以指定结束填充的索引:
number.fill(0);
console.log(number.fill(1,3,5)); //输出:[0, 0, 0, 1, 1, 0]
(15)copyWithin:将数组内的一系列元素复制给此数组下指定的位置,话不多说,上栗子
<script>
//copyWithin
let copyArray = [1,2,3,4,5,6];
console.log(copyArray.copyWithin(0,3)); //输出:[4, 5, 6, 4, 5, 6]
</script>
这里说明一下:array.copyWithin(x,y),x代表被替换掉的起点索引位置,y代表用来复制的索引(直至此数组最后一个元素),并且,请牢记x<y,<y,y。
(16)还有reverse(),sort(),indexOf(),lastIndexOf(),
<script>
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,10];
console.log(numbers.reverse()); //输出:[10, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log(numbers.sort()); //输出:[1, 10, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(numbers.lastIndexOf(10)); //输出:2
console.log(numbers.indexOf(10)); //输出:1
console.log(numbers.indexOf(100)); //输出:-1
</script>
numbers.indexOf(100)的输出结果为-1是因为numbers中没有找到100这个元素。
以上就是一些对数组操作的API,后续可能还会有ES7、ES8的数组操作API,会不定时更新。
巴拉巴拉: