# 1、合理使用 对象
# 多种条件(初始)
const a = 1
let res
switch (a) {
case 1:
res = 'one'
break
case 2:
res = 'two'
break
// 超级多...
}
console.log(res) // one
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 利用 对象(优化)
const a = 1
const map = {
'1': 'one',
'2': 'two',
// ...
}
let res = map[a]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2、合理使用 数组 + includes
# 多个或进行 if 判断(初始)
const a = 1
if (a === 1 || a === 2 || a === 3) {
// ...
}
1
2
3
4
5
2
3
4
5
# 利用 数组+includes(优化)
const a = 1
if ([1, 2, 3].includes(a)) {
// ...
}
1
2
3
4
5
2
3
4
5
# 3、ES6 默认参数
# 默认参数(初始)
const fn = (name) => {
name = name || 'lhd'
console.log(name)
}
1
2
3
4
2
3
4
# ES6 默认参数(优化)
const fn = (name = 'lhd') => {
console.log(name)
}
1
2
3
2
3
# 4、嵌套解构赋值
# 链式取值(初始)
const obj = {
eat: {
breakfast: 'egg',
dinner: 'meal'
}
}
console.log(obj.eat.breakfast) // egg
console.log(obj.eat.dinner) // meal
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 嵌套解构(优化)
const {
eat: {
breakfast,
dinner
}
} = obj
console.log(breakfast) // egg
console.log(dinner) // meal
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 5、三元代替 if
# if 赋值(初始)
let player
let no = 24
if (no === 24) {
player = 'kobe'
} else {
player = 'james'
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 三元代替(优化)
let no = 24
const name = no === 24 ? 'kobe' : 'james'
1
2
2
# 6、多 if 的 return
# else if(初始)
const a = 1
const fn = () => {
if (a === 1) {
return 1
} else if (a === 2) {
return 2
} else if (a === 3) {
return 3
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# if(优化)
const a = 1
const fn = () => {
if (a === 1) {
return 1
}
if (a === 2) {
return 2
}
if (a === 3) {
return 3
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 7、if 判断假值
# ===判断(初始)
if (key === null) {
// 进行对应操作
}
1
2
3
2
3
# 自动转布尔值(优化)
if (key) {
// 进行对应操作
}
1
2
3
2
3
# 8、Vue 不需响应式的数据
# 初始
如果 selects 是不需要响应式的，但是你放在这里，会进行响应式的处理，浪费性能
data() {
return {
selects: [
{label: '选项一', value: 1},
{label: '选项二', value: 2},
{label: '选项三', value: 3}
]
};
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 优化
放在外面，则不会进行响应式处理，节省性能
data() {
// 放在这
this.selects = [
{label: '选项一', value: 1},
{label: '选项二', value: 2},
{label: '选项三', value: 3}
]
return { };
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 9、定时器、绑定事件的清除
export default{
data(){
timer:null
},
mounted(){
this.timer = setInterval(()=>{
//具体执行内容
console.log('1');
},1000);
}
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 10、小程序多次 setData 合并
小程序不像 React，小程序的 setData 并没有做多次修改自动合并，所以需要我们手动合并
# 初始
this.setState({
name: 'lhd'
})
if (confition1) {
this.setState({
age: 22
})
}
if (condition2) {
this.setState({
gender: '男'
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 优化
const model = {
name: 'lhd'
}
if (confition1) {
model.age = 22
}
if (condition2) {
model.gender = '男'
}
// 合并更新
this.setData(model)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 11、简短函数调用
# 初始
// test2 test3 都是函数
// 值为1时调用 test1(),否则调用 test2()
var temp = 1
if(temp == '1'){
test1()
} else {
test2()
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 优化
var temp = 1
(temp=='1' ? test1:test2)()
1
2
2
# 12、给多个变量赋值
# 初始
let test1,test2,test3
test1 = 1
test2 = 2
test3 = 3
1
2
3
4
2
3
4
# 优化
let [test1,test2,test3] = [1,2,3]
1