目录
前言
及时复盘勿忘本
一、sort进行排序 会改变原数组
1、排序数字数组
arr.sort(compareFunction)[参数]：
compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
// 升序
let arr1 = [10,1,5,3,2].sort((a, b) => a - b)
console.log(arr1); // [1, 2, 3, 5, 10]
// 降序
let arr2 = [40, 100, 1, 5, 25, 10].sort((a,b) => b-a)
console.log(arr2) // [100, 40, 25, 10, 5, 1]2、排序字符串数组
const stringArr = ["Joe", "Kapil", "Steve", "Musk"].sort()
// 输出
(4) ["Joe", "Kapil", "Musk", "Steve"]
stringArr.reverse();
// 输出
(4) ["Steve", "Musk", "Kapil", "Joe"]二、删除重复值
const array = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// 或者用es6的去重
const nonUnique = [...new Set(array)];
// 输出: [5, 4, 7, 8, 9, 2]
三、将Object属性转成属性数组，或者是对象数组
使用Object.entries(),Object.keys()和Object.values()
const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj);
// 输出
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3
Object.keys(obj);
(3) ["a", "b", "c"]
Object.values(obj);
(3) [1, 2, 3]
转成对象数组
const obj = { a: 1, b: 2, c: 3 }
let select = []
for (const [key, value] of Object.entries(obj)) {
select.push({
name: key,
id: value
})
}
console.log(select);
[{name: 'a', id: 1},
{name: 'b', id: 2},
{name: 'c', id: 3}]四、数组合并
1、push.apply(arr1,arr2): 把后一个数组的值依次push进前一个数组，使前一个数组发生改变，并且只能两个数组之间发生合并
arr1.push.apply(arr1,arr2)
console.log(arr1) //[ 1, 2, 3, 4, 4, 5, 6, 7 ]2、cancat ：不改变原数组。合并数组之后，返回值才是新数组，并且可以合并两个及其以上的数组
let temparr2 = temparr.concat([7,8])
console.log(temparr2)//[ 1, 2, 3, 4, 7, 8 3、push：添加到数组的末尾 改变原数组
let temparr = [1,2,3,4];
temparr.push(5)
console.log(temparr) //[ 1, 2, 3, 4, 5 ] 4、es6扩展运算符
let arr1 = [0,5,8,9]
let arr2 = [...arr1, 8,8,8]
console.log(arr2) // [0, 5, 8, 9, 8, 8, 8]五、forEach (对原数组没有影响)
forEach(currentItem,index,arr) 方法对数组的每个元素执行一次给定的函数。 对于空数组是不会执行回调函数的。
特点： 1. 返回值是undefined 2.不会改变原数组
总共有三个参数，currentItem是当前元素(必选)，index是当前元素的索引值(可选)，arr是当前元素所属的数组对象(可选)。
let arr1 = [10,30,50,5,9]
let arr2 = []
arr1.forEach((item, index) => {
if (item > 20) {
arr2.push(item)
}
})
console.log(arr2) // [30, 50]六、关于js跳出循环
1、break: 终止全部循环，到达指定条件不会继续执行，跳出循环;用在循环或switch语句
for(let i = 0; i<= 10; i++) {
if(i == 2) {
break;
}
console.log(i)
}
// 输出0 12、continue：跳过了当前的循环，继续进行下一次循环;用在循环或switch语句,continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内，在其它地方使用都会引起错误！
for(let i = 0; i<= 10; i++) {
if(i == 6) {
continue;
}
console.log(i)
}
// 输出 0 1 2 3 4 5 7 8 9 10 当为6时跳过循环3、return: 在单层函数中和break一样，不同的是return必须放在函数中，否则会报错,
function myfunction(arg, arg){
var r;
r = arg * arg;
return(r);
}retrun true； 返回正确的处理结果。
return false；返回错误的处理结果，终止处理, 不再继续向下执行。比如表单将终止提交。
return；把控制权返回给页面。
七、map (对原数组没有影响)
map(currentValue, index,arr) 对数组的每个元素进行处理后，会返回一个新的数组。支持return, 返回一个新的数组，对原数组没有影响。
let arr1 = [1,4,5,6,8]
let arr2 = arr1.map(item => item *2)
console.log(arr2) // 输出 [2, 8, 10, 12, 16]
console.log(arr1) // 输出 [1,4,5,6,8]八、filter (对原数组没有影响)
filter()方法创建一个新的匹配过滤条件的数组，不改变原数组。 应用场景: 将符合条件的选项筛选出来组成新的数组。
let arr3 = [
{name:"red", count: 1},
{name:"yellow", count: 5},
{name:"yellow", count: 3}]
let arr4 = arr3.filter(item => item.name === 'red')
console.log(arr4) // 输出 [{name: 'red', count: 1}]
console.log(arr3)
// 输出 [{name:"red", count: 1},{name:"yellow", count: 5}，{name:"yellow", count: 3}]
九、reduce 感兴趣的可以看看这个链接
JS reduce()方法_vanora1111的博客-CSDN博客
十、关于拼接字符串
${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
const name = '小明';
const score = 59;
let result = '';
if(score > 60){
result = `${name}的考试成绩及格`;
}else{
result = `${name}的考试成绩不及格`;
}
// 可以优化为
const name = '小明';
const score = 59;
let result = `${name}${score > 60 ? '的考试成绩及格' : '的考试成绩不及格'}`十一、find
用于找出第一个符合条件的数组成员。它的参数是一个回调函数，依次为当前的值、当前的位置和原数组。find方法中找到符合条件的项，就不会继续遍历数组。如果没有符合条件的成员，则返回undefined。
const a = [1,2,3,4,5];
const result = a.find(item => item === 3)
console.log(result) // 输出 3十二、splice （改变原数组）
可对数组进行删除或者新增，新增的话，传入三个参数。删除的话，就是传入两个参数
// 新增
let test = [1,2,3,4]
test.splice(4,0,5)
console.log(test) // 输出 [1,2,3,4,5]
// 参数1：为从哪开始删start的index下标，参数2：删除几个，参数3：要填上去的元素
// 删除
let test = [1,2,3,4,5]
test.splice(0,2)
console.log(test) // 输出 [3,4,5]
// 参数1：为从哪开始删start的index下标，参数2：删除几个
十三、对类数组进行循环操作
1、自己遍历arguments中所有的元素
function foo(num1,num2) {
let newArr = []
for(let i = 0;i<arguments.length;i++) {
newArr.push([arguments[i]*10])
}
console.log(newArr)
}
foo(10,20,30,40,50) // 输出 [100,200,300,400,500]2、Array.prototype.slice将arguments转成array
var newArr2 = Array.protytype.slice.call(arguments)
console.log(newArr2)
// 或者是
var newArr3 = [].slice.call(arguments)
console.log(newArr3)3、es6语法
var newArr4 = Array.from(arguments)
// 或者是
var newArr5 = [...arguments]14、wait 方法
虽然我们有 setTimeout 方法来实现等待并异步执行，但是该方法不会返回 Promise，如果用在 async 函数中不是很方便，因此，我们可以自己实现一个 wait 方法。
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
await wait(1000);
console.log( 'async' );
};
asyncFunc();
15、switch的缩写
switch (type) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// ......
}
// 优化
var obj = {
1: test1,
2: test2,
3: test
};
obj[type] && obj[type]();16、算术运算简写优化
let a = 1;
a = a + 1;
a = a - 1;
a = a * 2;
// 优化
a++;
a--;
a *= 2;写到这里，不得不补充一下， a++ 与 ++a的区别在哪，虽然两者都会使a的值发生变化，
let a = 10
a++ // 10
console.log(a) // 11
let b = 10
++b // 11
console.log(b) // 11区别
1、赋值顺序不同：
b=a++; 会先把a的值赋给b，在进行自增加1的运算，即先赋值，再自增
c=++a; a先会进行自增加1，然后把自增加1后的结果赋值给c，即先自增，再赋值2、计算过程中传递的值不同：控制台输出（a++）的结果是10，因为a++是一个先传递值，在进行自增的过程。而++a是先自增，再传递值的过程。
17、短函数调用优化
function fn1(){
console.log('fn1');
}
function fn2(){
console.log('fn2');
}
if(type === 1){
fn1();
}else{
fn2();
}
// 优化
(type === 1 ? fn1 : fn2)();
18、数组查找特定值
“~”运算符（位非）用于对一个二进制操作数逐位进行取反操作
if(arr.indexOf(item) > -1)
// 优化
if(~arr.indexOf(item))
// 或
if(arr.includes(item))19、 巧用$options
$options是一个记录当前Vue组件的初始化属性选项，当我们想把 data 里的某个值重置为初始值时，非常有用
this.value = this.$options.data().value;总结
持续更新....
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
