26种JavaScript优化技术，客户端开发面试题目怎么写

最新推荐文章于 2025-04-09 18:59:55 发布

2401_84139963

最新推荐文章于 2025-04-09 18:59:55 发布

阅读量1k

点赞数 21

分类专栏： 2024年程序员学习文章标签： javascript 面试开发语言

本文链接：https://blog.csdn.net/2401_84139963/article/details/137842489

版权

2024年程序员学习专栏收录该内容

80 篇文章

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

// 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};

19. 字符串转换成数字

//Long

let test1 = parseInt(‘123’);

let test2 = parseFloat(‘12.3’);

//Short

let test1 = +‘123’;

let test2 = +‘12.3’;

最后

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。