2021年不可错过的17种JS优化技巧（二）

怼烎@ 2022-10-09 12:26 160阅读 0赞

![129c46f20984fa02f0c92b04ae6c11ac.png][]

## 1.指数表示法 ##

// Longhand
    for (var i = 0; i < 10000; i++) { ... }
    // Shorthand
    for (var i = 0; i < 1e4; i++) {

## 2. 默认参数值 ##

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

## 3.延展操作符简化 ##

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

## 4.模板字面量 ##

如果你厌倦了使用 + 将多个变量连接成一个字符串，那么这个简化技巧将让你不再头痛。

//longhand
    const welcome = 'Hi ' + test1 + ' ' + test2 + '.'
    //shorthand
    const welcome = `Hi ${test1} ${test2}`;

## 5.跨行字符串 ##

当我们在代码中处理跨行字符串时，可以这样做。

//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`

## 6.对象属性赋值 ##

let test1 = 'a'; 
    let test2 = 'b';
    //Longhand 
    let obj = {test1: test1, test2: test2}; 
    //Shorthand 
    let obj = {test1, test2};

## 7.将字符串转成数字 ##

//Longhand 
    let test1 = parseInt('123'); 
    let test2 = parseFloat('12.3'); 
    //Shorthand 
    let test1 = +'123'; 
    let test2 = +'12.3';

## 8.解构赋值 ##

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

## 9.数组 find 简化 ##

当我们有一个对象数组，并想根据对象属性找到特定对象，find 方法会非常有用。

## 10.条件查找简化 ##

如果我们要基于不同的类型调用不同的方法，可以使用多个 else if 语句或 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();

## 10.indexOf 的按位操作简化 ##

在查找数组的某个值时，我们可以使用 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
    }
    按位 (~) 运算符将返回 true（-1 除外），反向操作只需要!~。另外，也可以使用 include() 函数。
    
    if (arr.includes(item)) { 
    // true if the item found
    }

## 11.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' ]
    ]
    **/

## 12.Object.values() ##

这也是 ES8 中引入的一个新特性，它的功能类似于 Object.entries()，只是没有键。

const data = { test1: 'abc', test2: 'cde' };
    const arr = Object.values(data);
    console.log(arr);
    /** Output:
    [ 'abc', 'cde']
    **/

## 13.双重按位操作 ##

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

## 14.重复字符串多次 ##

为了重复操作相同的字符，我们可以使用 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);

## 15.查找数组的最大值和最小值 ##

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

## 16.获取字符串的字符 ##

let str = 'abc';
    //Longhand 
    str.charAt(2); // c
    //Shorthand 
    str[2]; // c

## 17.指数幂简化 ##

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

## 最后 ##

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。（本文资料 适合0-2年）

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

![d74f8b42f4a63c76b18efc6a818147df.png][]

![6deb905d9655a3f0f54b8920686e1970.png][]

**前端面试题汇总**

![1471537bfd3f5a483690ca477fd3f2b9.png][]

**JavaScript**

![7796de226b373d068d8f5bef31e668ce.png][]

**性能**

![d7f6750332c78eb27cc606540cdce3b4.png][]

**linux**

![ed368cc25284edda453a4c6cb49916ef.png][]

**前端资料汇总**

![6e0ba223f65e063db5b1b4b6aa26129a.png][]

#### 完整版PDF资料免费分享，只需你点赞支持，[动动手指点击此处就可免费领取了][Link 1]。 ####

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

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

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。

最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿

[129c46f20984fa02f0c92b04ae6c11ac.png]: /images/20221005/755b45ac2ec04bc8b17221aa25f4847b.png
[d74f8b42f4a63c76b18efc6a818147df.png]: /images/20221005/eaf7d13939a645198acf31118ddf6662.png
[6deb905d9655a3f0f54b8920686e1970.png]: /images/20221005/d77ad0d777214561a02c6e4e6d4dc6e5.png
[1471537bfd3f5a483690ca477fd3f2b9.png]: /images/20221005/7c0989ab23a3401bb9d905f8b8f43a25.png
[7796de226b373d068d8f5bef31e668ce.png]: /images/20221005/4c87ddc328d24da6b154689d09483e3d.png
[d7f6750332c78eb27cc606540cdce3b4.png]: /images/20221005/582310c75ac94bb49e38811d37748cbb.png
[ed368cc25284edda453a4c6cb49916ef.png]: /images/20221005/e3072aad72914f50b367e3b047822251.png
[6e0ba223f65e063db5b1b4b6aa26129a.png]: /images/20221005/7bfe83d5ef2a4e779d895e4dc9149c28.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=VIWqVeW1