&img src=&/50/v2-5954a79f2e039f481810b_b.jpg& data-rawwidth=&480& data-rawheight=&270& class=&origin_image zh-lightbox-thumb& width=&480& data-original=&/50/v2-5954a79f2e039f481810b_r.jpg&&&p&&a href=&/p/& class=&internal&&前端，你会获取数据吗？（二）&/a&（已更新）&/p&&p&&a href=&/p/& class=&internal&&前端，你会获取数据吗？（三）&/a&（已更新）&/p&&h2&前言 &/h2&&p&今天和大家一起聊聊前端向后台获取数据的事儿。&/p&&p&&br&&/p&&p&前端、也就是客户端、也就是浏览器，是如何获取到后台数据的呢？这首先要谈的一个话题就是http协议，之前写的一篇《&a href=&/p/& class=&internal&&不得不学的http协议&/a&》里面做了基本的介绍，归结成一句话就是：“前端（浏览器）向后台发送请求，后台为前端响应数据”。最初级的原理如果不了解，可以回头看看那篇文章，如果懂了，咱们今天就用代码来说说请求和响应的详细过程。&/p&&p&&br&&/p&&p&备注：本期内容需要安装chrome浏览器，并且对jquery，npm，还有http协议有初级的了解。&/p&&p&&br&&/p&&h2&一、chrome抓包工具&/h2&&p&&br&&/p&&p&所有的数据最初都是放在服务器的，前端什么都没有，所以，我们用浏览器看到的所有的内容都是从服务器获取到的。&/p&&p&为了可以清晰第看到这个过程，我们需要用到chrome的调试工具，具体步骤如下：&/p&&ul&&li&首先，打开浏览器&/li&&li&然后，按F12&/li&&li&再然后，点击network&/li&&li&最后，访问百度，测试请求和响应的过程。&/li&&/ul&&p&我们可以在network下面清晰第看到浏览器发送请求的整个过程。&/p&&p&&br&&/p&&img src=&/v2-a41c1377dfbd9c2031be19d_b.jpg& data-caption=&& data-rawwidth=&720& data-rawheight=&469& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&/v2-a41c1377dfbd9c2031be19d_r.jpg&&&p&&br&&/p&&p&点击请求请表的任意一个请求,还能看到请求和响应的具体细节,&/p&&p&&br&&/p&&p&&br&&/p&&img src=&/v2-80bb5ffb33dd0e740d7dd6_b.jpg& data-caption=&& data-rawwidth=&557& data-rawheight=&172& class=&origin_image zh-lightbox-thumb& width=&557& data-original=&/v2-80bb5ffb33dd0e740d7dd6_r.jpg&&&p&&br&&/p&&p&里面的各种属性和参数，查一查http相关知识，都可以理解。这不是咱们的重点，就不一一说了。&/p&&p&总之，我们现在要知道的是：通过这个工具可以看到请求和响应的具体内容，这就够了。&/p&&h2&二、http-server开启web服务器&/h2&&p&&br&&/p&&p&http-server模块可以将一个普通的文件夹变成一个web服务器的静态文件目录，具体操作如下：&/p&&p&使用npm全局安装http-server模块（安装node安装包，自带npm，如果没用过npm，需要在这里补点前置知识了），&/p&&div class=&highlight&&&pre&&code class=&language-bash&&&span&&/span&npm install -g http-server
&/code&&/pre&&/div&&p&安装成功之后，随便找一个空的文件夹，作为我们服务器的后台，在这个文件夹内执行下面命令&/p&&div class=&highlight&&&pre&&code class=&language-bash&&&span&&/span&http-server
&/code&&/pre&&/div&&p&&br&&/p&&img src=&/v2-5c36ee6685_b.jpg& data-caption=&& data-rawwidth=&437& data-rawheight=&131& class=&origin_image zh-lightbox-thumb& width=&437& data-original=&/v2-5c36ee6685_r.jpg&&&p&&br&&/p&&p&现在通过&a href=&/?target=http%3A//127.0.0.1%3A8080& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&127.0.0.1:8080&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&就能访问我们自己的这个服务器了。&/p&&p&现在服务器里面还没有任何内容，我们需要在里面加入一个index.html文件作为可以访问的首页。&/p&&p&如果可以正常访问，说明到目前为止，我们已经从服务器上获取到了想要的数据（其实就是index.html文件），我们的浏览器向http-server创建的服务器发送了一条请求，服务器将index.html的代码响应给浏览器，浏览器接到代码之后，将代码变成可以正常浏览的页面，呈现给了我们。&/p&&p&大家可以用chrome调试工具中的network看一下这个过程。&/p&&p&我们今天的内容不只是在地址栏直接获取页面数据，还有要用ajax在不刷新页面的情况下获取后台数据，跟我来，超简单。&/p&&p&（在命令行中按ctrl+c,可以关闭服务器）&/p&&h2&三、用jQuery的get方法获取后台数据&/h2&&p&&br&&/p&&p&我们的服务器到目前为止只有一个index.html文件，现在要再加两个文件，一个是jQuery（版本随意），一个是data.txt。看名字大家就应该能猜到了，data.txt就是我们要获取的数据。&/p&&p&我们现在要实现的功能是这样的：&/p&&ul&&li&在index.html中添加一个按钮&/li&&li&点击按钮的时候向服务器发送一条请求（获取data.txt的内容）&/li&&li&服务器接到请求，向客户端返回data.txt的内容&/li&&li&客户端将data.txt的内容用alert()方法弹出来。&/li&&/ul&&p&data.txt中的内容只有一个“hello ajax”&/p&&p&前端的js代码是这样的：&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&$&/span&&span class=&p&&(&/span&&span class=&s2&&&button&&/span&&span class=&p&&).&/span&&span class=&nx&&click&/span&&span class=&p&&(&/span&&span class=&kd&&function&/span&&span class=&p&&(){&/span&
&span class=&nx&&$&/span&&span class=&p&&.&/span&&span class=&nx&&get&/span&&span class=&p&&(&/span&&span class=&s2&&&data.txt&&/span&&span class=&p&&,&/span&&span class=&kd&&function&/span&&span class=&p&&(&/span&&span class=&nx&&data&/span&&span class=&p&&){&/span&
&span class=&c1&&//get方法可以请求数据，第一个参数是请求的url，这里是文件路径，因为是根目录，做一只写文件名就可以了。&/span&
&span class=&nx&&alert&/span&&span class=&p&&(&/span&&span class=&nx&&data&/span&&span class=&p&&);&/span&
&span class=&c1&&//data是形参，可以换成其他名字，data就是从后台获取的数据了。&/span&
&span class=&p&&})})&/span&
&/code&&/pre&&/div&&p&效果是这样的：&/p&&p&&br&&/p&&img src=&/v2-cfeaad5ccb8bf0a5425c8_b.jpg& data-caption=&& data-rawwidth=&651& data-rawheight=&559& class=&origin_image zh-lightbox-thumb& width=&651& data-original=&/v2-cfeaad5ccb8bf0a5425c8_r.jpg&&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&img src=&/v2-6dbbfe2bb2ce47b17f89e_b.jpg& data-caption=&& data-rawwidth=&553& data-rawheight=&180& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&/v2-6dbbfe2bb2ce47b17f89e_r.jpg&&&p&&br&&/p&&p&需要注意的是，如果data.txt中写入中文，一定要注意编码问题，要不然会出现乱码，编码问题，这里就不讨论了。&/p&&p&到目前为止，我们已经实现了用ajax请求数据。&/p&&h2&四、资料&/h2&&p&关注公众号：晓舟报告，所有源码全部奉上。&/p&&h2&五、尾声&/h2&&p&如果您觉得有收获，请不要吝惜一个小小的【赞】，如果喜欢类似的文章，可以关注微信公众号：晓舟报告，第一时间获取文章。&/p&&p&（《前端，你会获取数据吗?》下一集我们会摆脱jQuery的束缚，用JavaScript原生的方法获取后台数据，敬请关注。）&/p&&p&&br&&/p&&p&&a href=&/p/& class=&internal&&前端，你会获取数据吗？（二）&/a&（已更新）&/p&&p&&a href=&/p/& class=&internal&&前端，你会获取数据吗？（三）&/a&（已更新）&/p&&p&前端，你会获取数据吗？（四）&/p&&p&前端，你会获取数据吗？（五）&/p&&p&&br&&/p&&p&原文链接：&a href=&/?target=https%3A//mp./s%3F__biz%3DMzI3ODQyODE3Mw%3D%3D%26mid%3D%26idx%3D1%26sn%3D0d9ffd2f9b0ccab3ae1c1%26chksm%3Deb566e3ddc21e72b2ace810b2b4d0c75a8ed06f63c2ab98d6a2b141%23rd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端，你会获取数据吗？（一）&i class=&icon-external&&&/i&&/a&&/p&
（已更新）（已更新）前言 今天和大家一起聊聊前端向后台获取数据的事儿。 前端、也就是客户端、也就是浏览器，是如何获取到后台数据的呢？这首先要谈的一个话题就是http协议，之前写的一篇《
&img src=&/50/v2-5a9e64c96b2_b.jpg& data-rawwidth=&1000& data-rawheight=&637& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/50/v2-5a9e64c96b2_r.jpg&&&p&虽然ES6规范不是最近才发布，但我认为很多开发人员仍然不太熟悉。 主要原因是在规范发布之后，Web浏览器的支持可能很差。 目前，规范发布已经超过2年了，现在很多浏览器对ES6支持良好。 即使您（或您的客户）不使用最新版本的Web浏览器，也可以使用转换器（如Babel），在应用程序的构建过程中将ES6转换为ES5。 这意味着要向前迈出一步，学习ES6。&/p&&p&在本文中，我将尽量简单地介绍最有用的功能。 在本教程之后，您将拥有基本技能，并能够将其应用于实际项目中。 不要将其视为指南或文件。 我的目标是鼓励你深入挖掘并熟悉ES6。&/p&&h2&1. const和let关键字&/h2&&p&&b&const&/b&使您能够定义常量（最终变量！）。 &b&let&/b&让你定义变量。 这很棒，但是JavaScript中没有变量吗？ 是有的，但是由&b&var&/b&声明的变量具有函数范围，并被提升到顶部。 这意味着在声明之前可以使用一个变量。 让变量和常量具有块范围（由{}包围），在声明之前不能使用。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function f() {
const z = 3
var x = 100
let y = 200
const z = 300
console.log('x in block scope is', x)
console.log('y in block scope is', y)
console.log('z in block scope is', z)
console.log('x outside of block scope is', x)
console.log('y outside of block scope is', y)
console.log('z outside of block scope is', z)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&x in block scope is 100
y in block scope is 200
z in block scope is 300
x outside of block scope is 100
y outside of block scope is 2
z outside of block scope is 3
&/code&&/pre&&/div&&h2&2. 数组辅助方法&/h2&&p&出现了新的很酷的功能，这有助于在很多情况下使用JS Array。 您实现了多少次的逻辑，如：过滤，检查是否有任何或所有元素符合条件，或者元素转换？ 是不是很多种情景下都有用过？ 现在语言本身自带这些很好用的功能。 在我看来，这是最有价值的功能：&/p&&h2&forEach&/h2&&p&对数组的每个元素执行传入的函数，将数组元素作为参数传递。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var colors = ['red', 'green', 'blue']
function print(val) {
console.log(val)
colors.forEach(print)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&red
&/code&&/pre&&/div&&h2&map&/h2&&p&创建一个包含相同数量元素的新数组，但是由传入的函数返回元素。 它只是将每个数组元素转换成别的东西。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var colors = ['red', 'green', 'blue']
function capitalize(val) {
return val.toUpperCase()
var capitalizedColors = colors.map(capitalize)
console.log(capitalizedColors)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&[&RED&,&GREEN&,&BLUE&]
&/code&&/pre&&/div&&h2&filter&/h2&&p&创建一个包含原始数组子集的新数组。 新数组包含的这些元素通过由传入的函数实现的测试，该函数应该返回true或false。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var values = [1, 60, 34, 30, 20, 5]
function lessThan20(val) {
return val & 20
var valuesLessThan20 = values.filter(lessThan20)
console.log(valuesLessThan20)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&[1,5]
&/code&&/pre&&/div&&h2&find&/h2&&p&找到通过传入的函数测试的第一个元素，该函数应该返回true或false。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var people = [
{name: 'Jack', age: 50},
{name: 'Michael', age: 9},
{name: 'John', age: 40},
{name: 'Ann', age: 19},
{name: 'Elisabeth', age: 16}
function teenager(person) {
return person.age & 10 && person.age & 20
var firstTeenager = people.find(teenager)
console.log('First found teenager:', firstTeenager.name)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&First found teenager: Ann
&/code&&/pre&&/div&&h2&every&/h2&&p&检查数组的每个元素是否通过传入函数的测试，该函数应该返回true或false（每个函数都返回true，则结果为true，否则为false）。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var people = [
{name: 'Jack', age: 50},
{name: 'Michael', age: 9},
{name: 'John', age: 40},
{name: 'Ann', age: 19},
{name: 'Elisabeth', age: 16}
function teenager(person) {
return person.age & 10 && person.age & 20
var everyoneIsTeenager = people.every(teenager)
console.log('Everyone is teenager: ', everyoneIsTeenager)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Everyone is teenager: false
&/code&&/pre&&/div&&h2&some&/h2&&p&检查数组的任何元素是否通过由提供的函数实现的测试，该函数应该返回true或false。(有一个函数返回true，则结果true。否则结果为false)&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var people = [
{name: 'Jack', age: 50},
{name: 'Michael', age: 9},
{name: 'John', age: 40},
{name: 'Ann', age: 19},
{name: 'Elisabeth', age: 16}
function teenager(person) {
return person.age & 10 && person.age & 20
var thereAreTeenagers = people.some(teenager)
console.log('There are teenagers:', thereAreTeenagers)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&There are teenagers: true
&/code&&/pre&&/div&&h2&reduce&/h2&&p&方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 累加器的初始值应作为reduce函数的第二个参数提供。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var array = [1, 2, 3, 4]
function sum(acc, value) {
return acc + value
function product(acc, value) {
return acc * value
var sumOfArrayElements = array.reduce(sum, 0)
var productOfArrayElements = array.reduce(product, 1)
console.log('Sum of', array, 'is', sumOfArrayElements)
console.log('Product of', array, 'is', productOfArrayElements)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Sum of [1,2,3,4] is 10
Product of [1,2,3,4] is 24
&/code&&/pre&&/div&&h2&3.箭头函数&/h2&&p&执行非常简单的函数（如上述的Sum或Product）需要编写大量的模版。 有什么解决办法吗？ 是的，可以尝试箭头函数！&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var array = [1, 2, 3, 4]
const sum = (acc, value) =& acc + value
const product = (acc, value) =& acc * value
var sumOfArrayElements = array.reduce(sum, 0)
var productOfArrayElements = array.reduce(product, 1)
&/code&&/pre&&/div&&p&箭头函数也可以内联。 它真的简化了代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var array = [1, 2, 3, 4]
var sumOfArrayElements = array.reduce((acc, value) =& acc + value, 0)
var productOfArrayElements = array.reduce((acc, value) =& acc * value, 1)
&/code&&/pre&&/div&&p&箭头函数也可以更复杂，并且有很多行代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var array = [1, 2, 3, 4]
const sum = (acc, value) =& {
const result = acc + value
console.log(acc, ' plus ', value, ' is ', result)
return result
var sumOfArrayElements = array.reduce(sum, 0)
&/code&&/pre&&/div&&h2&4. 类&/h2&&p&哪个Java开发人员在切换到JS项目时不会错过类？ 谁不喜欢显式继承，像Java语言，而不是为原型继承编写魔术代码？ 这引起了一些JS开发者反对，因为在ES6中已经引入了类。 他们不改变继承的概念。 它们只是原型继承的语法糖。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&class Point {
constructor(x, y) {
this.x = x
this.y = y
toString() {
return '[X=' + this.x + ', Y=' + this.y + ']'
class ColorPoint extends Point {
static default() {
return new ColorPoint(0, 0, 'black')
constructor(x, y, color) {
super(x, y)
this.color = color
toString() {
return '[X=' + this.x + ', Y=' + this.y + ', color=' + this.color + ']'
console.log('The first point is ' + new Point(2, 10))
console.log('The second point is ' + new ColorPoint(2, 10, 'green'))
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&The first point is [X=2, Y=10]
The second point is [X=2, Y=10, color=green]
The default color point is [X=0, Y=0, color=black]
&/code&&/pre&&/div&&h2&5.对象功能增强&/h2&&p&对象功能已被增强。 现在我们可以更容易地：&/p&&ol&&li&定义具有和已有变量名称相同且赋值的字段&/li&&li&定义函数&/li&&li&定义动态（计算）属性&/li&&/ol&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&const color = 'red'
const point = {
toString() {
return 'X=' + this.x + ', Y=' + this.y + ', color=' + this.color
[ 'prop_' + 42 ]: 42
console.log('The point is ' + point)
console.log('The dynamic property is ' + point.prop_42)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&The point is X=5, Y=10, color=red
The dynamic property is 42
&/code&&/pre&&/div&&h2&6. 模板字符串&/h2&&p&谁喜欢写大字符串和变量连接？ 我相信我们中只有少数人喜欢。 谁讨厌阅读这样的代码？ 我确定大家都是，ES6引入了非常易于使用的字符串模板和变量的占位符。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function hello(firstName, lastName) {
return `Good morning ${firstName} ${lastName}!
How are you?`
console.log(hello('Jan', 'Kowalski'))
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Good morning Jan Kowalski!
How are you?
&/code&&/pre&&/div&&p&请注意，我们可以写多行文本。&/p&&p&重要提示：使用反引号代替撇号来包装文本。&/p&&h2&7. 默认函数参数&/h2&&p&你不喜欢提供所有可能的函数参数？ 使用默认值。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function sort(arr = [], direction = 'ascending') {
console.log('I\'m going to sort the array', arr, direction)
sort([1, 2, 3])
sort([1, 2, 3], 'descending')
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&I'm going to sort the array [1,2,3] ascending
I'm going to sort the array [1,2,3] descending
&/code&&/pre&&/div&&h2&8. rest参数和扩展运算符&/h2&&h2&扩展&/h2&&p&它可以将数组或对象内容提取为单个元素。&/p&&p&示例 - 制作数组的浅拷贝：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var array = ['red', 'blue', 'green']
var copyOfArray = [...array]
console.log('Copy of', array, 'is', copyOfArray)
console.log('Are', array, 'and', copyOfArray, 'same?', array === copyOfArray)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Copy of [&red&,&blue&,&green&] is [&red&,&blue&,&green&]
Are [&red&,&blue&,&green&] and [&red&,&blue&,&green&] same? false
&/code&&/pre&&/div&&p&示例 - 合并数组：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var defaultColors = ['red', 'blue', 'green']
var userDefinedColors = ['yellow', 'orange']
var mergedColors = [...defaultColors, ...userDefinedColors]
console.log('Merged colors', mergedColors)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Merged colors [&red&,&blue&,&green&,&yellow&,&orange&]
&/code&&/pre&&/div&&h2&rest参数&/h2&&p&您要将前几个函数参数绑定到变量，其他变量作为数组绑定到单个变量吗？ 现在你可以很容易地做到这一点。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function printColors(first, second, third, ...others) {
console.log('Top three colors are ' + first + ', ' + second + ' and ' + third + '. Others are: ' + others)
printColors('yellow', 'blue', 'orange', 'white', 'black')
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Top three colors are yellow, blue and orange. Others are: white,black
&/code&&/pre&&/div&&h2&9. 解构赋值&/h2&&h2&数组&/h2&&p&从数组中提取所请求的元素并将其分配给变量。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function printFirstAndSecondElement([first, second]) {
console.log('First element is ' + first + ', second is ' + second)
function printSecondAndFourthElement([, second, , fourth]) {
console.log('Second element is ' + second + ', fourth is ' + fourth)
var array = [1, 2, 3, 4, 5]
printFirstAndSecondElement(array)
printSecondAndFourthElement(array)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&First element is 1, second is 2
Second element is 2, fourth is 4
&/code&&/pre&&/div&&h2&对象&/h2&&p&从对象中提取所请求的属性，并将其分配给与属性相同名称的变量。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function printBasicInfo({firstName, secondName, profession}) {
console.log(firstName + ' ' + secondName + ' - ' + profession)
var person = {
firstName: 'John',
secondName: 'Smith',
children: 3,
profession: 'teacher'
printBasicInfo(person)
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&John Smith - teacher
&/code&&/pre&&/div&&h2&10. Promises&/h2&&p&Promises承诺（是的，我知道这听起来很奇怪），你将会得到延期或长期运行任务的未来结果。 承诺有两个渠道：第一个为结果，第二个为潜在的错误。 要获取结果，您将回调函数作为“then”函数参数。 要处理错误，您将回调函数提供为“catch”函数参数。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function asyncFunc() {
return new Promise((resolve, reject) =& {
setTimeout(() =& {
const result = Math.random();
result & 0.5 ? resolve(result) : reject('Oppps....I cannot calculate')
for (let i=0; i&10; i++) {
asyncFunc()
.then(result =& console.log('Result is: ' + result))
.catch(result =& console.log('Error: ' + result))
&/code&&/pre&&/div&&p&&i&运行结果如下：&/i&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Result is: 0.2211
Error: Oppps....I cannot calculate
Result is: 0.7288
Result is: 0.4533
Error: Oppps....I cannot calculate
Error: Oppps....I cannot calculate
Result is: 0.0168
Error: Oppps....I cannot calculate
Error: Oppps....I cannot calculate
Result is: 0.4488
&/code&&/pre&&/div&&h2&总结&/h2&&p&我希望你喜欢这篇文章。 如果您想要一些练习，您可以使用沙箱进行学习过程：&a href=&/?target=https%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&。 如果您需要更多信息，可以在这里找到&/p&&ul&&li&&a href=&/?target=https%3A///lukehoban/es6features& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&/lukehoban/...&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///es6/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/es6/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&翻译自&a href=&/?target=https%3A///top-10-es6-features-by-example-80ac878794bb& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Top 10 ES6 features by example&i class=&icon-external&&&/i&&/a&&/p&
虽然ES6规范不是最近才发布，但我认为很多开发人员仍然不太熟悉。 主要原因是在规范发布之后，Web浏览器的支持可能很差。 目前，规范发布已经超过2年了，现在很多浏览器对ES6支持良好。 即使您（或您的客户）不使用最新版本的Web浏览器，也可以使用转换器（…
&p&首先，前后端分离，在这种模式下，前端和后端开发者解耦复杂的业务逻辑，按照接口约定好的数据各司其职。&/p&&p&目前一般采用RESTful风格定义接口，后台定义接口文档，按照文档开始各自的开发任务，直至开发完成。&/p&&p&如何减少空档期？&/p&&p&1.接口文档要清晰，减去不必要的沟通成本。&/p&&p&2.前端可以使用mock.js模拟后台返回数据，前后端就可以并行开发，不存在线性等待的问题&/p&&p&项目大了之后，管理API就很重要，API管理平台试用过swagger、postman（其实不太算）、eoLinker之后，最后选择了eoLinker。&/p&&p&一是有协作管理，后台一更新文档我就能看到（实时性）&/p&&p&二是后台人员填写完接口后，我直接使用它生成的mock在线链接，不用自己搭建本地服务器。&/p&
首先，前后端分离，在这种模式下，前端和后端开发者解耦复杂的业务逻辑，按照接口约定好的数据各司其职。目前一般采用RESTful风格定义接口，后台定义接口文档，按照文档开始各自的开发任务，直至开发完成。如何减少空档期？1.接口文档要清晰，减去不必要的…
&img src=&/50/v2-f2d286071add3de4cfe594_b.jpg& data-rawwidth=&1024& data-rawheight=&1024& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/50/v2-f2d286071add3de4cfe594_r.jpg&&&blockquote&在日新月异的前端领域中，前端工程师能做的事情越来越多，自从nodejs出现后，前端越来越有革了传统后端命的趋势，本文就再补一刀，详细解读如何在js代码中执行标准的SQL语句&br&为什么要在JS里写SQL？&/blockquote&&h2&随着业务复杂度的增长，前端页面可能出现一些数据逻辑复杂的页面，传统的js逻辑处理起来比较复杂，我们先看两个例子：&/h2&&img src=&/v2-40d4bf3b549a272d8232d8fff48c6f17_b.jpg& data-caption=&& data-rawwidth=&720& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&/v2-40d4bf3b549a272d8232d8fff48c6f17_r.jpg&&&p&&br&&/p&&blockquote&比如多规格多库存商品界面，难点在于颜色分类、尺码、价格、库存、限购数量以及对应的图片展示之间有复杂的逻辑关系，用户进行不同的选择时，js要经过多次复杂的查询才能算出结果&/blockquote&&img src=&/v2-780e6e153a3f457b5b6a_b.jpg& data-caption=&& data-rawwidth=&720& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&/v2-780e6e153a3f457b5b6a_r.jpg&&&blockquote&比如地区联动查询界面，难点在于：&/blockquote&&ol&&li&如何在本地存储地区数据，显然每次拉接口是不现实的，如果存储在storage里，每次使用时，需要有类似JSON.parse类的字符串转化为数组或对象的过程，这个操作在数据量大的时候，会造成页面卡顿，性能极差&/li&&li&三级地区联动查询复杂，如果要从一个县级地区查询到所属的城市和省份，逻辑会比较复杂&/li&&/ol&&p&&br&&/p&&hr&&p&&b&上面两个例子，如果用传统js逻辑来写，大家头脑中必定已经设计好了算法，免不了用forEach、filter、some、find等各种ES678新方法，笔者开始也是用了各种酷炫的新方法写出来发现有两个问题：&/b&&/p&&ol&&li&写完之后逻辑很复杂，似乎没有100行代码实现不了（当然有大神比我活儿好）&/li&&li&即使写了一大堆注释，同事们看起来还是一头雾水（因为逻辑确实很复杂。。。）&/li&&/ol&&p&&b&笔者做过一段时间php开发（还做过PM、UI、QA等）忽然想能不能用SQL的方式实现呢？经过一番研究，笔者写了这样一个库：&/b&&/p&&h2&Database.js&/h2&&p&&b&Database.js基于Web SQL Database，那么Web SQL Database又是啥？&/b&&/p&&blockquote&Web SQL Database是WHATWG(Web 超文本应用技术工作组，HTML5草案提出方)在2008 年 1 月提出的第一份正式草案，但并未包含在 HTML 5 规范之中，它是一个独立的规范，它引入了一套使用 SQL 操作客户端数据库的 API。由于提出时间较早，尽管 W3C 官方在 2011 年 11 月声明已经不再维护 Web SQL Database 规范，但这些 API 已经被广泛的实现在了不同的浏览器里，尤其是手机端浏览器。&/blockquote&&p&&b&兼容情况&/b& &/p&&img src=&/v2-e8d89cd43c75dbf1dc789_b.jpg& data-caption=&& data-rawwidth=&931& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&931& data-original=&/v2-e8d89cd43c75dbf1dc789_r.jpg&&&p&&b&Web SQL Database 和 Indexed Database有啥区别？&/b&&/p&&blockquote&Indexed Database 更类似于 NoSQL 的形式来操作数据库 , 其中最重要的是 Indexed Database 不使用 SQL 作为查询语言。&/blockquote&&p&笔者为了实现在js里面写SQL的需求，果断采用了前者作为底层技术。&/p&&p&&b&Web SQL Database 三个核心方法：&/b&&/p&&ul&&li&openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象&/li&&li&transaction：这个方法允许我们根据情况控制事务提交或回滚&/li&&li&executeSql：这个方法用于执行SQL 查询&/li&&/ul&&p&代码示例：&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&kd&&var&/span& &span class=&nx&&db&/span& &span class=&o&&=&/span& &span class=&nx&&openDatabase&/span&&span class=&p&&(&/span&&span class=&s1&&'testDB'&/span&&span class=&p&&,&/span& &span class=&s1&&'1.0'&/span&&span class=&p&&,&/span& &span class=&s1&&'Test DB'&/span&&span class=&p&&,&/span& &span class=&mi&&2&/span& &span class=&o&&*&/span& &span class=&mi&&1024&/span& &span class=&o&&*&/span& &span class=&mi&&1024&/span&&span class=&p&&);&/span&
&span class=&kd&&var&/span& &span class=&nx&&msg&/span&&span class=&p&&;&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&transaction&/span&&span class=&p&&(&/span&&span class=&kd&&function&/span& &span class=&p&&(&/span&&span class=&nx&&context&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&context&/span&&span class=&p&&.&/span&&span class=&nx&&executeSql&/span&&span class=&p&&(&/span&&span class=&s1&&'CREATE TABLE IF NOT EXISTS testTable (id unique, name)'&/span&&span class=&p&&);&/span&
&span class=&nx&&context&/span&&span class=&p&&.&/span&&span class=&nx&&executeSql&/span&&span class=&p&&(&/span&&span class=&s1&&'INSERT INTO testTable (id, name) VALUES (0, &Byron&)'&/span&&span class=&p&&);&/span&
&span class=&nx&&context&/span&&span class=&p&&.&/span&&span class=&nx&&executeSql&/span&&span class=&p&&(&/span&&span class=&s1&&'INSERT INTO testTable (id, name) VALUES (1, &Casper&)'&/span&&span class=&p&&);&/span&
&span class=&nx&&context&/span&&span class=&p&&.&/span&&span class=&nx&&executeSql&/span&&span class=&p&&(&/span&&span class=&s1&&'INSERT INTO testTable (id, name) VALUES (2, &Frank&)'&/span&&span class=&p&&);&/span&
&span class=&p&&});&/span&
&/code&&/pre&&/div&&p&` &b&对于没有SQL经验的前端同学来讲，上面代码看起来显然有点陌生，也不太友好，于是Database.js诞生了：&/b&&/p&&blockquote&笔者以业务当中的一个需求举例： &b&转转游戏业务列表页&/b&筛选菜单是一个三级联动菜单，每个菜单变动都会影响其他菜单数据，如图：&/blockquote&&img src=&/v2-2cdde0b86efc63f4617c4dafe32325c0_b.jpg& data-caption=&& data-rawwidth=&321& data-rawheight=&35& class=&content_image& width=&321&&&p&&br&&/p&&p&&b&原始JSON数据结构&/b&&/p&&img src=&/v2-f17b6a37508_b.jpg& data-caption=&& data-rawwidth=&705& data-rawheight=&189& class=&origin_image zh-lightbox-thumb& width=&705& data-original=&/v2-f17b6a37508_r.jpg&&&p&&br&&/p&&p&可以看出是3级嵌套结构，笔者处理成了扁平化的数据结构（过程略），并分别存入三个数据库，分别存储游戏名称、游戏平台、商品类型，如下图：&/p&&img src=&/v2-9af28d094b0f39ca307f_b.jpg& data-caption=&& data-rawwidth=&179& data-rawheight=&204& class=&content_image& width=&179&&&p&&br&&/p&&p&举例游戏名称数据结构如下图：&/p&&img src=&/v2-3ae3b9825_b.jpg& data-caption=&& data-rawwidth=&891& data-rawheight=&317& class=&origin_image zh-lightbox-thumb& width=&891& data-original=&/v2-3ae3b9825_r.jpg&&&p&&br&&/p&&p&&b&通过chrome控制台Application面板可以直接看到数据库，结构、数据清晰可见&/b&&/p&&p&&b&核心代码如下：&/b&&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 打开数据库&/span&
&span class=&cm&&
* @returns {Promise.&void&}&/span&
&span class=&cm&&
&span class=&nx&&openDataBase&/span&&span class=&p&&(){&/span&
&span class=&c1&&//打开数据库，没有则创建&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&openDatabase&/span&&span class=&p&&(&/span&&span class=&s1&&'GameMenu'&/span&&span class=&p&&,&/span&&span class=&mi&&1&/span&&span class=&p&&,&/span&&span class=&s1&&'zzOpenGameMenu'&/span&&span class=&p&&).&/span&&span class=&nx&&then&/span&&span class=&p&&(&/span&&span class=&nx&&res&/span&&span class=&o&&=&&/span&&span class=&p&&{&/span&
&span class=&c1&&//检测数据库是否存在&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&isExists&/span&&span class=&p&&(&/span&&span class=&s1&&'game'&/span&&span class=&p&&).&/span&&span class=&nx&&then&/span&&span class=&p&&(&/span&&span class=&nx&&res&/span&&span class=&o&&=&&/span&&span class=&p&&{&/span&
&span class=&c1&&//数据库已经存在，直接使用,将数据交付给页面UI组件&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&setSelectData&/span&&span class=&p&&()&/span&
&span class=&p&&}).&/span&&span class=&k&&catch&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&o&&=&&/span&&span class=&p&&{&/span&
&span class=&c1&&//数据库不存在，请求接口并处理数据，然后存入数据库&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&getData&/span&&span class=&p&&()&/span&
&span class=&p&&})&/span&
&span class=&p&&}).&/span&&span class=&k&&catch&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&o&&=&&/span&&span class=&p&&{&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&err&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&},&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 获取分类数据并存储到数据库&/span&
&span class=&cm&&
* @returns {Promise.&void&}&/span&
&span class=&cm&&
&span class=&nx&&async&/span& &span class=&nx&&getData&/span&&span class=&p&&(){&/span&
&span class=&c1&&//接口请求数据并处理成三个扁平数组&/span&
&span class=&kd&&let&/span& &span class=&nx&&data&/span& &span class=&o&&=&/span&
&span class=&nx&&await&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&getMenuData&/span&&span class=&p&&()&/span&
&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&kd&&let&/span& &span class=&nx&&i&/span& &span class=&k&&in&/span& &span class=&nx&&data&/span&&span class=&p&&){&/span&
&span class=&c1&&//创建表并存储数据&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&create&/span&&span class=&p&&(&/span&&span class=&nx&&i&/span&&span class=&p&&,&/span&&span class=&nx&&data&/span&&span class=&p&&[&/span&&span class=&nx&&i&/span&&span class=&p&&])&/span&
&span class=&p&&}&/span&
&span class=&c1&&//将数据交付给页面UI组件&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&setSelectData&/span&&span class=&p&&()&/span&
&span class=&p&&},&/span&
&/code&&/pre&&/div&&p&&b&当任意菜单选择变更时，三列数据将重新查询，核心代码如下：&/b&&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&cm&&/**&/span&
&span class=&cm&&
* 重新查询数据&/span&
&span class=&cm&&
* @param data 点击菜单携带的数据&/span&
&span class=&cm&&
* @param index 点击菜单的序号&/span&
&span class=&cm&&
* @param all 三个菜单当前选中数据&/span&
&span class=&cm&&
&span class=&nx&&async&/span& &span class=&nx&&onSelect&/span&&span class=&p&&(&/span&&span class=&nx&&data&/span&&span class=&p&&,&/span&&span class=&nx&&index&/span&&span class=&p&&,&/span&&span class=&nx&&all&/span&&span class=&p&&){&/span&
&span class=&kd&&let&/span& &span class=&nx&&target&/span& &span class=&o&&=&/span& &span class=&p&&[],&/span&&span class=&nx&&condition&/span& &span class=&o&&=&/span& &span class=&p&&{}&/span&
&span class=&c1&&//业务逻辑：处理查询条件&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'0'&/span&&span class=&p&&]&/span& &span class=&o&&&&&/span& &span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'0'&/span&&span class=&p&&][&/span&&span class=&s1&&'name'&/span&&span class=&p&&]&/span&&span class=&o&&!=&/span&&span class=&nx&&defaultData&/span&&span class=&p&&[&/span&&span class=&mi&&0&/span&&span class=&p&&].&/span&&span class=&k&&default&/span&&span class=&p&&.&/span&&span class=&nx&&name&/span&&span class=&p&&)&/span&&span class=&nx&&condition&/span&&span class=&p&&[&/span&&span class=&s1&&'gameName'&/span&&span class=&p&&]&/span& &span class=&o&&=&/span& &span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'0'&/span&&span class=&p&&][&/span&&span class=&s1&&'name'&/span&&span class=&p&&]&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'1'&/span&&span class=&p&&]&/span& &span class=&o&&&&&/span& &span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'1'&/span&&span class=&p&&][&/span&&span class=&s1&&'name'&/span&&span class=&p&&]&/span&&span class=&o&&!=&/span&&span class=&nx&&defaultData&/span&&span class=&p&&[&/span&&span class=&mi&&1&/span&&span class=&p&&].&/span&&span class=&k&&default&/span&&span class=&p&&.&/span&&span class=&nx&&name&/span&&span class=&p&&)&/span&&span class=&nx&&condition&/span&&span class=&p&&[&/span&&span class=&s1&&'platName'&/span&&span class=&p&&]&/span& &span class=&o&&=&/span& &span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'1'&/span&&span class=&p&&][&/span&&span class=&s1&&'name'&/span&&span class=&p&&]&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'2'&/span&&span class=&p&&]&/span& &span class=&o&&&&&/span& &span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'2'&/span&&span class=&p&&][&/span&&span class=&s1&&'name'&/span&&span class=&p&&]&/span&&span class=&o&&!=&/span&&span class=&nx&&defaultData&/span&&span class=&p&&[&/span&&span class=&mi&&2&/span&&span class=&p&&].&/span&&span class=&k&&default&/span&&span class=&p&&.&/span&&span class=&nx&&name&/span&&span class=&p&&)&/span&&span class=&nx&&condition&/span&&span class=&p&&[&/span&&span class=&s1&&'typeName'&/span&&span class=&p&&]&/span& &span class=&o&&=&/span& &span class=&nx&&all&/span&&span class=&p&&[&/span&&span class=&s1&&'2'&/span&&span class=&p&&][&/span&&span class=&s1&&'name'&/span&&span class=&p&&]&/span&
&span class=&c1&&//创建三个查询任务&/span&
&span class=&kd&&let&/span& &span class=&nx&&tasks&/span& &span class=&o&&=&/span& &span class=&p&&[&/span&&span class=&s1&&'game'&/span&&span class=&p&&,&/span&&span class=&s1&&'plat'&/span&&span class=&p&&,&/span&&span class=&s1&&'type'&/span&&span class=&p&&].&/span&&span class=&nx&&map&/span&&span class=&p&&((&/span&&span class=&nx&&v&/span&&span class=&p&&,&/span&&span class=&nx&&k&/span&&span class=&p&&)&/span&&span class=&o&&=&&/span&&span class=&p&&{&/span&
&span class=&c1&&//使用db.select方法查询&/span&
&span class=&k&&return&/span& &span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&select&/span&&span class=&p&&(&/span&&span class=&nx&&v&/span&&span class=&p&&,&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&formatCondition&/span&&span class=&p&&(&/span&&span class=&nx&&v&/span&&span class=&p&&,&/span&&span class=&nx&&condition&/span&&span class=&p&&),&/span&&span class=&s1&&'name,value'&/span&&span class=&p&&,&/span&&span class=&s1&&'rowid desc'&/span&&span class=&p&&,&/span&&span class=&s1&&'name'&/span&&span class=&p&&).&/span&&span class=&nx&&then&/span&&span class=&p&&((&/span&&span class=&nx&&res&/span&&span class=&p&&)&/span&&span class=&o&&=&&/span&&span class=&p&&{&/span&
&span class=&nx&&target&/span&&span class=&p&&.&/span&&span class=&nx&&push&/span&&span class=&p&&({&/span&
&span class=&nx&&options&/span&&span class=&o&&:&/span&&span class=&nx&&res&/span&&span class=&p&&.&/span&&span class=&nx&&data&/span&&span class=&p&&,&/span&
&span class=&nx&&defaultOption&/span&&span class=&o&&:&/span&&span class=&nx&&defaultData&/span&&span class=&p&&[&/span&&span class=&nx&&k&/span&&span class=&p&&].&/span&&span class=&k&&default&/span&&span class=&p&&,&/span&
&span class=&nx&&clickHandle&/span&&span class=&o&&:&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&onSelect&/span&
&span class=&p&&})&/span&
&span class=&p&&})&/span&
&span class=&p&&})&/span&
&span class=&c1&&//执行查询&/span&
&span class=&nx&&await&/span& &span class=&nb&&Promise&/span&&span class=&p&&.&/span&&span class=&nx&&all&/span&&span class=&p&&(&/span&&span class=&nx&&tasks&/span&&span class=&p&&)&/span&
&span class=&c1&&//将数据交付给联动菜单组件使用&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&selectData&/span& &span class=&o&&=&/span& &span class=&nx&&target&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&&b&以上代码即可完成联动菜单所需要的数据管理工作，看起来是不是比较清晰？&/b&&/p&&hr&&p&&b&使用Database.js的优势&/b&&/p&&blockquote&&b&1.将数据结构化存储于Storage中，避免了以文本形式存入Storage或cookie中再解析的性能消耗流程。&/b&&br&&b&2.将复杂数据清晰的在前端进行管理和使用，代码逻辑更清晰，数据查询更简洁！&/b&&/blockquote&&h2&Database.js使用文档&/h2&&p&&b&openDatabase&/b&&/p&&ul&&li&功能：打开数据库，不存在则创建&/li&&li&语法：openDatabase(dbName,dbVersion,dbDescription,dbSize,callback)&/li&&li&参数：&/li&&ul&&li&dbName：数据库名&/li&&li&dbVersion：数据库版本（打开已存在数据库时，版本号必须一致，否则会报错）&/li&&li&dbDescription：数据库描述&/li&&li&dbSize：数据库预设大小，默认1M&/li&&li&callback：回调函数&/li&&/ul&&/ul&&p&&b&query&/b&&/p&&ul&&li&功能：执行sql语句，支持多表查询&/li&&li&语法：query(sqlStr,args = [],callback,errorCallback)&/li&&li&参数：&/li&&ul&&li&sqlStr：sql语句&/li&&li&args（Array）：传入的数据，替换sql中的?符号&/li&&li&callback:成功回调&/li&&li&errorCallback：失败回调&/li&&/ul&&li&示例：&/li&&/ul&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&c1&&//插入数据&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&query&/span&&span class=&p&&(&/span&&span class=&s1&&'INSERT INTO testTable(id,title) VALUES (?,?)'&/span&&span class=&p&&,[&/span&&span class=&mi&&1&/span&&span class=&p&&,&/span&&span class=&s1&&'这是title'&/span&&span class=&p&&])&/span&
&/code&&/pre&&/div&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&c1&&//多表查询&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&query&/span&&span class=&p&&(&/span&&span class=&s1&&'select game.*,plat.* from game left join plat on game.name = plat.gameName'&/span&&span class=&p&&)&/span&
&/code&&/pre&&/div&&p&&b&isExists&/b&&/p&&ul&&li&功能：检测表是否存在&/li&&li&语法：isExists(tableName)&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&/ul&&/ul&&p&&b&createTable&/b&&/p&&ul&&li&功能：创建一张表&/li&&li&语法：createTable(tableName,fields)&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&li&fields：表结构(需指定字段类型)&/li&&/ul&&li&示例：&/li&&/ul&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&createTable&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'varchar(200)'&/span&&span class=&p&&,&/span&
&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&s1&&'int(100)'&/span&
&span class=&p&&})&/span&
&/code&&/pre&&/div&&p&&b&insert&/b&&/p&&ul&&li&功能：插入一条或多条数据&/li&&li&语法：insert(tableName,data)&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&li&data（Object or Array）：插入的数据，多条数据请传入数组类型&/li&&/ul&&li&示例：&/li&&/ul&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&c1&&//插入单条&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&insert&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品1'&/span&&span class=&p&&,&/span&
&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&10&/span&
&span class=&p&&})&/span&
&span class=&c1&&//插入多条&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&insert&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,[&/span&
&span class=&p&&{&/span&&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品1'&/span&&span class=&p&&,&/span&&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&10&/span&&span class=&p&&},&/span&
&span class=&p&&{&/span&&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品2'&/span&&span class=&p&&,&/span&&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&20&/span&&span class=&p&&},&/span&
&span class=&p&&{&/span&&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品3'&/span&&span class=&p&&,&/span&&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&30&/span&&span class=&p&&},&/span&
&span class=&p&&])&/span&
&/code&&/pre&&/div&&blockquote&&b&将数据存入数据库的常规流程是先createTable，然后再insert，如果你觉得这样麻烦，可以试一下create方法：&/b&&/blockquote&&p&&b&create&/b&&/p&&ul&&li&功能：直接创建数据库并存入数据&/li&&li&注意：类库会根据传入的数据类型自动设置数据库的字段类型，这样可以覆盖大多数需求，但如果你的数据中，同一个字段中有不同的数据类型，有可能不能兼容，建议还是使用常规流程手动设置类型&/li&&li&语法：create(tableName,data)&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&li&data（Object or Array）：插入的数据，多条数据请传入数组类型&/li&&/ul&&li&示例：&/li&&/ul&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&c1&&//直接创建表并存储&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&create&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,[&/span&
&span class=&p&&{&/span&&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品1'&/span&&span class=&p&&,&/span&&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&10&/span&&span class=&p&&},&/span&
&span class=&p&&{&/span&&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品2'&/span&&span class=&p&&,&/span&&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&20&/span&&span class=&p&&},&/span&
&span class=&p&&{&/span&&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品3'&/span&&span class=&p&&,&/span&&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&30&/span&&span class=&p&&},&/span&
&span class=&p&&])&/span&
&/code&&/pre&&/div&&p&&b&delete&/b&&/p&&ul&&li&功能：删除数据&/li&&li&语法：delete(tableName,condition)&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&li&condition（String or Obejct）：查询条件&/li&&/ul&&li&示例：&/li&&/ul&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&c1&&//删除一条数据&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&k&&delete&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,{&/span&&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品1'&/span&&span class=&p&&})&/span&
&/code&&/pre&&/div&&blockquote&关于condition： &b&1、传入array形式时，默认查询条件连接方式是AND，如果需要用OR等方式，可以在condition中传入logic设定，例如{logic：'OR'}&/b& &b&2、如果查询条件有AND、OR等多种方式，建议使用string方式传入&/b&&/blockquote&&p&&b&select&/b&&/p&&ul&&li&功能：查询数据&/li&&li&注意：如果需要多表查询，可参照query方法&/li&&li&语法：select(tableName,condition = '',fields = '*',order = '',group = '',limit = '')&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&li&condition（String or Obejct）：查询条件&/li&&li&fields（String or Array）：返回字段，默认*，支持distinct&/li&&li&order（String or Array）：排序规则&/li&&li&group（String or Array）：分组规则&/li&&li&limit（String or Array）：分页规则&/li&&/ul&&li&示例：&/li&&/ul&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&c1&&//查询name=商品1的数据，并按照price倒序&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&select&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品1'&/span&
&span class=&p&&},&/span&&span class=&s1&&'*'&/span&&span class=&p&&,&/span&&span class=&s1&&'price desc'&/span&&span class=&p&&)&/span&
&span class=&c1&&//查询价格大于0的商品，并用distinct关键字去重&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&select&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,{&/span&
&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&s1&&'&0'&/span&
&span class=&p&&},&/span&&span class=&s1&&'distinct name,pirce'&/span&&span class=&p&&,&/span&&span class=&s1&&'price desc'&/span&&span class=&p&&)&/span&
&/code&&/pre&&/div&&p&&b&update&/b&&/p&&ul&&li&功能：更新数据&/li&&li&语法：update(tableName,data,condition = '')&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&li&data（String or Obejct）：更改数据&/li&&li&condition（String or Obejct）：查询条件&/li&&/ul&&li&示例：&/li&&/ul&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&
&span class=&c1&&//将商品1的价格改为99&/span&
&span class=&nx&&db&/span&&span class=&p&&.&/span&&span class=&nx&&update&/span&&span class=&p&&(&/span&&span class=&s1&&'testTable'&/span&&span class=&p&&,{&/span&
&span class=&nx&&price&/span&&span class=&o&&:&/span&&span class=&mi&&99&/span&
&span class=&p&&},{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span&&span class=&s1&&'商品1'&/span&
&span class=&p&&})&/span&
&/code&&/pre&&/div&&p&&b&truncate&/b&&/p&&ul&&li&功能：清空表&/li&&li&语法：truncate(tableName)&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&/ul&&/ul&&p&&b&drop&/b&&/p&&ul&&li&功能：删除表&/li&&li&语法：drop(tableName)&/li&&li&参数：&/li&&ul&&li&tableName：表名&/li&&/ul&&/ul&&h2&如何使用Database.js&/h2&&blockquote&Github地址：&a href=&/?target=https%3A///zhangsuoyong/Database.js& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/zhangsuoyong&/span&&span class=&invisible&&/Database.js&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/blockquote&&p&&b&如果你有更好的想法，欢迎与我交流，个人微信号：king&/b&&/p&
在日新月异的前端领域中，前端工程师能做的事情越来越多，自从nodejs出现后，前端越来越有革了传统后端命的趋势，本文就再补一刀，详细解读如何在js代码中执行标准的SQL语句 为什么要在JS里写SQL？随着业务复杂度的增长，前端页面可能出现一些数据逻辑复杂…
&p&前言：团队基于ES6和Eslint规则规定代码规范，本文的目的是梳理和总结团队现在实行的规范。&/p&&blockquote&作者：郑灵华，点餐秒付终端团队成员&/blockquote&&h2&目录&/h2&&h2&一、Eslint检测ES6规范配置&/h2&&ol&&li&编码格式规范&/li&&li&声明唯一性&/li&&li&初始化定义规范&/li&&li&代码编写注意事项&/li&&li&派生类相关&/li&&/ol&&h2&二、Airbnb规范节选&/h2&&ol&&li&箭头函数&/li&&li&构造器&/li&&li&迭代遍历&/li&&li&属性定义&/li&&li&解构&/li&&li&函数&/li&&/ol&&h2&三、参考资料&/h2&&p&&br&&/p&&h2&一、Eslint检测ES6规范配置&/h2&&p&&b&1. 编码格式规范&/b&&/p&&p&a.规定箭头函数强制大括号&br&b.规定箭头函数参数是否要使用括号&br&c.规定箭头函数的箭头前后的空格规范&br&d.generator 函数中 &i&号周围的空格&br&e.规定rest参数和扩展运算符与他们的参数之间的空格&br&f.禁止模板字面量中的花括号出现括号&br&g.强制在 yield&/i& 表达式中 * 后面使用空格&/p&&p&a.规定箭头函数强制大括号&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//Eslint文件配置项&/span&
&span class=&s1&&'arrow-body-style'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&s1&&'as-needed'&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&requireReturnForObjectLiteral&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&&span class=&p&&,&/span&
&span class=&p&&}]&/span&
&/code&&/pre&&/div&&p&参数参数说明备注as-needed当大括号是可省略的，强制不使用requireReturnForObjectLiteral不需要显式返回对象字面量必须与as-needed 搭配使用&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//项目中正确使用事例&/span&
&span class=&c1&&//可以省略大括号&/span&
&span class=&kd&&let&/span& &span class=&nx&&foo&/span& &span class=&o&&=&/span& &span class=&p&&()&/span& &span class=&o&&=&&/span& &span class=&mi&&0&/span&&span class=&p&&;&/span&
&span class=&c1&&//不用显式返回对象字面量&/span&
&span class=&kd&&let&/span& &span class=&nx&&foo&/span& &span class=&o&&=&/span& &span class=&p&&()&/span& &span class=&o&&=&&/span& &span class=&p&&({&/span& &span class=&nx&&bar&/span&&span class=&o&&:&/span& &span class=&mi&&0&/span& &span class=&p&&});&/span&
&span class=&c1&&//错误对比：&/span&
&span class=&kd&&let&/span& &span class=&nx&&foo&/span& &span class=&o&&=&/span& &span class=&p&&()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&({&/span&&span class=&nx&&bar&/span&&span class=&o&&:&/span& &span class=&mi&&0&/span& &span class=&p&&});&/span&
&span class=&p&&};&/span&
&/code&&/pre&&/div&&p&b.规定箭头函数参数是否要使用括号&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//Eslint文件配置项&/span&
&span class=&s1&&'arrow-parens'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&s1&&'as-needed'&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&requireForBlockBody&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&&span class=&p&&,&/span&
&span class=&p&&}]&/span&
&/code&&/pre&&/div&&p&参数参数说明备注as-needed当只有一个参数时允许省略圆括号requireForBlockBody当函数体在一个指令块中，参数必须用圆括号包含作为as-needed补充。以函数体是否被 { } 包括快速判断&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//项目实践正确例子&/span&
&span class=&c1&&// 只有一个参数允许省略&/span&
&span class=&nx&&a&/span&&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&x&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&nx&&x&/span& &span class=&o&&*&/span& &span class=&nx&&x&/span&&span class=&p&&;&/span&
&span class=&p&&});&/span&
&span class=&c1&&// requireForBlockBody 参数作为补充，上述代码修改成&/span&
&span class=&nx&&a&/span&&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&((&/span&&span class=&nx&&x&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&nx&&x&/span& &span class=&o&&*&/span& &span class=&nx&&x&/span&&span class=&p&&;&/span&
&span class=&p&&});&/span&
&/code&&/pre&&/div&&p&c.箭头函数的箭头前后的空格规范&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'arrow-spacing'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&before&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&&span class=&p&&,&/span&
&span class=&nx&&after&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&
&span class=&p&&}]&/span&
&/code&&/pre&&/div&&p&参数参数说明备注before箭头前面有空格after箭头后面有空格&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//项目应用&/span&
&span class=&nx&&a&/span& &span class=&o&&=&&/span& &span class=&nx&&a&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&d.generator 函数中 * 号周围的空格&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'generator-star-spacing'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&before&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&&span class=&p&&,&/span&
&span class=&nx&&after&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&
&span class=&p&&}]&/span&
&/code&&/pre&&/div&&p&参数参数说明备注before*前面没有空格after*后面有空格&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//项目正确使用示例&/span&
&span class=&kd&&function&/span&&span class=&o&&*&/span& &span class=&nx&&generator&/span&&span class=&p&&()&/span& &span class=&p&&{}&/span&
&/code&&/pre&&/div&&p&e.不允许rest参数和扩展运算符与他们的参数之间有空格&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'rest-spread-spacing'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&s1&&'never'&/span&&span class=&p&&]&/span&
&/code&&/pre&&/div&&p&参数参数说明备注never符号和参数之间不能有空格&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//rest参数&/span&
&span class=&kd&&let&/span& &span class=&p&&[&/span&&span class=&nx&&a&/span&&span class=&p&&,&/span& &span class=&nx&&b&/span&&span class=&p&&,&/span& &span class=&p&&...&/span&&span class=&nx&&arr&/span&&span class=&p&&]&/span& &span class=&o&&=&/span& &span class=&p&&[&/span&&span class=&mi&&1&/span&&span class=&p&&,&/span& &span class=&mi&&2&/span&&span class=&p&&,&/span& &span class=&mi&&3&/span&&span class=&p&&,&/span& &span class=&mi&&4&/span&&span class=&p&&,&/span& &span class=&mi&&5&/span&&span class=&p&&]&/span&
&span class=&c1&&//扩展运算符&/span&
&span class=&kd&&function&/span& &span class=&nx&&fn&/span&&span class=&p&&(){}&/span&
&span class=&nx&&fn&/span&&span class=&p&&(...&/span&&span class=&nx&&args&/span&&span class=&p&&)&/span&
&/code&&/pre&&/div&&p&f.禁止模板字面量中的花括号出现括号&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'template-curly-spacing'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&span class=&c1&&//花括号里面没有括号&/span&
&span class=&sb&&`hello, &/span&&span class=&si&&${&/span&&span class=&nx&&people&/span&&span class=&p&&.&/span&&span class=&nx&&name&/span&&span class=&si&&}&/span&&span class=&sb&&!`&/span&
&/code&&/pre&&/div&&p&g.强制在 yield &i&表达式中&/i& 后面使用空格&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'yield-star-spacing'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&s1&&'after'&/span&&span class=&p&&]&/span&
&span class=&kd&&function&/span&&span class=&o&&*&/span& &span class=&nx&&generator&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&yield&/span&&span class=&o&&*&/span& &span class=&nx&&other&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&&b&2. 声明唯一性&/b&&/p&&p&a.不能修改类声明的变量&br&b.禁止修改const声明的变量&br&c.不允许类成员里有重复的名称&br&d.不要重复引入一个模块&br&e.禁止在import，export，解构赋值中重命名和原有名字相同&/p&&p&a.不能修改类声明的变量&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-class-assign'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&span class=&c1&&// 简而言之，如果以class Name{}形object-shorthand式出现，那么Name不能做任何更改和赋值&/span&
&span class=&c1&&// 下面例子是正确的。因为A至始至终只是变量&/span&
&span class=&kd&&let&/span& &span class=&nx&&A&/span& &span class=&o&&=&/span& &span class=&kr&&class&/span& &span class=&p&&{&/span&
&span class=&nx&&b&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nx&&A&/span& &span class=&o&&=&/span& &span class=&mi&&0&/span&&span class=&p&&;&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&A&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&A&/span&&span class=&p&&);&/span& &span class=&c1&&//class&/span&
&span class=&kd&&let&/span& &span class=&nx&&Foo&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&A&/span&&span class=&p&&();&/span&
&span class=&nx&&Foo&/span&&span class=&p&&.&/span&&span class=&nx&&b&/span&&span class=&p&&();&/span& &span class=&c1&&//0&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&A&/span&&span class=&p&&);&/span& &span class=&c1&&//0&/span&
&/code&&/pre&&/div&&p&b.禁止修改const声明的变量&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-const-assign'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&/code&&/pre&&/div&&p&c.不允许类成员里有重复的名称&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-dupe-class-members'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&/code&&/pre&&/div&&p&d.不要重复引入一个模块&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-duplicate-imports'&/span&&span class=&o&&:&/span& &span class=&s1&&'off'&/span&
&span class=&c1&&//同一个模块引入两个变量应该写在一个大括号里面&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&merge&/span&&span class=&p&&,&/span& &span class=&nx&&find&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'module'&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&e.禁止在import，export，解构赋值中重命名和原有名字相同&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-useless-rename'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&ignoreDestructuring&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&&span class=&p&&,&/span&
&span class=&nx&&ignoreImport&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&&span class=&p&&,&/span&
&span class=&nx&&ignoreExport&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&&span class=&p&&,&/span&
&span class=&p&&}]&/span&
&span class=&c1&&//形如{ foo as foo }和{ bar: bar }并没有起到重命名的作用，所以应该禁止这种冗余书写&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&foo&/span& &span class=&nx&&as&/span& &span class=&nx&&bar&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s2&&&baz&&/span&&span class=&p&&;&/span&
&span class=&kr&&export&/span& &span class=&p&&{&/span& &span class=&nx&&foo&/span& &span class=&nx&&as&/span& &span class=&nx&&bar&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s2&&&foo&&/span&&span class=&p&&;&/span&
&span class=&kd&&let&/span& &span class=&p&&{&/span& &span class=&p&&[&/span&&span class=&nx&&foo&/span&&span class=&p&&]&/span&&span class=&o&&:&/span& &span class=&nx&&foo&/span& &span class=&p&&}&/span& &span class=&o&&=&/span& &span class=&nx&&bar&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&&b&3. 初始化定义规范&/b&&/p&&p&a.Symbol类型不能用new关键字&br&b.Symbol定义的时候增加描述语言，便于debug&br&c.generator函数里面一定要有yield&br&d.使用 let 或 const 而不是 var&br&e.禁止在字面量声明无用的计算属性&br&f.若变量不会再次赋值，使用const声明&/p&&p&a.Symbol类型不能用new关键字&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-new-symbol'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&span class=&c1&&//symbol应该以函数形式调用&/span&
&span class=&kd&&var&/span& &span class=&nx&&foo&/span& &span class=&o&&=&/span& &span class=&nx&&Symbol&/span&&span class=&p&&(&/span&&span class=&s1&&'foo'&/span&&span class=&p&&);&/span&
&/code&&/pre&&/div&&p&b.Symbol定义的时候增加描述语言，便于debug&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'symbol-description'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&span class=&kd&&let&/span& &span class=&nx&&foo&/span& &span class=&o&&=&/span& &span class=&nx&&Symbol&/span&&span class=&p&&(&/span&&span class=&s2&&&some description&&/span&&span class=&p&&)&/span&
&/code&&/pre&&/div&&p&c.generator函数里面一定要有yield&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'require-yield'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&/code&&/pre&&/div&&p&d.使用 let 或 const 而不是 var&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-var'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&/code&&/pre&&/div&&p&e.禁止在字面量声明无用的计算属性&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'no-useless-computed-key'&/span&&span class=&o&&:&/span& &span class=&s1&&'error'&/span&
&span class=&c1&&//无用的[&a&]计算属性&/span&
&span class=&kd&&var&/span& &span class=&nx&&foo&/span& &span class=&o&&=&/span& &span class=&p&&{[&/span&&span class=&s1&&'0+1,234'&/span&&span class=&p&&]&/span&&span class=&o&&:&/span& &span class=&s2&&&b&&/span&&span class=&p&&};&/span&
&span class=&c1&&//改写成&/span&
&span class=&kd&&var&/span& &span class=&nx&&foo&/span& &span class=&o&&=&/span& &span class=&p&&{&/span& &span class=&s1&&'0+1,234'&/span&&span class=&o&&:&/span& &span class=&mi&&0&/span& &span class=&p&&};&/span&
&/code&&/pre&&/div&&p&f.若变量不会再次赋值，使用const声明&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&s1&&'prefer-const'&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'error'&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&destructuring&/span&&span class=&o&&:&/span& &span class=&s1&&'any'&/span&&span class=&p&&,&/span&
&span class=&nx&&ignoreReadBeforeAssign&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&&span class=&p&&,&/span&
&span class=&p&&}]&/span&
&/code&&/pre&&/div&&p&参数参数说明备注destructuring解构赋值时，所有变量的类型都应该保持一致ignoreReadBeforeAssign忽略声明和第一次赋值之间的变量也就是不能先定义后赋值&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//解构赋值时，值要么都是const要么都是let&/span&
&span class=&c1&&// a0是确定的，b没有被赋值&/span&
&span class=&kr&&const&/span& &span class=&p&&{&/span&&span class=&nx&&a&/span&&span class=&o&&:&/span& &span class=&nx&&a0&/span&&span class=&p&&,&/span& &span class=&nx&&b&/span&&span class=&p&&}&/span& &span class=&o&&=&/span& &span class=&nx&&obj&/span&&span class=&p&&;&/span&
&span class=&kr&&const&/span& &span class=&nx&&a&/span& &span class=&o&&=&/span& &span class=&nx&&a0&/span& &span class=&o&&+&/span& &span class=&mi&&1&/span&&span class=&p&&;&/span&
&span class=&c1&&// a,b都是变量,所以解构赋值定义用let&/span&
&span class=&kd&&let&/span& &span class=&p&&{&/span&&span class=&nx&&a&/span&&span class=&p&&,&/span& &span class=&nx&&b&/span&&span class=&p&&}&/span& &span class=&o&&=&/span& &span class=&nx&&obj&/span&&span class=&p&&;&/span&
&span class=&nx&&a&/span& &span class=&o&&=&/span& &span class=&nx&&a&/span& &span class=&o&&+&/span& &span class=&mi&&1&/span&&span class=&p&&;&/span&
&span class=&nx&&b&/span& &span class=&o&&=&/span& &span class=&nx&&b&/span& &span class=&o&&+&/span& &span class=&mi&&1&/span&&span class=&p&&;&/span&
&span class=&c1&&//错误例子，在ignoreReadBeforeAssign=true时，timer的声明和赋值之间的initialize()函数声明会被省略。&/span&
&span class=&c1&&//从而会在setInterval处报错函数undefined&/span&
&span class=&kd&&let&/span& &span class=&nx&&timer&/span&&span class=&p&&;&/span&
&span class=&kd&&function&/span& &span class