zoukankan      html  css  js  c++  java
  • 数组常用方法

    数组基本操作可以归纳为 增 删 改 查。
    需要留意的是哪些方法会对原数组产生影响,哪些方法不会。
    ## 增
    **push、unshift、splice、concat。**
    下面前三种是对原数组产生影响的增添方法,**第四种则不会对原数组产生影响**。
    - push()
     
    push()方法接收任意数量的参数,并将它们添加到数组末尾。返回数组的最新长度。
    ```js
    let colors = [];
    let count = colors.push("red", "yellow", "blue");
    console.log(count); // 3
    ```
    - unshift()
    unshift()在数组开头添加任意多个值。返回数组的最新长度。
    ```js
    let fruit = ["apple", "banana", "pear"];
    let count = fruit.unshift("peach", "strawberry", "pineapple");
    console.log(fruit); // ["peach", "strawberry", "pineapple", "apple", "banana", "pear"]
    console.log(count); // 6
    ```
    - splice()
    传入三个参数,分别是开始位置、要删除的元素数量、插入的元素,**返回[]**。
    ```js
    // 1 push
    let fruit = ["apple", "banana", "pear"];
    let removed = fruit.splice(fruit.length, 0, "a", "b");
    console.log(fruit); // ["apple", "banana", "pear", "a", "b"]
    console.log(removed); // []
    // 2 unshift
    let fruit = ["apple", "banana", "pear"];
    let removed = fruit.splice(0, 0, "a", "b");
    console.log(fruit); // ["a", "b", "apple", "banana", "pear"]
    console.log(removed); // []
    // 3 在中间 某个位置 插入数据
    let fruit = ["apple", "banana", "pear"];
    let removed = fruit.splice(1, 0, "a", "b");
    console.log(fruit); // ["apple", "a", "b", "banana", "pear"]
    console.log(removed); // []
    ```
    - concat()
    首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组。
    ```js
    let arr = [1, 2, 3];
    let arr2 = ["a", "b", "c"];
    let newArr = [].concat(arr, arr2, ["red", "yellow", "blue", "green"]);
    console.log(newArr); // [1, 2, 3, "a", "b", "c", "red", "yellow", "blue", "green"]
    ```
    ## 删
    下面三种都会影响原数组,最后一项不影响原数组。
    **pop、shift、splice、slice。**
    - pop()
    pop()方法用于删除数组的最后一项,同时减少数组的`length`值,返回被删除的项。
    ```js
    let colors = ["red", "green", "blue", "pink"];
    let item = colors.pop(); // 取得最后一项
    console.log(item); // pink
    console.log(colors.length); // 3
    ```
    - shift()
    shift()方法用于删除数组的第一项,同时减少数组的`length` 值,返回被删除的项。
    ```js
    let colors = ["red", "green", "blue", "pink"];
    let item = colors.shift(); // 取得第一项
    console.log(item) // red
    console.log(colors.length) // 3
    ```
    - splice()
    传入两个参数,分别是开始位置,删除元素的数量,**返回包含删除元素的数组**.
    ```js
    // 4 删除从第一个位置到第二个位置的数据,中间2个数据
    let fruit = ["apple", "banana", "pear"];
    let removed = fruit.splice(1, fruit.length - 1, "a", "b");
    console.log(fruit); // ["apple", "a", "b"]
    console.log(removed); // ["banana", "pear"]
    // 5 删除数据
    let fruit = ["apple", "banana", "pear"];
    let removed = fruit.splice(0, fruit.length, "a", "b");
    console.log(fruit); // ["a", "b"]
    console.log(removed); // ["apple", "banana", "pear"]
    // 6 删除元素
    let fruit = ["apple", "banana", "pear"];
    let removed = fruit.splice(0, 1);
    console.log(fruit); // ["banana", "pear"]
    console.log(removed); // ["apple"]
    ```
    - slice()
    slice()用于创建一个包含原有数组中一个或多个元素的新数组,不会影响原始数组。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
    let colors2 = colors.slice(1); // ["orange", "yellow", "green", "cyan", "blue", "purple"] 切片:[第一个, 最后)
    let colors3 = colors.slice(1, 4); // ["orange", "yellow", "green"] 切片:[第一个, 第4个)
    ```
    ## 改
    即修改原来数组的内容, 常用 splice。
    ```js
    // 7 第0个位置的 apple 改成 peach
    let fruit = ["apple", "banana", "pear"];
    let updated = fruit.splice(0, 1, "peach");
    console.log(fruit); // ["peach", "banana", "pear"]
    console.log(updated); // ["apple"]
    ```
    ## 查
    即查找元素,返回元素坐标或者元素值。
    - indexOf()
    返回要查找的元素在数组中的位置,如果没有找到则返回-1。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
    colors.indexOf("yellow"); // 2
    ```
    - includes()
    返回要查找的元素在数组中的位置,找到返回true,否则false。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
    colors.includes("red"); // true
    ```
    - find()
    返回第一个匹配的元素。
    ```js
    let colors = [
    {color: "red", name: "a"},
    {color: "orange", name: "b"},
    {color: "yellow", name: "c"},
    {color: "green", name: "d"},
    {color: "cyan", name: "e"},
    {color: "blue", name: "f"},
    {color: "purple", name: "g"}
    ];
    colors.find((element, index, array) => element.color === "cyan"); // {color: "cyan", name: "e"}
    ```
    ## 排序
    数组有两个方法可以用来对元素重新排序:reverse 和 sort 。
    - reverse()
    顾明思议,将数组元素方向排列。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
    colors.reverse();
    console.log(colors); // ["purple", "blue", "cyan", "green", "yellow", "orange", "red"]
    ```
    - sort()
    sort()方法接受一个比较函数,用于判断哪个值应该排在前面。
    ```js
    // 1 字母
    let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
    colors.sort();
    console.log(colors); // ["blue", "cyan", "green", "orange", "purple", "red", "yellow"]
    // 2 数字比较
    let numbers = [12, 23, 1, 2, 3, 4, 5, 6, 8, 8, 99, 54, 789, 33, 1, 22, 0];
    numbers.sort();
    console.log(numbers); // [0, 1, 1, 12, 2, 22, 23, 3, 33, 4, 5, 54, 6, 789, 8, 8, 99]
    numbers.sort((a, b) => a - b);
    console.log(numbers); // [0, 1, 1, 2, 3, 4, 5, 6, 8, 8, 12, 22, 23, 33, 54, 99, 789]
    ```
    ## 转换方法
    常见的转换方法有:join。
    - join()
    join() 方法接收一个参数,即字符串分隔符,返回包含所有项的字符串。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
    console.log(colors.join("、")); // red、orange、yellow、green、cyan、blue、purple
    console.log("《" + colors.join("》《") + "》"); // 《red》《orange》《yellow》《green》《cyan》《blue》《purple》
    ```
    ## 迭代方法
    常用来迭代数组的方法(都不改变原数组)有如下:
    1. some()
    2. every()
    3. forEach()
    4. filter()
    5. map()
    6. reduce()
    ### some()
    对数组每一项都运行传入的函数,如果有一项函数返回true,则这个方法返回true。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
    let someResult = colors.some((item, index, array) => item.includes("e"));
    let someResult2 = colors.some((item, index, array) => {
    console.log(item);
    return item.includes("ell1");
    });
    console.log(someResult, someResult2); // true false
    ```
    ### every()
    对数组每一项都运行传入的函数,如果对每一项函数都返回 true ,则这个方法返回 true。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan-e", "blue", "purple"];
    let someResult = colors.every((item, index, array) => item.includes("e"));
    let someResult2 = colors.every((item, index, array) => {
    console.log(item);
    return item.includes("ell1");
    });
    console.log(someResult, someResult2); // true false
    ```
    ### forEach()
    对数组每一项都运行传入的函数,没有返回值。
    ```js
    let colors = ["red", "orange", "yellow", "green", "cyan-e", "blue", "purple"];
    let colors2 = [];
    colors.forEach((item, index, array) => {
    colors2.push(item + index);
    });
    console.log(colors2);
    /*
    ['red0', 'orange1', 'yellow2', 'green3', 'cyan-e4', 'blue5', 'purple6']
    */
    ```
    ### filter
    对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回。
    ```js
    let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let filterResult = numbers.filter((item, index, array) => item > 2);
    console.log(filterResult); //  [3, 4, 5, 4, 3]
    ```
    ### map()
    对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。
    ```js
    let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let filterResult = numbers.map((item, index, array) => item * 2);
    console.log(filterResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
    ```
    ### reduce()
    累加器。
    ```js
    let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let addResult = numbers.reduce((prev, next, index, array) => {
    return prev + next;
    }, 100);
    console.log(addResult); // 125
    ```
  • 相关阅读:
    城市的划入划出效果
    文本溢出省略解决笔记css
    长串英文数字强制折行解决办法css
    Poj 2352 Star
    树状数组(Binary Indexed Trees,二分索引树)
    二叉树的层次遍历
    Uva 107 The Cat in the Hat
    Uva 10336 Rank the Languages
    Uva 536 Tree Recovery
    Uva10701 Pre, in and post
  • 原文地址:https://www.cnblogs.com/liubeimeng/p/14501276.html
Copyright © 2011-2022 走看看