【譯】12個提高你javascript能力的概念

時間 2019-11-07

原文原文鏈接

javascript 是一門複雜的語言。若是你是一名 javascript 開發者，理解它的一些基礎概念是很重要的。本文選取了 12 個 JS 開發者應該掌握的概念，但不表明 JS 開發者須要瞭解的所有內容。javascript

注意：我會在 github 倉庫JS Tips & Tidbits上持續更新這個列表，若是有興趣歡迎 star。java

1. 值 VS 引用

理解 javascript 中如何分配變量的值是寫好代碼的基礎。若是你還不瞭解這些，你可能很容易寫出無心中修改值的代碼。git

javascript 老是按值分配變量。可是請特別注意：當分配的值是 javascript 的 5 種原始類型（boolean null undefined string number）時，是分配的真正的值。而若是分配的值是 Array Function Object時，只會分配該對象在內存中的一個引用。github

舉個例子。在下面的代碼中，var2 被賦值爲 var1。由於 var1 是原始類型（string），var2 的值就是 var1 的值，而且與 var1 是徹底獨立的兩個值，只是它們都是一樣的字符串。或者說，從新給 var2 賦值對 var1 沒有影響。api

let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'
複製代碼

和賦值對象進行比較：數組

let var1 = { name: 'Jim' };
let var2 = var1;
var2.name = 'John';
console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }
複製代碼

若是你指望像分配原始類型那樣的結果，這裏就會出現問題，修改 var2 一樣會影響到 var1。若是你建立了一個無心中修改對象的函數，就可能有難以預料的錯誤。promise

2. 閉包

閉包是 javascript 中很重要的特性，能夠實現變量的私有訪問。在下面的例子中，createGreeter 返回了一個匿名函數，函數能夠訪問外層函數的 greeting 參數。安全

function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
  };
}
const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe
複製代碼

在實際編碼中，你可能但願有一個初始化函數 apiConnect(apiKey) 可以返回某些方法會用到的 apiKey。這種狀況下，apiKey 只須要提供一次便可。閉包

function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  }
  function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
      headers: {
        Authorization: `Bearer ${apiKey}`,
      },
    });
  }
  return { get, post };
}
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });
複製代碼

3. 解構

不要忽略 javascript 的參數解構！這是從對象中乾淨地提取屬性的經常使用方法。app

const obj = {
  name: 'Joe',
  food: 'cake',
};
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'
複製代碼

若是你想將屬性解構成不一樣的名稱，參考下面的語法：

const obj = {
  name: 'Joe',
  food: 'cake',
};
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'
複製代碼

下面的例子中，解構用來乾淨地將 person 對象傳遞給 introduce 函數。或者說，解構能夠（常常）用來提取傳遞給函數的參數的屬性。若是你熟悉 React，你可能見過下面的代碼。

const person = {
  name: 'Eddie',
  age: 24,
};
function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
}
console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"
複製代碼

4. 展開運算符

一個相對簡單的 javascript 概念。下面的例子中，Math.max 不能接收一個數組，而是接收單個值做爲參數。展開運算符...就是用來把數組裏的元素一個一個拉出來。

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
複製代碼

5. 剩餘運算符

說一下 javascript 的剩餘運算符。你能夠用它將任意數量的參數放入一個數組再傳遞給函數。

function myFunc(...args) {
  console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3
複製代碼

6. 數組方法

javascript 的數組方法常常能讓你很優雅、便捷地轉換你想要的數據。我常常看到有關如何以某種方式操縱對象數組的問題。這正是數組方法的可用之處。

我將在這裏介紹一些不一樣的數組方法，以相似的可能會混淆的方法來分類。這個列表並不全面，我鼓勵大家在 MDN 上反覆複習並練習這些方法。

map, filter, reduce

有人可能對這 3 個方法有些混亂。但這些都是轉換數組或返回聚合值的有用方法。

map：返回一個新的數組，其中每一個元素按指定函數進行轉換。

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]
複製代碼

filter：返回一個新的數組，其中只包括回調函數返回 true 的元素。

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]
複製代碼

reduce：累加函數中指定的值。

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21
複製代碼

find, findIndex, indexOf

這三個方法一般會被混爲一談，下面是使用方法：

find：返回與指定條件匹配的第一個元素。不會再尋找其餘匹配的元素。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6
複製代碼

注意，雖然 5 以後的元素都知足條件，但只會返回第一個匹配元素。

findIndex：和 find 的機制基本同樣，只是會返回第一個匹配元素的索引值而不是返回該元素。來看下面的例子：

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1
複製代碼

indexOf：和 findIndex 的機制基本同樣，但它接收一個值而不是一個函數做爲參數。你能夠在只須要簡單的邏輯，不須要使用函數來判斷匹配元素時使用它。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1
複製代碼

push, pop, shift, unshift

這是一組很棒的數組方法，可讓你有針對性地添加或刪除數組中的元素。

push：在數組尾部添加一個元素。會修改原數組，返回添加到數組的元素。

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5
複製代碼

pop：刪除數組的最後一個元素。會修改原數組，返回被刪除的元素。

let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4
複製代碼

shift：刪除數組的第一個元素。會修改原數組，返回被刪除的元素。

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1
複製代碼

unshift：在數組頭部添加一個元素。會修改原數組，不一樣於其餘幾個方法，這個方法返回數組的新的長度。

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7
複製代碼

splice, slice

這 2 個方法會修改數組或返回一個子數組。

splice：經過刪除或替換已存在的元素或插入新的元素來修改原數組的內容。會修改原數組。

下面的例子能夠理解爲：在索引爲 1 的位置移除 0 個元素並插入了元素 b。

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b');
複製代碼

slice：從指定的開始和結束位置返回數組的淺複製副本。若是沒有指定結束位置，返回數組的剩餘部分。重要的是，此方法不修改原數組而是返回所須要的子數組。

let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']
複製代碼

sort

sort：基於提供的函數對數組進行排序，該函數接收 2 個參數，表明須要排序的 2 個數組元素。會修改原數組。若是函數返回負值或 0，元素順序保持不變，返回正值，對調元素位置。

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]
複製代碼

你是否已經所有理解了呢？我尚未。事實上，我在寫這篇文章的時候也常常參考 MDN 文檔——不要緊！只要知道有什麼樣的方法就能夠了。

7. Generators

不要懼怕*。生成器函數指定了下次調用next()時會迭代什麼值。能夠進行有限次數的迭代，也能夠在循環中進行無限次數的迭代。

function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}
const greet = greeter();
console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined
複製代碼

無限迭代：

function* idCreator() {
  let i = 0;
  while (true) yield i++;
}
const ids = idCreator();
console.log(ids.next().value);
// 0
console.log(ids.next().value);
// 1
console.log(ids.next().value);
// 2
// etc...
複製代碼

8. === VS ==

確信你已經瞭解了===與==的差別。在進行比較時，==會進行類型轉換，===則不會。

console.log(0 == '0');
// true
console.log(0 === '0');
// false
複製代碼

9. 比較對象

一個 javascript 新手常犯的錯誤就是直接比較對象。變量指向對象在內存中的引用，而不是對象自己。比較變量的一個方法是將它們轉換爲 JSON 字符串。固然這樣會有缺點：不能保證對象屬性的順序。更安全的方式是使用第三方庫中專用的比較方法來比較（lodash.isEqual）。

下面的對象看着是同樣的，但其實它們指向不一樣的引用。

const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };
console.log(joe1 === joe2);
// false
複製代碼

反過來講，下面的比較結果爲 true，由於變量被直接賦值爲相同的值，都指向同一個引用（在內存中只有一個對象）。

const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true
複製代碼

複習下以前的值 VS 引用章節，保證能徹底理解將一個引用變量賦值給其餘變量時，實際上是賦值了內存中同一對象的相同引用給其餘變量。

10. 回調函數

許多人都會被 javascript 的回調函數嚇到！其餘它們很簡單，來看例子。console.log做爲回調函數傳遞給了myFunc。當計時器就緒時執行。

function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world!'
複製代碼

11. Promises

一旦你理解的回調函數，你就會陷入回調地獄。而後 Promises 解決了問題。在 Promise 中包裹你的異步邏輯，成功時調用 resolve，失敗時調用 reject。使用 then 來處理成功狀態，使用 catch 來處理異常狀態。

const myPromise = new Promise(function(res, rej) {
  setTimeout(function() {
    if (Math.random() < 0.9) {
      return res('Hooray!');
    }
    return rej('Oh no!');
  }, 1000);
});
myPromise
  .then(function(data) {
    console.log('Success: ' + data);
  })
  .catch(function(err) {
    console.log('Error: ' + err);
  });

// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"
複製代碼

12. Async Await

一旦你掌握了 Promises，你就會喜歡async/await，它是基於 promises 的語法糖。下面的例子中咱們使用了 async 函數，在函數裏使用了 await 來處理greeter。

const greeter = new Promise((res, rej) => {
  setTimeout(() => res('Hello world!'), 2000);
});
async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}
myFunc();
// 'Hello world!'
複製代碼