数组操作方法（包括es6数组的操作方法）[通俗易懂]

全栈程序员站长

发布于 2022-08-23 12:24:57

5710

发布于 2022-08-23 12:24:57

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

//(1)push() //向数组最里面推一个或多个数据 var arr=[“色”,”等”,”烟”,”雨”]; arr.push(“而”,’我’,”在”); console.log(arr);

//(2)unshift() // 在数组的开头添加一个或多个数据 var arr=[“色”,”等”,”烟”,”雨”]; arr.unshift(“天”,”青”); console.log(arr);

//(3)pop() //在数据的尾部删除一个数据 var arr=[“色”,”等”,”烟”,”雨”]; arr.pop(); console.log(arr);

//(4)shift() // 在数组的开头删除一个数据

var arr=[“色”,”等”,”烟”,”雨”]; arr.shift(); console.log(arr);

//(5)splice() /* arr.splice(参数1,参数2,参数3,参数4,参数5,….参数n); 参数1表示要删除的开始位置, 参数2表示删除的个数, 参数3,参数4,参数5,….参数n,表示在删除位置添加的字符 */

var arr=[“色”,”等”,”烟”,”雨”]; arr.splice(1,2,”周”,”杰”,”伦”); console.log(arr);

//(6)concat() // 把两个或多个数组连接成一个数组 var a=[“八”,”百”,”标”,”兵”,”奔”,”北”,”坡”]; var b=[“炮”,”兵”,”并”,”排”,”北”,”边”,”跑”]; var c=[“炮”,”兵”,”怕”,”把”,”标”,”兵”,”碰”]; var d=[“标”,”兵”,”怕”,”碰”,”炮”,”兵”,”炮”];

console.log(a.concat(b)); //连接两个数组

console.log(a.concat(b,c,d)); //连接多个数组

//(7)sort() //数组排序方法,默认是按照字符编码逐个字符进行排序 var num=[52,51,6,8,42,25]; console.log(num.sort()); num=num.sort(function(a,b){ return a-b; //升序排列 }) console.log(num); num=num.sort(function(a,b){ return b-a; //降序排列 }) console.log(num);

结果分别为：

//(8)join() // 按照我们特定的方式（指定字符）把数组转化成字符串 var arr=[“色”,”等”,”烟”,”雨”]; console.log(typeof arr.join(“”)); console.log(arr.join(“”)); console.log(arr.join(“*”));

结果分别为：

//(9)split() //把字符串转化成数组(按照指定的字符进行分割) var str=”天晴这-等烟-雨”; console.log(str.split(”)) console.log(str.split(‘-‘))

结果分别为：

/(11)Array.isArray() 判断数据是否是数组

console.log(Array.isArray([2,3])); console.log(Array.isArray((1)));

/* (12)forEach() 用于遍历我们的数组,对数组中的每一个元素进行操作,没有返回值数组.forEach（function(value,index,arr){ }） value就是指数组的元素，index指下标。 arr指当前的数组，这个不常用 */ var score=[26,35,85,45,90,100]; // 打印每个人的序号和分数 score.forEach(function(el,index){ console.log(index+”—–“+(el+10)); }) 结果为：

/* (13)Map()

作用: 对数组进行遍历,进行某个操作,然后返回一个新的数组, 格式: 数组.map(function(value,index,arr){ 操作 }) 注意: (1)在回调函数中,一定要有返回值 (2)map方法调用之后,会返回一个全新的数组,原来的数组不变 */ var score=[26,35,85,45,90,100]; var score2=score.map(function(val,index){ return val+30; }) console.log(score2);

/* (14) filter() 作用: 用于进行过滤,筛选出符合条件的元素,组成一个新的数组返回, 格式: 数组.filter(function(value,index,arr){ }) 基本上和map是差不多的 */ var score=[26,35,85,45,90,100]; var arr=score.filter(function(value,index){ return value>60; }) console.log(arr);

/* (15)reduce() 本意:缩减,减少的意思, 作用: 将前一项和后一项的值进行运算,返回累积的结果. 格式: 数组.reduce(function(prev,next){ …… }) prev 表示前一项,next表示后一项运算规则: 默认情况下,会把数组的第一个元素作为prev的初始值. 每循环一次,把累积的结果赋值给prev,next就变为下一个数组元素 */ var arr=[1,2,3,4,5]; var sum=arr.reduce(function(prev,next){ return prev+next; }) console.log(sum); //结果是：15 var sum=arr.reduce(function(prev,next){ console.log(prev +”—-“+next); return prev+next; }) console.log(sum);

/* (16)some() 作用: 只要数组中的某一个元素符合指定的条件,就返回真, 否则返回假,可以和逻辑运算符或(||)类比格式: 数组.some(function(value,index,arr){….}) */ var pass=score.some(function(value,index){ return value<60; }) console.log(pass); //结果为:true /* (17)every() 作用:如果数组中所有的元素都符合指定的条件,才返回true,否则返回false , 可以个逻辑运算符与(&)类比格式: 数组.every(function(value,index,arr){….}) */ var pass=score.every(function(value,index){ return value<60; }) console.log(pass); //结果为false //(18)类数组 //Array.from() 把类数组转化为数组 var obj={ 0:”a”, 1:”b”, 2:’c’, 3:’d’, length:4 } console.log(Array.isArray(obj)); //结果为false obj=Array.from(obj); console.log(obj); //结果为[“a”,”b”,”c”,”d”] console.log(Array.isArray(obj)); //结果为true

//(19) //new Array()这种方式声明的数组表现不统一,有缺点 var a1=new Array(); var a2=new Array(3); var a3=new Array(‘3’); var a4=new Array(3,4); console.log(a1) console.log(a2) console.log(a3) console.log(a4)

//使用Array.of之后,表现就统一了,都是定义数组的元素 var a1=Array.of(); //0 var a2=Array.of(3); //1 var a3=Array.of(‘3’);//1 var a4=Array.of(3,4);

console.log(a1) console.log(a2) console.log(a3) console.log(a4)

/* (20)find:用于查找某个元素,如果找不到undefined; findIndex:用于查找某个元素的索引,如果找不到就返回-1 其用法和map,foreach差不多 */

 var  goods=[
                {
                    id:100,
                    name:'奥迪A8',
                    price:88.8
                },
                {
                    id:101,
                    name:'宝马x6',
                    price:98
                },
                {
                    id:102,
                    name:'奔驰s600',
                    price:130
                },
       ]
    
      //find
    var car=goods.find(function(item,index){
        return item.name=='宝马x6'
    })
    
    console.log(car);    // 结果为:    {id: 101, name: "宝马x6", price: 98}
    //findIndex
            var idx=goods.findIndex(function(item,index){
                return item.id==103;
            })
        
        console.log(idx); //结果为-1

/* (21)fill 作用:给数据填充指定的值, 格式:数组.fill(值) 一般是在实例化一个数组之后进行填充的 */ var a1=new Array(5); a1.fill(‘es6’); console.log(a1); //结果为:[“es6”, “es6”, “es6”, “es6”, “es6”] //如果数组本身有内容,会被覆盖 var a2=[2,3,4,5]; a2.fill(100); console.log(a2); // [100, 100, 100, 100] //在我们填充的时候,可以通过第二个参数和第三个参数来指定填充的起止位置,包括开始位置不包括结束位置 var a2=[2,3,4,5]; a2.fill(100,1,2); console.log(a2);//结果为：[2, 100, 4, 5] //(5)数组的扩展运算符(延展运算符，展开运算符)… var obj2={ 0:”a”, 1:”b”, 2:’c’, 3:’d’, length:4 } var a3=[…obj2]; // 把类数组转化数组 console.log(a3); //结果为 var a3=[1,2,3]; var a4=[4,5,6]; //相当于concat方法 console.log([…a3,…a4]); // 结果为：[“a”, “b”, “c”, “d”]

//(22)set //新的格式自动去除重复的项 var setobj=new Set([1,2,1,3,4,3,56]); console.log(setobj); //结果为:{1, 2, 3, 4, 56} console.log(Array.from(setobj)); //结果为:[1, 2, 3, 4, 56] /* (23)indexof === 查看数组中是否包含某一项,是就返回下标,否则返回-1 */

var colors=[‘orange’,’pink’,’purple’,’aqua’,’black’,”pink”]; console.log(colors.indexOf(‘pink’)); //1 console.log(colors.indexOf(‘pi’)); //-1 //(24)includes // 返回的是一个布尔值:true or false console.log(colors.includes(“aqu”)); //false

/* 小结:请列举出js中常用的数组方法: push pop unshift sort slice splice reverse join concat forEach Map filter reduce some every find findIndex fill Array.isArray Array.from Array.of */

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137965.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月5，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法