2021年要了解的34中javascript优化技术

小丑同学

发布于 2021-01-08 10:18:21

6460

发布于 2021-01-08 10:18:21

文章被收录于专栏：小丑的小屋小丑的小屋

作者｜Atit译者｜小丑

您可能已经进行了很久的Javascipt开发，但有时你可能没有编写一些额外最近的代码去解决你的问题。这些技术可以帮助你编写干净并且优化你的Javascript代码。此外，这些主题可以帮助你为2021年的Javascipt面试做好准备。

在这里，我将提供一个新系列，即简短写法。这些简短的写法可帮助我们编写更干净和优化Javascipt代码。这是您在2021年必须知道的Javascript编码的备忘录。

1.如果有多个条件

我们可以在数组中存储多个值，并且可以使用数组的include方法。

//原写法
if(x==='abc'||x==='def'||x==='ghi'||x==='jkl'){
   /***一些代码***/
}

//简写
if(['abc','def','ghi','jkl'].includes(x)){
   /***一些代码***/
}

2.如果为true...否则为简写

当我们具有不包含更大逻辑的if-else条件时，这是一个更大的捷径。我们可以简单地使用三元运算符来实现这个简写

//原写法
var test:boolean;

if(x>100){
   test= true
}else{
   test = false;
}

//简写
var test = (x>10)?true:false;

console.log(test);

当我们有嵌套条件时,我们可以采用这种方式：

var x = 300,
    test = (x>100)?'大于100 100':(x<50)?'小于50'：'在50和100之间'；
console.log(test)   //大于100

3.声明变量

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

//原写法
let test1 = 1;
let test2 = 1;

//简写
let test1，test2 = 1;
//相同类型


//原写法
let test1:boolean;
let test2:boolean;

//简写
let test1,test2:boolean;

4.null,undefined,''值判断

当我们确实创建新变量时,有时我们想检查为其值引用的变量是否为null,undefind或者''值。Javascript确实具有实现这些功能的非常好的捷径。

//惯用语
if（test1！== null || test1！==未定义|| test1！==''）{ 
    var test2 = test1; 
}
//简写
var test2 = test1 || '';

5.空值检查和分配默认值

var test1 = null，
    test2 = test1 || '';
console.log（“ null check”，test2）; //输出：''（空字符串）

6.未定义值检查和分配默认值

var test1 =undefined，
    test2 = test1 || '';
console.log（“ undefined check”，test2）; //输出：''（空字符串）；
正常值检查

正常值检查

var test1 ='test'，
    test2 = test1 || '';
console.log（test2）; //输出：“ test”

7.给多个变量赋值

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

//原写法
let test1，test2，test3; 
test1 = 1; 
test2 = 2; 
test3 = 3;

//简写
let [test1，test2，test3] = [1,2,3];

8.赋值运算符的简写

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

// 原写法 
test1 = test1 + 1; 
test2 = test2-1- 
test3 = test3 * 10;

//简写
test1 ++; 
test2--; 
test3 * = 10;

9.if判断简写

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

//原写法
if（test1 === true）

//简写
if（test1）

如果我们有相反的条件

var test1; 
if（test1！== true）{ 
   //做某事... 
} 
//简写
var test1; 
if（！test1）{ 
   //做某事... 
}

10.多个条件的and（&&）运算符

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

//原写法
if（test1）{ 
callMethod（）; 
} 
//简写
test1 && callMethod（）;

11. foreach循环简写

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

//原写法
for（var i = 0; i <testData.length; i ++）

//简写
for（var i in testData ）

遍历数组中的每一项

function testData（element，index，array）{ 
  console.log（'test ['+ index +'] ='+ element）; 
} 
[1、2、3] .forEach（testData）; 
//console.log：test [0] = 1，test [1] = 2，test [2] = 3

12.比较return

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

//原写法
if（!(test == undefined））{
return test;
} else { 
return callMe（'test'）; 
}

//简写
return ret || callMe（'test'）;

13.箭头功能

//原写法
函数add（test1，test2）{ 
   return test1 + test2; 
} 
//简写
const add =（test1，test2）=> test1 + test2;

更多示例：

function callMe（name）{ 
  console.log（'Hello'，name）; 
}

callMe = name => console.log（'Hello'，name）;

14.短函数调用

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

//原写法
function test1（）{ 
  console.log（'test1'）; 
};
function test2（）{ 
  console.log（'test2'）; 
};
var test3 = 1; 
if（test3 == 1）{ 
  test1（）; 
}else{ 
  test2（）; 
}

//简写
（test3 === 1？test1：test2）（）;

15.切换简写

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

//长手
switch（data）{
 case 1：
    test1（）; 
  break; 
 case 2：
    test2（）; 
  break; 
 case 3：
    test（）; 
  break; 
  //依此类推... 
} 
//简写
var data = { 
  1：test1，
  2：test2，
  3：test 
}; 
data[something] &&data[something]（）;

16.隐藏return简写

使用箭头功能，我们可以直接返回值，而不必编写return语句。

//原写法：
function calcCircumference（diameter）{
 return Math.PI *diameter
}

//简写
calcCircumference =diameter=>（
  Math.PI *diameter; 
）

17.小数变指数

// 原写法
for（var i = 0; i <10000; i ++）{...} 

//简写 
for（var i = 0; i <1e4; i ++）{...}

18.默认参数值

//原写法
function add（test1，test2）{ 
  if（test1 === undefined）
    test1 = 1; 
  if（test2 ===undefined）
    test2 = 2; 
return test1 + test2; 
}

//简写
add=（test1 = 1，test2 = 2）=>（test1 + test2）;
add（）//输出：3

19.点差运算符简写

//原写法
//使用concat连接数组 
const data = [1，2，3];
const test = [4，5，6] .concat（data）;
//简写
//连接数组
const data = [1、2、3]; 
const test = [4，5，6，... data]; 
console.log（test）; // [4，5，6，1，2，3]

对于克隆，我们也可以使用点差运算符。

// 原写法
//复制数组
const test1 = [1、2、3]; 
const test2 = test1.slice（）

//简化
//复制数组
const test1 = [1、2、3]; 
const test2 = [... test1];

20.模板文字

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

//原写法
const welcome = 'Hi ' + test1 + ' ' + test2 + '.'
//简写
const welcome = `Hi ${test1} ${test2}`;

21.多行字符串速记

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

//原写法
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'
//简写
const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse`

22.对象属性分配

let test1 ='a'; 
let test2 ='b';
// 原写法 
let obj = {test1：test1，test2：test2}; 
//简写
let obj = {test1，test2};

23.字符串成数字

//原写法
let test1 = parseInt（'123'）; 
let test2 = parseFloat（'12.3'）;

//简写
let test1 = +'123'; 
let test2 = + '12.3';

24.解构

//原写法
const test1 = this.data.test1; 
const test2 = this.data.test2; 
const test2 = this.data.test3;

//简写
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];
        }
    }
}
//简写
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

26.查找条件速记

如果我们有代码来检查类型，并且根据类型需要调用不同的方法，我们可以选择使用多个else if或进行切换，但是如果我们的速记比这更好呢？

// 原写法
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);
}
// 简写
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
 
var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

27.速记按位索引

当我们迭代数组以查找特定值时，我们确实使用**indexOf（）**方法，如果我们找到更好的方法呢？让我们来看看这个例子。

//原写法
if（arr.indexOf（item）> -1）{//找到项目 }
if（arr.indexOf（item）=== -1）{//找不到项目}
  
//简写
 if（〜arr.indexOf（item））{//找到的项目}
 if（!〜arr.indexOf（item））{//找不到项目}

除了以外bitwise(~)，运算符将返回真实值-1。否定它就像这样做一样简单!~。另外，我们也可以使用以下includes()功能：

if（arr.includes（item））{ 
//如果找到该项目，则为true 
}

28. Object.entries（）

此功能有助于将对象转换为对象数组。

const data = {test1：'abc'，test2：'cde'，test3：'efg'}; 
const arr = Object.entries（data）; 
console.log（arr）;
/ **输出：
[['test1'，'abc']，
  ['test2'，'cde']，
  ['test3'，'efg'] 
] 
** /

29. Object.values（）

这也是ES8中引入的新功能，其功能与相似Object.entries()，但没有关键部分：

const data = {test1：'abc'，test2：'cde'}; 
const arr = Object.values（data）; 
console.log（arr）;
/ **输出：['abc'，'cde'] ** /

30. Double Bitwise简写

（双重NOT按位运算符方法仅适用于32位整数）

// 原写法
Math.floor（1.9）=== 1 // true 

//简写
~~ 1.9 === 1 // true

31.重复一个字符串多次

要一次又一次地重复相同的字符，我们可以使用for循环并将它们添加到同一循环中，但是如果我们有一个简写方法呢？

// 原写法
let test =''; 
for（让i = 0; i <5; i ++）{ 
  test + ='test'; 
} 
console.log（str）; //测试测试测试测试测试
//简写
'test'.repeat（5）;

32.在数组中查找最大值和最小值

const arr = [1,2,3]; 
Math.max（... arr）; // 3 
Math.min（…arr）; // 1

33.从字符串中获取字符

let str ='abc'; 
//原写法
str.charAt（2）; // c 
//简写
str [2]; // C

34.幂函数简写

数学指数幂函数的简写：

//原写法
Math.pow（2,3）; // 8
//简写
2 ** 3 // 8

总结

我们终于学会了使用现代Javascript技术优化代码的34种方法块去使用它吧。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-01-04，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

javascript

本文分享自小丑的小屋微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

javascript

登录后参与评论

0 条评论

热度