Web前端最全26种JavaScript优化技术，成体系化的神级前端进阶笔记,

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

flag = false

}

// short

let flag = x > 10 ? true : false

3. 变量声明

---

当我们要声明两个具有共同值或共同类型的变量时,可以使用此简写形式

// long

let var1

let var2 = 1

// short

let var1, var2 = 1

4. 空/未定义检查和分配默认值

---

当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为null或未定义, 可以考虑如下实现:

// long

if(test1 !== null || test1 !== undefined || test1 !== “”){

let test2 = test1;

}else {

let test2 = ‘’

}

// short

let test2 = test1 || ‘’

5. 给多个变量赋值

---

当我们处理多个变量并希望将不同的值分配给不同的变量时，此法非常有用。

//long

let test1, test2, test3;

test1 = 1;

test2 = 2;

test3 = 3;

//Short

let [test1, test2, test3] = [1, 2, 3];

6. 赋值运算符的简写

---

我们在编程中处理很多算术运算符。这是将运算符分配给JavaScript变量的有用技术之一

// long

test1 = test1 + 1;

test2 = test2 - 1;

test3 = test3 * 20;

// short

test1++;

test2–;

test3 *= 20;

7. 真值判断

---

// long

if (test1 === true)

// short

if (test1)

8. 多条件的与/或运算

---

//long

if (test1) {

callMethod();

}

//short

test1 && callMethod();

9. forEath

---

// long

for (var i = 0; i < testList.length; i++)

// short

testList.forEach(item => console.log(item))

10. 比较返回值

---

// long

let test;

function checkReturn() {

if (!(test === undefined)) {

return test;

} else {

return callMe(‘test’);

}

}

var data = checkReturn();

console.log(data); //output test

function callMe(val) {

console.log(val);

}

// short

function checkReturn() {

return test || callMe(‘test’);

}

11. 箭头函数

---

//long

function add(a, b) {

return a + b;

}

//short

const add = (a, b) => a + b;

12. 短函数调用

---

// long

function test1() {

console.log(‘test1’);

};

function test2() {

console.log(‘test2’);

};

var test3 = 1;

if (test3 == 1) {

test1();

} else {

test2();

}

// short

(test3 === 1? test1:test2)();

13. switch

---

我们可以将条件保存在键值对象中，并可以根据条件使用。

// long

switch (data) {

case 1:

test1();

break;

case 2:

test2();

break;

case 3:

test();

break;

// And so on…

}

// short

var data = {

1: test1,

2: test2,

3: test

};

data[something] && datasomething;

14. 默认参数

---

//long

function add(test1, test2) {

if (test1 === undefined)

test1 = 1;

if (test2 === undefined)

test2 = 2;

return test1 + test2;

}

//short

add = (test1 = 1, test2 = 2) => (test1 + test2);

add() //output: 3

15. 参数必传校验

---

// long

function hello(obj){

let {name, age} = obj

if(!name){

console.warn(‘name is null, pls check!’)

return ‘’

}

if(!age){

console.warn(‘age is null, pls check!’)

return ‘’

}

return ${name}: ${age}

}

// short

function hello(obj){

let {name = required(‘name’), age = required(‘age’)} = obj

return ${name}: ${age}

}

function required(key){

console.warn(`${key} is null, pls check!')

}

16. 扩展运算符

---

//long

const data = [1, 2, 3];

const test = [4 ,5 , 6].concat(data);

//short

const data = [1, 2, 3];

const test = [4 ,5 , 6, …data];

console.log(test); // [ 4, 5, 6, 1, 2, 3]

对于克隆, 我们也可以使用扩展运算符

//long

const test1 = [1, 2, 3];

const test2 = test1.slice()

//short

const test1 = [1, 2, 3];

const test2 = […test1];

17. 模板字符串

---

如果您厌倦了在单个字符串中使用+来连接多个变量，可以考虑用这种方式

//long

const welcome = 'Hi ’ + user + ’ ’ + name + ‘.’

//short

const welcome = Hi ${user} ${name};

18. 对象属性赋值

---

let test1 = ‘a’;

let test2 = ‘b’;

//Long

let obj = {test1: test1, test2: test2};

//short

let obj = {test1, test2};

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

---

如果您厌倦了在单个字符串中使用+来连接多个变量，可以考虑用这种方式

//long

const welcome = 'Hi ’ + user + ’ ’ + name + ‘.’

//short

const welcome = Hi ${user} ${name};

18. 对象属性赋值

---

let test1 = ‘a’;

let test2 = ‘b’;

//Long

let obj = {test1: test1, test2: test2};

//short

let obj = {test1, test2};

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

[外链图片转存中…(img-89fidPHJ-1715169018859)]