8个有用的JS技巧

论坛 › 期权论坛 › 期权     
dotNET全栈开发   2019-7-15 09:30   5474   0

　　这些技巧可能大家大部分都用过了，如果用过就当作加深点印象，如果没有遇到过，就当作学会了几个技巧。

[h1]　1. 确保数组值[/h1]　　使用 grid ，需要重新创建原始数据，并且每行的列长度可能不匹配， 为了确保不匹配行之间的长度相等，可以使用Array.fill方法。
  1. let array = Array(5).fill(  );
复制代码
  1. console.log(array); // outputs (5) ["", "", "", "", ""]
复制代码
[h1]　2. 获取数组唯一值[/h1]　　ES6 提供了从数组中提取惟一值的两种非常简洁的方法。不幸的是，它们不能很好地处理非基本类型的数组。在本文中，主要关注基本数据类型。
  1. const cars = [
复制代码
  1.      Mazda ,
复制代码
  1.      Ford ,
复制代码
  1.      Renault ,
复制代码
  1.      Opel ,
复制代码
  1.      Mazda
复制代码
  1. ]
复制代码
  1. const uniqueWithArrayFrom = Array.from(new Set(cars));
复制代码
  1. console.log(uniqueWithArrayFrom); // outputs ["Mazda", "Ford", "Renault", "Opel"]
复制代码
  1. [/code][code]const uniqueWithSpreadOperator = [...new Set(cars)];
复制代码
  1. console.log(uniqueWithSpreadOperator);// outputs ["Mazda", "Ford", "Renault", "Opel"]
复制代码
[h1]　3.使用展开运算符合并对象和对象数组[/h1]　　对象合并是很常见的事情，我们可以使用新的ES6特性来更好，更简洁的处理合并的过程。
  1. // merging objects
复制代码
  1. const product = { name:  Milk , packaging:  Plastic , price:  5$  }
复制代码
  1. const manufacturer = { name:  Company Name , address:  The Company Address  }
复制代码
  1. [/code][code]const productManufacturer = { ...product, ...manufacturer };
复制代码
  1. console.log(productManufacturer);
复制代码
  1. // outputs { name: "Company Name", packaging: "Plastic", price: "5$", address: "The Company Address" }
复制代码
  1. [/code][code]// merging an array of objects into one
复制代码
  1. const cities = [
复制代码
  1.     { name:  Paris , visited:  no  },
复制代码
  1.     { name:  Lyon , visited:  no  },
复制代码
  1.     { name:  Marseille , visited:  yes  },
复制代码
  1.     { name:  Rome , visited:  yes  },
复制代码
  1.     { name:  Milan , visited:  no  },
复制代码
  1.     { name:  Palermo , visited:  yes  },
复制代码
  1.     { name:  Genoa , visited:  yes  },
复制代码
  1.     { name:  Berlin , visited:  no  },
复制代码
  1.     { name:  Hamburg , visited:  yes  },
复制代码
  1.     { name:  New York , visited:  yes  }
复制代码
  1. ];
复制代码
  1. [/code][code]const result = cities.reduce((accumulator, item) => {
复制代码
  1.   return {
复制代码
  1.     ...accumulator,
复制代码
  1.     [item.name]: item.visited
复制代码
  1.   }
复制代码
  1. }, {});
复制代码
  1. [/code][code]console.log(result);
复制代码
  1. /* outputs
复制代码
  1. Berlin: "no"
复制代码
  1. Genoa: "yes"
复制代码
  1. Hamburg: "yes"
复制代码
  1. Lyon: "no"
复制代码
  1. Marseille: "yes"
复制代码
  1. Milan: "no"
复制代码
  1. New York: "yes"
复制代码
  1. Palermo: "yes"
复制代码
  1. Paris: "no"
复制代码
  1. Rome: "yes"
复制代码
  1. */
复制代码
[h1]　4. 数组 map 的方法 (不使用Array.Map)[/h1]　　另一种数组 map 的实现的方式，不用 Array.map。
　　Array.from 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：
  1. const cities = [
复制代码
  1.     { name:  Paris , visited:  no  },
复制代码
  1.     { name:  Lyon , visited:  no  },
复制代码
  1.     { name:  Marseille , visited:  yes  },
复制代码
  1.     { name:  Rome , visited:  yes  },
复制代码
  1.     { name:  Milan , visited:  no  },
复制代码
  1.     { name:  Palermo , visited:  yes  },
复制代码
  1.     { name:  Genoa , visited:  yes  },
复制代码
  1.     { name:  Berlin , visited:  no  },
复制代码
  1.     { name:  Hamburg , visited:  yes  },
复制代码
  1.     { name:  New York , visited:  yes  }
复制代码
  1. ];
复制代码
  1. [/code][code]const cityNames = Array.from(cities, ({ name}) => name);
复制代码
  1. console.log(cityNames);
复制代码
  1. // outputs ["Paris", "Lyon", "Marseille", "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]
复制代码
[h1]　5. 有条件的对象属性[/h1]　　不再需要根据一个条件创建两个不同的对象，可以使用展开运算符号来处理。
  1. [/code][code]nst getUser = (emailIncluded) => {
复制代码
  1.   return {
复制代码
  1.     name:  John ,
复制代码
  1.     surname:  Doe ,
复制代码
  1.     ...emailIncluded && { email :  john@doe.com  }
复制代码
  1.   }
复制代码
  1. }
复制代码
  1. [/code][code]const user = getUser(true);
复制代码
  1. console.log(user); // outputs { name: "John", surname: "Doe", email: "john@doe.com" }
复制代码
  1. [/code][code]const userWithoutEmail = getUser(false);
复制代码
  1. console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }
复制代码
[h1]　6. 解构原始数据[/h1]　　有时候一个对象包含很多属性，而我们只需要其中的几个，这里可以使用解构方式来提取我们需要的属性。如一个用户对象内容如下：
  1. const rawUser = {
复制代码
  1.    name:  John ,
复制代码
  1.    surname:  Doe ,
复制代码
  1.    email:  john@doe.com ,
复制代码
  1.    displayName:  SuperCoolJohn ,
复制代码
  1.    joined:  2016-05-05 ,
复制代码
  1.    image:  path-to-the-image ,
复制代码
  1.    followers: 45
复制代码
  1.    ...
复制代码
  1. }
复制代码
　　我们需要提取出两个部分，分别是用户及用户信息，这时可以这样做:
  1. let user = {}, userDetails = {};
复制代码
  1. ({ name: user.name, surname: user.surname, ...userDetails } = rawUser);
复制代码
  1. [/code][code]console.log(user); // outputs { name: "John", surname: "Doe" }
复制代码
  1. console.log(userDetails); // outputs { email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 }
复制代码
[h1]　7. 动态属性名[/h1]　　早期，如果属性名需要是动态的，我们首先必须声明一个对象，然后分配一个属性。这些日子已经过去了，有了ES6特性，我们可以做到这一点。
  1. const dynamic =  email ;
复制代码
  1. let user = {
复制代码
  1.     name:  John ,
复制代码
  1.     [dynamic]:  john@doe.com
复制代码
  1. }
复制代码
  1. console.log(user); // outputs { name: "John", email: "john@doe.com" }
复制代码
[h1]8.字符串插值[/h1]　　在用例中，如果正在构建一个基于模板的helper组件，那么这一点就会非常突出，它使动态模板连接容易得多。
  1. const user = {
复制代码
  1.   name:  John ,
复制代码
  1.   surname:  Doe ,
复制代码
  1.   details: {
复制代码
  1.     email:  john@doe.com ,
复制代码
  1.     displayName:  SuperCoolJohn ,
复制代码
  1.     joined:  2016-05-05 ,
复制代码
  1.     image:  path-to-the-image ,
复制代码
  1.     followers: 45
复制代码
  1.   }
复制代码
  1. }
复制代码
  1. [/code][code]const printUserInfo = (user) => {
复制代码
  1.   const text = `The user is ${user.name} ${user.surname}. Email: ${user.details.email}. Display Name: ${user.details.displayName}. ${user.name} has ${user.details.followers} followers.`
复制代码
  1.   console.log(text);
复制代码
  1. }
复制代码
  1. [/code][code]printUserInfo(user);
复制代码
  1. // outputs  The user is John Doe. Email: john@doe.com. Display Name: SuperCoolJohn. John has 45 followers.
复制代码
原文链接：https://devinduct.com/blogpost/26/8-useful-javascript-tricks
译文：https://segmentfault.com/a/1190000019617387


推荐阅读
（点击标题可跳转阅读）
好的用户界面-界面设计的一些技巧
程序员的黑砖窑，码农果真在东南亚被打
.NET Core 的过去、现在和未来
代码神注释鉴赏，喜欢拿去用(可复制粘贴)
出现这十种症状，说明你不适合干程序员这个行当
值得收藏的C# 9.0新特性
推荐↓↓↓
dotNET全栈开发
关注于：MVC、xamarin跨平台移动开发、.NET Core、wcf、web前端、业界趣闻、程序人生、程序员段子等方面资讯。弱水三千只取一瓢，每日一篇一更。
回复关键字：有教程、架构相送哦。
长按扫描，一键关注。
好文章，我在看

回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
dotNET全栈开发

积分:10
帖子:2
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP