ES5和ES6中数组常用方法总结

最新推荐文章于 2023-06-09 21:04:06 发布

Kong_十六

最新推荐文章于 2023-06-09 21:04:06 发布

阅读量590

点赞数 1

本文链接：https://blog.csdn.net/qq_42383764/article/details/107047695

版权

JavaScript高级同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

ECMAScript5和ECMAScript6

5 篇文章 0 订阅

订阅专栏

数组无疑是js中核心数据类型之一，在DOM操作中，获取的元素一般都是一个类数组的集合，其中数组迭代方法使用的比较多。这里总结数组中比较常用的方法，方便查阅。

操作方法

concat() ：添加数组成员，返回添加后的新数组，不改变原数组；

        let myArr = ['grade', 'name', 'age', 18, {}]
        console.log(myArr.concat(23)); //["grade", "name", "age", 18, {…}, 23]
        console.log(myArr); // //["grade", "name", "age", 18, {…}]

字符串也可以用concat方法，字符串使用的话就像 + 连接符一样。

        console.log("2".concat("3")); // “23”

slice(arg1，arg2) ：截取方法，确切的说是复制一段数据，返回的是截取后新数组，不包含最后的终止位置元素；
参数1：表示开始截取的起始位置的索引号；
参数2：表示截取的终止位置；

		// 从索引位置1开始截取，位置2取不到，只截取到一个 [name]
        console.log(myArr.slice(1, 2)); 
        console.log(myArr.slice(2)); // 从索引2截取到末尾 ["age", 18, {…}]

splice(index[,delNum,addEle])，主要用途是往数组中插入元素可以添加、删除、替换元素；
index：起始位置对应索引号；
delNum：删除的个数；可选的
addEle：要添加的元素；可选的
splice方法功能比较强大。

        let arr2 = [33, 55, 22, 11, 10, 88, 6];
        
        // 插入
        arr2.splice(1, 0, "insert"); // 从索引1的位置开始，不删除元素，插入一个"insert"
        console.log(arr2); //[33, "insert", 55, 22, 11, 10, 88, 6]
        
        // 删除
        let delEle = arr2.splice(0, 2); // 返回[33, "insert"] 删除的元素
        console.log(arr2); // [55, 22, 11, 10, 88, 6]
        
        // 替换
        // let replaceEle = arr2.splice(2, 1, 100); // 把 11 删除替换成 100，返回被删除的元素11
        // 替换的元素可以是多个，后面的元素依次向后移动
        let replaceEle = arr2.splice(2, 1, 100, 200); // 把 11 删除替换成 100，接着把200放在100后面，后面的元素向后移动一个位置，返回被删除的元素11
        console.log(replaceEle); // 11
        console.log(arr2); //  [55, 22, 100, 200, 10, 88, 6]

操作数组元素

		let arr1 = [2, 3, 8, 9, 10];

1. push() : 在数组尾部添加元素，可以添加多个元素，返回值是修改后数组的长度；

        console.log(arr1.push(99, "hh")); // 返回数组的长度 7
        console.log(arr1); // [2, 3, 8, 9, 10,99, "hh"]

2. pop()：在数组末尾删除一个元素，一次加粗样式只能删除一个，返回值删除的元素；

        console.log(arr1.pop()); // "hh"
        console.log(arr1);// [2, 3, 8, 9, 10,99,]

3. unshift() 在数组前面添加元素，可以添加多个元素，返回值是修改后数组的长度；

        console.log(arr1.unshift("before", 1111)); // length
        console.log(arr1);//["before", 1111,2, 3, 8, 9, 10,99,]

4. shift() : 在数组前面删除一个元素一次只能删除一个返回删除的元素；

        console.log(arr1.shift()); // “before”
        console.log(arr1);// [1111,2, 3, 8, 9, 10,99,]

排序方法

		let arr1 = [2, 3, 8, 9, 10];
        // sort() ：排序 需要传递一个函数作为参数。数组中的每一个元素都会走一遍函数
        console.log(arr1.sort(function (a, b) {
            return b - a; // 降序。
        }));
        // 参数的本质与冒泡的原理类似，两两比较，
        // b - a > 0 时，返回的是，大的数放前面
        // b - a < 0 时，返回的是，小的数在前面
        // reverse() ：数组反转
        console.log(arr1.reverse()); // 变为升序

位置方法

indexOf(ele[,index]) ：从前往后找，返回第一个满足条件的元素，不存在的元素返回-1；
lastIndexOf(ele[,index]) ：从后往前找，返回第一个满足条件的元素，不存在的元素返回-1；
参数：ele —— 数组元素；index(可选) —— 起始寻找的位置，索引号

        let arr3 = [1, 2, 3, 4, 2, 5];
        console.log(arr3.indexOf(2)); // 元素2的索引：1
        console.log(arr3.indexOf(99)); // 元素99的索引：不存在返回 -1
        console.log(arr3.lastIndexOf(2)); // 元素2的索引：4 
        // 第二个可选的参数表示查找起点的索引 
        console.log(arr3.indexOf(2, 3)); // 从索引号3开始往后找，元素2的索引：4

迭代方法

ECMAScript5新增的5中迭代方法：

这五个方法都接收两个参数：参数1：一个处理的函数，每个数组元素都会调用的函数；
参数2可选的：指定运行该函数的作用域 ——this对象。
参数1的函数接收三个参数： item：当前数组元素 index：当前数组元素对应的索引值 array：原始数组对象

every() ：遍历数组，所有元素返回true，则返回true
some() ：遍历数组，有一个元素返回true，则返回true
filter() 过滤器：遍历数组，返回满足条件元素组成的数组。
map() ：映射，遍历数组，每一项经过其他操作返回对应的项组成的数组。
forEach() ：就是循环遍历，本质是for循环迭代数组实现,无返回值

        // 下面的方法接收的两个参数：
        // 参数1：函数接收三个参数，参数1：当前元素，参数2[可选]：当前元素的索引，参数3[可选]：元素所在的对象
        // 参数2：可选，指定运行该函数的环境，可改变this的值

        let arr = [33, 55, 22, 11, 10, 88, 6];
        // 1.every() ：遍历数组，所有元素返回true，则返回true
        let eve = arr.every(function (ele, index, array) {
            // return ele > 2; // true
            return ele < 2; // false
        });
        console.log(eve);

        // 2.some() ：遍历数组，有一个元素返回true，则返回true
        let som = arr.some(function (ele, index, array) {
            return ele > 2; // true
            // return ele < 10; // true
        });
        console.log(som);

        // 3.filter() ：遍历数组，返回满足条件元素组成的数组。过滤器
        let fil = arr.filter(function (ele) {
            return ele > 22;
        });
        console.log(fil); //[33, 55, 88]

        // 4.map() ：映射，遍历数组，每一项经过其他操作返回对应的项组成的数组
        // 对数组中的元素做操作，可以使用map
        let ma = arr.map(function (ele) {
            return ele / 10;
        })
        console.log(ma); // 每一次/10后组成的数组结果，每一项与操作前的每一项一一对应，也就体现了映射的概念

        // 5.forEach() ：就是循环遍历，本质是for循环迭代数组实现,无返回值
        arr.forEach(function (ele, index) {
            console.log("元素是：" + ele + "，对应的索引是：" + index);
        })

归并方法

reduce(func[,base]) : 从前往后遍历常用；
reduceRight(func[,base]) : 从后往前遍历。
两个归并的方法返回值都是经过函数处理过后的结果值。

		// 6.归并
        // reduceRight(func[,base]) : 从后往前遍历
        // reduce(func[,base]) : 从前往后遍历 常用
        // func(prev,cur,index,originObj)的参数
        // prev : 前一个值(默认是遍历的数组的第一个元素),接收遍历对象每次归并的结果
        // cur : 当前值 
        // index : 当前值的索引号
        // originObj : 原始的数组对象
        // base是归并的基础值,默认的话是遍历数组中的第一个元素
        // reduce() ：归并，也叫汇总，与map是相关的方法，返回值是归并的结果

        // eg:求和 33, 55, 22, 11, 10, 88, 6
        let sum = arr.reduce(function (prev, cur, index) {
            // console.log(index + " 归并的基础值: " + prev + " 当前值 " + cur);
            return prev += cur;
            // 分析一下过程:
            // 第一趟1     33 += 55 --> 88 作为下一次遍历时prev的值
            // 第一趟2     88 += 22 --> 110
            // 第一趟3     110 += 11 --> 121
            // 第一趟4     121 += 10 --> 131
            // 第一趟5     131 += 88 -->  219
            // 第一趟6     219 += 6 --> 225 
        })
        console.log(sum);
        // 传递归并基础值时
        // let sum = arr.reduce(function (prev, cur, index) {
        //     // console.log(index + " 归并的基础值: " + prev + " 当前值 " + cur);
        //     return prev += cur;
        //     // 分析一下过程:
        //     // 第一趟1     10 += 33 --> 43 作为下一次遍历时prev的值
        //     // 第一趟2     43 += 55 --> 98
        //     // ......
        // }, 10)   235

其他新增方法

includes(元素,查找的起始位置索引) 检测数组中是否包含被检测元素；
find(fn) 返回第一个满足检测条件的元素,找不到则返回undefined；
findIndex(fn) 返回第一个满足检测条件的元素的索引值,找不到则返回-1
其中参数fn是函数，函数接收的参数与迭代方法函数接收的参数一样。
keys()、values()、entries() 可迭代的对象，遍历可取得对应的键、值、键值对。

        // 1.includes(元素,查找的起始位置索引)  检测数组中是否包含被检测元素
        // 返回布尔值 存在true 不存在false
        let arr = [33, 55, 22, 11, 10, 88, 6];
        console.log(arr.includes(22, 3));

        // 2.find(fn)  返回第一个满足检测条件的元素,找不到则返回undefined
        // fn函数的三个参数与迭代方法参数一样 
        let fin = arr.find(function (ele) {
            return ele > 88; //undefined
            // return ele > 33; //55
        });
        console.log(fin);

        // 3.findIndex(fn)  返回第一个满足检测条件的元素的索引值,找不到则返回-1
        // fn函数的三个参数与迭代方法参数一样 
        let finIndex = arr.findIndex(function (ele) {
            return ele > 88;
        });
        console.log(finIndex);

		// 4. 可迭代的对象
        // keys(): 键 ，数组中对应的是索引；对象对应的是属性名
        // values(): 值 ，数组中对应的是数组元素；对象对应的是属性值
        // entries(): 键值对 ，键值对
        for (const key of arr.keys()) {
            console.log(key); // 索引值
        }
        for (const value of arr.values()) {
            console.log(value); // 索引值对应的值
        }
        for (const [key, value] of arr.entries()) {
            console.log(key, value); // 索引值
        }

检测数组方法以及转换方法

        let arr1 = [2, 3, 8, 9, 10];
        // 1.检测数组
        console.log(Array.isArray(arr1)); // true 返回为真
        console.log(arr1.join("-")); // 转化为字符串 以 - 链接的字符串
        console.log([2].join("+"));  // 2

        // 2.取得数组中的值
        console.log(arr1.toLocaleString()); // 2,3,8,9,10
        console.log(arr1.toString()); // 2,3,8,9,10
        console.log(arr1.valueOf()); // [2, 3, 8, 9, 10]

欧克。实际应用的话综合性还是比较强的，一定要在熟练的基础上运行。
加油吧！！！！

Kong_十六

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES5和ES6中数组常用方法总结

数组无疑是js中核心数据类型之一，在DOM操作中，获取的元素一般都是一个类数组的集合，其中数组迭代方法使用的比较多。这里总结数组中比较常用的方法，方便查阅。操作方法concat() ：添加数组成员，返回添加后的新数组，不改变原数组； let myArr = ['grade', 'name', 'age', 18, {}] console.log(myArr.concat(23)); //["grade", "name", "age", 18, {…}, 23]
复制链接

扫一扫