ES6常用筆記整理
阿新 • • 發佈:2018-11-24
// 轉換布林型別 變數前加 !! !! '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