js数组方法总结

js数组方法总结

前沿

​ 最近有点时间，总结一下js数组的基础用法，加强一下记忆，上学时学这些基础的时候总觉得啥都不能做，学这干啥，还不如HTML来的快，敲代码的乐趣不就是能展示出来么？直到工作以后才能明白基础到底有多么重要。这可能也就为什么我成为前端的原因吧，太废了，废话不多说，开始总结。。。

数组是什么？

示例：

let arr = [1, 2, 3, 4];
let List = [
    {
        id:1
    },
    {
        id:2
    }
]

1.数组的方法

join方法

​ 按照指定的分隔符，将数组分割成字符串；返回分隔后的字符串。

示例：

let arr = [1,2,3,4]
let data = arr.join('/')
console.log(data) // 1/2/3/4  

pop方法

​ 从数组中删除最后一个元素；返回被删除的元素。

示例：

let arr = [1,2,3,4]
let data = arr.pop()
console.log(data) // 4

push方法

​ 向数组的末尾添加一个或更多元素;返回push完成后数组的长度。

示例：

let arr = [1]
let data = arr.push(2,3,4)
console.log(data,arr) // 4  [1, 2, 3, 4]

shift方法

​ 删除数组的第一个元素;返回被删除的元素。

示例：

let arr = [1,2,3,4]
let data = arr.shift()
console.log(data,arr) // 1  [2, 3, 4]

pop方法

​ 删除数组的最后一个元素;返回被删除的元素。

示例：

let arr = [1,2,3,4]
let data = arr.pop()
console.log(data,arr) // 4  [1,2, 3]

unshift方法

​ 向数组开头添加新元素;返回新数组的长度。

示例：

let arr = [1,2,3,4]
let data = arr.unshift(0)
console.log(data,arr) // 5  [0，1,2,3，4]

slice方法

​ 截取数组，可接受俩个参数 slice（‘开始参数’,‘结束参数’），结束参数可省略；返回截取后的新数组。

示例：

let arr = [1,2,3,4,5,6,7]
let data = arr.slice(2)
let data2 = arr.slice(2,4)
console.log(data,data2,arr) // [3,4,5,6,7]  [3,4] [1,2,3,4,5,6,7]

splice方法

​ 向数组添加新项，拥有三个或更多参数 第一个参数定义了应添加新元素的位置。第二个参数定义应删除多少元素。其余参数定义要添加的新元素。返回一个包含已删除项的数组

示例：

let arr = [1,2,3,4]
let data = arr.splice(0,2)
arr.splice(2,2,5,6)
console.log(data,arr) // [1,2] [ 3,4,5,6]

concat方法

​ 合并数组，返回新合并后的数组

示例：

sort方法

​ 对数组进行排序，正序或倒序，改变原数组；

示例：

let arr = [7,3,9,5,4,1,2];
let data = arr.sort((a,b)=>{
	return a - b
})
console.log(data,arr) [ 1,2,3,4,5,7,9]  [ 1,2,3,4,5,7,9]

let data2 = arr.sort((a,b)=>{
	return b - a
})
console.log(data2,arr) [9,7,5,4,3,2,1]  [9,7,5,4,3,2,1]
 

severse方法

​ 颠倒数组，返回新数组，不改变原数组；

示例：

let arr = [1,2,3,4]
let data = arr.reverse()
console.log(data, arr) // [4, 3, 2, 1]  [4, 3, 2, 1] 

2.数组更上一层楼

forEach

遍历数组

const arr = [1, 2, 3, 4, 5] 
arr.forEach((item, index) => 
{   
	console.log(item, index) 
})

1 0 
2 1 
3 2 
4 3 
5 4 

。

map方法

返回处理过的新数组

const arr = [1, 2, 3, 4, 5]
const mapArr = arr.map((num, index, arr) => 2 * num)
console.log(mapArr)
[ 2, 4, 6, 8, 10 ]

filter方法

返回过滤后的新数组

const arr = [1, 2, 3, 4, 5]
const filterArr = arr.filter((num, index, arr) => num > 3)
console.log(filterArr)
[ 4, 5 ]

some方法

只要有一个为true，就返回true，一个都true都没有，就返回false

const arr = [1, 2, 3, 4, 5]
const someArr = arr.some((num, index, arr) => num == 3) console.log(someArr) true

every方法

所有都为true才返回true

const arr = [1, 2, 3, 4, 5]
const everyArr = arr.every((num, index, arr) => num == 3) console.log(everyArr) false

find 和 findIndex方法

find：找到返回被找元素，找不到返回undefined

findIndex：找到返回被找元素索引，找不到返回-1

  const arr = [
    {
      id:0,
      value:'aaa'
    }
    {
      id:1
      value:'bbb'
    }
    {
      id:2
      value:'ccc'
    }
  ]

const findArr = arr.find(({ id }) => id === 1) 
const findIndexArr = findArr.findIndex(({ id }) => id === 2) 
console.log(findArr) // { id: 1, value: 'bbb' } 
console.log(findIndexArr) // 2