js数组奇巧淫技：参考： https://juejin.cn/post/6844904194919366669

join 用于分隔字符串
push() 用于对数组进行增加(最后面增加)
unshift() 用于对数组进行增加(最前面增加)
shift() 用于对数组进行删除(删除最后面)
pop() 用于对数组进行删除(删除最前面)
sort () 用于比较大小
reverse () （12用于倒叙数组
concat () 用于多个数组合并
slice () 用于数组的切割
splice() 可以对数组进行增、删、改.返回被增加,删除或修改的元素 会改变原数组
indexOf()和 lastIndexOf() （ES5新增）用于查找 某个字符在没在数组里面
forEach() （ES5新增） 对数组进行遍历循环,对数组中的每一项运行给定的函数.这个方法没有返回值
map() （ES5新增） 映射,对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组
filter() （ES5新增）一般用于过滤
every() （ES5新增）一般用于判断 只有满足全部条件就会返回 true 否则返回 false
some() （ES5新增）一般用于判断 只有满足一个条件就会返回 true 否则返回 false
reduce()和 reduceRight() （ES5新增）

ES5:

join & split

  1. const colors = 'green, red, black';
  2. const colorsArr = colors.split(',');
  3. console.log(colorsArr); // [ 'green', ' red', ' black' ]
  4. const colorsStr = colorsArr.join(',');
  5. console.log(colorsStr); // green, red, black

push & pop

  1. const colors = [];
  2. colors.push('green', 'red');
  3. console.log(colors); // ['green', 'red']
  5. const item = colors.pop();
  6. console.log(item); // 'red'
  7. console.log(colors); // ['green']
  9. 作者：tonytony
  10. 链接：https://juejin.cn/post/6844903925775237127
  11. 来源：稀土掘金
  12. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

shift & unshift

  1. const colors = ['green', 'red'];
  2. const item = colors.shift();
  3. console.log(item); // 'green'
  4. console.log(colors); // ['red']
  6. colors.unshift('blue', 'grey');
  7. console.log(colors); // ['blue', 'grey', 'red']
  9. 作者：tonytony
  10. 链接：https://juejin.cn/post/6844903925775237127
  11. 来源：稀土掘金
  12. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

reverse & sort

  1. const values = [1, 3, 44, 43, 654, 0];
  2. values.reverse();
  3. console.log(values); // [ 0, 654, 43, 44, 3, 1 ]
  5. values.sort();
  6. console.log(values); // [ 0, 1, 3, 43, 44, 654 ] 首字母开始比较
  7. values.sort((val1, val2) => val2 - val1);
  8. console.log(values); // [ 654, 44, 43, 3, 1, 0 ]
  10. 作者：tonytony
  11. 链接：https://juejin.cn/post/6844903925775237127
  12. 来源：稀土掘金
  13. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

concat, slice & splice

  1. const colors = ['red', 'green', 'blue'];
  2. const colors2 = colors.concat('yellow', ['black']);
  3. console.log(colors2); // [ 'red', 'green', 'blue', 'yellow', 'black' ]
  5. const colors3 = colors2.slice(1, 5);
  6. console.log(colors3); // [ 'green', 'blue', 'yellow', 'black' ]
  7. console.log(colors2); // [ 'red', 'green', 'blue', 'yellow', 'black' ]
  9. const remove1 = colors2.splice(0, 1);
  10. console.log(remove1); // [ 'red' ]
  11. console.log(colors2); // [ 'green', 'blue', 'yellow', 'black' ]
  12. const remove2 = colors2.splice(1, 0, 'red', 'pink');
  13. console.log(remove2); // [ ]
  14. console.log(colors2); // [ 'green', 'red', 'pink', 'blue', 'yellow', 'black' ]
  16. 作者：tonytony
  17. 链接：https://juejin.cn/post/6844903925775237127
  18. 来源：稀土掘金
  19. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

indexOf & lastIndexOf

  1. const values= [1, 3, 4, 6, 7, 4, 3, 1];
  2. console.log(values.indexOf(4)); // 2
  3. console.log(values.lastIndexOf(4)); // 5
  4. console.log(values.lastIndexOf(4, 4)); // 2
  5. console.log(values.lastIndexOf(4, 5)); // 5
  7. 作者：tonytony
  8. 链接：https://juejin.cn/post/6844903925775237127
  9. 来源：稀土掘金
  10. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

every, filter, forEach, map & some

every & some

  1. const values = [1, 3, 4, 6, 7, 4, 3, 1];
  2. const everyResult = values.every((item, index, array) => {
  3.   return item > 2;
  4. });
  5. console.log(everyResult); // false
  7. const someResult = values.some((item, index, array) => {
  8.   return item > 2;
  9. });
  10. console.log(someResult); // true
  12. 作者：tonytony
  13. 链接：https://juejin.cn/post/6844903925775237127
  14. 来源：稀土掘金
  15. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

filter

  1. let aa = [1,2,3,4,5,6,7];
  2. let cc = [];
  3. cc = aa.filter((item,index) => {
  4.     return item > 3
  5. })
  6. console.log(cc); // [4,5,6,7]
  8. const obj = [ { num: 3 }, { num: 4 }, { num: 1 },{ num: 5 },{ num: 0 }, { num: 4 }];
  9. const filterObjResult = obj.filter((item, index, array) => {
  10.   return item.num > 2;
  11. });
  12. console.log(filterObjResult); // [ { num: 3 }, { num: 4 }, { num: 5 }, { num: 4 } ]
  14. 作者：tonytony
  15. 链接：https://juejin.cn/post/6844903925775237127
  16. 来源：稀土掘金
  17. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

map

  1. let values = [1,3,5,6,7,3,1];
  2. let mapResult = values.map((item, index, array) => {
  3.     return item * 2
  4. })
  5. console.log(mapResult); //[2,6,10,12,14,6,2]
  7. const obj = [ { num: 3 }, { num: 4 }, { num: 1 },{ num: 5 },{ num: 0 }, { num: 4 }];
  8. const mapObjResult = obj.map((item, index, array) => {
  9.   return item.num;
  10. });
  11. console.log(mapObjResult); // [ 3, 4, 1, 5, 0, 4 ]

forEach

  1. const values = [1, 3, 4, 6, 7, 4, 3, 1];
  2. values.forEach((item, index, array) => {
  3.   array[index] = item * 2;
  4. });
  5. console.log(values); // [ 2, 6, 8, 12, 14, 8, 6, 2 ]
  7. 作者：tonytony
  8. 链接：https://juejin.cn/post/6844903925775237127
  9. 来源：稀土掘金
  10. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

reduce & reduceRight

  1. const values = [1, 3, 4, 4, 4, 9];
  2. const sum = values.reduce((prev, cur, index, array) => {
  3.   return prev + cur;
  4. });
  5. console.log(sum); // 25
  7. const sumRight = values.reduceRight((prev, cur, index, array) => {
  8.   return prev + cur;
  9. });
  10. console.log(sumRight); // 25
  12. 作者：tonytony
  13. 链接：https://juejin.cn/post/6844903925775237127
  14. 来源：稀土掘金
  15. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

ES6

拓展运算符…

  1. const colors = ['green', 'red', 'pink'];
  2. const colors1 = ['white', 'grey'];
  3. const colors2 = [...colors, ...colors1];
  4. console.log(colors2); // [ 'green', 'red', 'pink', 'white', 'grey' ]
  6. 作者：tonytony
  7. 链接：https://juejin.cn/post/6844903925775237127
  8. 来源：稀土掘金
  9. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
  1. const obj = {
  2.   '0': '123',
  3.   '1': '456',
  4.   '2': 'c',
  5.   length: 4
  6. }
  8. const arr = Array.from(obj);
  9. console.log(arr); // [ '123', '456', 'c', undefined ]
  10. const values = [1, 1, 3, 5];
  11. const setValue = new Set(values);
  12. const newArr = Array.from(setValue); // 也可以直接[...new Set(values)]
  13. console.log(newArr); // [ 1, 3, 5 ]
  14. const newArr2 = Array.from(newArr, x => x * 2);
  15. console.log(newArr2); // [ 2, 6, 10 ]
  17. console.log(Array.of(undefined, 1, null)); // [ undefined, 1, null ]
  19. 作者：tonytony
  20. 链接：https://juejin.cn/post/6844903925775237127
  21. 来源：稀土掘金
  22. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

fill

  1. const colors = ['green', 'red', 'pink'];
  2. const colors1 = colors.fill('white');
  3. console.log(colors1); // [ 'white', 'white', 'white' ] 
  5. 作者：tonytony
  6. 链接：https://juejin.cn/post/6844903925775237127
  7. 来源：稀土掘金
  8. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

find & findIndex

  1. const values = [1, 3, 4, 5, 6, NaN];
  2. const findResult = values.find(num => num > 4 ); // 找不到为undefined
  3. console.log(findResult); // 5
  4. const findIndexResult = values.findIndex(num => num > 4 ); // 找不到为-1
  5. console.log(findIndexResult); // 3
  7. 作者：tonytony
  8. 链接：https://juejin.cn/post/6844903925775237127
  9. 来源：稀土掘金
  10. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

entries(), keys() & values()

  1. const colors = ["red", "green", "blue"];
  2. for (const index of colors.keys()) {
  3.   console.log(index); // 0 1 2
  4. }
  6. for (const ele of colors.values()) {
  7.   console.log(ele); // red green blue
  8. }
  9. for (const [index, ele] of colors.entries()) {
  10.   console.log(index, ele);
  11. }
  12. // 0 red
  13. // 1 green
  14. // 2 blue
  16. 作者：tonytony
  17. 链接：https://juejin.cn/post/6844903925775237127
  18. 来源：稀土掘金
  19. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

ES7

includes

第二个参数是搜索的起始位置

  1. const values = [1, 3, 4, 5, 6, NaN];
  2. console.log(values.includes(NaN)); // true
  3. console.log(values.includes(4, 3)); // false

参考资料

1.Array.isArray()

  1. 用来判断是否为数组， 可以弥补 typeof 运算的不足
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"];
  3. var arrObj = {};
  4. console.log(Array.isArray(arr));//true
  5. console.log(Array.isArray(arrObj));//false

2.valueOf()

  1. 返回数组的原始值 （一般情况下其实就是数组自身）
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"];   
  3. console.log(arr.valueOf());//[1, 3, 5, "xiaoming", "liuqiao"];
  4.  //判断返回的是数组自身
  5. console.log(arr.valueOf()===arr) //true

3.toString()

  1. 返回数组的字符串形式
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"];   
  3. console.log(arr.toString());//1,3,5,xiaoming,liuqiao

4.indexOf()

  1. 返回指定元素在数组中第一次出现的位置,没有返回-1
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"];        
  3. console.log(arr.indexOf('xiaoming'));//返回索引 3
  1. lastIndexOf()
  1. 返回指定元素在数组中最后出现的位置,没有返回-1
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao",'xiaoming'];
  3. console.log(arr.lastIndexOf('xiaoming'));//返回索引 5

6.push()

  1. 用于在数组的末端添加一个或多个元素,并返回添加元素后的数组长度, 会改变元素原数组
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"]; 
  3. console.log(arr.push('xiaohong', 'xiaobai')); //返回数组长度7
  4. console.log(arr);// [1, 3, 5, "xiaoming", "liuqiao", "xiaohong", "xiaobai"]

7.pop()

  1. 用于删除数组的最后一个元素,并返回该元素,会改变原数组
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"];
  3. console.log(arr.pop('liuqiao'))//liuqiao
  4. console.log(arr);// [1, 3, 5, "xiaoming"]

8.join() 

  1. 以某字符串参数为分隔符,将数组所有元素,组成字符串并返回,若没有传参,则以默认以逗号分隔
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"];
  3. console.log(arr.join('-'));//1-3-5-xiaoming-liuqiao
  4. console.log(arr.join());//1,3,5,xiaoming,liuqiao

8.split()

  1. const colors = 'green, red, black';
  2. const colorsArr = colors.split(',');
  3. console.log(colorsArr) ; //['green','red', 'black']

9.concat()

  1. 用于多个数组的合并,将新数组的元素,添加到原数组元素的后面,返回一个新数组, 原数组不变
  2. var arr = [1, 3, 5, "xiaoming", "liuqiao"];
  3. var newArr = ['xiaohong', 'xiaobai']
  4. console.log(arr.concat(newArr));//[1, 3, 5, "xiaoming", 
  5. console.log(arr);//[1, 3, 5, "xiaoming", "liuqiao"];
  7. ----------------------------------分隔符-----------------------------------
  8. //多个数组合并
  9. var newArr = ['xiaohong']
  10. var newArr2 = [2];
  11. var newArr3= [6];
  12. console.log(arr.concat(newArr,newArr2,newArr3));//[1, 3, 5, "xiaoming", "liuqiao", "xiaohong",2,6]

10.shift()

  1. 用于删除数组的第一个元素,并返回该元素.会改变原数组
  2. var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  3. console.log(arr.shift());//xiaoming
  4. console.log(arr);//[3, 5, 1, "liuqiao"]

11.unshift()

  1. 用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度.会改变原数组
  2. var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  3. console.log(arr.unshift('abc'));//6
  4. console.log(arr);//["abc", "xiaoming", 3, 5, 1, "liuqiao"]

12.reverse()

  1. 用于倒置数组中的元素顺序,返回改变后的数组.会改变原数组
  2. var arr = ["xiaoming", 3, 5, 1, "liuqiao"]; 
  3. console.log(arr.reverse());//["liuqiao", 1, 5, 3, "xiaoming"]
  4. console.log(arr);//["liuqiao", 1, 5, 3, "xiaoming"]

13.slice()

  1. 从数组中拷贝一部分，返回新数组
  2. var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  3. //包含索引为1的元素，不包含索引为3的元素(拷贝索引为 1 2 的元素)
  4. console.log(arr.slice(1,3));//[3, 5]
  5. console.log(arr);//["xiaoming", 3, 5, 1, "liuqiao"];

14.splice()

  1. 可以对数组进行增、删、改.返回被增加,删除或修改的元素 会改变原数组
  2. --------------->>>>
  3. !!删除:splice一个参数时:被删除的起始索引, 直到末尾全部删除,返回被删除的项
  4. var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  5. console.log(arr.splice(2));//[5, 1, "liuqiao"]
  6. console.log(arr); //["xiaoming", 3]
  7. --------------->>>>
  8. !!删除: splice 两个参数时:第一个参数是被删除的起始索引,第二个参数是要删除的项数 返回被删除的项
  9. var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  10. console.log(arr.splice(0,2));//["xiaoming", 3]
  11. console.log(arr); //[5, 1, "liuqiao"]
  12. --------------->>>>>
  13. !!添加: splice:三个参数时:第一个起始位置索引(也就是在哪个地方添加),第二个参数是0,第三个参数是插入的项.返回空数组
  14. //通俗点来说就是:在哪个地方,添加哪几项
  15. var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  16. console.log(arr.splice(1, 0, 'xiaofang'));//[]
  17. console.log(arr); //["xiaoming", "xiaofang", 3, 5, 1, "liuqiao"]
  18. ---------------->>>>
  19. !!替换:splice:向数组指定位置插入任意项元素,同时删除任意数量的项
  21. 三个参数:第一个参数:起始索引位置,第二个参数:删除的项数,第三个参数:插入任意数量的项
  23. 返回被删除的项
  24. var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  25. console.log(arr.splice(1, 2, 'xiaofang','xiaohong'));//[3,5]
  26. console.log(arr);//["xiaoming", "xiaofang", "xiaohong", 1, "liuqiao"]

15.sort()

  1. 将数组进行排序，返回数组 默认按照字符编码排序(默认为升序) 会改变原数组
  2. ------------>>>>>
  3. sort排序是针对字符的排序,先使用数组的toString()方法转为字符串,再逐位笔记,3 是大于12的,因为收尾3>1,所以尽量不要使用Number类型的数据进行排序
  4. 比较字符串的时候,首位的英文字母通过ASCII码可以转为相应的数值，再根据数值比较
  5. var arr = ["xiaoming", 3, 5, 1, 12,"liuqiao"];
  6. console.log(arr.sort());//["xiaoming", 3, 5, 1, 12,"liuqiao"];
  7. console.log(arr);//["xiaoming", 3, 5, 1, 12,"liuqiao"];
  8. ------------->>>>
  9. 数组排序方法,需要自己定义回调函数 sort([fn]),返回数组
  11. 升序，只能对数值排序
  12. var arr = [3, 5, 1, 12];
  13. //升序，只能对数值排序
  14. arr.sort(function (a, b) { 
  15.     return a - b;
  16. });
  17. console.log(arr);//[1, 3, 5, 12]
  18. --------------->>>>
  19. 降序，只能对数值排序
  20. var arr = [3, 5, 1, 12];
  21.  //降序，只能对数值排序
  22. arr.sort(function (a, b) {
  23.     return b - a;
  24. });
  25. console.log(arr);//[12, 5, 3, 1]
  26. --------------->>>>
  27. 自定义排序函数 升序
  28. var arr = [3, 5, 1, 12];
  29. arr.sort(function (a, b) {//升序
  30.     if (a > b) {
  31.         return 1;
  32.     }
  33.     if (a < b) {
  34.         return -1;
  35.     }
  36.     return 0;
  37. });
  38. console.log(arr);//[1, 3, 5, 12]

16.some()

  1. 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true
  3. array.some(callback(value,index,self))
  5. some()接收一个回调函数作为参数,这个回调函数需要有返回值,callback(value,index,self)有是三个参数
  7. var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
  8. //相当于循环遍历
  9. var bol = arr.some(function (value, index, self) {
  10.     console.log(value);//遍历的值
  11.     console.log(index);//索引
  12.     console.log(self);//self表示自身
  13.     return value == 3;
  14. });
  15. console.log(bol);//true
  20. 可以判断某值是否存在,或者是否满足条件
  22. some的执行原理:因为要判断数组中的每一项，只要有一个回调函数返回true，some都会返回true，所以与every正好相反，当遇到一个回调函数的返回值为true时，可以确定结果，那么停止执行，后面都数据不再遍历，停在第一个返回true的位置；当回调函数的返回值为false时，需要继续向后执行，到最后才能确定结果，所以会遍历所有数据，实现类似于forEach的功能，遍历所有。

17.every()

  1. 判断数组中每一项都是否满足所给条件,当所有项都满足条件,才会返回true 与some相反
  2. var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
  3. var bol = arr.every(function (value, index, self) {
  4.     console.log(value);//遍历的值
  5.     console.log(index);//索引
  6.     console.log(self);//self表示自身
  7.     return value == 3;
  8. });
  9. console.log(bol);//false
  11. every的执行原理和some都差不多,也是循环遍历,只要发现不满足条件,立马停止,返回false

18.flat()

  1. flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
  3. var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
  4. //扁平化数组
  5. arr = arr.flat(Infinity);
  6. //使用Set特性,可以去重
  7. arr = Array.from(new Set(arr));
  8. console.log(arr);
  9. //如果需要排序,需要自己定义回调函数 sort([fn]),返回数组
  10. 详情可见上述sort()方法

ES6 数组方法

1.扩展运算符 …

1.1 将一个数组转为用逗号分隔参数序列

1.2 求最大值

  1. var arr = [7, 8, 20];
  2. console.log(Math.max(...arr));//20

1.3 拼接数组

  1. var arr1= [7, 8, 20];
  2. var arr2=["xiaoming",25];
  3. arr1.push(...arr2);
  4. console.log(arr1);//[7, 8, 20, "xiaoming", 25]

1.4 深拷贝数组

  1. var arr1 = [1,2,3]
  2. var arr2 = [...arr1]
  3. console.log(arr1)  // [1, 2, 3]
  4. console.log(arr2)  // [1, 2, 3]
  6. arr2[0]=0
  7. console.log(arr1)  // [1, 2, 3]
  8. console.log(arr2)  //[0, 2, 3]

1.5 合并多个数组（浅拷贝）

  1. var arr1 = ['1', '2'];
  2. const arr2 = ['3'];
  3. const arr3 = ['4', '5'];
  4. var arr4=[...arr1, ...arr2, ...arr3]
  5. console.log(arr4)// ["1", "2", "3", "4", "5"]

1.6 将字符串转为数组

  1. var msg='我是中国人';
  2. console.log([...msg]);//["我", "是", "中", "国", "人"]

2.Array.of()

  1. 用于将一组值，转换为数组。
  2. var arr = Array.of("xiaoming", 4, 7, 9);
  3. console.log(arr);//["xiaoming", 4, 7, 9]

3.Array.from()

  1. ES6为Array增加了from函数用来将其他对象转换成数组。
  3. 其他对象有要求:可以将两种对象转为数组
  5. 1.部署了iterator接口的对象,比如:Set,Map,Array
  7. 2.类数组对象,什么叫类数组对象,就是一个对象必须有length属性,没有length属性,转换出来的是空数组.
  9. 你会碰到的类数组对象有：函数中的 arguments 关键字，或者是一个 DOM 集合。

3.1 转换类数组对象

  1. var arr = { '0': 10, '1': 15, length: 2 };
  2. var array = Array.from(arr);
  3. console.log(array);//[10, 15]

3.2 从string 中生成数组

  1. var msg = "我是中国人";
  2. var arr=Array.from(msg)
  3. console.log(arr);//["我", "是", "中", "国", "人"]

3.3 从Set 生成数组 （可以作为数组的去重一种解决方案）

  1. var set=new Set(['abc','foo','abc','cde']);
  2. var arr=Array.from(set);
  3. console.log(arr);// ["abc", "foo", "cde"]
  5. //一行代码,数组去重
  6. var arr1 = [1,2,4,2,3,5,1,3];
  7. var arr2 = Array.from(new Set(arr1));
  8. console.log(arr2);// [1, 2, 4, 3, 5]

3.4 可以遍历数组，进行数据处理

  1. var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
  2. arr=Array.from(arr,item=>{
  3.     return item+"_hello";
  4. });
  5. console.log(arr);//["xiaoming_hello", "3_hello", "5_hello", "1_hello", "12_hello", "liuqiao_hello"]

4.fill()

  1. fill()函数，使用制定的元素填充数组，其实就是用默认内容初始化数组
  3. 三个参数:
  5. 第一个:填充的元素值
  7. 第二个:从哪里开始填充(位置索引)
  9. 第三个:从哪里之前结束
  11. var arr = [2, 5, 1, 12, 8];
  12. //一个值的时候都填充
  13. arr.fill("liuqiao");
  14. console.log(arr);//["liuqiao", "liuqiao", "liuqiao", "liuqiao", "liuqiao"]
  16. //2个值的时候, 从这里开始,都填充
  17. arr.fill("liuqiao",2);
  18. console.log(arr);//[2, 5, "liuqiao", "liuqiao", "liuqiao"]
  20. //三个值的时候,走索引,从哪里到哪里之前
  21. arr.fill("liuqiao",0,2);
  22. console.log(arr);//["liuqiao", "liuqiao", 1, 12, 8]

5.includes()

  1. includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
  2. var arr = ["xiaobin", 3, 5, 1, 12, "liuqiao"];
  3. onsole.log( arr.includes("liuqiao"));//true

6.entries(),keys(),values()

  1. 用于数组遍历,他们返回一个新的Array Iterator对象,可以用for…of循环进行遍历
  3. 唯一的区别就是
  5. keys()是对键名的遍历,
  7. values()是对键值的遍历
  9. entries()是对键值对的遍历
  11. //entries()是对键值对的遍历
  12. var arr = ["a", "b", "c"];
  13. var iterator = arr.entries();
  14. for (let item of iterator) {
  15.     console.log(item);
  16. }
  17. //[0, "a"]
  18. //[1, "b"]
  19. //[2, "c"]
  21. //keys() 返回 0  1  2
  22. //values() 返回  a  b  c

四。 常用的迭代方法(包含ES5 和 ES6)

1.map

  1. map() 映射,对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组.
  2. var arr = ["xiaobin", 3, 5, 1, 12, "liuqiao"];
  3. //currentValue 当前遍历的项
  4. //index 项索引
  5. //array  当前数组
  6. let array = arr.map(function (currentValue, index, array) {
  7.     return currentValue + 'hello';
  8. });
  9. console.log(array);//["xiaobinhello", "3hello", "5hello", "1hello", "12hello", "liuqiaohello"]

2.filter

  1. console.log(array);//[12, 8]

3.forEach

  1. forEach(),对数组进行遍历循环,对数组中的每一项运行给定的函数.这个方法没有返回值.
  3. 与map的功能一样,但是区别是:
  5. forEach()遍历执行某方法,但是没有返回值
  7. map()遍历执行某方法,有返回值
  9. var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
  10. //item 当前遍历的项
  11. //index 项索引
  12. //array  当前数组
  13. arr.forEach((item,index,array )=> {
  14.     //执行某功能
  15. });

4.find()

  1. 用于找出第一个符合条件的数组成员,它的参数是一个回调函数,所有成员依次执行该回调函数.直到找出第一个返回值为true的成员,然后返回该成员.如果没有符合条件的成员则返回undefined
  3.  var arr = [3, 5, 1, 12, 8];
  4.  var array = arr.find(item => {
  5.      return item > 5
  6.  });
  7.  console.log(array);//12
  9.  var array = arr.find(item => {
  10.      return item > 12
  11.  });
  12.  console.log(array);//undefined

5.findIndex()

  1. findIndex() 方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员不符合条件,则返回-1
  3. var arr = [2, 5, 1, 12, 8];
  4. var index = arr.findIndex(item => {
  5.     return item > 5
  6. });
  7. console.log(index);//3
  9. var index = arr.findIndex(item => {
  10.     return item > 13e
  11. });
  12. console.log(index);//-1

迭代方法：

  1. every() : 每一项都运行传入的函数，如果对每一项函数都返回为 true 则这个方法返回 ture。否则为 false
  2. filter（）: 过滤，对数组每一项都运行传入的函数， 函数返回 true 的项会组成数组之后返回
  3. forEach() : 对数组每一项都运行传入的函数， 没有返回值
  4. map(): 对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组
  5. some(): 对数组每一项都运行传入的函数，如果有一项函数返回 true ，则这个方法返回 true
  6. 这些方法都不改变调用他们的数组

取数组每一项值

  1. for in