JavaScript对象数组常用方法总结

pop

数组尾部删除

1
2
3
const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉']
fruits.pop()
console.log(fruits);

image-20230729155806391

push

数组尾部添加

1
2
3
const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉']
fruits.push('榴莲')
console.log(fruits);

image-20230729155859991

unshift

数组头部添加

1
2
3
const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉']
 fruits.unshift('樱桃')
console.log(fruits);

image-20230729160000141

shift

数组头部删除

1
2
3
const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉']
 fruits.shift()
console.log(fruits);

image-20230729160036406

forEach

语法:forEach(item,index)

参数一: 当前循环的元素

参数二: 当前循环的索引

forEach() 方法对数组的每个元素执行一次提供的函数(回调函数)

  1. 函数没有返回值，即 underfined；
  2. 不对原数组产生影响。
1
2
3
4
5
const str = ['rongxing', 'aniu', 'zhangsan', 'lisi']
str.forEach((item, index) => {
  console.log(item); //rongxing,aniu,zhangsan,lisi
  console.log(index); //0,1,2,3
})

sort

排序

正序排列

1
2
3
4
5
const num = [15, 51, 53, 45, 24, 13]
const sortNum = num.sort((a, b) => {
  return a - b
})
console.log(sortNum);
1
2
3
4
const sortNum = num.sort((a, b) => {
  return a - b
})
console.log(sortNum);

splice

删除数组任意位置元素

splice(删除元素对应位置的索引,删除的个数[不填默认从头部开始删除],新增的元素)

返回值:删除的元素数组

1
2
3
const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉']
 fruits.splice(2,1)
console.log(fruits);//['西瓜','哈密瓜','芒果','香蕉']

map

map(回调函数(item,index) { })

  1. map 的返回值是一个新数组
  2. 新数组中的元素, 由回调函数的返回值决定, 返回的元素就会加入到新数组中

image-20230729180648312

1
2
3
4
5
6
7
const arr = ['red', 'blue', 'green', 'purple']
     const arr = ['red', 'blue', 'green', 'purple']
    let result = arr.map((item)=> {
     return item + '颜色'
    })
    console.log(result);//['red颜色', 'blue颜色', 'green颜色', 'purple颜色']

join

join() 方法将数组中的所有元素连接成一个字符串

join(‘ ’)分隔符手动指定,若不需要则留空

1.把数组转换为字符串

2.默认以 , 作为分隔符拼接成字符串

filter

  1. 返回一个新数组, 里面存储着所有符合条件的元素

  2. 特点同 map / forEach, 都会遍历数组中每一个元素

  3. 传入的回调函数中, 返回值(布尔值)表示当前遍历的元素是否符合条件

    其实这个方法就是一个过滤方法，前面那个 every 方法，只判断不过滤，filter 会过滤掉一些不符合条件的，并返回新数组。

    1. 返回一个满足过滤条件的新数组；
    2. 不会改变原数组。

    image-20230729180350356

1
2
3
4
5
const arr = [10, 20, 30, 40]
    const newArr = arr.filter(function(item) {
     return item > 20
   })
   console.log(newArr)//[30,40]

every

检测元素是否满足条件, 返回布尔型.所有数组元素都满足条件则返回 true, 只要有一个不满足条件就返回 false

arr.every(callback) 会对每一个元素都执行 callback 方法，直到 callback 返回 false。有时候 every 方法会和 forEach 方法相比较，因为 forEach 无法停止，而 every 方法返回 flase 时可以中途停止。

  1. 若全部通过测试，函数返回值 true，中途退出，返回 false；
  2. 不对原数组产生影响。

image-20230729180950158

1
2
3
4
5
6
7
     const arr = [10, 20, 30]

const result = arr.every((item, index) => {
//只要找到不满足条件的元素, 立马就会停止
  return item < 5
 })
 console.log(result) //false

some

只要有 1 个数组元素满足条件则返回 true, 都不满足则返回 false

image-20230729181026686

1
2
3
4
5
6
   const arr = [10, 20, 30]
const result = arr.some((item, index) => {
  // 只要找到满足条件的元素了, 立马就会停止
  return item > 15
})
console.log(result) //true

find

image-20230729181208329

find 查找满足条件的元素, 返回第一个满足条件的元素, 找不到则返回undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const goods = [
  {
    name: '小米',
    price: 1999
  },
  {
    name: '华为',
    price: 4999
  },
  {
    name: '苹果',
    price: 9999
  },
  {
    name: '苹果',
    price: 8888
  },
  {
    name: '黄瓜',
    price: 8888
  },
  {
    name: '雪梨',
    price: 8888
  }
]

    const result = goods.find(item => item.name === '苹果')

console.log(result) //{name: '苹果', price: 9999}

findIndex

image-20230729181134551

findIndex 查找满足条件的元素的索引号, 找不到则返回-1

该方法用法和 find 完全一样, 区别是 find 返回元素, 而 findIndex 返回索引

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
   const goods = [
  {
    name: '小米',
    price: 1999
  },
  {
    name: '华为',
    price: 4999
  },
  {
    name: '苹果',
    price: 9999
  },
  {
    name: '苹果',
    price: 8888
  },
  {
    name: '黄瓜',
    price: 8888
  },
  {
    name: '雪梨',
    price: 8888
  }
] 
const result2 = goods.findIndex((item) => item.name === '黄瓜')
console.log(result2)//4

concat

数组合并

concat 方法将创建一个新数组，然后将调用它的对象(this 指向的对象，即原数组)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组。concat 方法并不修改原数组和参数数组，而且对非数组对象同样有效果。

  1. 返回拼接的新数组；
  2. 不修改原数组和参数数组；
  3. 参数可以是非数组。
1
2
3
4
arr1 = [10,2,30,54,12]
arr2 = [14,26,30,57,82]
arr3 = arr2.concat(arr1)
console.log(arr3); //[14,26,30,57,82,10,2,30,54,12]

fill

填充数组

image-20230729181059388

　fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。返回修改后的原始数组，不创建新数组。

　　使用语法：fill( value ,start ,end)，其中 ：

　　　　value 用来填充数组元素的值，必填。

　　　　start 可选起始索引，默认值为0。

　　　　end 可选终止索引，默认值为 this.length。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 当传入单个参数的时候，该方法会用该参数的值填充整个数组
    var arr1 = new Array(5)
    console.log(arr1.fill(1)); //[1,1,1,1,1]
    var arr2 = [1, 2, 3, 4]
    console.log(arr2.fill(0)); //[0,0,0,0]

    // 当传入两个参数的时候，第一个参数为填充的元素，第二个为填充元素的起始位置
    var arr3 = [0, 1, 2, 3, 4, 5, 6]
    console.log(arr3.fill(1, 3)); //[0,1,2,1,1,1,1]

    // 当传入三个参数的时候，第一个参数为填充的元素，第二个参数和第三个参数分别指填充元素的起始和终止位置，不修改终止位置元素
    var arr4 = [0, 1, 2, 3, 4, 5]
    console.log(arr4.fill(1, 3, 5)); //[0,1,2,1,1,5]
    
    //如果提供的起始位置或结束位置为负数，则他们会被加上数组的长度来算出最终的位置，例如 起始位置为-1 就相当于array.length-1
    var arr5 = [0, 1, 2, 3, 4, 5]
    console.log(arr5.fill(1, -3));//[0,1,2,1,1,1]
    var arr6 = [0, 1, 2, 3, 4, 5]
    console.log(arr6.fill(1, 3, -2));//[0,1,2,1,4,5]

reverse

数组翻转

这样同样也可以实现数组的倒序排列

1
2
3
const num = [1,2,3,4,5]
const arr = num.reverse()
console.log(arr); //[5, 4, 3, 2, 1]

reduce

数组求和

image-20230729180753609

reduce 是一个合并的过程，从左到右，直到把所有元素合并到一起，并返回最终的结果。它接受两个参数，第一个参数是一个回掉函数，第二个参数是一个初始值，表示处理第一个元素时的前一个值。这个回掉函数接受四个参数，依次是 accumulator（上次处理的结果），currentValue（当前元素的值），index（当前元素索引），array（调用 reduce 的数组）。

1
2
3
4
5
6
7
8
9
10
   const arr = [1, 2, 3, 6]
const sum = arr.reduce((prev, item) => {
      // 回调函数的参数:
      // 1. 上一次的结果, 第一次拿到的是初始值
      // 2. 当前遍历的元素
      // 回调函数的返回值, 作为下一次循环的第一个参数 (结果)
      // console.log(prev, item)
      return prev + item
    }, 0)
    console.log(sum)

Array.from

转换为真数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
    // 转换为真数组
    // 1. 得到伪数组
    const divs = document.querySelectorAll('div')
    console.log(divs)//伪数组

    // 2. 转换为真数组 Array.from() 返回真数组, 不会影响原来的伪数组
    // 传入一个伪数组, 返回一个真数组
    const result = Array.from(divs)
    result.find(item => {
      item.tagName === 'DIV'
    })
    console.log(result); //真数组
  </script>

image-20230729153706442

slice

slice() 方法会浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组。

slice 的参数包括拷贝的初识位置，结束位置（左闭右开），与 splice 有区别。由于不会改变原数组，这个数组可以用于前拷贝，比如经常看别人使用：arr.slice(0)，表示拷贝数组。

  1. 返回浅拷贝后的新数组；
  2. 不会改变原数组。
1
2
3
4
let a1 = [1, 2, 3, 4, 5];
let a2 = a1.slice(1, 3);
a1 //[1, 2, 3, 4, 5]
a2 //[2, 3]

assign

Object.assign(target, sources)

  • target：目标对象，即要将属性复制到的对象。
  • sources：一个或多个源对象，即要从中复制属性的对象。可以传递多个源对象，按顺序依次复制属性到目标对象中。

返回目标对象，也就是复制属性后的目标对象

如果多个源对象具有相同的属性名，后面的属性会覆盖前面的属性。这意味着在复制过程中，如果有冲突的属性名，后面的源对象的属性值会覆盖之前的源对象属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 源对象
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { c: 5, d: 6 };

// 目标对象
const target = {};

// 将属性从源对象复制到目标对象
Object.assign(target, obj1, obj2, obj3);

console.log(target); // 输出：{ a: 1, b: 3, c: 5, d: 6 }

字符串方法

split

字符串拆分成数组

将字符串翻转过来,字符串不支持reverse()方法,只能支持数组的翻转,如果想要实现字符串的翻转则需要使用一些小手段,把字符串拆分成数组

1
2
3
const str = '键盘敲烂 月薪过万'
const result = str.split('').reverse().join('')
console.log(result); //万过薪月 烂敲盘键

trim

去除字符串首尾空格

1
2
3
4
 const str = ' 蓝翔高级技工学校 '
const result = str.trim()
 console.log(result); //蓝翔高级技工学校
 // 一般用于去除注册时用户不小心输入的空格

startsWith

检测是否以某个字符开头, 返回布尔值

startsWith(检测字符, [检测位置])

1
2
3
4
5
6
7
8

console.log(str.startsWith('键')) // true

  console.log(str.startsWith('键盘')) // true

 console.log(str.startsWith('键盘鼠标')) // false

  console.log(str.startsWith('月薪', 4)) // true

endsWith

endsWith(检测字符, [字符串长度])

检测是否以某个字符结尾, 返回布尔值

1
2
3
4
 console.log(str.endsWith('万')) // true
console.log(str.endsWith('过万')) // true
 console.log(str.endsWith('奥利给')) // false
console.log(str.endsWith('过万', 6)) // true

includes

includes(搜索的字符, [检测位置])

includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。

该函数接受两个参数，第二个参数表示开始查找位置，起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引，一个是布尔值，indexOf 方法使用的是 === 来判断，无法判断 NaN 情况，而 includes 可以判断。

  1. 返回 true 或 false；
  2. 不会改变原数组。
1
2
3
4
5
 const str1 = "To be, or not to be, that is the question."
 console.log(str1.includes('not to be'))//true
console.log(str1.includes('not'))//true
console.log(str1.includes('n'))//true
console.log(str1.includes('NOT'))//false

keys

数组的 keys() 方法返回一个数组索引的迭代器。

这个方法会返回一个数组索引的迭代器，迭代器在 ES6 中有特殊的用途。

  1. 函数返回一个迭代器对象；
  2. 不会改变原数组。
1
2
3
4
let user = {
  name: "John",
  age: 30
};
1
Object.keys(user) = ["name", "age"]

values

返回一个包含该对象所有的值的数组。

1
Object.values(user) = ["John", 30]

entries

返回一个包含该对象所有 [key, value] 键值对的数组。

1
Object.entries(user) = [ ["name","John"], ["age",30] ]