2024年最全34种JavaScript简写优化技术,赶紧收藏起来吧(1),2024年最新熬夜整理最新大厂前端高频面试题

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析

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

虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!

// 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循环后进入逻辑,该运算符主要用于 nullundefined 的检查。

10.多个条件的AND(&&)运算符


如果仅在变量为 true 的情况下才调用函数,则可以使用 && 运算符。

//Longhand

if (test1) {

callMethod();

}

//Shorthand

test1 && callMethod();

11.foreach循环简写


这是迭代的常用简写技术之一。

// 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中比较


我们也可以在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);

14.短函数调用


我们可以使用三元运算符来实现这些功能。

// Longhand

function test1() {

console.log(‘test1’);

};

function test2() {

console.log(‘test2’);

};

var test3 = 1;

if (test3 == 1) {

test1();

} else {

test2();

}

// Shorthand

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

15. Switch简写


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

// Longhand

switch (data) {

case 1:

test1();

break;

case 2:

test2();

break;

case 3:

test();

break;

// And so on…

}

// Shorthand

var data = {

1: test1,

2: test2,

3: test

};

data[something] && datasomething;

16.隐式返回简写


使用箭头函数,我们可以直接返回值,而不必编写return语句。

//longhand

function calculate(diameter) {

return Math.PI * diameter

}

//shorthand

calculate = diameter => (

Math.PI * diameter;

)

17.小数基数指数


// Longhand

for (var i = 0; i < 10000; i++) { … }

// Shorthand

for (var i = 0; i < 1e4; i++) {

18.默认参数值


//Longhand

function add(test1, test2) {

if (test1 === undefined)

test1 = 1;

if (test2 === undefined)

test2 = 2;

return test1 + test2;

}

//shorthand

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

add() //output: 3

19.扩展运算符简写


//longhand

// joining arrays using concat

const data = [1, 2, 3];

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

//shorthand

// joining arrays

const data = [1, 2, 3];

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

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

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

//longhand

// cloning arrays

const test1 = [1, 2, 3];

const test2 = test1.slice()

//shorthand

// cloning arrays

const test1 = [1, 2, 3];

const test2 = […test1];

20.模板文字


如果您厌倦了在单个字符串中使用 + 来连接多个变量,那么这种简写可以消除您的头痛。

//longhand

const welcome = 'Hi ’ + test1 + ’ ’ + test2 + ‘.’

//shorthand

const welcome = Hi ${test1} ${test2};

21.多行字符串简写


当我们在代码中处理多行字符串时,可以使用以下功能:

//longhand

const data = ‘abc abc abc abc abc abc\n\t’

  • ‘test test,test test test test\n\t’

//shorthand

const data = `abc abc abc abc abc abc

test test,test test test test`

22.对象属性分配


let test1 = ‘a’;

let test2 = ‘b’;

//Longhand

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

//Shorthand

let obj = {test1, test2};

23.将字符串转换成数字


//Longhand

let test1 = parseInt(‘123’);

let test2 = parseFloat(‘12.3’);

//Shorthand

let test1 = +‘123’;

let test2 = +‘12.3’;

24.用解构简写


//longhand

const test1 = this.data.test1;

const test2 = this.data.test2;

const test2 = this.data.test3;

//shorthand

const { test1, test2, test3 } = this.data;

25.用Array.find简写


当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时,find方法确实很有用。

const data = [

{

type: ‘test1’,

name: ‘abc’

},

{

type: ‘test2’,

name: ‘cde’

},

{

type: ‘test1’,

name: ‘fgh’

},

]

function findtest1(name) {

for (let i = 0; i < data.length; ++i) {

if (data[i].type === ‘test1’ && data[i].name === name) {

return data[i];

}

}

}

//Shorthand

filteredData = data.find(data => data.type === ‘test1’ && data.name === ‘fgh’);

console.log(filteredData); // { type: ‘test1’, name: ‘fgh’ }

26.查找条件简写


如果我们有代码来检查类型,根据类型需要调用不同的方法,我们可以选择使用多个else ifs或者switch,但是如果我们有比这更好的简写方法呢?

// Longhand

if (type === ‘test1’) {

test1();

}

else if (type === ‘test2’) {

test2();

}

else if (type === ‘test3’) {

test3();

}

else if (type === ‘test4’) {

test4();

} else {

throw new Error('Invalid value ’ + type);

}

// Shorthand

var types = {

test1: test1,

test2: test2,

test3: test3,

test4: test4

};

var func = types[type];

(!func) && throw new Error('Invalid value ’ + type); func();

27.按位索引简写


当我们遍历数组以查找特定值时,我们确实使用 indexOf() 方法,如果找到更好的方法该怎么办?让我们看看这个例子。

//longhand

if(arr.indexOf(item) > -1) { // item found

}

if(arr.indexOf(item) === -1) { // item not found

}

//shorthand

if(~arr.indexOf(item)) { // item found

}
前端资料汇总

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

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

  • 23
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值