js数组的常用属性、方法举例说明

悠悠 2023-07-21 11:23 13阅读 0赞

#### 数组 对象属性： ####

constructor 返回对创建此对象的数组函数的引用。
    	length      设置或返回数组中元素的长度。
    	prototype   使您有能力向对象添加属性和方法。

#### 数组 对象方法： ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>对应版本</th> 
   <th>描述</th> 
   <th>是否改变原数组</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat()</td> 
   <td>ES5-</td> 
   <td>合并数组，并返回合并之后的数据</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>join()</td> 
   <td>ES5-</td> 
   <td>使用分隔符，将数组转为字符串并返回</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>ES5-</td> 
   <td>删除最后一位，并返回删除的数据</td> 
   <td>Y</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td>ES5-</td> 
   <td>删除第一位，并返回删除的数据</td> 
   <td>Y</td> 
  </tr> 
  <tr> 
   <td>unshift()</td> 
   <td>ES5-</td> 
   <td>在第一位新增一或多个数据，返回长度</td> 
   <td>Y</td> 
  </tr> 
  <tr> 
   <td>push()</td> 
   <td>ES5-</td> 
   <td>在最后一位新增一或多个数据，返回长度</td> 
   <td>Y</td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td>ES5-</td> 
   <td>反转数组，返回结果</td> 
   <td>Y</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>ES5-</td> 
   <td>截取指定位置的数组，并返回据</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td>ES5-</td> 
   <td>排序（字符规则），返回结果</td> 
   <td>Y</td> 
  </tr> 
  <tr> 
   <td>splice()</td> 
   <td>ES5-</td> 
   <td>删除指定位置，并替换，返回删除的数据</td> 
   <td>Y</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>ES5-</td> 
   <td>直接转为字符串，并返回</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td>ES5-</td> 
   <td>返回数组对象的原始值</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>indexOf()</td> 
   <td>ES5</td> 
   <td>查询并返回数据的索引</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>lastIndexOf()</td> 
   <td>ES5</td> 
   <td>反向查询并返回数据的索引</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>forEach()</td> 
   <td>ES5</td> 
   <td>参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>map()</td> 
   <td>ES5</td> 
   <td>同forEach，同时回调函数返回数据，组成新数组由map返回</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>filter()</td> 
   <td>ES5</td> 
   <td>同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>every()</td> 
   <td>ES5</td> 
   <td>同forEach，同时回调函数返回布尔值，全部为true，由every返回true</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>some()</td> 
   <td>ES5</td> 
   <td>同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>reduce()</td> 
   <td>ES5</td> 
   <td>归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td>reduceRight()</td> 
   <td>ES5</td> 
   <td>反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回</td> 
   <td>N</td> 
  </tr> 
 </tbody> 
</table>

--------------------

### 1、forEach ###

##### 1.1 易错点 #####

> forEach()不一定改变自身数组。我们可以看看数组中的元素是值类型和引用类型场景下，是否都能获得改变：

> 总结：arr 发生改变，小王、小吴都长了一岁，arr1没有变，所以说 当数组中元素是值类型，forEach不会改变数组；当数组中的元素是引用类型，则可以改变数组；

##### 1.2 forEach不支持链式操作 #####

[1,2,3,4].forEach(item=>{ 
    		item=> console.log(item)
    	}).fillter(item=>{ 
    		return item > 2 ;
    	});
    // Uncaught TypeError: Cannot read property 'fillter' of undefined

**注意：** forEach**后面**不能链式调用，但是在forEach**前面**可以链式调用

[1, 2, 3, 4].filter(item => { 
            return item > 2
        }).forEach(items => { 
            console.log(items * 2)
        });
        // 6
       	// 8

### 2、map ###

> map()功能很强大，forEach()的一些局限性它很多都能解决。“map"即"映射”，也就是原数组被"映射"成对应新数组

##### 2.1 基础点 #####

*  新建一个数组，需要有承载对象，也意味着原始数组在调用它后不会发生变化;
 *  该数组中的每个元素都调用一个提供的函数后返回结果。

##### 2.2 易错点 #####

*  创建新数组不代表不能用它改变原有数组，重新赋值给自身就行了：

let arr = [1,2,3];
    	arr = arr.map(item => {  return item * 2 }); // [2, 4, 6]

*  map()中每个元素都要执行相应的回调函数，所以必须要有return，如果你想给数组做一定的过滤处理，那map()基本上行不通 **用map做过滤不太合适**：

let newArr = [1,2,3,4,5].map(item => {  if(item > 3) return item })
    	// [undefined, undefined, undefined, 4, 5]

### 3、filter ###

> filter 和map类似，创建一个新数组，新数组中的元素是筛选出来的符合条件所有对象：

var arr = [1, 2, 3, , 4, , 5];
    	let arr1 = arr.filter(function(v) { 
    	    return v > 2
    	});
    	console.log(arr1); //[3, 4, 5]

**注意：filter过滤没问题，但是要是在函数里面做加减乘除 不行**

var arr = [1, 2, 3, , 4, , 5];
        let arr1 = arr.filter(function(v) { 
            return v * 2
        });
        console.log(arr1); // [1, 2, 3, 4, 5]

### 4、sort() ###

> sort()用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序

##### 4.1 基础点 #####

*  默认排序按字母升序（更准确一些是根据字符串Unicode码点）：

[3,4,2,1,5].sort()
    	// => [1,2,3,4,5]
    	
    	['Javascript','Vue','React','Node','Webpack'].sort();
    	// => ["Javascript", "Node", "React", "Vue", "Webpack"]

##### 4.2 易错点 #####

1.  sort()与map()、filter()等不同，**它直接改变原始数组（很重要！）**
2.  如果想按照其他标准进行排序，就需提供比较函数compareFunction(a,b)，数组会按照调用该函数的返回值排序，即**a和b是两个将要比较的元素**：

> 如果 compareFunction(a,b) 小于0，a< b，则a排列到b之前；  
> 如果 compareFunction(a, b) 等于0，a===b ，a和b的相对位置不变（并不保证）;  
> 如果 compareFunction(a, b) 大于0，a>b ，b排列到a之前； 直接上例子：

let Users = [
    	  { name:'鸣人',age:16},
    	  { name:'卡卡西',age:28},
    	  { name:'自来也',age:50},
    	  { name:'佐助',age:17}
    	];
    	Users.sort((a,b)=> { 
    	   return a.age - b.age
    	})
    	// [{name:"鸣人",age:16},{name:"佐助",age:17},{name:"卡卡西",age:28},{name:"自来也", age:50}]

### 5、some() ###

> some()也是很好的一个方法，用于检查数组中是否有某些符合条件

##### 5.1 基础点 #####

*  等同于 “||” 判断，只要有一个满足即返回true，之后的不再执行(所以说对性能很友好 )

var result = [{ 
            name: '鸣人',
            age: 12
        }, { 
            name: '佐助',
            age: 17
        }].some(item => { 
            return item.age > 15
        });
        console.log(result); // true

### 6、every() ###

> some是 “||” 判断，every是 “&&” 判断，检测数组中每一项是否符合条件，只有全部满足条件才会返回true ; 有一个条件不满足就会返回false

var result = [{ 
            name: '鸣人',
            age: 15
        }, { 
            name: '佐助',
            age: 17
        }].every(item => { 
            return item.age > 16
        });
        console.log(result); //false

### 7、find() ###

> find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined  
> 和some()一样，只要有一个满足即返回该元素，不会多余遍历，对性能很友善

var array1 = [5, 12, 8, 130, 44];
      var found = array1.find(value => value > 10);
      console.log(found);  // 12

--------------------

### 二、其他经典方法 ###

在我们的日常工作中，会有很多业务需求是上述方法做不到的，比如下面三个需求：

1.	给一个数组做去重处理;
    2.	判定当前数组里是否有某个元素，并返回该元素;
    3.	判定当前数组里是否有某个元素，并把它去除;

> 针对需求1，我相信看到"去重"，你肯定会想到new Set()，这也是个经常出现的面试题；  
> 针对需求2，当你看到判定当前数组中是否有某个元素，也许会说filter() 不就是干这脏活累活的吗？  
> 还真不是，不信，我们分别展开讨论一下吧。

#### 1. 数组去重 ####

##### 1.1 new Set() 的局限性 #####

数组去重，基本上论坛上各位大神的面试题里都会有这个，没错，正是new Set()，很经典的办法，面试必备：

let tempArr = new Set([1,2,3,3,4,4,5])
    // => {1,2,3,4,5} 
    
    //并且已有元素是添加不进去的：
    tempArr.add(3) 
    // => {1,2,3,4,5}
    
    tempArr.add(6)
    // => {1,2,3,4,5,6}

一定注意new Set()会将结果转换成对象！但实际工作中我们很少会和元素是值类型的数组打交道，那看看元素是引用类型还行不行：

现在的问题是：Set()没法去重元素是引用对象的数组。那接下来咋整呀？

##### 1.2 \_.uniqWith() #####

别担心，Lodash帮我们，Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。它有提供给了我们一个很好的方法——\_.uniqWith()：

import _ from 'lodash';
    <script>
    var objs = [{  'x': 1, 'y': 2 }, {  'x': 2, 'y': 1 }, {  'x': 1, 'y': 2 }];
    _.uniqWith(objs , _.isEqual); // 去除重复的对象
    </script>
    //=> [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }] ;

_.isEqual(value,other)用于执行深比较来确定两者的值是否相等。 _.uniqWith()做去重处理

### 2. 获取数组中的指定元素 ###

> 在工作中我们还有一个比较常见的场景，就是在数组中找到我想要的那一个，并且返回给我。好的，some()已经办不到了，它只会告诉我是否存在，filter()确实可以做到，但是如果我本身就知道这个数组里即使有我想的那个，也肯定只有一个，不可能出现多个，所以，出于性能的考虑，我不想用filter()给我从头遍历到尾，这样怎么办？

##### 2.1 findIndex() #####

> 既然filter()不支持中断遍历，那我们就要找一个能中断遍历的方法，我们可以使用for…of，该方法支持中断遍历，但是该方法代码量较大，不建议使用，感兴趣的同学可以查阅一下。  
> 针对这个场景，我们可以使用 findIndex()帮我们先获取到所需元素的索引值，拿到索引后，你要杀要剐随你便

let testArr = [{ name:'鸣人',age:16},{ name:'佐助',age:17},{ name:'卡卡西',age:26}]
    let index = testArr.findIndex(item => {  return item.age > 19 });
    // => 2 
    // testArr[2] === {name:'卡卡西',age:26}

或者也可以使用Lodash提供的\_.findIndex()，通过对象属性值直接获取对应索引：

let testArr = [{ name:'鸣人',age:16},{ name:'佐助',age:17},{ name:'卡卡西',age:26}]
    let index = _.findIndex(testArr, { name:'佐助'});
    // => 1
    // 索引值 ：1

**注意：** IE 11 及更早版本不支持 **findIndex()** 方法。所以，如果对浏览器兼容有要求，建议用 [Lodash][] 的 \_.findIndex() 方法

[Lodash]: https://links.jianshu.com/go?to=https://www.lodashjs.com/