文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
数组中常用的方法有哪些?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
开发中数组的使用场景非常多, 这里就简单整理总结一些常用的方法;从改变原有数据的方法、不改变原有数组的方法以及数据遍历的方法三方面总结。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
· 改变原有数组的方法: (9个)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
1. splice() 添加/删除数组元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a = [1, 2, 3, 4, 5, 6, 7];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let item = (0, 3); // [1,2,3]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(a); // [4,5,6,7]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// 从数组下标0开始,删除3个元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let item1 = (0,3,'添加'); // [4,5,6]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(a); // ['添加',7]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// 从数组下标0开始,删除3个元素,并添加元素'添加'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
2. sort() 数组排序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
var array = [10, 1, 3, 4,20,4,25,8]; // 升序 a-b < 0 a将排到b的前面,按照a的大小来排序的 (function(a,b){ return a-b; }); (array); // [1,3,4,4,8,10,20,25]; // 降序 (function(a,b){ return b-a; }); (array); // [25,20,10,8,4,4,3,1];
3. pop() 删除一个数组中的最后的一个元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
4. shift() 删除数组的第一个元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
5. push() 向数组的末尾添加元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
6. unshift()向数组开头添加元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
7. reverse()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a = [1,2,3];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(); // 3, 返回被删除的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(a); // [1,2]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(); // 1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(a); // [2]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
("末尾添加"); // 2 ,返回数组长度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(a) ; [2,"末尾添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
("开头添加"); // 3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(a); //["开头添加", 2, "末尾添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(); // ["末尾添加", 2, "开头添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(a) // ["末尾添加", 2, "开头添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
8. ES6: copyWithin() 指定位置的成员复制到其他位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a = ['zhang', 'wang', 'zhou', 'wu', 'zheng'];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// 1位置开始被替换, 2位置开始读取要替换的 5位置前面停止替换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(1, 2, 5);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// ["zhang", "zhou", "wu", "zheng", "zheng"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
9. ES6: fill() 填充数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
['a', 'b', 'c'].fill(7) // [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
以上是9种会改变原数组的方法, 接下来是6种常用的不会改变原数组的方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
· 不改变原数组的方法(6种)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
1. join() 数组转字符串文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a= ['hello','world'];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let str2=('+'); // 'hello+world'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
2. cancat 合并两个或多个数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a = [1, 2, 3];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let b = [4, 5, 6];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
//连接两个数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let newVal=(b); // [1,2,3,4,5,6]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
3. ES6扩展运算符...合并数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a = [2, 3, 4, 5] let b = [ 4,...a, 4, 4] (a,b); //[2, 3, 4, 5] [4,2,3,4,5,4,4]
4. indexOf() 查找数组是否存在某个元素,返回下标文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a=['啦啦',2,4,24,NaN]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(('啦')); // -1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(('啦啦')); // 0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
5. ES7 includes() 查找数组是否包含某个元素 返回布尔文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
1. indexOf方法不能识别NaN文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
2. indexOf方法检查是否包含某个值不够语义化,需要判断是否不等于-1,表达不够直观文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a=['OB','Koro1',1,NaN];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
(NaN); // true 识别NaN文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
('Koro1',100); // false 超过数组长度 不搜索文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
('Koro1',-3); // true 从倒数第三个元素开始搜索文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
6. slice() 浅拷贝数组的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
字符串也有一个slice() 方法是用来提取字符串的,不要弄混了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
let a = [{name: 'OBKoro1'}, {name: 'zhangsan'}]; let b = (0,1); (b, a); // [{"name":"OBKoro1"}] [{"name":"OBKoro1"}] a[0].name='改变原数组'; (b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
· 遍历方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
1. forEach:按升序为数组中含有效值的每一项执行一次回调函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
1.无法中途退出循环,只能用return退出本次回调,进行下一次回调.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
2.它总是返回 undefined值,即使你return了一个值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
2. every 检测数组所有元素是否都符合判断条件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
如果数组中检测到有一个元素不满足, 则整个表达式返回false,且元素不会再进行检测文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
function isBigEnough(element, index, array) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
return element >= 10; // 判断数组中的所有元素是否都大于10文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
[12, 5, 8, 130, 44].every(isBigEnough); // false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
[12, 54, 18, 130, 44].every(isBigEnough); // true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// 接受箭头函数写法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
[12, 5, 8, 130, 44].every(x => x >= 10); // false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
[12, 54, 18, 130, 44].every(x => x >= 10); // true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
3. some 数组中的是否有满足判断条件的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
如果有一个元素满足条件,则表达式返回true, 剩余的元素不会再执行检测文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
4. filter 过滤原始数组,返回新数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
5. map 对数组中的每个元素进行处理,返回新的数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
6. reduce 为数组提供累加器,合并为一个值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// 数组求和 let sum = [0, 1, 2, 3].reduce(function (a, b) { return a + b; }, 0); // 6 // 将二维数组转化为一维 将数组元素展开 let flattened = [[0, 1], [2, 3], [4, 5]].reduce( (a, b) => (b), [] ); // [0, 1, 2, 3, 4, 5]
7. ES6:find()& findIndex() 根据条件找到数组成员文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
这两个方法都可以识别NaN,弥补了indexOf的不足.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
[1, 4, -5, 10,NaN].find((n) => (NaN, n));文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// 返回元素NaN文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
[1, 4, -5, 10].findIndex((n) => n < 0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
// 返回索引2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
8. ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
for (let index of ['a', 'b'].keys()) { (index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { (elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { (index, elem); } // 0 "a" // 1 "b"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html