js数组的常见方法&数组的遍历

01、数组的一些常见方法

  • 数组的四个基本方法:(数组的添加和删除)

    方法描述备注
    push()向数组的最后面插入一个或多个元素,返回结果为该数组新的长度会改变原数组
    pop()删除数组中的最后一个元素,返回结果为被删除的元素会改变原数组
    unshift()在数组最前面插入一个或多个元索,返回结果为该数组新的长度会改变原数组
    shift()删除数组中的第一个元素,返回结果为被删除的元素会改变原数组
  • 数组的常见方法:

    方法描述备注
    slice()从数组中提取指定的一个或多个元索,返回结果为新的数组不会改变原数组
    splice()从数组中删除指定的一个或多 个元素,返回结果为新的数组会改变原数组
    concat()连接两个或多个数组,返回结果为新的数组不会改变原数组
    join()将数组转换为字符串,返回结果为转换后的字符串不会改变原数组
    reverse()反转数组,返回结果为反转后的数组会改变原数组
    sort()对数组的元素,默认按照Unicode编码,从小到大进行排序会改变原数组
  • 遍历数组的方法:

    方法描述备注
    for循环这个大家都懂
    forEach()和 for循环类似,但需要兼容IE8以上forEach()没有返回值。也就是说,它的返回值是 undefined
    map()对原数组中的每一项进行加工 ,将组成新的数组不会改变原数组
    filter()对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组,返回结果为新的数组。可以起到过滤的作用不会改变原数组
    every()如果有一项返回false ,则停止遍历,此方法返回false一假即假。要求每一项都返回true,最终的结果才返回true
    some()只要有一项返回true,则停止遍历,此方法返回true一真即真。要求每一项都返回false ,最终的结果才返回 false
    reduce为数组中的每一个元素 ,依次执行回调函数
  • 数组的其他方法:

    方法描述
    indexOf(value)从前往后索引,获取value在数组中的第一个下标
    lastIndexOf(value)从后往前索引,获取value在数组中的最后一个下标
    find(function())找出第一个满足「指定条件返回true」 的元素。
    findIndex(function())找出第一个满足「指定条件返回true」的元索的index
    Array.from(arrayLike)将伪数组转化为真数组
    Array.of(value1, value2, value3)将一系列值转换成数组。

02、数组的四个基本方法(数组元素的添加和删除)

  1. push()

    push():向数组的最后面插入一个或多个元素,返回结果为该数组新的长度。

    语法:

    数组的新长度 = 数组.push(元素)
    

    例子:

    var arr = ["王一""王二""王三"];
    var result1 = arr.push("王四"); //末尾插入一个元素
    var result2 = arr.push("王五","王六"); //末尾插入多个元素
    console.log(result1); //打印结果: 4
    console.log(resu1t2); //打印结果: 6
    console.log(JSON.stringify(arr)); //打印结果: ["王一","王二”,"王三”,"王四","王五","王六"]
    
  2. pop()

    pop():删除数组中的最后一个元素,返回结果为被删除的元素

    语法:

    被删除的元素 = 数组.pop()
    

    例子:

    var arr = ["王一","王二","王三"];
    var result1 = arr.pop();
    console.log(resu1t1); //打印结果:王三
    console.log(JSON.stringify(arr)); //打印结果: ["王一","王二"]
    
  3. unshift()

    unshift():在数组最前面插入一个或多个元索,返回结果为该数组新的长度。插入元索后,其他元索的索引会依次调整。

    语法:

    数组的新长度 = 数组.unfhift(元素)
    

    例子:

    var arr = ["王一","王二”,"王三"];
    var result1 = arr.unshift("王四"); //最前面插入- -个元素
    var result2 = arr.unshift("王五""王六"); //最前面插入多个元素
    console.log(resu1t1); //打印结果: 4
    console.log(resu1t2); //打印结果: 6
    console.log(JSON.stringify(arr)); //打印结果: ["王五","王六","王四","王一","王二","王三"]
    
  4. shift()

    shift():删除数组中的第一个元素,返回结果为被删除的元素

    语法:

    被删除元素 = 数组.shift()
    

    例子:

    var arr = ["王一","王二","王三"];
    var result1 = arr.shift();
    console.log(resu1t1); //打印结果:王一
    console.log(JSON.stringify(arr)); //打印结果: ["王二", "王三"] 
    

03、数组的常见方法

  1. slice()

    slice():从数组中提取指定的一个或者多个元素,返回结果为新的数组(不会改变原来的数组)。

    PS:该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回。

    语法:

    新数组 = 原数组.slice(开始位置的索引,结束位置的索引) // 值得注意的一点:包含开始索引,不包含结束索引
    

    例子:

    var arr = ["a", "b", "c", "d", "e", "f"];
    var result1 = arr.slice(2); //从第二个值开始提取
    var result2 = arr.slice(-2); //提取最 后两个元素
    var result3 = arr.s1ice(2,4); //提取从第二个到第四个之间的值(不包括第四个值)
    var result4 = arr.s1ice(4,2); //空
    console.log("arr:" + JSON.stringify(arr));
    console.log("resu1t1:" + JSON.stringify(resu1t1));
    console.log("resu1t2:" + JSON.stringify(result2));
    console.log("resu1t3:" + JSON.stringify(result3));
    console.log("resu1t4:" + JSON.stringify(resu1t4));
    

    补充:

    很多前端人员会使用slice()将伪数组转化为真数组,写法如:

    array = Array.prototye.slice.ca11 (arrayLike)
    或者
    array = [].slice.call(arrayLike)
    

    但在ES6中有一个新的API来处理这种情况:(专门用来将伪数组转化成真数组)

    array = Array.from(arrayLike)
    
  2. splice()

    splice():从数组中添加/删除指定的一个或多个元素,返回结果为新的数组(会改变原来的数组)。

    备注:该方法会改变原数组,会将指定元素从原数组中删除;被删除的元素会封装到一个新的数组中返回。

    语法:

    新数组=原数组.splice(起始索引index,需要删除的个数,第三个参数,第四个参数...);
    

    上方语法中,第三个及之后的参数,表示:向原数组中添加新的元素,这些元素将会自动插入到开始位置索引|的前面。

    例1:

    var arr1= ["a", "b","c""d", "e", "f"];
    var result1 = arr1.splice(1); //从第 index为1的位置开始,删除元素
    console.log("arr1:"+ JSON.stringify(arr1)); //输出结果:["a"]
    console.log("resu1t1: " + JSON.stringify(result1));//输出结果:["b","c","d","e", "f"]
    

    例2:

    var arr2 = ["a","b","C","d","e","f"];
    var result2 = arr2.splice(-2); //删除最后两个元素
    console.log("arr2:"+ JSON.stringify(arr2)); //输出结果:["a","b","c","d"]
    console.log("resu1t2: " + JSON.stringify(resu1t2));//输出结果:["e","f"]
    

    例3:

    var arr3 = ["a","b","c","d","e","f"];
    var result3 = arr3.splice(1, 3); //从第index为1的位 置开始删除元素,一共删除三个元素
    console.log("arr3: " + JSON.stringify(arr3)); //输出结果:["a","e","f"]
    console.log("result3:"+ JSON.stringify(resu1t3));//输出结果:["b","c","d"]
    

    例4(第三个参数的用法):

    var arr4 = ["a", "b", "C", "d", "e", "f"];
    //从第index为1的位置开始删除元素,一共删除三个元素。并且在index=1 的前面追加两个元素
    var resu1t4 = arr4.splice(1, 3,"千古壹号","vae");
    console.log("arr4: "+JSON.stringify(arr4));//输出结果:["a","千古壹号","vae","e","f"]
    console.log("resu1t4: " + JSON.stringify(resu1t4));//输出结果:["b", "C", "d"]
    
  3. concat()

    concat():连接两个或多个数组,返回结果为新的数组。 (不会改变原数组)

    语法:

    新数组 = 数组1.concat(数组2,数组3...);
    

    例子:

    var arr1 = [1,2,3];
    var arr2 = ["a","b","c"];
    var arr3 = ["千古壹号","vae"];
    var result1 = arr1.concat(arr2);
    var result2 = arr2.concat(arr1,arr3);
    console.log("arr1 =" + JSON.stringify(arr1));//输出结果:[1,2,3]
    console.log("arr2 =" + JSON.stringify(arr2));//输出结果:["a","b","c"]
    console.log("arr3 =" + JSON.stringify(arr3));//输出结果:["千古壹号","vae"]
    console.log("resu1t1 =" + JsoN.stringify(result1));//输出结果:[1,2,3,"a","b","c"]
    console.log("resu1t2 =" + JSON.stringify(result2));//输出结果:["a","b","c",1,2,3,"千古壹号","vae"]
    

    从打印结果中可以看到,原数组并没有被修改。

  4. join()

    join():将数组转换为字符串,返回结果为转换后的字符串(不会改变原来的数组)。

    PS: join()方法可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符;如果不指定连接符,则默认使用,作为连接符,此时和toString()的效果是一致的。

    语法:

    新的字符串 = 原数组.join(参数);//参数选填
    

    例子:

    var arr = ["a", "b", "c"];
    var result1 = arr.join(); //这里没有指定连接符,所以默认使用作为连接符
    console.log(result1) //输出结果: a,b,c
    var result2 = arr.join("-"); //使用指定连接符
    console.log(result2) //输出结果: a-b-c
    var result3 = arr.join(""); //使用指定连接符
    console.log(result3) //输出结果: abc
    
  5. reverse()

    reverse():反转数组,返回结果为反转后的数组(会改变原来的数组)。

    语法:

    反转后的数组 = 数组.reverse();
    

    例子:

    var arr = ["a", "b", "c", "d", "e", "f"];
    var result = arr.reverse(); //将数组arr进行反转
    
    console.log("arr =" + JSON.stringify(arr)); //输出["f","e","d","c","b","a"]
    console.log("result =" + JSON.stringify(result));//输出["f","e","d","C", "b","a"]
    

    从打印结果可以看出,原来的数组经被改变了。

  6. sort()方法

    sort(): 对数组的元素进行从小到大来排序(会改变原来的数组)。

    sort()方法举例

    • 无参时

      如果在使用sort()方法时不带参,则默认按照Unicode编码,从小到大进行排序。

      例1(当数组中的元素为字符串时):

      var arr1 = ["e", "b", "d", "a", "f", "c"];
      var result = arr1.sort(); //将数组arr1进行排序
      console.log("arr1 =" + JSON.stringify(arr1)); //输出["a","b","C","d","e","f"]
      console.log("resu1t =" + JSON.stringify(result));//输出["a","b","C","d","e","f"]
      

      例2(当数组中的元素为数字时):

      var arr2=[5,2,11,3,4,1];
      var result = arr2.sort(); //将数组arr2 进行排序
      console.log("arr2 =" + JSON.stringify(arr2));//输出[1,11,2,3,4,5]
      console.log("result =" + JSON.stringify(result));//输出[1,11,2,3,4,5]
      

      上方的打印结果中,你会发现,使用sort()排序后,数字11竟然在数字2的前面。这是为啥呢?因为上面讲到了,sort()方法是按照Unicode编码进行排序的。

    • 带参时

      如果在sort()方法中带参,我们就可以自定义排序规则。具体做法如下:

      我们可以在sort()添加一个回调函数,来指定排序规则。回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数

      浏览器根据回调函数的返回值来决定元素的排序: (重要)

      • 如果返回一个大于0的值,则元素会交换位置
      • 如果返回一个小于0的值,则元素位置不变
      • 如果返回一个0,则认为两个元索相等,则不交换位置

      例子:

      var arr3=[5,2,11,3,4,1];
      //自定义排序规则
      var result = arr3.sort(function(a, b) {
          if (a>b){ //如果a大于b,则交换a和b的位置
              return 1;
          }elseif(a<b){//如果a小于b,则位置不变
              return -1;
          } else{//如果a等于b,则位置不变
              return 0;
          }
      });
      console.log("arr3 =" + JSON.stringify(arr3));//输出[1,2,3,4,5,11]
      console.log("result =" + JSON.stringify(resu1t));//输出[1,2,3,4,5,11]
      

      优化代码:

      var arr3=[5,2,11,3,4,1];
      //自定义排序规则
      var result = arr3. sort(function(a, bJ {
      	return a - b; //升序排列
      	// return b - a; //降序排列
      });
      console.log("arr3 =" + JSON.stringify(arr3));//输出[1,2,3,4,5,11]
      console.log("result ="+ JSON.stringify(result));//输出[1,2,3,4,5,11]
      

04、数组的遍历

遍历数组即:获取并操作数组中的每一个元素。 在我们的实战开发中,使用得非常频繁。

遍历数组的方法包括: every()、filter()、 forEach()、map()、some()

PS:这几个方法不会修改原数组

语法:

数组/boolean/= 数组.every/filter/forEach/map/some(
                    function(item, index, arr){
                    		程序和返回值;
                    })

有了这几种方法,就可以替代一些for循环了。下面依次来介绍。

  1. for循环遍历

    例子:

    var arr = ["生命壹号""许嵩""永不止步"];
    for(var i = 0; i<arr.length;i++){
    	console.log(arr[i]); // arr[]代表的是数组中的每一个元素i
    }
    console.log(arr);
    
  2. forEach()遍历

    forEach()这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8 ,则不要使用forEach,改为使用for循环来遍历即可。

    forEach(方法需要一个函数作为参数。 这种函数,是由我们创建但是不由我们调用的,我们称为回调函数。

    数组中有几个元素,该回调函数就会执行几次。执行完毕后,浏览器会将遍历到的元素。

    回调函数中传递三个参数:

    • 第一个参数,就是当前正在遍历的元素
    • 第二个参数,就是当前正在遍历的元素的索引
    • 第三个参数,就是正在遍历的数组

    例子:

    var arr = ["王一”,"王二”,"王三”];
    arr.foreach(function(item, index, obj) {
        console.log("item:" + item);
        console.logC"index:" + index);
        console.log("obj:" + obj);
        console.log("-----------");
    });
    

    注意, forEach()的返回值是undefined。也就是说,它没有返回值。如果你尝试tempArry = arr. forEach()这种方式来接收,是达不到效果的。

  3. map()方法

    解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是加工之后的新数组)。

    例1(拷贝的过程中改变数组元素的值):

    有一个已知的数组arr, 我要求让arr中的每个元素的值都加10,这里就可以用到map方法。代码举例:

    var arr=[13,62,56];
    var arr2 = arr.map(function (item, index) {
    	return item + 10; //让arr1中 的每个元素加10
    })
    console.log(arr2);
    

    例2(重要案例):

    const arrl = [
    { name: '千古壹号',age: '28' },
    { name:'许嵩',age: '32' }
    ];
    const arr2 = arr1.map(item => item.name); //将数组arrl中的name 属性,存储到数组arr2中
    console.log('arr1:'+ JSON.stringify(arr1));
    console.log('arr2:' + JSON.stringi fy(arr2)); //输出["千古壹号","许嵩"]
    
  4. filter()

    解释:对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组(返回值就是这个新的数组)。

    例1(找出数组arr中大于4的元素,返回一个新的数组。):

    var arr=[1,3,6,2,5,6];
    var arr2 = arr1.filter(function(item, index) {
    	return item > 4; //将arr1中大于4的元素返回,组成新的数组
    });
    console.log(JSON.stringify(arr2)); //输出[6,5,6]
    

    ES6写法:

    const arr1 = [1, 3, 6, 2, 5, 6];
    const arr2 = arr1.filter(item => item > 4); //将arr1中大于4的元素返回,组成新的数组
    console.log(JSON.stringify(arr2));
    

    例2(获取数组A中指定类型的对象,放到数组B中):

    const arr1p [
        { name: '许高',type:'一线' },
        { name: '周杰伦',type: '过气' },
        { name: '邓紫棋',type: '一线' }
    ];
    const arr2 = arr1.filter(item => item.type == '一线'); //筛选出一线歌手
    console.log(JSON. stringify(arr2));
    
  5. every()方法

    every():对数组中每一项运行回调函数 ,如果都返回true,every就返回true ;如果有一项返回false ,则停止遍历, 此方法返回false.

    PS: every)方法的返回值是boolean值,参数是回调函数。

    例子:

    var arr = ["千古","宿敌","南山忆","素颜"];
    var bool = arrl.every(function(element,index,array) {
        if (element.length > 2) {
        return false;
        }
        return true;
    });
    console.log(bool); //输出结果: false.只要有一个元素的长度是超过两个字符的,就返回false
    
    var arr2 = ["千古","宿敌","南山”,"素颜"];
    var bool2 = arr2.every(function(element,index,array) {
        if (element.length > 2) {
        return false;
        }	
        return true;
    });
    console.log(bool2); //输出结果, true. 因为每个元素的长度都是两个字符。
    
  6. some()方法

    some() : 对数组中每一项运行回调函数,只要有一项返回true,则停止遍历,此方法返回true。

    注意: some()方法的返回值是boolean值。

  7. reduce()方法

    reduce():为数组中的每一个元素,依次执行回调函数。

    语法:

    arr.reduce(
    	function(previousValue, item, index, arr) {
    },initialvalue)
    

    参数解释:

    • previousValue:上一次调用回调函数时的返回值,或者初始值
    • currentntValue :当前正在处理的数组元素
    • currentIndex :当前正在处理的数组元素下标
    • array :调用reduce()方法的数组
    • initialValue :可选的初始值(作为第一次调用回调函数时传给 previousValue的值)

    PS:如果能熟练使用reduce的用法,将能替代很多其他的数组方法。

    例子:

    var arr=[2,0,1,9,6];
    var sumValue = arr.reduce (function(total, item) { //计算 arr数组中,所有元素项的综合
    	return total + item;
    },0);
    console.log('sumvalue:' + sumvalue); //打印结果: 18
    

05、数组的其他方法

  1. indexOf()和lastIndexOf:获取数据的索引

    语法:

    索引值 = 数组.indexof(value);
    索引值 = 数组.lastIndexof(value);
    

    解释:

    • indexOf(value) :从前往后索引,获取value在数组中的第一个下标。
    • lastIndexOf(value) :从后往前索引,获取value在数组中的最后一个下标。

    作用:

    利用这个方法,我们可以判断某个值是否在指定的数组中。如果没找到则返回-1

    例1:

    var arr = ["a", "b","C","d","e","d","c"];
    console.log(arr.indexOf("c"));//从前往后,找第-一个"c"在哪个位置
    console.log(arr.lastIndexOf("d"));//从后往前,找第一个"d"在哪个位置
    

    例2(判断某个值是否在数组中):

    var arr = [" 29926392220","29965620629","28003663436","28818504366"];
    var str=[
    {name:"smyh", id: "12334"},
    {name:"vae", id: "28818504366"}
    ];
    str.filter(item => {
    	return arr.indexof(item.id)!=-1;
    })
    
  2. find()

    语法:

    find(function(item,index,arr) {return true})
    

    作用:找出第一个满足[指定条件返回true]的元素。

    PS:一旦找到符合条件的第一个元素 ,将不再继续往下遍历。

    例子:

    let arr=[2,3,2,5,7,6];
    let result = arr.find(function (item, index) {
    	return item > 4; //遍历数组arr, 一旦发现有第一个元素大于4,就把这个元素返回
    });
    console.log(result); //打印结果: 5
    
  3. findIndex()

    语法:

    findIndex(function(item,index,arr) { return true})
    

    作用:找出第一个满足[指定条件返回true]的元索的index.

    例子:

    let arr=[2,3,2,5,7,6];
    let result = arr.findIndex(function (item, index) {
    	return item > 4; //遍历数组arr, 一旦发现有第一个元素大于4,就把这个元素的index返回
    });
    console.log(result); //打印结果: 3
    
  4. Array.from()

    语法:

    array = Array.from(arrayLike)
    

    作用:将伪数组或可遍历对象转换为真数组

    伪数组与真数组的区别:

    伪数组的原型链中没有Array.prototype,而真数组的原型链中有Array.prototype。因此伪数组没有pop、join等属性。

  5. Array.of()

    语法:

    Array.of(value1,value2,value3)
    

    作用:将一系列值转换成数组。

    例子:

    let arr = Array.of(1,abc,true);
    console.log(arr);
    

06、other

  1. isArray():判断是否为数组

    布尔值 = Array.isArray(被检测的值)
    

    以前,我们会通过A instanceof B来判断A是否属于B类型。但是在数组里,这种instanceof方法已经用的不多了,因为有下面isArray()方法。

  2. toString():数组转换字符串

    字符串 = 数组.toStirng();
    

    作用:把数组转换成字符串,每项用,分割。

  3. valueOf():返回数组本身

    数组本身 = 数组.value0f();
    

    这个方法的意义不大。因为我们指直接写数组对象的名字,就已经是数组本身了。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值