1. 程式人生 > >ES6常用筆記整理

ES6常用筆記整理

// 轉換布林型別 變數前加 !!
!! 'string'
// true


// 轉換數字型別 變數前加 + 
+ '0.7'
// 0.7

// 常見陣列去重 
const array = [1, 2, 2, 3]
const unique = Array.from(new Set(array))
// unique [1, 2, 3]

// 簡單的map
const nums = [1, 2, 3, 4, 5]
const twoXNums = nums.map(i => i * 2)
// twoXNums [2, 4, 6, 8, 10] nums不變

// 簡單的filter
const nums = [1, 2, 3, 4, 5]
const evenNums = nums.filter(i => i % 2 === 0)
// evenNums [2, 4] nums不變

// 簡單的reduce
const array1 = [1, 2, 3, 4]
const total = array1.reduce((pre, cur) => pre + cur)
// total 10

// 稍複雜一些的reduce
const scores = [
{name: 'zhang san', score: 60},
{name: 'li si', score: 80},
{name: 'wang wu', score: 90},
]
const totalScore = scores.reduce((total, cur) => 
total + cur.score, //reducer函式
0 // 初始分數為0
)
// totalScore 230

// 簡單的find
const users = [
{id: 1, name: 'zhang san'},
{id: 2, name: 'li si'}
]
// 找出id為1的user 
const user = users.find(p => p.id === 1).name
// zhang san

// 簡單的indexOf 
// 返回在陣列中可以找到一個給定元素的第一個索引,如果不存在,則返回-1
const data = ['aaa', 'bbb', 'ccc']
let resIndex = data.indexOf('bbb')
// resIndex 1

// 簡單的includes
// 斷一個數組是否包含一個指定的值 返回布林值
const data = ['aaa', 'bbb', 'ccc']
let res = data.includes('bbb')
// res true

// 向陣列中新增元素
// 比如常見的下拉載入
const data = ['aaa', 'bbb', 'ccc']
const newData = [...data, 'ddd']
// newData ['aaa', 'bbb', 'ccc', 'ddd]

// 為物件新增一組鍵值對
const user = {name: 'zhang san'}
const updatedUser = {...user, age: 23}
//updatedUser的值為:{name: 'zhang san', age: 23}

// 修改陣列中滿足條件的元素物件
const users = [
{id: 1, name: 'zhang san'},
{id: 2, name: 'li si'},
{id: 3, name: 'wang wu'}
]
// 給 id為1的user 修改屬性
const updatedUsers = users.map(p => 
p.id !== 1 
? p 
: {...p, name: 'zhang buzheng'}
)
/**
* users 不變
* updatedUsers
* [{id: 1, name: "zhang buzheng"},
* {id: 2, name: "li si"},
* {id: 3, name: "wang wu"}
* ]
*/

// 刪除目標物件的一組屬性
// eg 後端傳了一大段屬性 你只需要其中幾個
const user = {id: 1, name: 'zhang san', age: '20'}
const newUserData = (({name, id}) => ({name, id}))(user)
// newUserData {name: "zhang san", id: 1}

// 傳參物件轉字串
const params = {id: 1, name: 'zhang san', age: '20'}
const query = '?' + Object.keys(params).map(k => 
encodeURIComponent(k) + '=' + encodeURIComponent(params[k])
).join('&')
// encodeURIComponent將對特殊字元進行編碼。
// query "?id=1&name=zhang%20san&age=20"

// 獲取陣列中物件的下標 返回第一個
const users = [
{id: 23, name: 'zhang san'},
{id: 5, name: 'li si'},
{id: 54, name: 'wang wu'}
]
const index = users.findIndex(obj => obj.id === 54)
// index 2