关于javascript:JavaScript中的这些骚操作你都知道吗

写这篇文章的原因是上周在公司前端团队的 code review 时，看了一个实习小哥哥的代码后，感觉一些刚入行不久的同学，对于实在我的项目中的一些 js 解决不是很纯熟，不足一些技巧。

因而整顿了本人开发中罕用的一些 js 技巧，灵便的使用，会加强你解决问题的能力，也会对你的代码简洁性有很大的改观。

失常咱们实现数组去重大多都是通过双层遍历或者 indexOf 的形式。

双层 `for` 循环去重

function unique(arr) {for (var i = 0; i < arr.length; i++) {for (var j = i + 1; j < arr.length; j++) {if (arr[i] == arr[j]) {arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

利用 `indexOf` 去重

function unique(arr) {if (!Array.isArray(arr)) {console.log("type error!");
    return;
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {if (array.indexOf(arr[i]) === -1) {array.push(arr[i]);
    }
  }
  return array;
}

但其实有一种更简略的形式：利用 Array.from 与set去重

function unique(arr) {if (!Array.isArray(arr)) {console.log("type error!");
    return;
  }
  return Array.from(new Set(arr));
}

这种代码的实现是不是很简洁 ????

数组转化为对象（`Array to Object`）????

数组转化为对象，大多数同学首先想到的就是这种办法：

var obj = {};
var arr = ["1","2","3"];
for (var key in arr) {obj[key] = arr[key];
}
console.log(obj)

Output:
{0: 1, 1: 2, 2: 3}

然而有一种比较简单疾速的办法：

const arr = [1,2,3]
const obj = {...arr}
console.log(obj)

Output:
{0: 1, 1: 2, 2: 3}

一行代码就能搞定的事件为什么还要用遍历呢？????

有些场景咱们须要针对不同的条件，给变量赋予不同的值，咱们往往会采纳上面这种形式：

const isGood = true;
let feeling;
if (isGood) {feeling = 'good'} else {feeling = 'bad'}
console.log(`I feel ${feeling}`)

Output:
I feel good

然而为什么不采纳三元表达式呢？

const isGood = true;
const feeling = isGood ? 'good' : 'bad'
console.log(`I feel ${feeling}`)

Output:
I feel good

这种也就是所谓的 Single line（单行）思维，其实就是代码趋向于 简洁性。

转换为数字类型（`Convert to Number`）????

这种是很常见的，大家用的比拟多的可能是 parseInt()、Number() 这种：

const age = "69";
const ageConvert = parseInt(age);
console.log(typeof ageConvert);

Output: number;

其实也能够通过 + 来实现转换：

const age = "69";
const ageConvert = +age;
console.log(typeof ageConvert);

Output: number;

转换为字符串类型（`Convert to String`）????

转换为字符串个别会用 toString()、String() 实现：

let a = 123;

a.toString(); // '123'

但也能够通过 value + "" 这种来实现：

let a = 123;

a + ""; //'123'

如果你想测试一段 js 代码的执行耗时，那么你能够尝试下performance：

let start = performance.now();
let sum = 0;
for (let i = 0; i < 100000; i++) {sum += 1;}
let end = performance.now();
console.log(start);
console.log(end);

合并对象（`Combining Objects`）????

两个对象合并大家用的比拟多的可能就是 Object.assign 了：

const obj1 = {a: 1}
const obj2 = {b: 2}
console.log(Object.assign(obj1, obj2))

Output:
{a: 1, b: 2}

其实有一种更简洁的形式：

const obj1 = {a: 1}
const obj2 = {b: 2}
const combinObj = {...obj1, ...obj2}
console.log(combinObj)

Output:
{a: 1, b: 2}

也就是通过 开展操作符 (spread operator) 来实现。

短路运算(`Short-circuit evaluation`) ????

咱们能够通过 && 或||来简化咱们的代码，比方：

if (isOnline) {postMessage();
}
// 应用 &&
isOnline && postMessage();

// 应用 ||
let name = null || "森林";

数组扁平化（`Flattening an array`）????

数组的扁平化，咱们个别会用 递归 或reduce去实现

var arr = [1, [2, [3, 4]]];

function flatten(arr) {var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {if (Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]));
    } else {result.push(arr[i]);
    }
  }
  return result;
}

console.log(flatten(arr));

`reduce`

var arr = [1, [2, [3, 4]]];

function flatten(arr) {return arr.reduce(function (prev, next) {return prev.concat(Array.isArray(next) ? flatten(next) : next);
  }, []);
}

console.log(flatten(arr));

然而 es6 提供了一个新办法 flat(depth)，参数depth，代表开展嵌套数组的深度，默认是1

let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5]

平时咱们实现指数运算，用的比拟多的应该是Math.pow()，比方求2^10：

console.log(Math.pow(2, 10));

在 ES7 中引入了指数运算符 **，** 具备与 Math.pow() 一样的计算结果。

console.log(2 ** 10); // 输入 1024

浮点数转为整数（`Float to Integer`）????

咱们个别将浮点数转化为整数会用到Math.floor()、Math.ceil()、Math.round()。但其实有一个更快的形式：

console.log(~~6.95); // 6
console.log(6.95 >> 0); // 6
console.log(6.95 << 0); // 6
console.log(6.95 | 0); // 6
// >>> 不可对正数取整
console.log(6.95 >>> 0); // 6

也就是应用 ~, >>, <<, >>>, | 这些位运算符来实现取整

如果你有批改数组长度为某固定值的需要，那么你能够试试这个

let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);

Output: [0, 1, 2];

通常，获取数组最初一项，咱们用的比拟多的是：

let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1];
console.log(last);

Output: 5;

但咱们也能够通过 slice 操作来实现：

let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last);

Output: 5;

丑化你的`JSON` ????

日常开发中，咱们会常常用到JSON.stringify，但大家可能并不大清楚他具体有哪些参数。

他有三个参数：

json: 必须，能够是数组或Object
replacer: 可选值，能够是数组，也能够是办法
space: 用什么来进行分隔

而咱们恰好能够指定第三个参数 space 的值去丑化咱们的JSON：

`Object.create(null)` ????

在 Vue 和Vuex的源码中，作者都应用了 Object.create(null) 来初始化一个新对象。为什么不必更简洁的 {} 呢？
咱们来看下 Object.create() 的定义：

Object.create(proto, [propertiesObject]);

proto: 新创建对象的原型对象
propertiesObject: 可选。要增加到新对象的可枚举（新增加的属性是其本身的属性，而不是其原型链上的属性）的属性。

咱们比照别离通过 Object.create(null) 和{}创建对象的不同：

从上图能够看到，通过 {} 创立的对象继承了 Object 本身的办法，如 hasOwnProperty、toString 等，在新对象上能够间接应用。

而应用 Object.create(null) 创立的对象，除了本身属性 a 之外，原型链上没有任何属性。

也就是咱们能够通过 Object.create(null) 这种形式创立一个 污浊 的对象，咱们能够本人定义 hasOwnProperty、toString 等办法，齐全不用放心会将原型链上的同名办法笼罩掉。

日常开发中，数组的拷贝是一个会常常遇到的场景。其实实现数组的拷贝有很多骚技巧。

`Array.slice`

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice();

const arr = [1, 2, 3, 4, 5];
const copyArr = [...arr];

应用 `Array` 构造函数和开展操作符

const arr = [1, 2, 3, 4, 5];
const copyArr = new Array(...arr);

`Array.concat`

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.concat();

开发中有时会遇到多个条件，执行雷同的语句，也就是多个 || 这种：

if (status === "process" || status === "wait" || status === "fail") {doSomething();
}

这种写法语义性、可读性都不太好。能够通过 switch case 或includes这种进行革新。

`switch case`

switch (status) {
  case "process":
  case "wait":
  case "fail":
    doSomething();}

`includes`

const enum = ["process", "wait", "fail"];
if (enum.includes(status)) {doSomething();
}

`Object.freeze()` ????

在 Vue 的文档中介绍数据绑定和响应时，特意标注了对于通过 Object.freeze() 办法的对象无奈进行更新响应。
Object.freeze() 办法用于解冻对象，禁止对于该对象的属性进行批改。

正是因为这种个性，所以在理论我的项目中，他有很多的实用场景。

像一些纯展现类的页面，可能存在微小的数组或对象，如果这些数据不会产生更改，那么你就能够应用 Object.freeze() 将他们解冻，这样 Vue 就不会对这些对象做 setter 或getter的转换，能够大大的晋升性能。

1. 如果感觉这篇文章还不错，来个 分享、点赞、在看 三连吧，让更多的人也看到～

2. 关注公众号 前端森林，定期为你推送陈腐干货好文。

3. 非凡阶段，带好口罩，做好集体防护。

关于javascript:JavaScript中的这些骚操作你都知道吗

引言 ????

数组去重 ????

双层 `for` 循环去重

利用 `indexOf` 去重

数组转化为对象（`Array to Object`）????

正当利用三元表达式 ????‍????‍????

转换为数字类型（`Convert to Number`）????

转换为字符串类型（`Convert to String`）????

性能追踪 ????

合并对象（`Combining Objects`）????

短路运算(`Short-circuit evaluation`) ????

数组扁平化（`Flattening an array`）????

递归

`reduce`

求幂运算 ????

浮点数转为整数（`Float to Integer`）????

截断数组

获取数组中的最初一项 ????

丑化你的`JSON` ????

`Object.create(null)` ????

拷贝数组 ????

`Array.slice`

开展操作符

应用 `Array` 构造函数和开展操作符

`Array.concat`

防止多条件并列 ????

`switch case`

`includes`

`Object.freeze()` ????

❤️ 爱心三连击

Just My Socks（注册教程内含优惠码）

关于javascript:JavaScript中的这些骚操作你都知道吗

引言 ????

数组去重 ????

双层 for 循环去重

利用 indexOf 去重

数组转化为对象（Array to Object）????

正当利用三元表达式 ????‍????‍????

转换为数字类型（Convert to Number）????

转换为字符串类型（Convert to String）????

性能追踪 ????

合并对象（Combining Objects）????

短路运算(Short-circuit evaluation) ????

数组扁平化（Flattening an array）????

递归

reduce

求幂运算 ????

浮点数转为整数（Float to Integer）????

截断数组

获取数组中的最初一项 ????

丑化你的JSON ????

Object.create(null) ????

拷贝数组 ????

Array.slice

开展操作符

应用 Array 构造函数和开展操作符

Array.concat

防止多条件并列 ????

switch case

includes

Object.freeze() ????

❤️ 爱心三连击

Just My Socks（注册教程 内含优惠码）

双层 `for` 循环去重

利用 `indexOf` 去重

数组转化为对象（`Array to Object`）????

转换为数字类型（`Convert to Number`）????

转换为字符串类型（`Convert to String`）????

合并对象（`Combining Objects`）????

短路运算(`Short-circuit evaluation`) ????

数组扁平化（`Flattening an array`）????

`reduce`

浮点数转为整数（`Float to Integer`）????

丑化你的`JSON` ????

`Object.create(null)` ????

`Array.slice`

应用 `Array` 构造函数和开展操作符

`Array.concat`

`switch case`

`includes`

`Object.freeze()` ????

Just My Socks（注册教程内含优惠码）