2021年要了解的34种JavaScript简写优化技术（下）

 

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
}
if(!~arr.indexOf(item)) { // item not found
}

 

按位（〜）运算符将返回除-1以外的任何值的真实值。否定它就像做 ~~ 一样简单。另外，我们也可以使用 include() 函数：

if (arr.includes(item)) { 
    // true if the item found
}

 

28.Object.entries()

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

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ '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);
/** Output:
[ 'abc', 'cde']
**/

 

30.双按位简写

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

// Longhand
Math.floor(1.9) === 1 // true

// Shorthand
~~1.9 === 1 // true

 

 

31.重复一个字符串多次

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

//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 

//shorthand 
'test '.repeat(5);

 

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

 

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

 

33.从字符串中获取字符

 

let str = 'abc';

//Longhand 
str.charAt(2); // c

//Shorthand 
Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined
str[2]; // c

 

34.数学指数幂函数的简写

 

//longhand
Math.pow(2,3); // 8

//shorthand
2**3 // 8