Array数组方法详解

最新推荐文章于 2022-11-26 23:16:39 发布

探鱼不是鱼

最新推荐文章于 2022-11-26 23:16:39 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109697874

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

开发常用

[].slice.call()

将伪数组转换成真数组

 <div id="app">
   <ul>
     <li></li>
     <li></li>
     <li></li>
   </ul>
 </div>

 const result = document.querySelectorAll("li");
 console.log(result);

 //   const res = [].slice.call(result);
 // 或者可以用下面方式
 const res = Array.prototype.slice.call(result);
 console.log(res);

在这里插入图片描述

Array

from()

从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
将类数组对象转为真正的数组

{
            const obj1 = {
                0: "a",
                1: "b",
                2: "c",
                length: 3
            }
            const obj2 = {
                0: "a",
                1: "b",
                2: "c"
            }
            //类数组的条件：1.key值从0开始依次自然递增，2.拥有length属性
            console.log(Array.from(obj1))
            //["a", "b", "c"]
            console.log(Array.from(obj2))
            //[]
}

of()

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
如果传递一个参数并且是数字的时候，那么就会创建一个新数组，长度为这个数字
弥补new Array的不足
用于将一组值转换为数组。返回新数组,主要弥补构造函数Array的不足（因为只有一个参数并且参数是数值的时候Array将会创建的是有`数值`个数的空元素，而Array.of则会创建只有一个元素且元素的值是`指定的值`的元素。）

{
            const arr1 = new Array(4, 5);
            console.log(arr1); //[4,5]
 
            const arr2 = new Array(4);
            console.log(arr2); //[,,,,]
            console.log([, , , , ].length) 
            //4  如果最后一个逗号后为空，则这个逗号是结尾
 
            const arr3 = Array.of(4);
            console.log(arr3);
            //[4]
 
            const arr4 = Array.of(4, 5);
            console.log(arr4);
            //[4, 5]
}

Array.prototype

修改器方法

copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组

{
            /* copyWithIn();
            复制当前数组中的某些值， 覆盖当前数组中的某些值
                -
                参数1： 开始替换的位置 -
                参数2： 开始读取复制的位置 -
                参数3： 读取复制的结束位置(不包含)， 如果不写 则默认到末尾 */
            const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
            const reArr1 = arr1.copyWithin(1, 6, 8);
            console.log(arr1, reArr1)
  //(9) [1, 7, 8, 4, 5, 6, 7, 8, 9] (9) [1, 7, 8, 4, 5, 6, 7, 8, 9]
        }

fill()

填充数组

{
            /* fill():填充数组
                    - 第一个参数就是填充的内容
                    - 第二个和第三个参数：填充的起始和结束位置 */
            const arr1 = [1, 2, 3, 4, 5, 6];
            const reArr1 = arr1.fill("a"); //全部填充
            console.log(arr1, reArr1) //改变原数组 返回改变后的数组
 
            const arr2 = [1, 2, 3, 4, 5, 6];
            const reArr2 = arr2.fill("a", 3, 6); //全部填充
            console.log(arr2, reArr2) //改变原数组 返回改变后的数组
//(6) ["a", "a", "a", "a", "a", "a"] (6) ["a", "a", "a", "a", "a", "a"]
  }

includes()

判断一个数组是否包含一个指定的值，根据情况，如果包含则返回
true，否则返回false。

<script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, NaN];
        console.log(arr.includes(11));
        //false
        console.log(arr.includes(5));
        //true
        console.log(arr.includes(NaN));
        //true
 
 
        console.log(arr.indexOf(11));
        //-1
        console.log(arr.indexOf(5));
        //4
        console.log(arr.indexOf(NaN));
        //-1
</script>

splice()

删除或替换现有元素或者原地添加新的元素

删除

替换

插入

<script>
       /*  1.删除并返回指定元素
        arr.splice(开始索引,删除数量)
 
        2.替换元素
        arr.splice(开始索引,删除数量,新元素,新元素)
 
        3.在指定位置插入新元素
        arr.splice(插入位置,0.新元素,新元素) */
 
        var arr = ["a","b","c","d"];
        console.log(arr.splice(1));
        //["b", "c", "d"]
        console.log(arr);
        // ["a"]
 
 
        console.log(arr.splice(1,2));
        // ["b", "c"]
        console.log(arr);
        // ["a", "d"]
 
 
        console.log(arr.splice(1,2,"e","f"));
        // ["b", "c"]
        console.log(arr);
        // ["a", "e", "f", "d"]
</script>

sort()

对数组的元素进行排序

<script>
        var arr = [3, 7, 9, 1, 0, 15, 22, 77, 55, 69];
        console.log(arr.sort(function (a, b) {
            return a - b;
        }));
        // [0, 1, 3, 7, 9, 15, 22, 55, 69, 77]
</script>

push()

在数组的末尾增加一个或多个元素

 <script>
        var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.push("e"));
        //6 
        console.log(arr);
        //["a", "b", "c", "d", "e", "e"]
 </script>

pop()

删除数组的最后一个元素

 <script>
        var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.pop());
        //e
        console.log(arr);
        //["a", "b", "c", "d"]
 </script>

shift()

删除并返回数组的第一个对象

<script>
        var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.shift());
        //    a
        console.log(arr);
        //["b", "c", "d", "e"]
</script>

unshift()

在数组的开头增加一个或多个元素,并返回数组的新长度

<script>
        var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.unshift("x"));
        //6
        console.log(arr);
        //["x", "a", "b", "c", "d", "e"]
 
        console.log(arr.unshift("y", "z"));
        //8
        console.log(arr);
        //["y", "z", "x", "a", "b", "c", "d", "e"]
</script>

reverse()

用来对数组进行反转操作

<script>
        var arr = ["1", "3", "5", "7", "9"];
        console.log(arr.reverse());
        // ["9", "7", "5", "3", "1"]
</script>

访问方法

flat()

拉平数组(数组扁平化)
用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

 <script>
        {
            const arr1 = [1, 2, [3, 4]];
            console.log(arr1.flat(1))
            //(4) [1, 2, 3, 4]
 
            console.log(arr1)
            //(3) [1, 2, Array(2)]
 
            const arr2 = [1, 2, [3, [4, 5]]];
            console.log(arr2.flat(Infinity))
            //(5) [1, 2, 3, 4, 5]
 
            console.log(arr2)
            //(3) [1, 2, Array(2)]
        }
 </script>

concat()

用来将多个数组连接为一个数组

<script>
        var arr = ["1", "2", "3"];
        var arr1 = ["4", "5", "6"];
        var arr2 = ["7", "8"];
        console.log(arr.concat() === arr);
        //false
        console.log(arr.concat(arr1, arr2));
        //["1", "2", "3", "4", "5", "6", "7", "8"]
</script>

join()

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串

<script>
        var arr = ["a", "b", "c", "1", "2", "3"];
        console.log(arr.join());
        //   a,b,c,1,2,3
        console.log(arr.join("@"));
        //a@b@c@1@2@3
        console.log(arr.join("&"));
        // a&b&c&1&2&3
</script>

slice()

返回一个新的数组对象，这一对象是一个由 begin 和 end
决定的原数组的浅拷贝（包括 begin，不包括end）

<script>
        var arr = ["a", "b", "c", "d", "e", "f"];
        console.log(arr.slice(1, 5));
        //["b", "c", "d", "e"]
</script>

indexOf()

查询元素在数组中第一次出现的位置

<script>
        var arr = ["a", "b", "c", "d", "e", "f"];
        console.log(arr.indexOf("b"));
        //1
        console.log(arr.indexOf("w"));
        //-1
</script>

lastIndexOf()

迭代方法

find()

返回第一个匹配的元素(返回的是回调函数第一次返回true的item)
用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

const arr = ["lao wang", "xiao wang", "li ly", "zhong wang", "da wang", "ni"];
            //返回第一个姓li的名字
            const re = arr.find(function (item, index) {
                /* if (item.startsWith("li ")) {
                    return true;
                } */
 
                return item.startsWith("li ");
            })
            console.log(re);
            //li ly

findIndex()

返回第一个匹配的下标(返回的是回调函数第一次返回true的index)

const arr = ["lao wang", "xiao wang", "li ly", "zhong wang", "da wang", "ni"];
            //返回第一个姓li的名字
            const re = arr.findIndex(function (item, index) {
                return item.startsWith("li ");
            })
            console.log(re);
            //2

forEach()

对数组的每个元素执行一次给定的函数

<script>
        var arr = [1, 2, 3, 4, 5, 6, 7];
        console.log(arr.forEach(function (items, index) { //undefined
            console.log(items);
            // 1 2 3 4 5 6 7
            console.log(items + 10);
            //11 12 13 14 15 16 17
            console.log(index);
            //0 1 2 3 4 5 6
        }));
</script>

every()

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

<script>
        var arr = [1, 2, 3, 4, 5, 6, 7];
        console.log(arr.every(function (items, index) {
            return items > 0;
            //true
            return items > 3;
            //false
        }));
</script>

reduce()

将数组中的所有元素汇总为一个值

<script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        console.log(arr.reduce(function (items, accumulator) {
            console.log(items + "正在处理的元素");
            console.log(accumulator + "累加器");
            return items + accumulator
        }));
</script>

reduce将对象转成查询字符串

           /* 通常情况下：
              GET、DELETE请求，只会有查询字符串参数
              POST、PUT、PATCH请求，既可以有请求体参数，也可以有查询字符串参数
            params: { name: 'jack', age: 18 } 
              --> url?name=jack&age=18
          */
      let querystr = "";
      if (params) {
        querystr = Object.keys(params)
          .reduce((p, c) => {
            return p + `${c}=${params[c]}&`;
          }, "?")
          .slice(1, -1);
      }

some()

测试数组中是不是至少有1个元素通过了被提供的函数测试

<script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        console.log(arr.some(function (items, index) {
            console.log(items);
            //1 2 3 4 5 6 7 8 9 10
            console.log(index);
            // 0 1 2 3 4 5 6 7 8 9
            return items % 2 === 0;
            //true
        }));
</script>

map()

创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

<script>
        var arr = ["a", "b", "c", "d", "e", "f"];
        console.log(arr.map(function () {}));
        // [undefined, undefined, undefined, undefined, undefined, undefined]
        console.log(arr.map(function () {}) === arr);
        //false
 
        console.log(arr.map(function (items, index) {
            console.log(items);
            //a b c d e f
            console.log(index);
            // 0 1 2 3 4 5
            return items + 10;
            //["a10", "b10", "c10", "d10", "e10", "f10"]
 
        }));
</script>

filter()

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

<script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        console.log(arr.filter(function () {}));
        //[]
        console.log(arr.filter(function (items, index) {
            return items % 2 === 0;
            //[2, 4, 6, 8, 10]
        }));
</script>

iterator接口

entries()

拿到了数组的键值对的遍历器对象

{
            const arr1 = ["a", "b", "c", "d", "e"];
            const iter = arr1.entries(); //返回的是一个iterator（遍历器对象）对象
            //遍历器对象有一个next方法，可以依次遍历iterator中的内容
            console.log(iter);
            /* Array Iterator {}
            __proto__: Array Iterator
            next: ƒ next()
            Symbol(Symbol.toStringTag): "Array Iterator"
            __proto__: Object */
            console.log(iter.next());
            //{value: Array(2), done: false}
            // Array(2) value: (2) [0, "a"]
            console.log(iter.next());
            //{value: Array(2), done: false}
            console.log(iter.next());
            //{value: Array(2), done: false}
            console.log(iter.next());
            //{value: Array(2), done: false}
            console.log(iter.next());
            //{value: Array(2), done: false}
            console.log(iter.next());
            //{value: undefined, done: true}
            console.log(iter.next());
            // {value: undefined, done: true}
 
            for (let i of arr1.entries()) {
                console.log(i) //拿到了 每一次的[key,value]的值
                /*  (2)[0, "a"]
                 (2)[1, "b"]
                 (2)[2, "c"]
                 (2)[3, "d"]
                 (2)[4, "e"] */
            }
            console.log(iter)
            //Array Iterator {}
        }

keys()

{
            const arr1 = ["a", "b", "c", "d", "e"];
            const iter = arr1.keys();
            console.log(iter)
            //Array Iterator {}
            console.log(iter.next())
            // {value: 0, done: false}
            console.log(iter.next())
            // {value: 1, done: false}
            console.log(iter.next())
            // {value: 2, done: false}
            console.log(iter.next())
            // {value: 3, done: false}
            console.log(iter.next())
            // {value: 4, done: false}
            console.log(iter.next())
            // {value: undefined, done: true}
            console.log(iter.next())
            // {value: undefined, done: true}
            for (let i of arr1.keys()) {
                console.log(i)
                //拿到了 每一次的[key,value]的值
                // 0 1 2 3 4
            }
            console.log(iter)
            //Array Iterator {}
 }

values()

{
            const arr1 = ["a", "b", "c", "d", "e"];
            const iter = arr1.values(); //返回的是一个iterator（遍历器对象）对象
            //遍历器对象有一个next方法，可以依次遍历iterator中的内容
            console.log(iter);
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
 
            for (let i of arr1.values()) {
                console.log(i) //拿到了 每一次的[key,value]的值
            }
            console.log(iter)
            //Array Iterator {}
        }

探鱼不是鱼

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Array数组方法详解

Arrayfrom()从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例将类数组对象转为真正的数组{ const obj1 = { 0: "a", 1: "b", 2: "c", length: 3 } const obj2 = { 0: "a",
复制链接

扫一扫