树状列表多选删除判断去重 在elemenet中，下拉框选中数据后取消和选中都会产生一个数据，在进行多选删除如果遇到客户重复添加会出现重复ID，导致无法删除以下是以element的树状列表多选删除为例 <template> <el-tree :props="props" :load="loadNode" show-checkbox @check-change="handleCheckChange"> </el-tree> <button @click='handleRemoveAll'>批量删除</button> </template> <script> export default { data() { return { deletedData:[], // 选中的数据 } }, methods:{ handleCheckChange(data) { // data为选中的数据对象 const key = data.id // 选择唯一值为key const index = this.deletedData.indexOf(key) // deletedData为存储的数组 // 通过indexOf来判断 没有找到匹配的字符串则返回 -1。 if (index == -1) { // 添加进数组中 this.deletedData.push(key) } else { // 如果检测到重复，删除 this.deletedData.splice(index, 1) } }, handleRemoveAll(){ // ... 删除方法 } } } </script>

JavaScript 常用方法 (更新中) 检测数据类型typeof检测 const String = '1, 2, 3' console.log(typeof(String)) // 实例结果返回为string类型instanceof检测 // instanceof检测返回值是 true或false const num = [1,2]; console.log(num instanceof Array)typeof和instanceof优缺点typeof 检测数据类型 优点：可以准确的判断简单数据类型（Number、String、Boolean、undefined、null）缺点：判断复杂数据类型比较模糊（Function、Object）instanceof 检测数据类型 优点：可以准确的判断复杂数据类型（Array、Object）缺点：不能准确的判断简单数据类型（Number、Boolean、String）

防抖节流的基本原理 防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能或者是避免资源浪费.毕竟JS操作DOM对象的代价还是十分昂贵的.防抖防抖是指在事件触发n秒后在执行回调,如果在n秒内再次触发,则重新计算时间.(就是再触发某个事件后,在下一次触发之前,中间的间隔事件如果超过设置的时间才会发送请求,一直触发就不会发送请求)代码实现:function debounce(fn, delay) { let timeId = null return function() { const context = this // 如果在n秒内从新计算 if(timeId) { window.clearTimeout(timeId) } // 如果在n秒后调用 timeId = setTimeout(() => { fn.apply(context, arguments) timeId = null }, delay) } } 应用场景有:scroll事件滚动触发搜索框输入查询表单验证按钮提交事件浏览器窗口缩放,resize事件节流节流是指如果持续触发某个事件, 则每隔n秒执行一次代码实现:function throttle(fn, delay) { //设置一个触发开关 let canUse = true return function() { //如果为true, 就触发,否则就不触发 if(canUse) { fn.apply(this, arguments) //触发开关后,关闭开关 casUse = false //每隔delay秒执行一次 setTimeout(() => canUse = true, delay) } } } 应用场景有:DOM元素的拖拽功能实现射击游戏类计算鼠标移动的距离监听scroll事件

js的数组常用方法 1.joinjoin('参数')把数组的元素以传入的参数为分割符，转换成字符串。let arr = [1, 2, 3, 4, 5]; let str = arr.join(','); console.log(str); -> '1,2,3,4,5' 2.push()和pop()push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。let arr = ['张三', '李四', '王五']; let count = arr.push('马六'); console.log(arr); // -> ['张三', '李四', '王五', '马六'] console.log(count); // -> 4 let item = arr.pop(); console.log(item); // -> 马六 3.shift() 和 unshift()shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。unshift:将参数添加到原数组开头，并返回数组的长度 。let arr = ['张三', '李四', '王五']; let item= arr.shift(); console.log(arr); // -> ['李四', '王五'] console.log(item); // -> 张三 let count= arr.unshift('马六'); console.log(arr); // -> ['马六', '李四', '王五'] console.log(count); // -> 3 4.reverse()将数组的数据进行反转，并且返回反转后的数组，会改变原数组let arr = [1, 2, 3, 4, 5]; let arr1 = arr.revers(); console.log(arr1); // [5, 4, 3, 2, 1] console.log(arr); // [5, 4, 3, 2, 1] 5.sort()对数组内的数据进行排序(默认为升序)，并且返回排过序的新数组，会改变原来的数组let arr = [12,2,43,5,2,5]; console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5] /* 注意：通过上面的案例，你会发现 打印的数组和原数组比较还是有变化的 [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];但是有没有达到我们想要的结果，这是为什么呢？*/ /* 因为排序是针对字符的排序，先使用数组的toString()方法转为字符串，再逐位比较，3是大于12的，因为首位3>1，不 要与Number型的数据排序混淆。*/ //5.1那如果需要数值排序怎么办呢？ /* 如果需要数值排序，sort(callback) 需要传入一个回调涵数，该函数应该具有两个参数，比较这两个参数，然后返回 一个用于说明这两个值的相对顺序的数字（a-b）；*/ //例如： let arr = [12,2,43,5,2,5]; console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43] 6.slice()截取指定位置的数组，并且返回截取的数组，不会改变原数组// slice(startIndex, endIndex) 可以有两个参数, startIndex为必选, 表示从第几位开始.endIndex为可选 // 表示到第几位结束(不包含endIndex位),省略表示到最后一位, startIndex和endIndex都可以为负数, // 负数表示从最后一位开始算起,如-1表示最后一位 let arr = ['张三','李四','王五','马六']; console.log(arr.slice(1, 3));// -> ['李四', '王五'] console.log(arr); // -> ['张三','李四','王五','马六']; 原数组是没有改变的 7.splice()向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素 // splice(start, num, val1, val2, ...); 所有参数全部可选.和slice相比splice是会改变原数组的 // start是开始的位置,可以为负数, -1就表示从最后一位开始, num代表要删除或者替换的长度,不能为负数 let arr = ['张三','李四','王五','马六']; console.log(arr.splice(2, 1)) // -> ['王五'] console.log(arr) // -> ['张三','李四','王五','马六'] let arr1 = ['张三','李四','王五','马六']; console.log(arr1.splice(2, 1, '七郎')) // ->['王五'] console.log(arr1) // -> ['张三','李四','七郎','马六'] 8.toString()将数组转换成字符串，类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。不会改变原数组let arr = [1, 2, 3, 4, 5, 6]; //toString没有参数 console.log(arr.toString()) // -> '1, 2, 3, 4, 5, 6' 9.indexOf()根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引// indexOf(value, start),value为要查询的数据, start为可选,表示开始查询的位置 // 当start为负数时,从数组的尾部向前数, 如果查询不到value的存在,则返回-1 let arr = ['张三', '李四', '王五', '马六']; console.log(arr.indexOf('李四')) // -> 1 console.log(arr.indexOf('李四', 2)) // -> -1 10.forEach()ES5新增的方法，用来遍历数组，没有返回值// forEach(callback), callback默认有三个参数, // 分别为value(遍历到的数组的数据), index(对应的索引), self(数组自身) let arr = ['张三', '李四', '王五', '马六'] let a = arr.forEach((value, index, self) => { console.log(value + '->' + index + '->' + (arr === self)); }) //打印结果为: 张三-> 0 -> true 李四-> 1 -> true ... console.log(a) // -> undefined --- forEach没有返回值 // 该方法为遍历方法, 不会修改原数组 11.map()1.同forEach功能。2.map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。// map(callback), callback默认有三个参数, 分别为value, index, seif. 跟forEach参数一样 let arr = ['张三', '李四', '王五', '马六']; let arr1 = arr.map(item => { return '你好' + item }) console.log(arr1) // -> ['你好: 张三', '你好: 李四', '你好: 王五', ...] 12.filter()1.同forEach功能；2.filter的回调函数需要返回布尔值，当为true时，将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。// filter(callback), callback默认有三个参数, 分别为value, index, self let arr = [1, 2, 3, 4, 5, 6]; let arr1 = arr.filter((item, index, self) => { console.log(item) // -> 1, 2, 3, 4, 5, 6 console.log(index) // -> 0, 1, 2, 3, 4, 5 console.log(self) // -> [1, 2, 3, 4, 5, 6] return item > 3 }) console.log(arr1) // -> [4, 5, 6] 13.find()数组的循环，查找到符合条件的值并且打断循环返回找到的值。let arr = ['张三', '李四', '王五', '马六']; let str = arr.find(item => item == '李四'); console.log(str); // -> '李四' 14.findIndex()数组的循环，查找到符合条件的索引并且打断循环返回找到的索引值let arr = ['张三', '李四', '王五', '马六']; let index = arr.findIndex(item => item == '李四'); console.log(str); // -> 1 15.every()判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。// every()接受一个回调函数作为参数, 这个回调函数需要有返回值, every(callback) // callback三个参数, 分别是value, index, self let arr = [1, 2, 3, 4, 5, 6]; let bool = arr.every(item => item > 0) console.log(bool) // -> true let bool1 = arr.every(item => item > 3) console.log(bool1) // -> false 16.some()判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。否侧就会返回false// some()接受一个回调函数作为参数, 这个回调函数需要有返回值, some(callback); callback默认有三个参数 // 分别为value, index, self let arr = [1, 2, 3, 4, 5, 6] let bool = arr.every(item => item > 5) console.log(bool) // -> true let bool1 = arr.every(item => item > 7) console.log(bool1) // -> false 17.reduce()数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。 reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。 callback返回的任何值都会作为下一次执行的第一个参数。 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。let arr = [10, 20, 30, 40, 50]; let sum = arr.reduce((prev, now) => prev + now) console.log(sum) // -> 150 let sum1 = arr.reduce((prev, now) => prev + now, 110) console.log(sum1) // -> 260