• 数组操作


    下面,我首先总结一下数组处理的所有方法,再把在此处会用到的方法贴出来。


     一.增加元素

    1.push():push可接收任意数量的参数,把它们逐个添加至数组末尾,并且可以返回修改后数组的长度。

    var sports = ['soccer', 'baseball'];
    var total = sports.push('football', 'swimming');
    
    console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
    console.log(total);  // 4

    2.unshift() :与push()类似,也可接收任意数量的参数,只不过是将参数逐个添加至数组最前面而已,同样返回新数组长度。

    复制代码

    const array1 = [1, 2, 3];

    console.log(array1.unshift(4, 5));
    // expected output: 5

    console.log(array1);
    // expected output: Array [4, 5, 1, 2, 3]

    复制代码

    3.concat() :该方法与push()方法有点类似,同样是将元素添加至数组末尾,只不过这个数组已经不是原来的那个数组了,而是其副本,所以concat()操作数组后会返回一个新的数组。

            特性:

      1. 不传参数,返回当前数组副本
      2. 传递非数组参数,这些参数就会被直接添加到结果数组的末尾
      3. 传递数组参数,将数组每一个元素,添加新的数组中
    const array1 = ['a', 'b', 'c'];
    const array2 = ['d', 'e', 'f'];
     
    console.log(array1.concat(array2));
    // expected output: Array ["a", "b", "c", "d", "e", "f"]

    4.splice(): 功能很强大,划重点

    前面的三个方法都具有很大局限性,因为不是添加到数组前就是数组后,而splice()它非常灵活,它可以添加元素到数组的任意位置。

    它除了可以添加元素之外还具有删除和替换元素的功能。

    splice()可以向数组指定位置添加任意数量的元素。

    需要传入至少3个参数:splice(a, b, c, d, ......)

      • 1、a 起始元素的位置
      • 2、b 要删除的元素个数,从起始元素开始算
      • 3、c后面的是要插入的元素,可以是数组

    总结一下,原理就是,在规定的起始位置a,删除b个,如果后面需要塞进去新元素就加到cd...的位置,如果不加就是删除了,splice实质上是通过删除元素来实现插入、删除、替换的

    4.1  splice 删除

    写法

    array.splice(index,n);

    参数含义

    index:数组中需要删除数据的起始位置;

    n:需要删除的元素,数据的个数;

    4.2   splice 插入

    写法

    array.splice(index,0,data1,data2,....);

    参数

    index:数组中需要插入数据的起始位置;

    0:删除的个数为0;

    data1,data2:需要插入的元素,用逗号隔开

    4.3   splice 替换

    写法

    array.splice(index,n,data1,data2,......);

    参数

    index:需要替换的元素的起始位置;

    n:需要替换的元素的个数,实质是删除;

    data1,data2:需要插入元素,用逗号隔开;

    二、删除元素

    1.pop() :与push()方法配合使用可以构成后进先出的栈,该方法可从数组末尾删除最后一项并返回该项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const plants = ['broccoli''cauliflower''cabbage''kale''tomato'];
     
    console.log(plants.pop());
    // expected output: "tomato"
     
    console.log(plants);
    // expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
     
    plants.pop();
     
    console.log(plants);
    // expected output: Array ["broccoli", "cauliflower", "cabbage"]

      2.shift(): 与push()方法配合使用可以构成先进先出的队列,该方法可删除数组第一项并返回该项。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const array1 = [1, 2, 3];
     
    const firstElement = array1.shift();
     
    console.log(array1);
    // expected output: Array [2, 3]
     
    console.log(firstElement);
    // expected output: 1

      3.slice(): 该方法同concat()一样是返回一个新数组,不会影响原数组,只不过slice()是用来裁剪数组的,返回裁剪下来的数组。

    slice()方法可以接受一或两个参数,

    1、一个参数,返回从该参数指定位置开始到当前数组末尾的所有项。

    2、两个参数,返回起始和结束位置之间的项,但不包括结束位置的项。

    复制代码
    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    
    console.log(animals.slice(2));
    // expected output: Array ["camel", "duck", "elephant"]
    
    console.log(animals.slice(2, 4));
    // expected output: Array ["camel", "duck"]
    
    console.log(animals.slice(1, 5));
    // expected output: Array ["bison", "camel", "duck", "elephant"]
    复制代码

       4、splice(): 它除了可以添加元素之外还具有删除和替换元素的功能。 详细看以上例子

     

    三、查找元素

    indexOf() 和 lastIndexOf()

    这两个方法都接收两个参数:

    1、要查找的项

    2、表示查找起点位置的索引。(可选的)

    indexOf() 从数组的开头(位置0)开始向后查找。

    lastIndexOf() 从数组的末尾开始向前查找。

    两个方法,当找不到该元素时,都返回 -1 

    复制代码
    var arr = [1,2,3,4,5,2];
     
    var index = arr.indexOf(2);
     
    console.log(index);  // 1
     
    index = arr.indexOf(2, 0);
    console.log(index);  // 1
     
    index = arr.indexOf(2, 2);
    console.log(index);  // 5
     
    index = arr.indexOf(6);
    console.log(index);  // -1
    复制代码

     

    其它方法:

    1.join():该方法用来将数组转换为字符串,不改变原数组,返回转换后的字符串

    复制代码
    const elements = ['Fire', 'Air', 'Water'];
    
    console.log(elements.join());
    // expected output: "Fire,Air,Water"
    
    console.log(elements.join(''));
    // expected output: "FireAirWater"
    
    console.log(elements.join('-'));
    // expected output: "Fire-Air-Water"
    复制代码

    2.sort(): 按ascii码排序,改变原数组,返回排序后的数组

    复制代码
    const months = ['March', 'Jan', 'Feb', 'Dec'];
    months.sort();
    console.log(months);
    // expected output: Array ["Dec", "Feb", "Jan", "March"]
    
    const array1 = [1, 30, 4, 21, 100000];
    array1.sort();
    console.log(array1);
    // expected output: Array [1, 100000, 21, 30, 4]
    复制代码

    3.reverse() :用于颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组。

    复制代码
    const array1 = ['one', 'two', 'three'];
    console.log('array1:', array1);
    // expected output: "array1:" Array ["one", "two", "three"]
    
    const reversed = array1.reverse();
    console.log('reversed:', reversed);
    // expected output: "reversed:" Array ["three", "two", "one"]
    
    /* Careful: reverse is destructive. It also changes
    the original array */
    console.log('array1:', array1);
    // expected output: "array1:" Array ["three", "two", "one"]
    复制代码

    4.filter():返回数组中满足条件的元素组成的新数组,原数组不变(筛选,过滤)

    1
    2
    3
    4
    5
    6
    const words = ['spray''limit''elite''exuberant''destruction''present'];
     
    const result = words.filter(word => word.length > 6);
     
    console.log(result);
    // expected output: Array ["exuberant", "destruction", "present"]

    5.map() :map() 方法来根据需求格式化原数组,返回格式化后的数组。原数组不变。可以传入三个值,分别是(当前元素,索引index,map的原数组)

    复制代码
    var arr = [1,2,3,4,5,2]; 
    var arr2 = arr.map(function(current, index, array){
        console.log("当前元素current="+current + "索引index="+index +"数组array="+array)
        return "$"+current
    })
    console.log(arr) //[1, 2, 3, 4, 5, 2]
    console.log(arr2) //["$1", "$2", "$3", "$4", "$5", "$2"]
    复制代码

    6.every() :对数组的每一项都运行给定的函数,若每一项都返回 ture,则返回 true($$)

    1
    2
    3
    4
    5
    6
    const isBelowThreshold = (currentValue) => currentValue < 40;
     
    const array1 = [1, 30, 39, 29, 10, 13];
     
    console.log(array1.every(isBelowThreshold));
    // expected output: true

    7.some():对数组的每一项都运行给定的函数,若存在一项或多项返回 ture,否则返回 false(||)

    复制代码
    const array = [1, 2, 3, 4, 5];
    
    // checks whether an element is even
    const even = (element) => element % 2 === 0;
    
    console.log(array.some(even));
    // expected output: true
    复制代码

    8.forEach() :遍历整个数组,不中断,可以传入三个值,分别是(当前元素,索引index,原数组)

    复制代码
    const array1 = ['a', 'b', 'c'];
    
    array1.forEach(element => console.log(element));
    
    // expected output: "a"
    // expected output: "b"
    // expected output: "c"
    复制代码

    forEach和map很相似,很多地方用两个其中一种都行

    相同点:

    1. 都是只能遍历数组
    2. 都有三个返回值(当前元素,索引index,原数组)
    3. 都是循环遍历数组每一项

    区别是:

    map,有返回值,可以return出来

    forEach,没有返回值。forEach()返回值是undefined,不可以链式调用。

          没有办法终止或者跳出forEach()循环,除非抛出异常,所以想执行一个数组是否满足什么条件,返回布尔值,可以用一般的for循环实现,或者用Array.every()或者Array.some();

    关于以上区别的笔试题

    ["1", "2", "3"].map(parseInt);  //结果  [1, NaN, NaN] 

    如果想得到[1, 2,3]应该这么做
    function returnInt(element){
      return parseInt(element,10);
    }
     
    ["1", "2", "3"].map(returnInt); 

    这主要是因为 parseInt()默认有两个参数,第二个参数是进制数。当parsrInt没有传入参数的时候,而map()中的回调函数时候,会给它传三个参数,第二个参数就是索引,明显不正确,所以返回NaN了。

    另,写map需要注意的点:

    Arr
    (Arr || []).map(item=>{})   这样写就会尽量避免报“Cannot read property 'map' of undefined”这个错误
     
    定义object的时候尽量这样定义,避免后面报错
    object
    Const {a,b,c} = object || {}
    Const {b,d} = a || {}
  • 相关阅读:
    Java启动工程时,加载固定数据到Map中(不用每次访问数据库)
    Java删除文件夹和其子文件、文件的拷贝和剪切
    EasyExcel导入工具(SpringMVC下使用)
    web工程启动时,在一个类中延迟加载Bean,因为该Bean类可能还没被JVM加载
    ECharts访问后台,JSON格式返回数据实例
    Java 实现缓存,一个线程存,一个线程取
    IE浏览器使用VLC实时显示视频(海康、大华)
    Windows和Linux下 Java开发ping工具类
    Quartz定时器+Spring + @Autowired注入 空指针异常
    ubuntu 安装mysql
  • 原文地址:https://www.cnblogs.com/Chenshuai7/p/13637270.html
Copyright © 2020-2023  润新知