前端Tips（自用）

1.数组的哪些方法是响应式的

追加最后一个元素：array.push()  

删除最后一个元素：array.pop()

删除第一个元素：array.shift()

追加最前面一个元素：array.unshift()

删除/插入/替换元素：array.splice(start,count,items)

1.删除：start:开始删除的位置 count:删除的个数,如果不传是删到末尾 items不需要传

2.替换：statrt:开始替换额位置 count:替换的个数 items:需要替换的参数可以多可以少

3.插入：start:开始插入的位置 count:0 items:需要插入的元素

对数组进行排（正）序：array.sort()

对数组进行排（倒）序：array.reverse()

注意：通过索引设置数组不是响应式的 array[i]="";需要响应式可以结合splice

2.方法传多个参数

//这里的参数前面加了... 这也是为什么push();pop();shift();unshift();这些可以实现的原因
//他们底层都是使用了可变参数
//e.g.
function sum(...num){
    //可变参数
    //这里会把一堆num的参数放到数组里面再打印
    console.log(num);
}
sum(10,20,30,40,50,60,70,80,90)

3.Vue.set()

//Vue内部实现的方法，修改，temp：需要修改的对象 index：索引 updateVal：修改后的值
Vue.set(temp,index,updateVal)

4.fliter函数

//传入的参数需要是一个必须返回boolean值函数
//当返回true，会自动将回调的num加入到一个新的数组
//当返回false，内部过滤掉这个num
const oldArray = [1,2,3,4,5];
let newArray = oldArrar.filter(function(num){
    return num<3;
});
console.log(newArray);
//这里输出1,2

5.map函数

//传入的参数是一个函数，会把经过处理之后的值，加入到新的数组
const oldArray= [1,2,3,4,5];
let newArray = oldArray.map(function(num){
    return num*2;
});
console.log(newArray);
//这里输出2,4,6,8,10

6.reduce函数

//对数组中所有的内容进行累加
//传入的参数需要是一个函数
//prevalue是上一次执行完这个方法后的值
//num是每次遍历的值
const oldArray = [1,2,3,4,5];
let total = oldArray.reduce(function(preVal,num){
    return preVal+num;
});
console.log(total);
//输出15

通过上面三个函数可以很简单的实现，把一个数组里面符合条件的去除再进行处理再求和

//数组[10,20,30,40,50];
//讲小于40的数据进行乘以二再求和
const oldArray = [10,20,30,40,50];
let total = oldArray.fliter(function(num){
    return num<40;
}).map(function(num){
    return num*2;
}).reduce(function(preVal,num){
    return preVal+num;
});
console.log(total);
//输出120
//也可以用箭头函数的写法
let total = oldArray.fliter(num=>num<40).map(num=>num*2).reduce((preVal,num)=>preVal+num);
console.log(total);
//输出120