2024年不可错过的17种JS优化技巧（一）(1)

4. null、undefined 和空值检查

---

当我们创建了新变量，有时候想要检查引用的变量是不是为非 null 或 undefined。JavaScript 确实有一个很好的快捷方式来实现这种检查。

// Longhand

if (test1 !== null || test1 !== undefined || test1 !== ‘’) {

let test2 = test1;

}

// Shorthand

let test2 = test1 || ‘’;

5. null 检查和默认赋值

---

let test1 = null,

test2 = test1 || ‘’;

console.log(“null check”, test2); // output will be “”

6. undefined 检查和默认赋值

---

let test1 = undefined,

test2 = test1 || ‘’;

console.log(“undefined check”, test2); // output will be “”

一般值检查

let test1 = ‘test’,

test2 = test1 || ‘’;

console.log(test2); // output: ‘test’

另外，对于上述的 4、5、6 点，都可以使用?? 操作符。

如果左边值为 null 或 undefined，就返回右边的值。默认情况下，它将返回左边的值。

const test= null ?? ‘default’;

console.log(test);

// expected output: “default”

const test1 = 0 ?? 2;

console.log(test1);

// expected output: 0

7. 给多个变量赋值

---

当我们想给多个不同的变量赋值时，这种技巧非常有用。

//Longhand

let test1, test2, test3;

test1 = 1;

test2 = 2;

test3 = 3;

//Shorthand

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

8. 简便的赋值操作符

---

在编程过程中，我们要处理大量的算术运算符。这是 JavaScript 变量赋值操作符的有用技巧之一。

// Longhand

test1 = test1 + 1;

test2 = test2 - 1;

test3 = test3 * 20;

// Shorthand

test1++;

test2–;

test3 *= 20;

9. if 判断值是否存在

---

这是我们都在使用的一种常用的简便技巧，在这里仍然值得再提一下。

// Longhand

if (test1 === true) or if (test1 !== “”) or if (test1 !== null)

// Shorthand //it will check empty string,null and undefined too

if (test1)

注意：如果 test1 有值，将执行 if 之后的逻辑，这个操作符主要用于 null 或 undefinded 检查。

10. 用于多个条件判断的 && 操作符

---

如果只在变量为 true 时才调用函数，可以使用 && 操作符。

//Longhand

if (test1) {

callMethod();

}

//Shorthand

test1 && callMethod();

11. for each 循环

---

这是一种常见的循环简化技巧。

// Longhand

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

// Shorthand

for (let i in testData) or for (let i of testData)

遍历数组的每一个变量。

function testData(element, index, array) {

console.log(‘test[’ + index + '] = ’ + element);

}

[11, 24, 32].forEach(testData);

// logs: test[0] = 11, test[1] = 24, test[2] = 32

12. 比较后返回

---

我们也可以在 return 语句中使用比较，它可以将 5 行代码减少到 1 行。

// Longhand

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);

}

// Shorthand

function checkReturn() {

return test || callMe(‘test’);

}

13. 箭头函数

---

//Longhand

function add(a, b) {

return a + b;

}

//Shorthand

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

更多例子：

function callMe(name) {

console.log(‘Hello’, name);

}

callMe = name => console.log(‘Hello’, name);

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）