34种JavaScript简写优化技术，赶紧收藏起来吧

//Longhand

let test1;

let test2 = 1;

//Shorthand

let test1, test2 = 1;

4.Null, Undefined，空检查

---

当我们创建新的变量时，有时我们想检查我们引用的变量的值是否为空或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’

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.如果存在简写

---

这是我们大家都在使用的常用简写之一，但仍然值得一提。

// 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 或 undefined 的检查。

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 === und 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 efined)

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.用解构简写

---