8 Useful JavaScript Tricks

[itstrive]

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:'[email protected]'}
    }
};

const user = getUser(true);
console.log(user); //{"name":"Strive","age":18,"email":"[email protected]"}

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); //{"name":"Strive","age":18}

• 解构大的对象为你需要的对象

这个需求很多，从后台过来的数据，有时候需要整理成你需要的。

const rawUserData = { //假设是原始数据
    name:'Strive',
    age:18,
    email:'[email protected]',
    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":"[email protected]","joined":"2019-6-11","image":"path-to-the-image","followers":45,"sex":0,"nickName":"老肖"}

• 动态属性名(这个很棒)

const dynamic = 'email';
let user = {
    name: 'Strive',
    [dynamic]: '[email protected]'
}
console.log(user); // 输出 { name: "Strive", email: "[email protected]" }

• 字符串模板(这个用太多了,简单说下)

const user = {
    name:'Strive',
    age:18,
    details:{
        email:'[email protected]',
        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);