1、 带有多的条件的if的语句 逻辑 || 的简写
if (x == 'true' || x == '2523' || x == '小明') {
// logic
}
// 简化操作
if (['true', '2523', '小明'].includes(x)) {
// logic
}
2、 简化 if true...else 条件的写法,可以运用我们的三元运算符
let test;
if (x > 100) {
test = true
} else {
test = false
}
// 简化操作
test = x > 100 ? true : false
/*
如果有判断条件的的语句多的时候可以这样做
*/
let x = 50 // x为40输出'我小于50' x为52输出'我是大于50'' x为140输出'你好两把刷子'
let res = (x > 100) ? '你好两把刷子' : (x < 50) ? '我小于50' : '我是大于50'
console.log(res)
3、 声明变量
let test1;
let test2 = 1
// 简写
let test3, test4 = 1
// 给多个变量进行赋值
let test1, test3, test4;
test1 = 1
test3 = 2
test4 = 3
// 简化
let [test1,test3,test4] = [1,2,3]
4、null 和 undefined 的空置检查当这个数据已知是 null 或者是 undefined 可以这样写
if (test1 != null || test1 !== undefined || test1 !== '') {
// logic
let test2 = test1
}
let test2 = test1 || ''
// 还可以基于 ?? 操作符 如果左边的值为 null 或 undefined 就返回右边的值,如果左边的值为默认值就返回左边的值
const test = null ?? 'default'
console.log(test) // default
const test6 = 0 ?? 1
console.log(test6) // default
5、操作赋值符
let test1 = 3
test1 = test1 + 1
test3 = test1 - 1
test4 = test1 * 20
// 简化
test1++
test1--
test1 *= 20
6、判断值是否存在
if (val) { } // 存在
if (!val) { } // 不存在
7、 条件判断 && 判断如果为 true 调用函数
if (test1) {
fn()
}
test1 && fn()
// 比较后返回
let test9;
function check() {
return test9 || fn('伪代码')
}
8、遍历简化
// for 的简化
for (let i = 0; i < arr.length; i++) { }
for (let key in arr) { }
for (let value of arr) { }
// 便利数组的每一项
function fn(ele, i, array) { // 将函数传进去接收 forEach 的参数
console.log(ele, i, array)
}
[1, 24, 5, 6, 777].forEach(fn)
9、箭头函数的简写
// 箭头函数
function add(a, b) {
return a + b
}
// 简写
const arr = (a, b) => a + b
// 如果为一个参数就直接不用加 ()
const fn = a => a + 1
// 箭头函数的返回值 隐式转换
let f;
f = a => (
3 + a * 1
)
console.log(f('2')) // 5
// 箭头函数默认参数
let s;
s = (a = 1, b = 2) => a + b
console.log(s()) // 3
// 简短的函数调用
function fn1() {
console.log('fn1')
}
function fn2() {
console.log('fn2')
}
let a = 1
if (a == 1) {
fn1()
} else if (a == 2) {
fn2()
}
// 简写
a == 1 ? fn1() : fn2()
10、switch 的简化
function fn1() { console.log(1) }
function fn2() { console.log(2) }
function fn3() { console.log(3) }
let data1 = 1
switch (data1) {
case 1:
fn1()
break
case 2:
fn2()
break
case 'h':
fn3()
break
default:
console.log('啥也是不是')
}
// 简化
let data2 = 1
var data = {
1: fn1,
2: fn2,
'h': fn3,
}
data[data2] && data[data2]()
11、拼接简化
let arr1 = [1, 3]
let arr2 = [4, 5]
console.log(arr2.concat(arr1))
console.log([...arr1, ...arr2])
console.log([213, 5, ...arr2])
console.log([213, 5].concat(arr2))
12、克隆数组
let arr4 = [1,234,4,88]
let arr5 = arr4.slice()
let arr4 = [1,234,4,88]
let arr5 = [...arr4]
13、项目中常见的id转换拼接
/*
项目中经常有这样的需求就是,拿到每一行的 id 然后拼接到 后端返回的 ids 上面以逗号的形式分割开
然后调用更新接口
一行代码搞定不需要多次赋值
*/
let row = {
attachmentIds: '4556'
}
let response = {
data: {
id: 999
}
}
response.data.id = row.attachmentIds ? [...row.attachmentIds.split(','), response.data.id.toString()].join(',') : [
response.data.id
.toString()
];
console.log(response)
14、多态的使用优化函数
var googleMap = {
show: function () {
console.log('有两把刷子11');
}
};
var baiduMap = {
show: function () {
console.log('有两把刷子22');
}
};
// 没优化
var renderMap = function (type) {
if (type === 'google') {
googleMap.show();
} else if (type === 'baidu') {
baiduMap.show();
}
};
renderMap('google'); // 输出:有两把刷子11
renderMap('baidu'); // 输出:有两把刷子22
// 优化 多态
var sosoMap = {
show: function () {
console.log('有两把刷子33');
}
};
// 函数
var renderMap = function (map) {
if (map.show instanceof Function) {
map.show();
}
};
renderMap(googleMap); // 输出:有两把刷子11
renderMap(baiduMap); // 输出:有两把刷子22
renderMap(sosoMap); // 输出:有两把刷子33
目前总结这么多,还有好多神奇操作,后续更新...