数组常用的处理方法 map,forEach,filter, every,some, set, concat, find 等

一、Es5

1.Arr.map()

此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,不改变原数组

eg:
	let arr = [1, 2, 3, 4, 5]
	let newArr = arr.map(x => {
		return x*2 // 将数组的每一项乘以2
	})
	  console.log(newArr) // [2, 4, 6, 8, 10] 返回新数组

2.Arr.forEach()
此方法是将数组中的每个元素执行提供的函数,没有返回值,原数组会改变

eg:
	let arr = [1, 2, 3, 4, 5]
	arr.forEach(x => { x*2 })
	console.log(arr) // [1, 2, 3, 4, 5]  数组改变,注意和map区分

3.Arr.filter()
此方法是将所有元素通过传入的函数进行判断,将满足条件的元素作为一个新的数组返回

eg:
	let arr = [1, 2, 3, 4, 5]
	let newArr = arr.filter(value => {
		return value >= 3 // 判断元素是否大于等于3
	} )
	console.log(newArr) // [3, 4, 5] 返回满足判断条件的所有值

4.Arr.every()
此方法是将所有元素通过传入的函数进行判断,返回一个布尔值,如果所有元素都满足判断条件,
则返回true,有一个不满足就返回false.

eg:
let arr = [1, 2, 3, 4, 5]
arr.every( value => value < 4 ) // 判断结果返回false
arr.every( value => value < 6 ) // 判断结果返回true

5.Arr.some()
此方法是将所有元素通过传入的函数进行判断,返回一个布尔值,只要有一个元素满足判断条件,
就返回true,都不满足就返回才false.

eg:
let arr = [1, 2, 3, 4, 5]
arr.every( value => value < 4 ) // 判断结果返回true
arr.every( value => value <0 ) // 判断结果返回false

二、Es6

1.new Set(Arr)
数组里面对象去重,数组去重

let arr = [12,43,23,43,68,12]
let newArr = new Set(arr) // {12, 43, 23, 68} 输出结果是对象
let newArr1 = [...new Set(arr)] // [12, 43, 23, 68] 将对象展开放进数组里面,输出结果是个数组

数组里面对象去重

eg:
	let arr = [
      {key: '01',value: '西施'}, 
      {key: '02',value: '王昭君'}, 
      {key: '03',value: '杨玉环'}, 
      {key: '04',value: '貂蝉'}, 
      {key: '01',value: '西施'}
    ]

// 方法一:利用对象访问属性的方法,判断对象中是否存在key
let newArr = []
let obj = {}
arr.map((item,i)=>{
  /* 通过key来过滤 */
  if(!obj[arr[i].key]){ // 当obj对象没有obj[arr[i].key] 这一项时执行
    newArr.push(arr[i]) // 每循环一次,将当前项添加到新的数组
    obj[arr[i].key] = true // 取每一项的key的值作为键,添加到obj,并赋值为true
  }
})
console.log('obj:',obj) // {01: true, 02: true, 03: true, 04: true}
console.log('newArr',newArr) //去重成功 newArr(4)[{…}, {…}, {…}, {…}] 

//其他方法
一:利用对象访问属性的方法,判断对象中是否存在key

var result = [];
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
      if (!obj[arr[i].key]) {
        result.push(arr[i]);
        obj[arr[i].key] = true;
      }
    }
    console.log(result); // [{key: "01", value: "西施"},{key: "02", value: "王昭君"},{key: "03", value: "杨玉环"},{key: "04", value: "貂蝉"}]

二:利用两层for循环和布尔值的方法进行去重

   var result = [];
    for (var i = 0; i < arr.length; i++) {
      var flag = true;
      for (var j = 0; j < result.length; j++) {
        if (arr[i].key === result[j].key) {
          flag = false;
        }
      }
      if (flag) {
        result.push(arr[i]);
      }
    }
    console.log(result); // [{key: "01", value: "西施"},{key: "02", value: "王昭君"},{key: "03", value: "杨玉环"},{key: "04", value: "貂蝉"}]

三:利用两层for循环和splice的方法进行去重,此方法会更改数组的原始数据

for (var i = 0; i < arr.length; i++) {
      for (var j = i + 1; j < arr.length; j++) {
        if (arr[i].key === arr[j].key) {
          arr.splice(j, 1);
          j = j - 1;
        }
      }
    }
    console.log(arr); // [{key: "01", value: "西施"},{key: "02", value: "王昭君"},{key: "03", value: "杨玉环"},{key: "04", value: "貂蝉"}]

四:利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数,第二个参数是item的初始值(ie9以下不支持此方法)

   var obj = {};
    arr = arr.reduce(function (item, next) {
      obj[next.key] ? '' : obj[next.key] = true && item.push(next);
      return item;
    }, []);
    console.log(arr); // [{key: "01", value: "西施"},{key: "02", value: "王昭君"},{key: "03", value: "杨玉环"},{key: "04", value: "貂蝉"}]

2.Arr.concat() 数组拼接

 concat()方法
let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr = arr1.concat(arr2) // [1, 2, 3, 4, 5]
... 方法
let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr = [...arr1, ...arr2] // [1, 2, 3, 4, 5]

3.Arr. findIndex()
找第一个符合条件的元素的下标,找到就返回元素的位置,找不到就返回-1。

let arr = [1, 2, 3,4]
let newArr = arr.findIndex(item => item>4) // 没有大于4的元素,输出 -1
let newArr = arr.findIndex(item => item>2) // 第一大于2的元素是3,输出下标 2

4.Arr.find()
find()函数用来查找目标元素,给定条件,返回数组中第一个满足该条件的值,之后的值不再进行检测,当没有找到满足该条件的值时,返回undefined

eg1
	let arr = [1, 2, 3,4] 
	let newArr = arr.find(item => item>4) // 没有大于4的元素,输出 undefined
	let newArr = arr.find(item => item>2) // 第一大于2的元素是3,输出该元素 3
	find(),findIndex((item, index, arr) => {}) 参数拓展
	item:每次循环的当前元素。
	index:每次循环的当前元素的索引。
	arr:被查找的数组。

eg2 
	let arr = [
	    {
	      name: '小明',
	      sex: '男',
	      age: 23
	    },
	    {
	      name: '小红',
	      sex: '女',
	      age: 18
	    },
	    {
	      name: '小兰',
	      sex: '女',
	      age: 21
	    },
	    {
	      name: '小黑',
	      sex: '男',
	      age: 23
	    }
	  ];
	 
	const findResult = arr.find((value, index, arr) => {
	    console.log(value);
	    return (value.age === 23);
	});
	 
	console.log(findResult); // {name: "小明", sex: "男", age: 23}

三、其它

1.Arr.push()
此方法是在数组的后面添加一个或多个元素,数组长度改变

let arr = [1, 2, 3, 4, 5]
arr.push(7,8) // [1, 2, 3, 4, 5, 7, 8]

2.Arr.pop()
此方法是在数组的后面删除一个或多个元素,数组长度改变

let arr = [1, 2, 3, 4, 5]
arr.pop() // [1, 2, 3, 4]

3.Arr.unshift()
此方法是在数组的前面添加一个或多个元素,数组长度改变

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

4.Arr.shift()
此方法是在数组的前面删除一个或多个元素,数组长度改变

let arr = [1, 2, 3, 4, 5]
arr.shift() // [2, 3, 4, 5]

5.Arr.reduce()
此方法是所有元素调用传入的函数,返回值为最后函数处理的结果,传入的值必须是函数类型

let arr = [1, 2, 3, 4, 5]
let sum1 = arr.reduce((a, b) => a + b) // sum1 = 15  相当于累加的效果
let sum2 = arr.reduce((a, b) => a*b) // sum2 = 120  相当于累乘的效果
// 与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作的

6.Arr.isArray()
判断是不是数组,返回的是布尔值

7.Arr.splice(开始位置, 删除的个数,要替换成的元素)
数组增删改

let arr = [1, 2, 3, 4, 5];

// 注释:在数组的2位置,删除0个元素,同时新增一个’hahh’元素

let arr1 = arr.splice(2, 0, 'haha') // [1, 2, 'haha', 3, 4, 5] 

// 注释:从数组的2位置起,删除三个元素

let arr2 = arr.splice(2, 3) //[1, 2] 

// 注释:在数组的2位置,删除一个元素,同时新增一个’haha’元素

let arr1 = arr.splice(2, 1, 'haha') // [1, 2, 'haha', 4, 5]

8.substring()
字符串截取、拼接

let phone="20200909111501" 
phone.substring(0,4)+"-"+phone.substring(4,6)+"-"+phone.substring(6,8)
+" "+phone.substring(8,10)+":"+phone.substring(10,12)+":"+phone.substring(12,14)

// 打印输出结果 2020-09-09 11:15:01

9.String.split() 字符串转数组
// 注释:split方法用 | 将字符串切割成数组

let string = 'jpg|bmp|gif|ico|png'
console.log(string.split('|')) // ["jpg", "bmp", "gif", "ico", "png"]

10.Arr.toString() Arr.join() 数组转字符串
注意:字符串和数组的索引都是从0开始

let arr = [1, 2, 3, 4, 5]
// 注释:直接通过toString()方法将数组拼成字符串
let str = arr.toString() // 12345

// 注释:不传参数,类似于toString()方法
let str1 = arr.join('') // 12345

// 注释:用逗号将数组拼成字符串(默认用逗号拼接)
let str2 = arr.join(',') // 1,2,3,4,5

// 注释:用#号将数组拼成字符串
let str3 = arr.join('#') // 1#2#3#4#5

11.Arr.replace()
字符串替换

let arr = '280元元'
console.log(arr.replace(/元/, "分"))  // 替换首个
console.log(arr.replace(/元/g, "分")) // 全部替换

控制台输出:280分元, 280分分

12. indexOf()

寻找是否有某个值。找到返回0, 找不到-1
console.log(['1','2','3','4'].indexOf('0'))
console.log(['1','2','3','4'].indexOf('1'))

控制台输出:-1, 0

13.jQuery 的 each() 方法(遍历数组和对象)
能遍历数组,也能遍历对象

function aa () {
    // var arr1 = {one:[1, 4, 3], two:[4, 6, 6], there:[7, 20, 9]}
    var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
    $.each(arr1,(index,item)=>{
      console.log('index:',index)
      console.log('item:',item)
    })
  }
  aa()

*遍历数组*
index: 0;
	item:(3) [1, 4, 3]
index:1;
  	item:(3) [4, 6, 6]  	
index:2;
	item:(3) [7, 20, 9]	

*遍历对象*
index: one;
	item:(3) [1, 4, 3]
index:two;
  	item:(3) [4, 6, 6]  	
index:there;
	item:(3) [7, 20, 9]	
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值