JS 实用的数组API大聚会
2021-01-19 10:15
标签：修改 api 介绍 nan 偶数 let 重复 比较 获取 作为前端开发我们从后端获取的数据有时候并不是我们想要的结果这时候就需要前端去处理数据，有些处理很繁琐让人头大掉头发，好在JS为我们提供了很多实用的数组API帮我们节省很多的时间，接下来就一睹它们的风采。 以下介绍分为三大块介绍：①数组会改变自身值；②不会改变自身的值；③数组的遍历方法； pop()该方法删除一个数组中的最后的一个元素，并且返回这个元素。此方法删除最后一个元素比喻成栈的话，这个过程就相当于是最后一个元素从栈顶弹出。 push()该方法添加一个或者多个元素到数组末尾，并且返回数组新的长度。再比喻为栈的话，这个过程就相当于是从栈顶压入。 shift()方法删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined ，相当于删除队列的第一个元素。 unshift()方法数组开始处插入一些元素，并返回数组新的长度，相当于在队列头部插入一个元素。 该方法颠倒数组中元素的位置，第一个会成为最后一个，最后一个会成为第一个，该方法返回对数组的引用。 该方法按升序排列数组项——即最小的值位于最前面，最大的值排在最后面，在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种奇怪情况： 这是因为我们省略了一个参数为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数： 若compareFn(a,b)
若compareFn(a,b)=0,那么a，b位置不变 若compareFn(a,b)>0,那么a就排到b后面 应该是这些api中算强大的了，它有很多种用法，可以实现删除、插入和替换。 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(1,2)会删除数组中从第二项开始的两项元素。 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。 splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组 这个方法不怎么会用到但是挺好玩的，有3个参数，1：被替换的起始位置，2：选取替换值的起始位置，3：选取替换值的结束位置 copyWithin() 方法用于数组内的元素替换，即替换元素和被替换元素均是数组内的元素。taget 指定被替换元素的索引，start 指定替换元素起始的索引，end 可选，指的是替换元素结束位置的索引。如果start为负，则其指定的索引位置等同于length+start，length为数组的长度。end也是如此。 该方法会先创建当前数组一个副本然后将传入的数组或者元素与原数组合并，组成一个新的数组并返回，用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 该方法将数组中的所有元素连接成一个字符串，以separator为分隔符，省略的话则默认用逗号为分隔符。 它还有个好玩却鸡肋的方法（实现重复字符串） 方法将数组中一部分元素浅复制存入新的数组对象，并且返回这个数组对象。返回从原数组中指定开始下标到结束下标之间的项组成的新数组，在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。 如果 start 的值为负数，假如数组长度为 length，则表示从 length+start 的位置开始复制，此时参数 end 如果有值，只能是比 start 大的负数，否则将返回空数组。 稍微解释下浅复制（后续详细说一下浅拷贝与深拷贝），浅复制 是指当对象的被复制时，只是复制了对象的引用，指向的依然是同一个对象，也就是说改变原数组array的值，浅复制array的array2也随之改变。 该方法返回数组的字符串形式，该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔开）组成。 当数组直接和字符串作连接操作时，将会自动调用其toString() 方法。 indexOf()方法用于查找元素在数组中第一次出现时的索引，如果没有，则返回-1。 lastIndexOf() 方法用于查找元素在数组中最后一次出现时的索引，如果没有，则返回-1。并且它是indexOf的逆向查找，即从数组最后一个往前查找。 他们都是使用全等操作符去匹配 该方法它用来判断当前数组是否包含某个指定的值，如果是，则返回 true，否则返回 false。 该方法对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；对应的数组索引，数组本身。forEach无法直接退出循环，只能使用return 来达到for循环中continue的效果，并且forEach不能在低版本IE（6~8）中使用。 every ()该方法使用传入的函数测试所有元素，只要其中有一个函数返回值为 false，那么该方法的结果为 false；如果全部返回 true，那么该方法的结果才为 true。 some()该方法刚好同 every() 方法相反，some 测试数组元素时，只要有一个函数返回值为 true，则该方法返回 true，若全部返回 false，则该方法返回 false。 该方法使用传入的函数测试所有元素，并返回所有通过测试的元素组成的新数组。它就好比一个过滤器，筛掉不符合条件的元素。 该方法是“映射”，使用传入函数处理每个元素，并返回函数的返回值组成的新数组。 reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。 这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。 entries()返回一个数组迭代器对象，该对象包含数组中每个索引的键值对。 keys()返回一个数组索引的迭代器 values返回一个数组迭代器对象，该对象包含数组中每个索引的值(但是目前好多浏览器不支持) fibd()返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined。 findIndex() 方法则返回数组中第一个满足条件的元素的索引（如果有的话）否则返回-1。 JS 实用的数组API大聚会 标签：修改 api 介绍 nan 偶数 let 重复 比较 获取 原文地址：https://www.cnblogs.com/yingaxiang/p/12902113.html 一.API 使用后改变原数组的值
1.pop()+push()
1 var arr = ["a","b","c"];
2 var count = arr.push("d","e");
3 console.log(count); // 5---->push返回数组长度
4 console.log(arr); // ["a", "b", "c", "d", "e"]
5 var item = arr.pop();
6 console.log(item); // e------>pop返回被删除的元素
7 console.log(arr); // ["a", "b", "c", "d"]
2.shift()+unshift()
1 var arr = ["a","b","c"];
2 var count = arr.unshift("d","e");
3 console.log(count); // 5
4 console.log(arr); //["d", "e", "a", "b", "c"]
5 var item = arr.shift();
6 console.log(item); // d
7 console.log(arr); // ["e", "a", "c", "c"]
3. reverse()
1 var arr = [1, 2, 3, 4];
2 console.log(arr.reverse()); //[4, 3, 2, 1]
4.sort()
1 var arr1 = ["d", "a", "c", "b"];
2 console.log(arr1.sort()); // ["a", "b", "c", "d"]
3 arr2 = [11, 24, 41, 3];
4 console.log(arr2.sort()); // [11, 24, 3, 41]------------>好奇怪的排序，我明明已经是正序排序了
5 console.log(arr2); // [13, 24, 3, 51](原数组被改变)
1 function compare(a, b) {
2 return a-b
3 }
4 arr2 = [11, 24, 41, 3];
5 console.log(arr2.sort(compare)); // [3, 11, 24, 41]
6 或者console.log(arr2.sort((a,b)=>{return a-b})); -------->箭头函数确实方便好多
5.splice()
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。 //实现删除，删除1和3
1 var arr = [1,3,5,7,9,11];
2 var arrRemoved = arr.splice(0,2);
3 console.log(arr); //[5, 7, 9, 11]
4 console.log(arrRemoved); //[1, 3]
5 //实现插入
6 var arrRemoved2 = arr.splice(2,0,4,6);
7 console.log(arr); // [5, 7, 4, 6, 9, 11]
8 console.log(arrRemoved2); // []
9 //实现替换
10 var arrRemoved3 = arr.splice(1,1,2,4);
11 console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
12 console.log(arrRemoved3); //[7] 6.copyWithin（）
1 var array = [1,2,3,4,5];
2 var array2 = array.copyWithin(0,3);
3 console.log(array===array2,array2); // true [4, 5, 3, 4, 5]
4 var array = [1,2,3,4,5];
5 console.log(array.copyWithin(0,3,4)); // [4, 2, 3, 4, 5]
6
7 var array = [1,2,3,4,5];
8 console.log(array.copyWithin(0,-2,-1)); // [4, 2, 3, 4, 5]
二.API使用后不改变原数组的值
1.concat()
1 var array = [1, 2, 3];
2 var array2 = array.concat(4,[5,6],[7,8,9]);
3 console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
4 console.log(array); // [1, 2, 3], 可见原数组并未被修改
2.join()
1 var arr = [1,2,3,4];
2 console.log(arr.join()); //1,2,3,4
3 console.log(arr.join("/")); //1/2/3/4
1 function repeatStr(str, n) {
2 return new Array(n + 1).join(str);
3 }
4 console.log(repeatStr("abc", 3)); // abcabcabc
3.slice()
1 var arr = [1,3,5,7,9,11];
2 var arrCopy = arr.slice(1);
3 var arrCopy2 = arr.slice(1,4);
4 var arrCopy3 = arr.slice(1,-2);
5 var arrCopy4 = arr.slice(-4,-1);
6 console.log(arr); //[1, 3, 5, 7, 9, 11](原数组不变)
7 console.log(arrCopy); //[3, 5, 7, 9, 11]
8 console.log(arrCopy2); //[3, 5, 7]
9 console.log(arrCopy3); //[3, 5, 7]
10 console.log(arrCopy4); //[5, 7, 9]
4.toString()+toLocaleString()
1 var array = [‘a‘, ‘b‘, ‘c‘, ‘d‘];
2 var str = array.toString();
3 console.log(str); // a,b,c,d
4
5 var str = [‘1‘, ‘2‘, ‘3‘, ‘4‘] + ‘,5‘;
6 console.log(str); // "1,2,3,4,5"
5.indexOf()+lastIndexOf()
1 var arr = [1,3,5,7,7,5,3,1];
2 console.log(arr.indexOf(5)); //2
3 console.log(arr.lastIndexOf(5)); //5
4 console.log(arr.indexOf(5,2)); //2
5 console.log(arr.lastIndexOf(5,4)); //2
6 console.log(arr.indexOf("5")); //-1 ------->由于使用全等去匹配所以返回-1
6.includes(ES7)
1 var array = [1, 2, NaN];
2 console.log(array.includes(1)); // true
3 console.log(array.includes(NaN)); // true
4 console.log(array.includes(2,-4)); // true
三.数组的遍历
1.forEach()
1 var arr = [1, 2, 3, 4, 5];
2 arr.forEach(function(item, index, array){
3 console.log(item + ‘-‘ + index + ‘-‘ + (array === arr));
4 });
5 // 输出为：
6 //1-0-true
7 //2-1-true
8 //3-2-true
9 //4-3-true
10 //5-4-true
2.every()+some()
1 var arr = [1, 2, 3, 4, 5];
2 var arr2 = arr.every(x => x10);
3 console.log(arr2); //true
4 var arr3 = arr.every(x => x3);
5 console.log(arr3); // false
1 var arr = [1, 2, 3, 4, 5];
2 var arr2 = arr.some(x => x3);
3 //console.log(arr2); //true
4 var arr3 = arr.some(x => x1);
5 //console.log(arr3); // false
3.filter()
1 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2 var arr2 = arr.filter((item, index) => {
3 return item>9;
4 });
5 console.log(arr2); //[10]
4.map()
1 var arr = [1, 2, 3, 4, 5];
2 var arr2 = arr.map(item => item*2);
3 console.log(arr2); //[2,4,6,8,10]
5.reduce()+reduceRight()
1 var values = [1,2,3,4,5];
2 var sum = values.reduceRight((prev, cur, index, array) => {
3 return prev + cur;
4 },10);
5 console.log(sum); //25
6
7 var array = [1, 2, 3, 4];
8 var s = array.reduce(function(previousValue, value, index, array){
9 return previousValue * value;
10 },1);
11 console.log(s); // 24
12 //还是喜欢箭头函数
13 array.reduce((p, v) => p * v); // 24
6.entries()/keys()/values()------->es6
1 var arr=[‘a‘, ‘b‘, ‘c‘]
2 for(let key of arr.keys()){console.log(key)} //0,1,2
3 for(let value of arr.values()){console.log(value)} //a,b,c
4 for(let [key, value] of arr.entries()){console.log([key,value])} //[0,‘a‘],[1,‘b‘],[2,‘c‘]
7.find()+findIndex(ES6)
1 var array = [1, 3, 5, 7, 8, 9, 10];
2 function f(value, index, array){
3 return value%2==0; // 返回偶数
4 }
5 function f2(value, index, array){
6 return value > 20; // 返回大于20的数
7 }
8 //find返回值
9 console.log(array.find(f)); // 8
10 console.log(array.find(f2)); // undefined
11 //findIndex返回索引
12 console.log(array.findIndex(f)); // 4
13 console.log(array.findIndex(f2)); // -1
上一篇：服务器创建Python虚拟环境