-
Notifications
You must be signed in to change notification settings - Fork 83
8 Useful JavaScript Tricks #14
Open
Description
JS中, 8个有用的小技巧
- 数组默认值
let arrs = Array(5).fill(' '); console.log(arrs); //输出 [' ',' ',' ',' ',' '];
- 数组去重(这个方法非常多),这里只列我现在用的比较多的
通过filter过滤掉重复的
const arrs = ['apple', 'banana', 'orange', 'apple', 'banana']; const uniArr = arrs.filter((item,idx)=>arrs.indexOf(item)==idx); console.log(uniArr); //['apple', 'banana', 'orange']
通过Set本身不能有重复数据的特点
const arrs = ['apple', 'banana', 'orange', 'apple', 'banana']; const uniArr = Array.from(new Set(arrs)); console.log(uniArr); //['apple', 'banana', 'orange']
const arrs = ['apple', 'banana', 'orange', 'apple', 'banana']; const uniArr = [...new Set(arrs)]; console.log(uniArr); //['apple', 'banana', 'orange']
- 使用扩展运算符合并对象及数组对象
合并两个对象
const person = {name:'Strive', age:18}; const product = {name:'itStrive', goods:'milk', price:'5$', address:'china beij'}; const combineData = {...person, ...product}; console.log(combineData); //{address: "china beij", age: 18, goods: "milk" ,name: "itStrive",price: "5$"}
把数组对象合并成一个对象
const cities = [ {name:'bj', visited:'no'}, {name:'tj', visited:'no'}, {name:'sh', visited:'no'}, {name:'sz', visited:'no'}, {name:'hz', visited:'yes'}, ]; const result = cities.reduce((some, item)=>{ return { ...some, [item.name]:item.visited } },{}); console.log(result); //{bj: "no", hz: "yes", sh: "no", sz: "no", tj: "no"}
- 不使用map循环遍历数组
const cities = [ {name:'bj', visited:'no'}, {name:'tj', visited:'no'}, {name:'sh', visited:'no'}, {name:'sz', visited:'no'}, {name:'hz', visited:'yes'}, ]; const cityNames = Array.from(cities, ({name})=>name); console.log(cityNames); //["bj", "tj", "sh", "sz", "hz"]
- 带条件的属性对象
之前如果有条件的属性对象,得准备两个,然后通过if判断区分,现在其实可以直接通过扩展运算符区分
const getUser = (hasEmail) =>{ return { name:'Strive', age:18, ...hasEmail && {email:'xx@xx.com'} } }; const user = getUser(true); console.log(user); //{"name":"Strive","age":18,"email":"xx@xx.com"} const userWithoutEmail = getUser(false); console.log(userWithoutEmail); //{"name":"Strive","age":18}
- 解构大的对象为你需要的对象
这个需求很多,从后台过来的数据,有时候需要整理成你需要的。
const rawUserData = { //假设是原始数据 name:'Strive', age:18, email:'xxx@xx.com', joined:'2019-6-11', image:'path-to-the-image', followers:45, sex:0, nickName:'老肖' } let user= {}, userDetails = {}; ({name:user.name, age:user.age, ...userDetails} = rawUserData); console.log(user); //{"name":"Strive","age":18} console.log(userDetails); //{"email":"xxx@xx.com","joined":"2019-6-11","image":"path-to-the-image","followers":45,"sex":0,"nickName":"老肖"}
- 动态属性名(这个很棒)
const dynamic = 'email'; let user = { name: 'Strive', [dynamic]: 'xxx@xx.com' } console.log(user); // 输出 { name: "Strive", email: "xxx@xx.com" }
- 字符串模板(这个用太多了,简单说下)
const user = { name:'Strive', age:18, details:{ email:'xxx@xx.com', joined:'2019-6-11', image:'path-to-the-image', followers:45, sex:0, nickName:'老肖' } } const printUserInfo = (user) =>{ const text = `用户名是 ${user.name}, 年龄为: ${user.age}. Email: ${user.details.email} ` return text; } printUserInfo(user);