const listA = [{id:'1',name:'测试A'},{id:'2',name:'测试B'}];
const listB = [{id:'1',name:'测试A'},{id:'2',name:'测试B'},{id:'3',name:'测试C'},{id:'4',name:'测试B'}];
//数组找不同
const result = listA.some(itemA = >listB.some(itemB=>itemA.id!==itemB.id));
// 数组替换
const obj = {id:'4',name:'测试B'};
list = listA.map(item=>item.name==obj.name?obj:item);
// reduce数组去重
const arr = [1, 2, 3, 4, 5, 1, 1, 5, {}, {}, null, null, NaN, NaN]
const arr2 = arr.reduce((init, item) => {
init.includes(item) ? null : init.push(item)
return init;
}, [])
// reduce数组去重
practice = () => {
let reg = [1,1,2,2,22,4,4,6,6,8]
return reg.reduce((a, b) => {
return a.includes(b)?a:a.concat(b)
//return a.includes(b)?a:[...a,b]
}, [])
}
// console.log(practice)[1, 2, 22, 4, 6, 8]
// reduce数组求和
let arr = [1, 2, 3, 4, 5, 6]
let res = arr.reduce((total, currentValue) => {
return total + currentValue
}, 0)
console.log(res);//21
// 求大于1的集合
const sum=arr.reduce((prev,item)=>item>1?prev+item:prev,0);
// 合并二维数组
let arr = [[1, 2], [2, 3], [4, 5], [6, 7]]
let res = arr.reduce((a, b) => {
return a.concat(b)
}, [])
console.log(res)//[1,2,2,3,4,5,6,7];
// 数组合并
let a =[1,2,3];let b =[4,5,6];
1,concat
js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果。
var c = a.concat(b);//c=[1,2,3,4,5,6];
这里有一个问题,concat方法连接a、b两个数组后,a、b两个数组的数据不变,同时会返回一个新的数组。
这样当我们需要进行多次的数组 合并时,会造成很大的内存浪费,所以这个方法肯定不是最好的。
2,for循环
大概的思路是:遍历其中一个数组,把该数组中的所有元素依次添加到另外一个数组中。直接上代码:
for(var i in b){ a.push(b[i]);}
这样的写法可以解决第一种方案中对内存的浪费,但是会有另一个问题:丑!这么说不是没有道理,如果能只用一行代码就搞定,岂不快哉~
3、apply
函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我们可以利用这点,直接上代码:
a.push.apply(a,b);
调用a.push这个函数实例的apply方法,同时把,b当作参数传入,这样a.push这个方法就会遍历b数组的所有元素,达到合并的效果。
这里可能有点绕,我们可以把b看成[4,5,6],变成这样:
a.push.apply(a,[4,5,6]);然后上面的操作就等同于:a.push(4,5,6);
tips:有时候我们不希望原数组(a、b)改变,这时就只能使用concat了
## 会改变原数组
1.arr.push() 从后面添加元素,返回值为添加完后的数组的长度 (尾增)
let arr = [1,2,3,4,5]
console.log(arr.push(5)) // 6
console.log(arr) // [1,2,3,4,5,5]
2.arr.pop() 从后面删除元素,只能是一个,返回值是删除的元素 (尾删)
let arr = [1,2,3,4,5]
console.log(arr.pop()) // 5
console.log(arr) //[1,2,3,4]
3.arr.shift() 从前面删除元素,只能删除一个 返回值是删除的元素 空即为undefined (头删)
let arr = [1,2,3,4,5]
console.log(arr.shift()) // 1
console.log(arr) // [2,3,4,5]
4.arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度 (头增)
let arr = [1,2,3,4,5]
console.log(arr.unshift(2)) // 6
console.log(arr) //[2,1,2,3,4,5]
5.arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素 (增删)
参数: i 索引值 n 个数
let arr = [1,2,3,4,5]
console.log(arr.splice(2,2)) //[3,4] 从下标2开始删, 删2个
console.log(arr) // [1,2,5]
6.reverse:颠倒数组顺序 (倒序)
let arr = [1,2,3,4,5]
console.log(arr.reverse()) //[5,4,3,2,1]
7.sort:对数组排序
默认情况下根据字符编码进行排序
var arr = [1,3,6,2,10]
arr.sort();//[1, 10, 2, 3, 6]
sort排序允许接受一个参数(函数),这个函数接受2个形参a,b,并且通过冒泡的方式比较。
arr.sort = (function(a,b){
return (a -b)}) //[1,2,3,6,10] 升序排列 ~或者~ return(b-a) // [10,6,3,2,1] 降序排列
## 不改变原数组
1. arr.concat() 连接两个数组 返回值为连接后的新数组 (合并)
let arr = [1,2,3,4,5]
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]
2.str.split() 将字符串转化为数组 // arr.join()将数组转为字符串
let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]
let arr = [1,2,3,4,5]
console.log(arr.join('')) // 12345
3.arr.slice(start,end) 从某个已有的数组返回选定的元素,从start位开始返回到end(包括start不包括end)如果是负数,表示从数组尾部进行计算(同样:包括start不包括end)
let arr = [1,2,3,4,5,6,7]
console.log(arr.slice(2,5)) // [3,4,5] 返回修剪下来的数组 不改变原数组
(slice和splice的区别: splice会改变原数组, 而slice不会改变原数组)
## 下面是ES6 新增的数组方法, 同样不会改变原数组
4.forEach() 遍历数组,无返回值,不改变原数组,仅仅只是遍历、常用于注册组件、指令等等。
5.map() 用于遍历数组,返回一个新的数组,不改变原数组的值(多用于计算)
6.filter 过滤某个条件的数组,不改变原来的数组的值
7.reduce() 数组的前后两项进行某种计算。然后返回其值,并继续计算。不改变原数组,返回计算的最终结果
8.some() 遍历数组每一项,只要其中一项有,就返回 true,则停止遍历,结果返回 true。没有的话, 放回 false 不改变原数组
9.every() 遍历每一项,如果其中每一项都返回 true 时,最终返回 true,有一项不为true 就会返回false
## 另外数组的更新变异方法有:
// vue将被侦听的数组的变更方法进行了包裹, 所以它们也将会触发视图更新, 这些被包裹的方法:
push() 数组的尾部追加元素 返回数组的新长度
pop() 数组的尾部删除 返回删除元素
shift() 数组的头部删除 返回删除元素
unshift() 数组的头部增加 返回数组的长度
splice() 数组的添加, 删除
sort() 数组的排序
reverse() 数组的倒序,反转
问: concat/map/filter/slice是不是数组的更新变异方法? 不是
问: Object.definePropety的缺陷? vue3.0 采用解决es-6 的proxy
1: 例如: vm.arr[0] = 100
发现根据数组下标更改元素, 数据改变了, 但是视图不变
解决办法: vm.arr.splice(0,1,100)||Vue.set(vm.arr,0,100) 这个是Vue的全局api方法
2: 当修改数组长度的时候
vm.arr.length = 2 数据改变, 视图不变
解决方案: vm.arr.splice(2)
3: 动态给对象添加新的属性的时候, 不会渲染,
vue.user.age = 18 数据改变了, 但是视图不变 构不成响应式数据, 不能对age增加get 与set
Vue.set(vm.user,'age', 18)
js数组操作篇
最新推荐文章于 2023-12-25 23:35:11 发布