数组方法总结

迷南。 2023-01-12 10:15 181阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>数组方法</th> 
   <th>功能</th> 
   <th>是否改变原数组</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat()</td> 
   <td>合并数组，可以合并一个或多个数组，返回合并数组之后的数据</td> 
   <td>不改变</td> 
  </tr> 
  <tr> 
   <td>join()</td> 
   <td>使用分隔符，将数组转为字符串，返回字符串</td> 
   <td>不改变</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>直接转为字符串，返回字符串</td> 
   <td>不改变</td> 
  </tr> 
  <tr> 
   <td>indexOf()</td> 
   <td>返回某个指定元素在数组中首次出现的位置</td> 
   <td>不改变</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>截取指定位置的数组，返回截取的数组</td> 
   <td>不改变</td> 
  </tr> 
  <tr> 
   <td>splice()</td> 
   <td>向数组中添加或删除/替换数组中的元素，返回被删除/替换的元素</td> 
   <td>改变</td> 
  </tr> 
  <tr> 
   <td>unshift()</td> 
   <td>在数组的首位新增一个或多个数据，返回新数组的长度</td> 
   <td>改变</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td>在数组的首位删除一个或多个数据，返回删除的数据</td> 
   <td>改变</td> 
  </tr> 
  <tr> 
   <td>push()</td> 
   <td>在数组的末位新增一个或多个数据，返回新数组的长度</td> 
   <td>改变</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>删除数组的末位，返回删除的数据</td> 
   <td>改变</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td>对数组内的数据排序，返回排序后的新数组（默认为升序）</td> 
   <td>改变</td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td>将数组的数据反转，返回反转后的数组</td> 
   <td>改变</td> 
  </tr> 
 </tbody> 
</table>

let arr1 = [1,2,3,4,5]; let arr2 = [6,7,8,9,10];

concat()	合并数组，可以合并一个或多个数组，返回合并数组之后的数据
    	
    let arr = arr1.concat(...arr2)  
    console.log(arr)	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    console.log(arr1)   // [1, 2, 3, 4, 5]
    console.log(arr2)	// [6, 7, 8, 9, 10]

join()		使用分隔符，将数组转为字符串，返回字符串
    	
    let arr = arr1.join('-')  
    console.log(arr)	// 1-2-3-4-5
    console.log(arr1)   // [1, 2, 3, 4]

toString()		直接转为字符串，返回字符串
    	
    let arr = arr1.toString()  
    console.log(arr)	// 1,2,3,4,5
    console.log(arr1)   // [1, 2, 3, 4]

> join()和toString()都是将数组转化为字符串，区别在于join()可以指定分隔符

indexOf()	返回某个指定元素在数组中首次出现的位置
    
    let arr =arr1.indexOf(4)
    console.log(arr)	// 3

slice()		截取指定位置的数组，返回截取的数组
    	
    let arr = arr1.slice(2)
    console.log(arr)	// [3, 4, 5]
    console.log(arr1)   // [1, 2, 3, 4, 5]

splice()	向数组中添加或删除/替换数组中的元素，返回被删除/替换的元素
    
    **添加**
    let arr = arr1.splice(5,0,55)  
    console.log(arr)	// []
    console.log(arr1)	// [1, 2, 3, 4, 5, 55]
    **删除*	
    let arr = arr1.splice(2) 
    console.log(arr)	// [3, 4, 5]
    console.log(arr1)   // [1, 2]
    **替换*
    let arr = arr1.splice(1,2,55)  
    console.log(arr)	// [2, 3]
    console.log(arr1)	// [1, 55, 4, 5]

unshift()	在数组的首位新增一个或多个数据，返回新数组的长度
    	
    let arr = arr1.unshift(-1,0)
    console.log(arr)	// 7
    console.log(arr1)   // [-1, 0, 1, 2, 3, 4, 5]

shift()		在数组的首位删除一个或多个数据，返回删除的数据
    	
    let arr = arr1.shift()
    console.log(arr)	// 1
    console.log(arr1)   // [2, 3, 4, 5]

push()		在数组的末位新增一个或多个数据，返回新数组的长度
    	
    let arr = arr1.push(...arr2)
    console.log(arr)	// 10
    console.log(arr1)   // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    console.log(arr2)	// [6, 7, 8, 9, 10]

pop()		删除数组的末位，返回删除的数据
    	
    let arr = arr1.pop()
    console.log(arr)	// 5
    console.log(arr1)   // [1, 2, 3, 4]

sort()		对数组内的数据排序，返回排序后的新数组/*默认为升序*/
    let arr1 = [4,1,3,2,5];	
    let arr = arr1.pop()
    console.log(arr)	// [1, 2, 3, 4, 5]
    console.log(arr1)   // [1, 2, 3, 4, 5]

reverse()		将数组的数据反转，返回反转后的数组
    	
    let arr = arr1.reverse()
    console.log(arr)	// [5, 4, 3, 2, 1]
    console.log(arr1)   // [5, 4, 3, 2, 1]

> for循环

for (let i = 0; i < arr1.length; i++) { 
      console.log(arr1[i])
    }

![在这里插入图片描述][20210128140439759.png]

let arr = [{ id:1,name : "小白"},{ id:2,name : "大白"},{ id:3,name : "大白兔"}]

> forEach()

arr.forEach((item,index,array)=>{ 
        console.log(item,index)
    })

![在这里插入图片描述][20210128141249107.png]

> map()

let nameList = arr.map((item,index)=>{ 
    	return item.name
    })
    console.log(nameList)

arr.map((item,index)=>item.name)

![在这里插入图片描述][20210129143943308.png]

> for in遍历（数组，对象）

for (let index in arr) { 
    	console.log('index',index);
    	console.log('name',arr[index].name);
    }

![在这里插入图片描述][20210129151744945.png]

![在这里插入图片描述][20210129152400559.png]  
![在这里插入图片描述][20210304101746131.png]

> for of遍历

for (let list of arr) { 
    	console.log('list',list);
    	console.log('name',list.name);
    }

![在这里插入图片描述][20210129145009772.png]

> **for in总是得到对象的key或数组,字符串的下标,而for of是直接得到值且不能对象用**

> filter遍历

let arr = [17, 26, 33, 41, 57]
    let filterArr = arr.filter(item => item > 20) 
    console.log(filterArr)

![在这里插入图片描述][20210129145725151.png]

let arr = [{ id:1,name : "小白"},{ id:2,name : "大白"},{ id:3,name : "大白兔"}]
    let filterArr = arr.filter(item => item.id > 1)
    console.log(filterArr )

![在这里插入图片描述][20210129150000734.png]

<table> 
 <thead> 
  <tr> 
   <th>ES6新增数组方法</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

1.Array.from()

> 用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

let arrayLike = { 
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    let arr = Array.from(arrayLike);

![在这里插入图片描述][20210129153704829.png]  
2.Array.of()

> 用于将一组值，转换为数组

let arr = Array.of(10,22,36,47,51);

![在这里插入图片描述][20210129154341203.png]  
3. find()

> 用于找出第一个符合条件的数组成员

let findName = arr.find((item) => (item.name == '大白'))
    console.log(findName)

![在这里插入图片描述][2021012915042083.png]  
4.includes()

> 返回一个布尔值，表示某个数组是否包含给定的值

let arr = [1,2,3,4,5,6]
    arr.includes(3)	//true

5.fill()

> 用于给定值，填充一个数组

let num = [1,2,3,4,5,6]
    let fillNum = num.fill(60)
    let newArr = new Array(6).fill(20)
    console.log(fillNum)
    console.log(newArr)

![在这里插入图片描述][20210129155441647.png]  
6.数组实例的keys()，values() 和 entries()

> keys()是对键名的遍历  
> values()是对键值的遍历  
> entries()是对键值对的遍历

for (let keysof arr.keys()) { 
      console.log('keys',keys);
    }
    for(let values of arr.values()) { 
      console.log('values',values)
    }
    for(let entries of arr.entries()) { 
      console.log('entries',entries)
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]  
除此之外，数组去重也是很常用的，以下为我经常用到的去重方法。

let arr= [1,2,3,4,5,1,2,3]
    
    Array.from(new Set(arr))		// [1, 2, 3, 4, 5]
    
    [...new Set(arr)]		// [1, 2, 3, 4, 5]

以上两种只适用于数组数值去重，而数组对象去重需要进一步处理

![在这里插入图片描述][20210517111437628.png]  
根据键名去重

let map = new Map();
    for (let item of demoArr) { 
        if (!map.has(item.id)) { 
            map.set(item.id, item);
        }
    }
    console.log([...map.values()])

![在这里插入图片描述][2021051711244113.png]

本篇博客仅记录总结平时常用的数组方法，若有错误之处请指出。