JS操做小技巧，工做簡單了

1、Optional Chaining

在javaScript中，對象的屬性鏈訪問，很容易由於某一個屬性不存在出現 Cannot read property 'xxx' of undefined的問題，那麼Optional Chaining就添加了?.操做符，它會先判斷前面的值，若是undefined或者null，就結束後面的調用，直接返回undefined;

1.1 訪問深度嵌套的屬性

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
                   // `bar` exists

// Example usage with bracket notation:
obj?.['foo']?.bar?.baz // 42
複製代碼

1.2 調用深層嵌套的函數

const obj = {
  foo: {
    bar: {
      baz() {
        return 42;
      },
    },
  },
};

const baz = obj?.foo?.bar?.baz(); // 42

const safe = obj?.qux?.baz(); // undefined
const safe2 = obj?.foo.bar.qux?.(); // undefined

const willThrow = obj?.foo.bar.qux(); // Error: not a function

// Top function can be called directly, too.
function test() {
  return 42;
}
test?.(); // 42

exists?.(); // undefined
複製代碼

1.3 構造深層嵌套的類

const obj = {
  foo: {
    bar: {
      baz: class {
      },
    },
  },
};

const baz = new obj?.foo?.bar?.baz(); // baz instance

const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined

const willThrow = new obj?.foo.bar.qux(); // Error: not a constructor

// Top classes can be called directly, too.
class Test {
}
new Test?.(); // test instance

new exists?.(); // undefined
複製代碼

1.4 安裝使用

• 安裝：

npm install --save-dev @babel/plugin-proposal-optional-chaining
yarn add @babel/plugin-proposal-optional-chaining --dev
複製代碼

• 配置.babelrc：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}
複製代碼

2、隨機生成字母和數組的組合

Math.random().toString(36).substr(2);
複製代碼

3、轉換布爾值

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

4、轉換數字

const number = '10';
number = +number;
console.log(number); // 10
複製代碼

const number = '10';
number = ~~number;
console.log(number); // 10
複製代碼

5、替代Math.pow

console.log(Math.pow(2, 3));
// 替代1
console.log(2 ** 3);
// 替代二，只能以二做爲基數
console.log(2 << (3 - 1));
複製代碼

6、快速浮點數轉整數

console.log(10.9 | 0);  // 10
console.log(-10.9 | 0); // 10
複製代碼

console.log(~~10.9);
console.log(~~-10.9); 
複製代碼

7、數組降維度

二維數組

let arr = [ [1], [2], [3] ];
arr = Array.prototype.concat.apply([], arr);
console.log(arr);// [1, 2, 3]

let array = [ [1], [2], [3] ];
array = array.flat(2);
console.log(array); // [1, 2, 3]
複製代碼

多維數組

let arrMore = [1, 2, [3], [[4]]];
arrMore = arrMore.flat(Infinity);
console.log(arrMore);
複製代碼

8、判斷小數是否相等

console.log(0.1 + 0.2  === 0.3); // false
複製代碼

function equal(number1, number2) {
    return Math.abs(number1 - number2) < Math.pow(2, -52);
}
console.log(equal(0.1 + 0.2, 0.3));
複製代碼

9、判斷變量是不是數組

1. instanceof
2. array.__proto__.constructor === Array
3. array.constructor === Array
4. Array.isArray（兼容性問題）
5. Object.prototype.toString.call([]) === "[object Array]"（最通用）
複製代碼

PS：instanceof和constructor判斷的變量，必須在當前頁面聲明。例如：父頁面是一個框架，框架中引入一個頁面（子頁面），在子頁面中申明的array，並將其複製給父元素的一個變量，這時instanceof和constructor判斷該變量，將返回false。 ----------------------------------------------------------------------------------------------------------------- 緣由： array是複合類型。在傳遞的過程當中，僅僅是引用地址的傳遞。 每一個頁面的array原生對象引用的地址是不同的，在子頁面中聲明的array，所對應的構造函數，是子頁面的array對象，在父頁面進行判斷時，使用的並非子頁面的array。

10、數組佔位

let array = Array(3).fill('');
console.log(array); //["", "", ""]
複製代碼

11、數組去重多重方式

11.1 Set(最經常使用)

Array.prototype.unique = function() {
    return [...new Set(this)];
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
複製代碼

11.2 Map

Array.prototype.unique = function() {
    const tmp = new Map();
    return this.filter(item => {
        return !tmp.has(item) && tmp.set(item, 1);
    })
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
複製代碼

11.3 Array.prototype.indexOf()

Array.prototype.unique = function() {
    return this.filter((item, index) => {
        return this.indexOf(item) === index;
    })
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
複製代碼

11.4 Array.prototype.includes()

Array.prototype.unique = function() {
    const newArray = [];
    this.forEach(item => {
        if (!newArray.includes(item)) {
            newArray.push(item);
        }
    });
    return newArray;
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
複製代碼

11.5 Array.prototype.reduce()

Array.prototype.unique = function() {
    return this.sort().reduce((init, current) => {
        if (init.length === 0 || init[init.length - 1] !== current) {
            init.push(current);
        }
        return init;
    }, []);
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();

複製代碼

12、短路運算(&& ||)

使用&&將返回第一個條件爲假的值。若是每一個操做數的計算值都爲true，則返回最後一個計算過的表達式。

let one = 1, two = 2, three = 3;
console.log(one && two && three); // 3
console.log(0 && null); // 0
複製代碼

使用||將返回第一個條件爲真的值。若是每一個操做數的計算結果都爲false，則返回最後一個計算過的表達式。

let one = 1, two = 2, three = 3;
console.log(one || two || three); // 1
console.log(0 || null); // null
複製代碼

十3、過濾空值

let result1 = [1, 2, 0, undefined, null, false, ''].filter(Boolean);
console.log(result1);
複製代碼

十4、建立空對象

let dict = Object.create(null);
複製代碼

十5、合併對象

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };
const summary = { ...person, ...tools, ...attributes };
console.log(summary);
複製代碼

十6、字符串去空格

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
複製代碼

十7、對象轉換爲數組

var argArray = Array.prototype.slice.call(arguments);
複製代碼

十8、逗號操做符

var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  
console.log(b);
複製代碼

十9、 localStorage.getItem('key') === localStorage.key

來源: 沉末_評論。

localStorage.setItem('item', 1);
localStorage.getItem('item') === localStorage.item;
複製代碼

二10、從一堆文本中獲取手機號

來源: 飛蛾撲火評論。

([\s,，、]*)?((手機|聯繫方式|電話|聯繫人)號?)?(號碼)?([、:：\s]*)?(?:[\s(（]*?\+?(86)?[\s)）]*)(1\d{2})(?:[-\s]*)(\d{4})(?:[-\s]*)(\d{4})(?=\D|$)
複製代碼

評論出你的「奇人異巧」，讓你們都學習。

參考：

• @ babel / plugin-proposal-optional-chaining
• 解鎖多種JavaScript數組去重姿式
• 大部分學習視頻都不會教的11個JS技巧
• 8 個實用的 JavaScript 技巧