使用 es6寫更加簡潔的 js程式碼

ECMAScript JavaScript · 發表 2018-12-09 01:33:11

摘要：使用新語法配合 babel 的轉碼，已經可以解決一些瀏覽器的相容問題了。既然如此，那就可以在具體的業務中多使用新語法去探索一下怎麼更好的去寫程式碼吧。分享下個人開發中整理的常用的 js 寫法技巧使用 let / const var 命令會發生”變數提升“現象，即變數可以在宣告之前使用...

使用新語法配合 babel 的轉碼，已經可以解決一些瀏覽器的相容問題了。既然如此，那就可以在具體的業務中多使用新語法去探索一下怎麼更好的去寫程式碼吧。分享下個人開發中整理的常用的 js 寫法技巧

使用 let / const

var 命令會發生”變數提升“現象，即變數可以在宣告之前使用，值為 undefined。個人認為，對宣告的變數確定後面不會發生更改時，使用 const, 這樣程式碼的可讀性也會增強。

const 實際上保證的，並不是變數的值不得改動，而是變數指向的那個記憶體地址所儲存的資料不得改動。
let 變數指向的記憶體地址，儲存的只是一個指向實際資料的指標

補充 const 定義的變數不是資料不可變，而是儲存的引用地址不能發生改變。例子如下：
const person = { age: 22 }
person.age = 1

console.log(person.age ) // 1
複製程式碼

解構賦值

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。

好處是：解決了訪問多層巢狀的物件或陣列的命名，減少程式碼量

宣告多個變數:

let [age, name, sex] = [22, 'paopao', 1]
console.log(age, name, sex) // 22, paopao, 1
複製程式碼

使用在物件中：

const obj = {
name: {
firstName: 'da',
lastName: 'paopao'
}
}
const { firstName, lastName } = obj.name // 如果我們多處使用 firstName， 那就不必要每個地方都寫 obj.name.firstName, 極大提升程式碼效率
// 等同於
const firstName = obj.name.firstName
const lastName = obj.name.lastName
複製程式碼

使用在函式中

// 在引數中結構賦值，獲取引數, 當引數多的使用時候十分方便
function Destructuring({ name, age }) {
return { name, age } // 相當於 { name: name, age: age } , 可以簡寫
}

const obj = { name: 'dapaopao', age: 22 }
Destructuring(obj)
複製程式碼

擴充套件符的運用

es6 擴充套件符有很多用法，他可以使你的程式碼更加簡潔，易懂。這裡就舉例常用的用法

在物件中的用法：

let obj = {
name: 'dapaopao',
age: 22,
sex: 1
}

// 複製物件。擴充套件符為淺複製！！！
const copy = { ...obj }

// 修改物件屬性值(生成新物件) 相當於 Object.assgin({}, obj, { age: 18 })
const newObj = { ...obj, age: 18 }

// 結合結構賦值
let { sex, ...z } = obj
z // { name: 'dapaopao', age: 22 }
複製程式碼

在陣列中的用法：

const arr = [1, 2, 3]
const arr2 = [4, 5, 6, 4]

// 複製陣列。擴充套件符為淺複製！！！
const newArr = [...arr] // ...[1, 2, 3] => 相當於展開陣列：1, 2, 3

// 合併陣列
const conbineArr = [...arr, ...arr2]

// 結合求最大值函式
Math.max(...arr)

// 結合 Set 實現陣列去重。注意：json 等物件陣列不可用
[...new Set(arr2)] // [4, 5, 6]
複製程式碼

陣列用法

const arr = [1, 2, 3, 4]

Array.isArray(arr) // 判斷是否為陣列

arr.includes(2) // true 判斷陣列中是否包含某項

arr.findIndex(d => d === 3) // 2 找出第一個符合條件的陣列成員並返回陣列下標, 找不到返回 -1

arr.find(d => d === 3) // 3 找出第一個符合條件的陣列成員並返回, 找不到返回 undefined

// es5 其他還有 filter map forEach 等，這裡不做舉例。
arr.every(d => d > 2) // false 每一項都滿足條件則返回 true

arr.some(d => d > 2) // true 只要有一項滿足條件則返回 true
複製程式碼

find/findIndex : 找出第一個符合條件的陣列成員之後不再匹配，一定程度下優化查詢。 includes: 返回 true/false, 相較於 indexOf, 實用多了

flat() : 扁平化陣列，常用於將陣列轉化為一維陣列

const arr = [1, 2, [3, 4]]

arr.flat() // [1, 2, 3, 4] 扁平化陣列, 預設展開一層。

const arr2 = [1, 2, [3, 4, [5, 6]]]

arr2.flat() // [1, 2, 3, 4, [5, 6]]
arr2.flat(2) // [1, 2, 3, 4, 5, 6] flat(3) 也是展開兩層...
複製程式碼

flatMap(): 在陣列執行 map 方法後執行 flat, 用的不多，其實可以寫 map 後寫 flat 更好懂點。

[2, 3, 4].flatMap(x => [x, x * 2]) //[ 2, 4, 3, 6, 4, 8 ]
// 1. [2, 3, 4].map(d => [d, d * 2]) => [[2, 4], [3, 6], [4, 8]]
// 2. [[2, 4], [3, 6], [4, 8]].flat()
複製程式碼

補充常用的物件轉陣列的用法：

const obj = { name: 'dapaopao' }

Object.keys(obj) // ['name']
Object.values(obj) // ['dapaopao']
Object.entries(obj) // ['name', 'dapaopao']
複製程式碼

模板字串

用的挺多的，但是不相容 IE !

const name = 'dapaopao'

const newStr = `welcome ${name}` // welcome dapaopao

// the same as
const newStr = 'welcome ' + name
複製程式碼

使用 async / await

這裡做個例子進行介紹

async function test() {
const data = await axios.get('https://randomuser.me/api/')
console.log(data)
}
// 等同於
function test() {
axios.get('https://randomuser.me/api/').then(res => console.log(res)) // axios 也是 promise 物件
}
複製程式碼

優化 if/else 語句

當邏輯或||時，找到為 true 的分項就停止處理，並返回該分項的值，否則執行完，並返回最後分項的值。當邏輯與&&時，找到為 false 的分項就停止處理，並返回該分項的值。

const a = 0 || null || 3 || 4
console.log(a) // 3

const b = 3 && 4 && null && 0
console.log(b) // null
複製程式碼

減少 if / else地獄般的呼叫

const [age, name, sex] = [22, 'dapaopao', 1]

if (age > 10) {
if (name === 'dapaopao') {
if (sex > 0) {
console.log('all right')
}
}
}

// 使用 &&
if (age > 10 && name === 'dapaopao' && sex > 0) {
console.log('all right')
}

// 或者(太長了不推薦)
age > 10 && name === 'dapaopao' && sex > 0 && console.log('all right')
複製程式碼