【Web前端基础知识】Array相关知识介绍

发布 : 优就业IT培训      来源:

2021-10-29 15:01:55

一、类数组

类数组不是数组,类数组指拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字 符串来处理且不具有数组所具有的方法;

如函数中的arguments:

  1. let arg = null;
  2. function fun(a,b,c,d){
  3. arg = arguments;
  4. }
  5. fun(1,2,3,4)
  6. console.log(arg); //Arguments(4) [1, 2, 3, 4, callee: ƒ ,
  7. Symbol(Symbol.iterator): ƒ]
  8. arg.slice() //ncaught TypeError: Cannot read property 'slice' of null

类数组转换为数组主要有一下方法:

1.Array.prototype.slice.call()

  1. Array.prototype.slice.call(arg) // [1, 2, 3, 4]
  2. Array.prototype.slice.call(arg).indexOf() //-1

2.Array.from()

  1. Array.from(arg) //[1, 2, 3, 4]
  2. Array.from(arg).indexOf() //-1

3. ...扩展运算符

  1. [...arg] //[1, 2, 3, 4]
  2. [...arg].indexOf() //-1

4.concat+apply

  1. Array.prototype.concat.apply([], arg) //[1, 2, 3, 4]
  2. Array.prototype.concat.apply([], arg).indexOf() //-1

二、数组遍历API

1.map

map不修改原数组,根据传入的函数,映射出一个全新的数组

  1. let arr = [1 ,2 ,3];
  2. let res = arr.map((value)=>{
  3. return value + 1;
  4. })
  5. console.log(res) //[2, 3, 4]

2.foreach

遍历数组,不可中断,没有返回值

  1. let arr = [1 ,2 ,3];
  2. arr.forEach((value)=>{
  3. console.log(value) //分别打印1,2,3
  4. });

3.some

遍历数组,检查是否有符合条件的数据,至少有一个则返回true ,一个都没有返回false

  1. let arr = [1 ,2 ,3];
  2. let res = arr.some((value)=>{
  3. return value > 2
  4. });
  5. console.log(res) //true
  6. let arr = [1 ,2 ,3];
  7. let res = arr.some((value)=>{
  8. return value > 3
  9. });
  10. console.log(res) //false

4.every

遍历数组,检查是否所有数据都符合条件,是则true ,否则false

  1. let arr = [1 ,2 ,3];
  2. let res = arr.every((value)=>{
  3. return value > 0
  4. });
  5. console.log(res) //true
  6. let arr = [1 ,2 ,3];
  7. let res = arr.every((value)=>{
  8. return value > 1
  9. });
  10. console.log(res) //false

5.reduce

reduce()方法接收一个回调函数作为第一个参数,回调函数又接受四个参数,分别是;

1、 previousValue =>初始值或上一次回调函数叠加的值;

2、 currentValue => 本次回调(循环)将要执行的值;

3、 index=>“currentValue”的索引值;

4、 arr => 数组本身;

reduce()方法返回的是最后一次调用回调函数的返回值;

  1. let arr = [1 ,2 ,3];
  2. let res = arr.reduce((sum, value)=>{
  3. return sum + value;
  4. });
  5. console.log(res) //6

6.find

返回符合条件的数据内容

  1. let arr = [
  2. {id:1, {id:2, {id:3,value:3},
  3. value:4},
  4. value:5},
  5. ];
  6. let res = arr.find((current)=>{
  7. return current.value > 4;
  8. });
  9. console.log(res) //{id: 3, value: 5}

7.filter

顾名思义,过滤,按照传入的规则过滤不符合条件的数据,将符合条件的数据放入一个新数组

  1. let arr = [
  2. value:3},
  3. value:4},
  4. value:5},
  5. ];
  6. let res = arr.filter((current)=>{
  7. return current.value > 3;
  8. });
  9. console.log(res) //[{id:2, value:4}, {id:3, value:5}]

三、多维数组扁平化

以下以这段数据为例:

let arr = [1, [2, 3], [[4, 5, 6], 7, 8]]

1.flat

es6的flat ,但是一次只能拆分一层

  1. arr.flat() //[1, 2, 3, [4, 5, 6], 7, 8]

2.正则表达式

在字符串中匹配到'['或者']' ,将其去除,但是这样做会将所有的数组元素变为字符类型,而且数组元素中 还不能包含'['或者']'

  1. <P>JSON.stringify(arr).replace(/(\[|\])/g,</P>
  2. <P>"5", "6", "7", "8"]&#39;&#39;).split(&#39;,&#39;)//["1", "2", "3", "4",</P>

3.普通的递归

  1. let result = [];
  2. let fn = function(ary) {
  3. for(let i = 0; i < ary.length; i++) { let item = ary[i];
  4. if (Array.isArray(ary[i])){
  5. fn(item);
  6. } else {
  7. result.push(item);
  8. }
  9. }
  10. }

4...扩展运算符

  1. while (arr.some(Array.isArray)) {
  2. arr = [].concat(...arr);
  3. }
THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

领取零基础自学IT资源

涉及方向有Java、Web前端、UI设计、软件测试、python等科目,内容包含学习路线、视频、源码等

点击申请领取资料

点击查看资料详情 

收起 


 相关推荐

问题解答专区
返回顶部