目录
前言
及时复盘勿忘本
一、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 1
2、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;
总结
持续更新....