简介

因为自己工作不仅是兼顾前端还有其他工作，导致总是遗忘基础知识点。总结一下js常用的方法以及部分优化逻辑。

js方法Array（数组）

forEach() ：对数组的每个元素执行一次给定的函数。全部老老实实循环一遍，没有返回值，也就是在数组上直接修改了。我多用于数组本身添加属性，赋值等...

举子

this.goodsList.forEach(item => {
	item.selected = false;
	item.items.forEach(t => {
            const matchItem = this.calcCart.find((a) => a.id === t.id);
                if (matchItem && matchItem.price != matchItem.original) {
                    t.original = matchItem.price;
                    }
                 t.payDiscount = matchItem.payDiscount;
								})
							});
						})

这段代码用到了forEach()的每一项新增selected属性且赋值。这段代码的本意是为goodsList数组添加一个selected和goodList的items项在另一个数组calcCart根据id找出对应的项，且把项的payDiscount赋给items的payDiscount里面，如果price值跟original不一样的话，就把price赋值给item.original(这个original也是新增的)。其实乍一看是个屎山，但是我也不知道怎么优化了。希望评论区大佬能支援一下。

map() 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。map跟forEach最大的区别为返回值。map是有返回值的，forEach没有返回值。

let a =  this.goodsList.map(item=>{
//计算每项+1
            item += 1
})
itemRect.map((item, index) => {
给
this.scrollViewWidth += item.width；
    
})

用一个常量或者变量去接住这个返回值，如果不需要返回值的话，也可以不用接（根据业务自行判断）。两者编译速度其实差不多。那为什么大家去看一些源码或者大佬写的代码很少出现forEach，出现map比较多呢?

说实话，我不知道，但是看见forEach总是给我一种笨重的感觉，而且大家都用map，可读性好点。所以除了新增属性或者赋值我基本都用map。我猜测大抵是forEach写出来没有map的链式好看，且没有那么多数据本身需要赋值跟新增属性。

reduce() 此方法是遍历的计算，也就是说你可以把涉及计算的遍历交给reduce()，相当于一个计算器（累加减）。

this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0)

这个子的意思是 在sizes这个数组中cur是遍历的元素，而sum则是每次累加之后的结果，初始为0。所以每一次遍历过后，sum的值都会加上cur.width,然后再跟下一个cur.width相加。最后那个0的意思是哪怕数组为空，也不会报错出来，最后返回0。场景可以用在购物车。

filter() 跟他名字一样，过滤的用法。需要注意一点所产生的数据为浅拷贝。

const arr = [
  { id: 1, value: 'A' },
  { id: 2, value: 'B' },
  { id: 3, value: 'C' }
];
const filteredArr = arr.filter(item => item.id % 2 === 0);
// 打印对象：filteredArr : Array [Object { id: 2, value: "B" }]
arr[1].value = 'D'
//修改之后打印为：filteredArr : Array [Object { id: 2, value: "D" }]

主要这段代码也是起了一个筛选的作用，筛选不少，这也是常用的一个方法。本段代码是id除2能不能余0，余0返回到filteredArr里面。打印的内容是返回值改变，原数组也改变。两人用的是一个地址。

浅拷贝深拷贝这里浅浅的提一下：浅拷贝是小猪妈妈怀了双胞胎，在没出生之前。两个小猪没出生之前是长得一样的，无论怎么样，他们俩出生的时候是长得一样的。深拷贝是两个小猪生出来之后，一个小猪被烤成烧猪了，但是另一个小猪不会受到影响。

indexOf() 返回数组中第一次出现给定元素的下标，如果不存在则返回 -1，有返回值。

const array = [2, 9, 9];
array.indexOf(2); // 0

你想找到这个数组里面的符合条件的第一个元素，你就可以用到indexOf。只要记住第一口可乐最甜跟indexOf联系起来就很容易记住。

slice() 切割数组的方法。浅拷贝且有返回值。用法：array.splic(a,b)。a是开始的第一项的下标，b是最后一项的后一项。如果b不存在，arr.splic(a)。返回的就是a-最后一项。请看vcr（）

let originalArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
// 使用 slice 创建浅拷贝
let shallowCopy = originalArray.slice(1);
// 修改原始数组中的对象
originalArray[2].name = 'Alex';
// 检查拷贝数组是否受影响
console.log(originalArray); 
// [{ id: 1, name: 'Alex' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]
console.log(shallowCopy);   
// [{ id: 1, name: 'Alex' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]
let c = originalArray.slice(1)
console.log(c); //Array [Object { id: 2, name: "Bob" }, Object { id: 3, name: "Charlie" }]
let d = originalArray.slice(0,2)
console.log(d); //Array [Object { id: 1, name: "Alice" }, Object { id: 2, name: "Bob" }]

先记到这里。