数组常用的12种方法

Lyux 发布于2019-08-19 17:52 / 3332人阅读

数组中的常用的12个方法：push、pop、unshift、shift、slice、splice、concat、reverse、sort、join、toString、indexOf。

首先我们要明确以下几点：

    1、方法是干啥用的；
    2、每种方法传递的参数有多少个，每一个是什么样的数据类型，每一个参数所代表的意思是什么？
    3、返回值类型，和代表的意思；
    4、重要的：通过此方法，原有的数组是否改变；

数组的这12个方法是面试时经常会问到的内容，大家可以按照以上四个维度来进行记忆和学习。

（一）关于数组的增加、修改、删除 push()

1、push()向数组末尾增加元素;
   参数:不确定个数，而且类型也不确定，要添加的新元素;
   返回:新增加后的数组长度;
   原有数组改变;
   ![图片描述][1]
   
   扩展:不想使用push,也想向数组的末尾增加内容
        ary[ary.length] = 10;
        即ary.splice(ary.length, 0, 10);

unshift()

 2、unshift()向数组开头增加元素
    参数:不确定个数，而且类型也不确定，要添加的新元素
    返回:新增加后的数组长度
    原有数组改变
    ![图片描述][2]

shift()

 3、shift()删除数组第一个元素；
    返回值：删除了的值；
    原有数组改变；
    ![图片描述][3]

pop()

 4、pop()删除数组最后一个元素
    返回值：删除了的值；
    原有数组改变；
    ![图片描述][4]
   
    扩展:不用pop想删除最后一项的内容
        ary.length--;//ary.length-=1或者ary.length=ary.length-1
        即ary.splice(ary.length-1);
 
 【shift() 和 pop()，分别是指从一个数据中的最前面和最后面删除一个值，并返删除值。】

splice()

 5、splice():它既能实现删除，也能实现增加，还能实现修改
    返回的是：删除的项当成新的数组返回;
    原有数组是改变的;

 [删除]
 ary.splice(n,m)  从索引n开始,删除m个元素,把删除的内容以一个新数组的方式返回,原来的数组改变
 ary.splice(n)    从索引n开始,删除到数组的末尾
 ary.splice(0)    把原来的数组中每一项都删除掉(清空数组每一项),把之前的每一项的值以一个新的数组返回(把之前的数组克隆了一份一模一样的,这样的克隆会修改原来的数组)
 ary.splice()     数组中一项都没有删除,返回的是一个空数组

 [修改]
 ary[2] = 340;    利用对象的操作的方式修改某一项的值
 splice(n,m,x)    从索引n开始,删除m个,用x替换删除的部分,把删除的内容以一个新的数组返回,原来的数组改变

 [增加]
 splice(n,0,x)   从索引n开始,一个都不删除(返回结果是一个空数组),把x增加到索引n的前面,原来的数组改变

（二）关于数组的截取和拼接 slice()

1、slice():实现数组的截取,在原来的数组中截取某一部分
   slice(n,m)         从索引n开始,找到索引为m处(不包含m),将找到的部分已一个新的数组返回,原来的数组不变
   slice(n)           从索引n开始一直找到数组的末尾
   slice(0)/slice()   把原来的数组克隆一份一模一样的新数组返回
   
   slice有几种特殊的情况:
   n或者m为负数
   n>m
   n或者m已经超出了整个数组的范围

concat()

2)concat:把两个数组拼接到一起,原来的数组不变
  ary1.concat(ary2)  把ary2和ary1进行拼接,ary2在后面
  ary1.concat()      把ary1克隆一份一模一样的数组

（三）把数组转换为字符串 toString()

1)toString:把数组转换为字符串,原来的数组不变
    var ary = [12, 23, 34, 45];
    var res = ary.toString();
    console.log(res);//->"12,23,34,45"

join()

2)join()为数组添加指定的分隔符
  参数：可以有，可以是一个分割符(不写默认是",");
  返回:分割开后的字符串;
  原有数组不变;
    var ary = [12, 23, 34, 45];
    var res = ary.join("+");
    console.log(res);//->"12+23+34+45"

扩展:eval->JS中把字符串变为JS表达是执行的一个方法
    console.log(eval("12+23+34+45"));//->114

    把数组中的每一项进行相加求和
    var ary = [12, 23, 34, 45];
    console.log(eval(ary.join("+")));

（四）数组的排序和排列 reverse

1)reverse:把数组倒过来排列,原来的数组改变

sort

2)sort:给数组进行排序,原有的数组会发生改变
  ary.sort() 这样的话只能处理10以内的数字进行排序,因为它是按照UNICODE编码的值进行排序的
  ary.sort(function (a, b) {return a - b;}); 由小到大排序
  ary.sort(function (a, b) {return b - a;}); 由大到小排序

（五）只有在标准浏览器中兼容的方法,在IE6~8下不兼容的 indexOf / lastIndexOf

1)indexOf / lastIndexOf (字符串中也有这两个方法,但是字符串的这两个方法兼容所有的浏览器,而数组的这两个方法是不兼容的)
 当前内容在数组中第一次/最后一次出现位置的索引,如果数组中没有这一项,返回的结果是-1,如果有这一项,索引是几就返回几,原来的数组不变

 这样的话我们就可以验证当前的内容在数组中是否存在了
    var ary = [12, 34, 230, 54, 34, 25];
    if (ary.indexOf("数组") > -1) {
        //说明"数组"在数组中存在
    } else {
        //说明"数组"在数组中不存在
    }

forEach

2)forEach / map 都是用来遍历数组中的每一项的
  forEach:数组中有几项,我们的函数就执行几次;
  函数中的形参:item->当前遍历的数组中这一项的值 index->当前这一项的索引
  原来的数组不变
    ary.forEach(function (item, index) {
        console.log(item, index);
    });

map

3)map和forEach的语法是一样的,但是比forEach多加了一个把原来内容进行替换的功能
  原来数组不变
  返回的新数组是每一项都乘以了10
    var newAry = ary.map(function (item, index) {
        return item * 10;
    });
    console.log(newAry);//->[120, 340, 2300, 540, 340, 250]

（六）更多的数组方法: Array.prototype

 var ary = [12, 34, 230, 54, 34, 25];
 console.dir(Array.prototype);

云服务器 GPU云服务器 16种常用的数据分析方法汇总在家赚钱的十种方法数据迁移的四种方法 Error的2种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78930.html

JavaScript数组去重（12种方法，史上最全）

摘要：数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些你能答出其中的种，面试官很有可能对你刮目相看。数组去重的方法一利用去重中最常用不考虑兼容性，这种去重的方法代码最少。数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看...

rozbo 2019-08-23 12:01 评论0 收藏0
JavaScript数组——常用数组方法汇总

摘要：本文记录关于数组的一些常用方法，搜集总结。对于数组中的每个元素，都会调用函数一次。返回值是一个新数组，其中的每个元素均为关联的原始数组元素的回调函数返回值。本文记录关于js数组的一些常用方法，搜集总结。主要思路： 1. 方法功能是什么 2. 传递的参数是什么 3. 返回值是什么 4. 原来的数组是否改变第一组：关于数组的增加、删除和修改 1.push 向数组末尾增加新的...

HollisChuang 2019-08-21 10:33 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
『总结』JS常用方法与片段

摘要：元素是通过指定的分隔符进行分隔的。返回值一个字符串数组，执行的操作与执行的操作是相反的。返回值与没有参数的方法返回的字符串相同。 1.javascript删除元素节点 IE中有这样一个方法:removeNode()，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错了 removeNode is not defined，但是在核心JS中有一个操作DOM节点的方法叫：r...

eternalshallow 2019-08-21 16:23 评论0 收藏0