js 的一些簡寫

數組去重 Set()

Set類似於數組，區別在於它所有的成員都是唯一的，不能有重複的值

function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe([1,1,2,3])  // [1, 2, 3]

set對象的方法

set方法詳情點這裏

方法	描述
add	添加某個值，返回Set對象本身。
clear	刪除所有的鍵/值對，沒有返回值。
delete	刪除某個鍵，返回true。如果刪除失敗，返回false。
forEach	對每個元素執行指定操作。
has	返回一個布爾值，表示某個鍵是否在當前 Set 對象之中。

由於擴展運算符（…）內部使用 for…of 循環也可以用它取出參數對象的所有可遍歷屬性，拷貝到當前數組之中

function dedupe(array) {
  return  [...new Set(array)];
}
dedupe([1,1,2,3])  // [1, 2, 3]

小數取整

_{是按位取反的意思，計算機裏面處理二進制數據時候的非，}~就是再轉回來，利用兩個按位取反的符號，進行類型的轉換，轉換成number類型，並向下取整。

var num = 123.123
// 常用方法
console.log(parseInt(num)); // 123
// “雙按位非”操作符
console.log(~~ num); // 123
// 按位或
console.log(num | 0); // 123
// 按位異或
console.log(num ^ 0); // 123
// 左移操作符
console.log(num << 0); // 123

~~的一些測試

下面的輸出結果都是true

~~true == 1
~~false == 0
~~"" == 0
~~[] == 0
~~undefined ==0
~~!undefined == 1
~~null == 0
~~!null == 1

多維數組一行代碼實現一維轉換

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
var resultArr = arr.toString().split(',').map(Number);

console.log(resultArr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

對象屬性簡寫

如果屬性名與key名相同，則可以採用ES6的方法：

const obj = { x:x, y:y };

簡寫爲

const obj = { x, y };

十進制指數

當數字的尾部爲很多的零時（如10000000），咱們可以使用指數（1e7）來代替這個數字，例如：

for (let i = 0; i < 10000; i++) {}

可以簡寫爲：

for (let i = 0; i < 1e7; i++) {}
// 下面都是返回 true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

Object.keys()、 Object.values()、Object.entries()

可以把一個對象的鍵值以數組的形式遍歷出來，但不會遍歷原型屬性。

function A() {
	this.a = 1
	this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
var keys = Object.keys(a)
var values = Object.values(a)
var et = Object.entries(a)
console.log(et)//[['a':1],['b':1]]
console.log(keys,values)//['a','b'][1,1]

循環語句 for of

for…of 語句創建一個循環來迭代可迭代的對象。在 ES6 中引入的 for…of 循環，以替代 for…in 和 forEach() ，並支持新的迭代協議。for…of 允許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數據結構等

for (let i = 0; i < allImgs.length; i++)

簡寫爲：

for (let i of allImgs)

• i：每個迭代的屬性值被分配給該變量。

• allImgs ：一個具有可枚舉屬性並且可以迭代的對象。

for…in 和 for…of的區別

1、for…in遍歷key值，for…of遍歷value值。

2、for…in可以遍歷對象或者數組，但是一般不推薦遍歷數組，for…of不能遍歷普通對象。

聲明變量

在申明多個變量時：

let x;

let y;
let z = 3;

可以簡寫爲：

let x, y, z=3;

多行字符串

用反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

用法

// 普通字符串
`In JavaScript '\n' is a line-feed.`
 
// 多行字符串
`In JavaScript this is
not legal.`
 
// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`   // Hello Bob, how are you today?

上面代碼中，模板字符串都是用反引號表示，如果在模板字符串中需要使用反引號，則前面需要用反斜槓轉義。

var greeting = `\`Yo\` World!`; // `Yo` World!

如果使用模板字符串表示多行字符串，則所有的空格、縮進和換行都會被保留在輸出中。

var a = `
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`
console的輸出結果如下：
"
<ul>
  <li>first</li>
  <li>second</li>
</ul>
"

上面代碼中，所有模板字符串的空格和換行都是被保留的，比如

標籤前面會有一個換行。如果想把行首和行尾的換行、空格等去掉，則使用trim方法即可。

對象屬性簡寫

ES6 提供了一個很簡單的辦法，來分配屬性的對象。如果屬性名與 key 名相同，則可以使用簡寫。

const obj = { x:x, y:y };

簡寫爲：

const obj = { x, y };

隱式返回值

返回值是我們通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數，可以隱式返回結果（函數必須省略括號（{ }），以便省略返回關鍵字）。

要返回多行語句（例如對象文本），需要使用（）而不是{ }來包裹函數體。這樣可以確保代碼以單個語句的形式進行求值。

function calcCircumference(diameter) {

return Math.PI * diameter
}

簡寫爲：

calcCircumference = diameter => (

Math.PI * diameter;
)

默認參數值

可以使用 if 語句來定義函數參數的默認值。ES6 中規定了可以在函數聲明中定義默認值。

function volume(l, w, h) {

if (w === undefined)
w = 3;

if (h === undefined)
h = 4;

return l /* w /* h;
}

簡寫爲：

volume = (l, w = 3, h = 4 ) => (l /* w /* h);

volume(2) //output: 24

解構賦值

解構賦值是一種表達式，用於從數組或對象中快速提取屬性值，並賦給定義的變量。

在代碼簡寫方面，解構賦值能達到很好的效果。

const observable = require('mobx/observable');
const action = require('mobx/action');

const runInAction = require('mobx/runInAction');
const store = this.props.store;

const form = this.props.form;
const loading = this.props.loading;

const errors = this.props.errors;
const entity = this.props.entity;

簡寫爲：

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

甚至可以指定自己的變量名：

const { store, form, loading, errors, entity:contact } = this.props;

展開運算符

展開運算符,將一個數組轉爲用逗號分隔的參數序列， 通俗一點說就是吧數組拆分爲它的每一個內容。

使用展開運算符可以替換某些數組函數。

// joining arrays

const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];

const arr2 = arr.slice( )

var a = [1,2,3];
Math.min.apply(null,a);
console.log(a);//1

簡寫爲：

// joining arrays
const odd = [1, 3, 5 ];

const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];

const arr2 = [...arr];
var a = [1,2,3];
Math.min(...a);
console.log(a);//1

和 concat( ) 功能不同的是，用戶可以使用擴展運算符在任何一個數組中插入另一個數組。

const odd = [1, 3, 5 ];

const nums = [2, ...odd, 4 , 6];

也可以將展開運算符和 ES6 解構符號結合使用：

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };

console.log(a) // 1

console.log(b) // 2

console.log(z) // { c: 3, d: 4 }

Array.find

該方法主要應用於查找第一個符合條件的數組元素。它的參數是一個回調函數。在回調函數中可以寫你要查找元素的條件，當條件成立爲true時，返回該元素。如果沒有符合條件的元素，返回值爲undefined

const pets = [
{ type: 'Dog', name: 'Max'},

{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},

]
function findDog(name) {

for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {

return pets[i];
}

}
}

簡寫爲：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');

console.log(pet); // { type: 'Dog', name: 'Tommy' }

回調函數有三個參數。

• value：當前的數組元素。
• index：當前索引值。
• arr：被查找的數組。