ES6 Javascript 小技巧

1. 数组去重
let arr = [1,2,3,4,5,2,323,2,5,3];? let uniqueArr = [...new Set(arr)];
2. 缓存数组长度

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

3. 短路求值

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

return (this.state.data || 'Fetching Data');?//更简洁

4. 转换成布尔值
假值：在 JavaScript 中，除了 0、“”、null、undefined、NaN 和 false 是假值之外，其他的都是真值。

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

5.转换成字符串

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

6. 转换成数字

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

在某些情况下，+ 运算符会被解析成连接操作，而不是加法操作。对于这种情况，可以使用两个波浪号：~~。

一个波浪号表示按位取反操作，例如，~15 等于 -16。

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

7.快速幂运算

从 ES7 开始，可以使用 ** 进行幂运算，比使用 Math.power(2,3) 要快得多。

console.log(2 ** 3); // Result: 8

但要注意不要把这个运算符于 ^ 混淆在一起了，^ 通常用来表示指数运算，但在 JavaScript 中，^ 表示位异或运算。

在 ES7 之前，可以使用位左移运算符 << 来表示以 2 为底的幂运算：

// 以下表达式是等效的:
Math.pow(2, n);
2 << (n - 1);
2**n;

例如，2 << 3 = 16 等同于 2 ** 4 = 16。

8.快速取整

我们可以使用 Math.floor()、Math.ceil() 或 Math.round() 将浮点数转换成整数，但有另一种更快的方式，即使用位或运算符 |。

console.log(23.9 | 0);? // Result: 23
console.log(-23.9 | 0); // Result: -23

| 的实际行为取决于操作数是正数还是负数，所以在使用这个运算符时要确保你知道操作数是正是负。

如果 n 是正数，那么 n|0 向下取整，否则就是向上取整。它会移除小数部分，也可以使用~~ 达到同样的效果。

移除尾部的数字

| 运算符也可以用来移除整数的尾部数字，这样就不需要像下面这样：

let str = "1553";?
Number(str.substring(0, str.length - 1));

相反，我们可以这样：

console.log(1553 / 10? ?| 0)? // Result: 155
console.log(1553 / 100? | 0)? // Result: 15
console.log(1553 / 1000 | 0)? // Result: 1

9. 自动类绑定

在 ES6 中，我们可以使用箭头进行隐式绑定，这样可以为类的构造器省下一些代码，并跟一些重复出现的表达式说再见，比如 this.myMethod = this.myMethod.bind(this)。

import React, { Component } from React;
export default class App extends Compononent {
? constructor(props) {
? super(props);
? this.state = {};
? }
myMethod = () => {
? ? // This method is bound implicitly!
? }
render() {
? ? return (
? ? ? <>
? ? ? ? <div>
? ? ? ? ? {this.myMethod()}
? ? ? ? </div>
? ? ? </>
? ? )
? }
};

10.截取数组

如果你想从一个数组尾部移除某些元素，可以使用一种比 splice() 更快的方法。

例如，如果你知道初始数组的大小，可以像下面这样重新定义它的 length 属性：

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

这显然是一种更简洁的解决方案。不过，我发现 slice() 的运行速度更快，所以，如果你更看重速度，可以像下面这样：

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

11. 获取数组最后的元素

数组的 slice() 方法可以接受负整数，并从数组的尾部开始获取元素。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

12.格式JSON

你之前可能使用过 JSON.stringify，但你是否知道它还可以用来给 JSON 添加缩进？

stringify() 方法可以接受两个额外的参数，一个是函数（形参为 replacer），用于过滤要显示的 JSON，另一个是空格个数（形参为 space）。

space 可以是一个整数，表示空格的个数，也可以是一个字符串（比如’\t’表示制表符），这样得到的 JSON 更容易阅读。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
//? ? ?"alpha": A,
//? ? ?"beta": B
// }'

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »

因本文不是用Markdown格式的编辑器书写的，转换的页面可能不符合AMP标准。