数组常用方法整理

目录

1、arr.push ()

2、arr.unshift()

3、arr.pop( )

4、arr.shift( )

5、arr.splice()

6、concat()

7、reverse()

8、join()

9、indexOf()

10、lastIndexOf()

11、sort()

12、Array.isArray(a)

13、Array.from(伪数组名)

14、find()

15、findIndex()

16、some()

17、every()

18、filter()

19、map()

20、forEach()

 21、reduce()


1、arr.push ()

往数组最后的位置追加元素,并返回新数组的长度

 语法: 数组.push(你要添加的数据)
          	直接改变原始数组
          	添加的数据是放在数组的最后一个
      		返回值:添加过后数组的长度
      		
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.push(6)
  
  console.log(arr)  打印结果: [1, 2, 3, 4, 5, 6] //直接改变原始数组
  console.log(res)  打印结果: 6 //添加过后数组的长度

2、arr.unshift()

数组最前面追加,返回新数组的长度

 语法: 数组.unshift(你要添加的数据)
          	直接改变原始数组
          	添加在数组的最前面
          	返回值:改变后数组的长度
          
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.unshift('hello')
  
  console.log(arr)  打印结果: ["hello", 1, 2, 3, 4, 5] //直接改变原始数组
  console.log(res)  打印结果: 6 //改变后数组的长度

3、arr.pop( )

删除数组中最后一个元素,并返回该元素的值

 语法: 数组.pop()
           	直接改变原始数组
           	删除数组中的最后一个
         	返回值: 被删除的那一个数据
         	
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.pop()
  
  console.log(arr)  打印结果: [1, 2, 3, 4] //直接改变原始数组
  console.log(res)  打印结果: 5 //被删除的那一个数据

4、arr.shift( )

删除数组中第一个元素,并返回该元素的值

 语法: 数组.shift()
          	直接改变原始数组
          	删除数组中的第 0 个数据
          	返回值: 被删除的那一条数据
          
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.shift()
  
  console.log(arr)  打印结果: [2, 3, 4, 5] //直接改变原始数组
  console.log(res)  打印结果: 1 //被删除的那一条数据

5、arr.splice()

如果省略截取个数默认从指定的起始位置截取直到最后,

 语法1: 数组.splice(开始的索引, 截取多少个)
          	直接改变原始数组
          	返回值: 以数组的形式返回截取出来的内容
          			(不管截取多少个内容,都是以数组的形式返回)
          
  let arr = ['hello', 'world', '你好', '世界']
  let res = arr.splice(1, 1)
  
  console.log(arr)  打印结果: ["hello", "你好", "世界"] //直接改变原始数组
  console.log(res)  打印结果: ["world"] //截取出来的内容
  
  
 语法2: 数组.splice(只传一个参数)
 			当第二个参数不传递的时候,就是从哪个索引开始截取的到数组的末尾
          	直接改变原始数组
          	返回值: 以数组的形式返回截取出来的内容
          			(不管截取多少个内容,都是以数组的形式返回)
          
  let arr = ['hello', 'world', '你好', '世界']
  let res = arr.splice(2)
  
  console.log(arr)  打印结果: ['hello', 'world'] //直接改变原始数组
  console.log(res)  打印结果: ['你好', '世界'] //截取出来的内容
    
    
 语法3: 数组.splice(开始的索引, 截取多少个,值1,值2)
 			从第三个参数开始,都是替换掉截取的位置
          	直接改变原始数组
          	返回值: 以数组的形式返回截取出来的内容
          			(不管截取多少个内容,都是以数组的形式返回)
  let arr = ['hello', 'world', '你好', '世界']
  let res = arr.splice(2,1,'新值1','新值2')
  
  console.log(arr)  打印结果: ["hello", "world", "新值1", "新值2", "世界"] //直接改变原始数组
  console.log(res)  打印结果: ['你好'] //截取出来的内容
  

6、concat()

拼接多个数组成为新数组

 语法: 数组.concat(你要拼接的内容),理论上可以无限传递参数
          	不改变原始数组
          	返回值: 拼接过后的数组
          
  let arr = ['hello']
  let res = arr.concat(['你', '好'], ['欢', '迎'])
  
  console.log(arr)  打印结果: ['hello'] //不改变原始数组
  console.log(res)  打印结果: ["hello", "你", "好", "欢", "迎"] //拼接过后的数组

7、reverse()

反转数组顺序返回反转后的数组

 语法: 数组.reverse()
          	直接改变原始数组
          	返回值: 反转后的数组
          
  let arr = ["你", "好", "欢", "迎"]
  let res = arr.reverse()
  
  console.log(arr)  打印结果: ["迎", "欢", "好", "你"] //直接改变原始数组
  console.log(res)  打印结果: ["迎", "欢", "好", "你"] //反转后的数组

8、join()

用于把数组的每个元素拼接称为字符串 arr.join('拼接的字符串')

 语法: 数组.join(以什么字符链接) 参数可以不写,不写是以 , 链接
          	不改变原始数组
          	返回值: 就是用指定字符链接好的字符串(注:是字符串)
          
  let arr = [1, 2, 3, 4]
  let res = arr.join('-')
  
  console.log(arr)  打印结果: [1, 2, 3, 4] //不改变原始数组
  console.log(res)  打印结果: 1-2-3-4 //链接好的字符串

9、indexOf()

查找某个数据在数组中首次出现的索引位置,返回索引值。

10、lastIndexOf()

查找某个数据在数组中尾次出现的索引位置,找不到就是-1

11、sort()

用于数组的字符编码排序:

正序:arr.sort(function(a,b){return a-b})

倒序:arr.sort(function(a,b){return b-a})

 语法1: 数组.sort()
 			排序方式是按照一位一位来看的(先排第一个数据的第一个数字,以此类推)
          	直接改变原始数组
          	返回值: 排序好的数组
          
  let arr = [1, 3, 7, 9, 101, 5]
  let res = arr.sort()
  
  console.log(arr)  打印结果: [1, 101, 3, 5, 7, 9] //直接改变原始数组
  console.log(res)  打印结果: [1, 101, 3, 5, 7, 9] //排序好的数组



 语法2: 数组.sort() //常用语法
 			排序方式是按照数字大小来排列
          	直接改变原始数组
          	返回值: 排序好的数组(顺序排列 小-->大)
          
  let arr = [1, 3, 7, 9, 101, 5]
  let res = arr.sort(function (a, b) {
      return a - b
    })
  
  console.log(arr)  打印结果: [1, 3, 5, 7, 9, 101] //直接改变原始数组
  console.log(res)  打印结果: [1, 3, 5, 7, 9, 101] //排序好的数组



 语法3: 数组.sort() //常用语法
 			排序方式是按照数字大小来排列
          	直接改变原始数组
          	返回值: 排序好的数组(顺序排列 大-->小)
          
  let arr = [1, 3, 7, 9, 101, 5]
  let res = arr.sort(function (a, b) {
      return b - a
    })
  
  console.log(arr)  打印结果: [101, 9, 7, 5, 3, 1] //直接改变原始数组
  console.log(res)  打印结果: [101, 9, 7, 5, 3, 1] //排序好的数组

12、Array.isArray(a)

返回布尔值,判断a是不是数组

13、Array.from(伪数组名)

用于把伪数组转换为真数组注意:要想把伪数组转成真数组,必须有length属性

14、find()

用于查找首次满足条件的值,并返回。

它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

let arr = [1, 5, 6, 8, 6, 6]

let re = arr.find(function (item) {

return item > 5

 })

console.log(re)    //6

15、findIndex()

遍历查找首次满足条件的值,并返回索引值,找不到返回-1

let arr = [1, 5, 6, 8, 6, 6]
let re = arr.findIndex(function (item) {
            return item > 5

        })
        console.log(re)  //2

16、some()

用于遍历查找是否有满足条件的值,有1个满足就返回true,否则返回false,

 let arr = [1, 5, 6, 8, 6, 6]
 let re = arr.some(function (item) {
            return item > 5
        })
        console.log(re)    //true

17、every()

用于遍历查找元素满足条件,都满足返回true,没有都满足就返回flase

let arr = [1, 5, 6, 8, 6, 6] 
let re = arr.every(function (item) {
            return item > 5
        })
        console.log(re)  //false

18、filter()

用于遍历筛选满足条件的元素,把所有满足条件的元素放到新数组返回

let arr = [1, 5, 6, 8, 6, 6]
let re = arr.filter(function (item) {
            return item > 5
        })
        console.log(re) //(4) [6, 8, 6, 6]

19、map()

用于遍历数组每个元素执行一遍回调函数,把所有结果放到新数组内返回

 let arr = [1, 5, 6, 8, 6, 6]
        let re = arr.map(function (item) {
            return item * item  //求每个数的平方 放到新数组内返回
        })
        console.log(re) // [1, 25, 36, 64, 36, 36]

20、forEach()

遍历数组中的值

遍历数组中的值,并计算他们的和

let numbers = [1,2,3,4,5];
let sum = 0;
numbers.forEach(number=>sum+=number)
console.log(sum)//15
 

forEach和map的区别在于,forEach没有返回值。 map需要返回值,如果不给return,默认返回undefined

 21、reduce()

对数组中的每个元素执行reducer函数(升序执行),将其结果汇总为单个返回值。

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Array.reduce的使用的几种方法:

方法一:取出数组对象中的所有单个对象值

let obj = [
  {
    name: '赵 弄',
    house: '毕节'
  },
  {
    name: '宋 久',
    house: '青岛'
  },
  {
    name: '张 三',
    house: '德州'
  },
  {
    name: ' 李 四',
    house: '德国'
  },
  {
    name: '胖 子',
    house: '美国'
  }
];

let res = obj.reduce(function (newArr, obj) {
  if (obj.house) {
    newArr.push(obj.name);
  }
  return newArr;
}, [])

// ["赵 弄", "宋 久", "张 三", " 李 四", "胖 子"]
方法二:对数组进行求和

var total = [1, 2, 3].reduce(function (sum, current) {
  return sum + current;
}, 0);
//6
方法三:合并数据到单个数组

var obj = [
  {
    name: '赵 弄',
    house: '毕节'
  },
  {
    name: '宋 久',
    house: '青岛'
  },
  {
    name: '张 三',
    house: '德州'
  },
  {
    name: ' 李 四',
    house: '德国'
  },
  {
    name: '胖 子',
    house: '美国'
  }
];

//现在有一个新的需求为每一位成员新增加一个积分属性
var point ={
    赵弄:500,
    宋久:1200,
    张三:800,
    李四:900,
    胖子:1300
}

//函数变成如下的样子
var newObj = obj.reduce(function (arr, obj) {
  // 移除名字中的空格,用来获取对应的 point
  var key = obj.name.replace(' ', '');
  // 如果obj有points,则加上它,否则设置为0
  if (point[key]) {
    obj.point = point[key];
  } else {
    obj.point = 0;
  }
  // 把obj对象加入到新数组里
  arr.push(obj);
  // 返回这个数组
  return arr;
}, []);
console.log(newObj)
/*0: {name: "赵弄", house: "毕节", point: 500}
1: {name: "宋久", house: "青岛", point: 1200}
2: {name: "张三", house: "德州", point: 800}
3: {name: "李四", house: "德国", point: 900}
4: {name: "胖子", house: "美国", point: 1300}
*/
方法四:合并数据到单个对象

var newObj2 = obj.reduce(function (newobj, obj) {
  // 移除名字中的空格,用来获取对应的 points
  var key = obj.name.replace(' ', '');
  // 如果obj有point,则加上它,否则设置为0
  if (point[key]) {
    obj.point = point[key];
  } else {
    obj.point = 0;
  }
  // 删除 name 属性
  delete obj.name;
  // 把 obj 数据添加到新对象中
  newobj[key] = obj;

  // 返回该对象
  return newobj;
}, {});
/*
赵弄: {house: "毕节", point: 500}
宋久: {house: "青岛", point: 1200}
张三: {house: "德州", point: 800}
李四: {house: "德国", point: 900}
胖子: {house: "美国", point: 1300}
*/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 中,数组变异(Array Mutation)指的是对数组原有元素进行修改、增加或删除操作的方法常用数组变异方法有以下几种: 1. push():向数组末尾添加一个或多个元素,并返回新的长度。 2. pop():删除数组末尾的元素,并返回删除的元素。 3. shift():删除数组第一个元素,并返回删除的元素。 4. unshift():向数组开头添加一个或多个元素,并返回新的长度。 5. splice():从数组中删除元素或向数组中添加元素,返回被删除的元素。 6. sort():对数组进行排序,返回排序后的数组。 7. reverse():颠倒数组中元素的顺序,并返回颠倒后的数组。 除了上述数组变异方法之外,还有一些数组方法不会对原数组进行修改,而是返回一个新的数组常用的这类数组方法有以下几种: 1. concat():将两个或多个数组合并成一个新数组,并返回新的数组。 2. slice():从数组中选取指定的元素,返回新的数组。 3. filter():过滤数组中的元素,返回符合条件的元素组成的新数组。 4. map():对数组中的每个元素进行处理,返回处理后的元素组成的新数组。 5. reduce():对数组中的元素进行累加或累积,返回累加或累积的结果。 6. find():查找数组中符合条件的第一个元素,并返回该元素。 7. findIndex():查找数组中符合条件的第一个元素的索引,并返回该索引。 8. indexOf():查找数组中指定元素的索引,并返回该索引。 9. lastIndexOf():查找数组中指定元素最后出现的索引,并返回该索引。 10. includes():判断数组中是否包含指定元素,返回布尔值。 需要注意的是,数组变异方法会直接修改原数组,而不是返回一个新数组。如果你需要保留原数组,可以先将原数组复制一份,然后对复制的数组进行操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值