Es6

ES6 中新增了 let 命令，能够用于申明变量。上面咱们就一起来看一下 let 命令的应用。 应用let申明变量let 命令是 ES6 中新增的用于申明变量的一个命令，申明变量时的用法和 JavaScript 中的 var 相似。 示例：例如上面咱们应用 let 命令来申明变量： let a = 10;let b = 20;let c = 30;let 申明的变量只在代码块内无效let 命令的应用尽管和 var 相似，然而两者还是有区别的，例如应用 let 申明的变量，只在 let 所在的代码块内无效。这是什么意思呢，上面咱们通过一个例子来解说一下。 示例：例如咱们在一段代码块中同时应用 let 和 var 来申明一个变量，而后在代码块外应用这个变量： { var a = 10; let b = 20;}console.log(a); console.log(b);当咱们咱们执行这段代码时，输入后果会报错，上面为谬误提醒： ReferenceError: b is not defined这个谬误通知咱们，变量 b 没有被申明，然而咱们明明在 {} 中申明了变量 b ，这示意 let 申明的变量只在它所在的代码块无效，在代码块外应用变量 b 会报错。 let不容许反复申明变量let 命令和 var 命令还有一个不同就是，let 命令只能申明同一个变量一次，而 var 能够申明一个变量屡次。 ...

ES6 是 ECMAScript6 的简称，是2015年6月正式公布的 JavaScript 语言的规范，正式命名为 ECMAScript 2015，它的指标是使得 JavaScript 语言能够用来编写简单的大型应用程序，成为企业级开发语言。 ES6 次要是为了解决 ES5 的先天不足，比方 JavaScript 里没有类的概念，然而目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也反对 ES6，不过只是实现了 ES6 的局部个性和性能。 ECMAScript和JavaScript的关系对于 ECMAScript 和 JavaScript 两者之间的关联，简略的来说就是，前者是后者语言的国际标准，后者是前者的一种实现，在日常场合，这两个词是能够调换的。 JavaScript 的创造者 Netscape 公司，将 JavaScript 提交给国际标准化组织 ECMA，心愿这种语言可能成为国际标准，起初 ECMA 公布标准文件的第一版（ECMA-262），规定了浏览器脚本语言的规范，并将这种语言称为 ECMAScript。该规范从一开始就是针对 JavaScript 语言制订的，之所以不叫 JavaScript，有两个起因： 一是商标，Java 是 Sun 公司的商标，依据受权协定，只有 Netscape 公司能够非法地应用 JavaScript 这个名字，且 JavaScript 自身也曾经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，有利于保障这门语言的开放性和中立性。一个残缺的 JavaScript 实现应该由以下三个局部组成： ECMAScript ：外围。DOM：文档对象模型。BOM：浏览器对象模型。ES6与ECMAScript 2015的关系2011 年，ECMAScript 5.1 版公布后，就开始制订 6.0 版了。因而 ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。 ...

应用箭头函数来定义函数：var f=v=>v;//等同于var f=function(v){ return v;};如果箭头函数不须要参数:var f=()=>5;//等同于var f=function(){return 5};如果箭头函数有多个参数:var sum = (num1,num2)=>num1+num2;//等同于var sum = function(num1,num2){ return num1+num2;};如果箭头函数的代码块局部多余一条语句，就要应用大括号将它们括起来，并且应用return语句返回。var sum = (num1,num2) => {return num1 + num2;}因为大括号被解释为代码块，所以如果箭头函数间接返回一个对象，必须在对象里面加上括号。 let getTempItem=id=>{id:id,name:"Temp"};//报错let getTempItem=id=>({id:id,name:"Temp"});//不报错上面代码可运行，但会失去谬误的后果。 let foo=()=>{a:1};foo() //undefined下面代码中，本用意返回一个对象{a:1}，但因为大括号被解释成代码块，所以执行了一行语句a：1。此时，a被解释为语句的标签，因而理论执行的语句是1，而后函数就完结了，没有返回值。 如果箭头函数只有一行语句，且不须要返回值，能够采纳上面的写法，就不须要写大括号了。let fn=()=>void doesNotReturn();箭头函数能够与变量构造联合应用：const full=({first,last})=>first+' '+last;//等同于function full(person){ return person.first+' '+person.last;}箭头函数使得表白更加简洁：const isEven=n=>n%2===0;const square=n=>n*n;两行醒目的代码定义了两个简略的工具函数，如果不应用箭头函数，可能就要占用多行。 箭头函数的一个用途是简化回调函数：//一般函数[1,2,3].map(function(x){ return x*x;});//箭头函数[1,2,3].map(x=>x*x);//一般函数var result = values.sort(function(a,b){ return a-b;});//箭头函数var result = values.sort((a,b)=>a-b);rest参数与箭头函数联合： const numbers = (...nums)=>nums;numbers(1,2,3,4,5)//[1,2,3,4,5]const headAndTail=(head,...tail)=>[head,tail];headAndTail(1,2,3,4,5)//[1,[2,3,4,5]]*箭头函数留神点函数体内的this对象，就是定义时所在的对象，而不是应用时所在的对象。不能够当作构造函数，即不能够应用new命令，否则会抛出谬误。不能够应用arguments对象，该对象在函数体内不存在，能够应用rest参数代替。不能够应用yield命令，因而箭头函数不能用作Generator函数。第一点扩大=>this对象的指向是可变的，然而在箭头函数中，它是固定的。function foo(){ setTimeout(()=>{ console.log('id:',this.id); },100);}var id=21;foo.call({id:42});//id:42该代码中，setTimeout()的参数是一个箭头函数，这个箭头函数的定义失效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是一般函数，执行时this应该指向全局对象window，这时应该输入21。但箭头函数导致this总是指向函数定义失效时所在的对象({id:42}),所以打印进去的时42。 箭头函数能够让setTimeout外面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。 function Timer() { this.s1 = 0; this.s2 = 0; // 箭头函数 setInterval(() => this.s1++, 1000); // 一般函数 setInterval(function () { this.s2++; }, 1000);}var timer = new Timer();setTimeout(() => console.log('s1: ', timer.s1), 3100);setTimeout(() => console.log('s2: ', timer.s2), 3100);// s1: 3// s2: 0该代码中，Timer函数外部设置了两个定时器，别离应用了箭头函数和一般函数。前者的this绑定定义时所在的作用域(即Timer函数)，后者的this指向运行时所在的作用域(全局对象)。所以，3100ms之后，timer.s1被更新了三次，而timer.s2一次都没更新。 ...

首先要辨别语言和平台之间的关系，语言自身是指ECMAScript,平台是指浏览器或者node，在平时咱们浏览器开发里js就是ECMAScript。浏览器的组成部分node.js的组成部分

ES5的寄生组合式继承function parent (age) { this.age = age}parent.prototype.say = function () { console.log(this.age)}function sub (age, value) { parent.call(this, age) this.value = value}sub.prototype = Object.create(parent.prototype, { constructor: { value: sub, enumerable: false, writable: true, configurable: true }})ES6的Class对于Class的语法举荐看这里：es6.ruanyifeng.com/#docs/class ES6 的class能够看作只是一个语法糖，它的绝大部分性能，ES5 都能够做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。然而它们还是有区别的。 区别： 类必须应用new调用，否则会报错。ES的构造函数是能够当成一般函数应用的类的外部所有定义的办法，都是不可枚举的。（包含外部定义的静态方法）类的静态方法也能够被子类继承能够继承原生构造函数 ES5 是先新建子类的实例对象this，再将父类的属性增加到子类上，因为父类的外部属性无奈获取，导致无奈继承原生的构造函数。ES6 容许继承原生构造函数定义子类，因为 ES6 是先新建父类的实例对象this，而后再用子类的构造函数润饰this，使得父类的所有行为都能够继承应用ES5模仿实现ES6的class依据下面的区别，咱们一步步的看。 1. new操作符查看函数解决问题： 类必须应用new调用，否则会报错。ES的构造函数是能够当成一般函数应用的function _checkType (obj, constructor) { if (!(obj instanceof constructor)) { throw new TypeError('Cannot call a class as a function') }}2. 外部办法不可枚举解决问题： ...

同步与异步的区别： 同步： 同步的思维是：所有的操作都做完，才返回给用户。这样用户在线期待的工夫太长，给用户一种卡死了的感觉（就是零碎迁徙中，点击了迁徙，界面就不动了，然而程序还在执行，卡死了的感觉）。这种状况下，用户不能敞开界面，如果敞开了，即迁徙程序就中断了。 异步： 将用户申请放入音讯队列，并反馈给用户，零碎迁徙程序曾经启动，你能够敞开浏览器了。而后程序再缓缓地去写入数据库去。这就是异步。然而用户没有卡死的感觉，会通知你，你的申请零碎曾经响应了。你能够敞开界面了。 promise all异步用法： getType=(data)=>{ return new Promise(function(resolve, reject){ resolve(data); //输入数据 });}getHeader=(data)=>{ return new Promise(function(resolve, reject){ resolve(data); //输入数据 });}getList=(data1,data2)=>{ this.setState({ data1, data2, })} Promise.all([ this.getType(1), this.getHeader(2) ]).then((results)=>{ var data1=results[0]; var data2=results[1]; this.getList(data1,data2); })

扩大运算符含意扩大运算符（spread）是三个点（...),能够当作rest参数的逆运算,将数组转为用逗号分隔的参数序列rest是把传入的参数组合成一个数组扩大运算符是把数组分解成参数 console.log(...[1,2,3])//1,2,3console.log(1,...[2,3,4],5)//1,2,3,4,5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]该运算符次要用于函数的调用,将一个数组,变为参数序列function push(array,...items){ array.push(...items)}function add(x,y){ return x+y}const numbers = [4,38]add(...numbers) //42...能够与失常的参数联合应用function f(v,w,x,y,z){ console.log(v,w,x,y,z) //-1 0 1 2 3}const args = [0,1]f(-1,...args,2,...[3]);...前面还能够搁置表达式var x = 1const arr = [ ...(x>0?['a']:[]), 'b',]console.log(arr) //['a','b']如果扩大运算符前面是一个空数组，则不产生任何成果。[...[], 1]// [1]只有函数调用时,扩大运算符才能够放在圆括号中(...[1, 2])// Uncaught SyntaxError: Unexpected numberconsole.log((...[1, 2]))// Uncaught SyntaxError: Unexpected numberconsole.log(...[1, 2])// 1 2下面三种状况，扩大运算符都放在圆括号外面，然而前两种状况会报错，因为扩大运算符所在的括号不是函数调用。代替apply办法es5:function f(x,y,z){ console.log(x,y,z) // 0 1 2}var args = [0,1,2];f.apply(null,args)因为f接管的参数不能为数组，为了不便，能够用apply办法来实现用数组的参数来传递，这是很多时候使用的一个小技巧罢了。而apply办法第一个参数，是要代替的对象。没有要代替的，用null,也是很天然的es6:function f(x,y,z){ console.log(x,y,z) // 0 1 2}var args = [0,1,2]f(...args)利用:Math.max// ES5 的写法Math.max.apply(null, [14, 3, 77])// ES6 的写法Math.max(...[14, 3, 77])// 等同于Math.max(14, 3, 77);将一个数组增加到另一个数组的尾部es5:var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];Array.prototype.push.apply(arr1,arr2)console.log(arr1)//[0,1,2,3,4,5]push办法的参数不能是数组，所以只好通过apply办法变通应用push办法es6:let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];arr1.push(...arr2);console.log(arr1)//[0,1,2,3,4,5]另一个例子// ES5new (Date.bind.apply(Date, [null, 2015, 1, 1]))// ES6new Date(...[2015, 1, 1]);bind.apply: ...

函数参数的默认值根本用法es5中,传入函数的参数如果为'',那么在进行判断时会转化为false,对后果造成影响 function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello World //这里!es6容许为函数的参数设置默认值,间接写在参数定义的前面,只有在参数是undefined时才采纳默认值 function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hellofunction Point(x=0,y=0){ this.x = x this.y = y}const p = new Point()p //{x:0,y:0}参数的变量是默认申明的,不能再次申明 function foo(x=5){ let x =1 // error const x =2 // error}应用参数默认值时,函数不能有同名函数 ...

1.二进制八进制二进制:前缀0b:0b111110111 === 503 八进制:前缀0o:0o767 === 503 2.Number.isFinite(),Number.isNaN()Number.isFinite():查看数值是否为无限的,Infinity和非数值类型都返回false Number.isFinite(15); // trueNumber.isFinite(0.8); // trueNumber.isFinite(NaN); // falseNumber.isFinite(Infinity); // falseNumber.isFinite(-Infinity); // falseNumber.isFinite('foo'); // falseNumber.isFinite('15'); // falseNumber.isFinite(true); // falseNumber.isNaN():查看数值是否为NaN,参数类型不是NaN返回false Number.isNaN(NaN) // trueNumber.isNaN(15) // falseNumber.isNaN('15') // falseNumber.isNaN(true) // falseNumber.isNaN(9/NaN) // trueNumber.isNaN('true' / 0) // trueNumber.isNaN('true' / 'true') // true区别于传统的isFinite()和isNaN()isFinite()和isNaN()会先调用Number(),转为数字,再判断Number.isFinite(),Number.isNaN()只对数字无效,不转化 3.Number.parseInt(),Number.parseFloat()ES6 将全局办法parseInt()和parseFloat()，移植到Number对象下面，行为齐全放弃不变。这样做的目标，是逐渐缩小全局性办法，使得语言逐渐模块化。 Number.parseInt === parseInt // trueNumber.parseFloat === parseFloat // true4.Number.isInteger()Number.isInteger():判断一个数是否为整数,非数值和浮点数返回false(js外部,整数和浮点数采纳同样的贮存办法,所以25.0等同于25)留神:1.因为 JavaScript 采纳 IEEE 754 规范，数值存储为64位双精度格局，数值精度最多能够达到 53 个二进制位（1 个暗藏位与 52 个无效位）。如果数值的精度超过这个限度，第54位及前面的位就会被抛弃，这种状况下，Number.isInteger可能会误判。2.如果一个数值的绝对值小于Number.MIN_VALUE（5E-324），即小于 JavaScript 可能分辨的最小值，会被主动转为 0。这时，Number.isInteger也会误判。 ...

String.fromCodePoint()因为String.fromCharCode 用于从unicode码点返回对应字符,但码点大于0xFFFF的不行所以String.fromCodePoint能够识别码点大于0xFFFF的字符 Stirng.raw()String.raw()实质上是一个函数,能够作为解决模板字符串的根本办法,它会将所有变量替换专用于模板字符串的标签函数写成失常函数的模式:它的第一个参数，应该是一个具备raw属性的对象，且raw属性的值应该是一个数组，对应模板字符串解析后的值。 // `foo${1 + 2}bar`// 等同于String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"返回一个斜杠都被本义的字符串 String.raw`Hi\n${2+3}!`// 理论返回 "Hi\\n5!"，显示的是本义后的后果 "Hi\n5!"String.raw`Hi\u000A!`;// 理论返回 "Hi\\u000A!"，显示的是本义后的后果 "Hi\u000A!"如果原字符串的斜杠曾经本义，那么String.raw()会进行再次本义 String.raw`Hi\\n`// 返回 "Hi\\\\n"String.raw`Hi\\n` === "Hi\\\\n" // truecodePointAt()JavaScript 外部，字符以 UTF-16 的格局贮存，每个字符固定为2个字节。对于那些须要4个字节贮存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符.codePointAt()够正确处理 4 个字节贮存的字符，返回一个字符的码点 normalize()includes(),stratsWith(),endsWith()确定字符串是否蕴含在另一个字符串中,三个均返回布尔值includes(string,n):是否找到了参数字符串startsWith(string,n):参数字符串是否在原字符串头部endsWith(string,n):参数字符串是否在原字符串尾部n:endsWith:前n个字符includes,startsWith:第n个地位到字符串完结 let s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // falserepeat()返回一个新字符串,将原字符串反复n次 'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""小数会被取整'na'.repeat(2.9) // "nana"正数或者infinity会报错'na'.repeat(Infinity)// RangeError'na'.repeat(-1)// RangeError0到-1,取整,视为0'na'.repeat(-0.9) // ""NaN,等同于0'na'.repeat(NaN) // ""repeat的参数是字符串，则会先转换成数字。'na'.repeat('na') // ""'na'.repeat('3') // "nanana"padStart(),padEnd()如果字符串不够指定长度,会在头部或尾部补全padStart(n,string):补全头部padEnd(n,string):补全尾部n:最大长度string:用来补全的字符串 ...

变量的解构赋值:数组的解构赋值:依照肯定模式,从数组和对象中提取对象,对变量进行赋值,称为解构. let [a,b,c] = [1,2,3]写法属于“模式匹配”:依照对应地位，对变量赋值 let [head,...tail] = [1,2,3,4]head = 1tail = [2,3,4]解构不胜利:变量的值就等于undefined. let [bar,foo] = [1]foo = undefined不齐全解构: let [a,[b],d] = [1,[2,3],4]a = 1b= 2d = 4如果左边不是数组,回报错 let [foo] = 1;let [foo] = false;let [foo] = NaN;let [foo] = undefined;let [foo] = null;let [foo] = {};set构造,也能够解构赋值 let [x,y,z] = new Set(['a','b','c'])只有数据结构具备迭代,都能够解构赋值 默认值let [foo = true] = []foo = truelet [x, y='b'] =['a',undefined]x= ay = b当一个数组成员严格等于(===)undefined的时候,才采纳默认值([y= 'b']) ...

forEach()办法用于调用数组的每一个元素，并将元素传递给回调函数语法：array.forEach(function(currentValue, index, arr), thisValue)currentValue：必填，以后元素。index：可选，以后元素的索引。arr：可选，以后元素所属的数组对象。thisValue：可选，传递给函数的值个别用this值，如果这个参数为空，"undefined"会传递给"this"值。（这个参数个别很少填）留神：currentValue 必须放在index的后面 const list = ['a', 'b', 'c', 'd']list.forEach((item, index, arr) => { console.log(item, index, arr)})//for循环与以上成果等同for (let i = 0; i < list1.length; i++) { const element = list[i]; console.log(element, i, list)}迭代1、 forEach() 对于空数组是不会执行回调函数的。2、 for能够用continue跳过循环中的一个迭代，forEach用continue会报错。3、 forEach() 须要用 return 跳过循环中的一个迭代，跳过之后会执行下一个迭代。 const list = ['a', 'b', 'c', 'd'] list3.forEach((item, index) => { if (index == 2) { return;//跳出迭代 } console.log(item, index)});for (let i = 0; i < list.length; i++) { if (i == 2) { continue;//跳出迭代 } console.log(list[i], i)}

在es6中更新了两个变量命名办法别离为let const简洁来说：let:比照var不能反复定义，有作用域{自带闭包问题}经常体现在if判断和for循环当中const：不能反复定义，会被间接定义为常量例 function fun(){var a=1var a=2}fun()alert(a)//这里会弹出2为什么咱们在函数内定义的变量在函数里面仍然能够拜访呢？就是因为下面说的，没有作用域问题,并且能够反复定义同样的问题let没有任何谬误在日常99%的状况let是能够代替var的 function fun(){let a=1let a=2}fun()alert(a)//这里会间接报错，就算删掉第二次定义也会弹出‘未定义’，这是因为let自带的作用域问题，在函数内定义的问题就只能在函数内应用至于const常量怎么用他就怎么用，个别是用不到的

ES6一、变量1.1 let变量用于申明变量，用法与var相似，但存在新的个性 个性： let所申明的变量，只在以后代码块内无效，防止全局净化没有变量申明晋升暂时性死区，在let命令申明变量前，该变量都是不可用的不容许反复申明二、常量2.1 const命令用于申明常量 个性： 不能够从新赋值 const obj = { name:'alice', age:22}obj.name = 'zhang' //{ name: 'zhang', age: 22 },不报错，因为只扭转了对象的值，没有扭转援用地址申明的同时必须初始化 const a = 7;暂时性死区不容许反复申明只在以后的代码块内无效三、解构3.1 数组解构从数组和对象中提取值，对变量进行赋值。即只有等号两边的模式雷同，等号左边的值就会一一进行赋值。 let [a,b,c] = [1,2,3]let [a,b,c] = [1,2,3,4] //1 2 3let [a,b,...c] = [1,2,3,4] //1 2 [3,4]let[a,b,c,d,e] = [1,2,3] //1 2 3 undefined undefined//等号右边变量多余，多余的变量会被赋值为undefined//等号左边变量多余，多余的变量会被忽视或者应用...将其整合为一个数组let[a,[b],c] = [1,[2,3],4] //1 2 4let[a,b,c] = [1,[2,3],4] //1 [ 2, 3 ] 4let[a,[b,c],d] = [1,[2,3],4] //1 2 3 4let[a,b,c,d] = [1,[2,3],4] //1 [ 2, 3 ] 4 undefinedlet[a,b=22] = [10] //10 22let[a,b=22] = [10,20] //10 20//如果扭转了默认值，则以扭转后的值为准，若没有扭转，则持续应用默认值数组嵌套对象 ...

Promise 是ES6中新进去的API。其实就是对于回调函数的另一种写法，能够帮忙咱们防止回调天堂。 Promise是一个构造函数，new Promise 返回一个 promise 对象，接管一个带有 resolve 和 reject 两个参数的函数，这个函数在 Promise 构造函数返回所创立 promise 实例对象前被调用。 var p = new Promise(function(resolve, reject) { resolve() // 胜利时调用 reject() // 失败时调用});p.then(function(res) { // 从resolve失去失常后果}, function(res) { // 从reject失去错误信息})resolve，reject 是一个函数，解决完结后调用 resolve 或 reject。当调用resolve，会把以后promise对象状态由 pending 标记胜利（fulfilled），当调用 reject，会把状态由 pending 标记失败（rejected）。 Promise的三种状态： pending ：挂起，以后promise执行的工作，正在执行中fulfilled： 实现，以后promise对象执行的工作，曾经实现，并且是胜利状态rejected： 实现，以后promise对象执行的工作，曾经实现，并且处于失败的状态封装一个反对Promise API的延时函数： function timeOut(time){ // 这个函数中就须要返回一个Promise对象 return new Promise((resolve, reject) => { setTimeout(function(){ // resolve和reject在调用的时候，是能够传递数据的，这个数据会最终被传递到胜利或者失败的回调函数中 resolve(123) // resolve() // reject() }, time) })}基于Promise解决Ajax申请： ...

为什么要学习ES6每一次规范的诞生意味着语言的欠缺，性能的增强，javascript自身也有一些令人不称心的中央 变量晋升个性减少了程序运行时的不可预测性语法过于涣散，实现雷同的性能，不同的人可能会写出不同的代码 let关键字let申明的关键字具备块级作用域，所谓的块级作用域便是一个{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let申明的变量具备块级作用域</title></head><body></body><script> if (true) { let a = 20; console.log(a); //20 if (true) { let b = 50; console.log(b)//50 } } console.log(a) //a is not define</script></html> let能够避免循环变量变成全局变量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let能够避免循环变量变成全局变量</title></head><body></body><script> for(let i =0;i<2;i++){ } console.log(i) //i is not define</script></html> let申明的变量不会进行变量晋升<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let申明的变量不会进行变量晋升</title></head><body></body><script> console.log(a) // a is not define let a = 20;</script></html> let申明的变量具备暂存性死区的个性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let申明的变量具备暂存性死区的个性</title></head><body></body><script> let a = 20; if(true) { console.log(a) let a = 30; }</script></html> ...

简介ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代规范，正式公布与2015年6月。它的指标，是使得JavaScript语言能够用来编写简单的大型应用程序，成为企业级开发语言。 明天咱们将会解说一下ES6中引入的语法新个性。 ECMAScript和JavaScript的关系1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA. 1997年, ECMA 公布262号标准文件 ECMAScript 1.0。 ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。 咱们看一下ECMAScript的发行历史： 从2015年ES2015，也就是ES6公布以来，ECMAScript以每年一个版本的发行速度发行到了ES2020。 前面的文章咱们会解说一下这些新版本的ECMAScript的新个性。 let和constES6中引入了let和const,是为了解决之前的var变量的种种问题。 在ES6之前，JS中变量的作用域有两种：全局作用域和函数作用域。 全局作用域很好了解，咱们在浏览器控制台或者 Node.js 交互终端中开始编写 JavaScript 时，即进入了所谓的全局作用域。 全局作用域的变量能够在任何其余作用域中拜访。 函数作用域就是定义在函数外部的变量，在函数外部都能够拜访到该变量。 这两种作用域会有一些问题： 变量晋升var命令会产生”变量晋升”景象，即变量能够在申明之前应用，值为undefined. // var 的状况 console.log(foo); // 输入undefined var foo = 2; 变量笼罩当咱们在函数作用域应用全局变量的时候，如果函数作用域中定义了同样名字的变量，不论是在哪里定义的，都会笼罩掉全局的变量。如下所示： var tmp = new Date(); function f() { console.log(tmp); if (false) { var tmp = "hello world"; } } f(); // undefined变量泄露变量泄露的意思是，咱们原本只心愿在小范畴作用域应用的变量，后果泄露到了范畴里面，如下所示： ...

ES6ES:全称ECMAScript,它是由ECMA国际标准化组织制订的一项脚本语言的标准化标准。 所谓的ES6，指的是2015年当前的版本 let关键字ES6中新增申明变量的关键字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let关键字申明变量</title></head><body></body><script> let num = 20; console.log(num) //20</script></html> 具备的特点 具备块级作用域所谓的块级作用域，简略而言 就是{} <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>块级作用域</title> </head> <body> </body> <script> if (true) { let a = 20; console.log(a); if (true) { let b = 50; console.log(b) //50 } console.log(b) //b is not define } </script></html> 不存在变量晋升具备暂时性死区

例:要导入的动态文件夹构造 const folderReader = require.context('../../../../assets/chartTypes/options',false,/\.js$/);folderReader返回一个办法webpackContext(req) 应用： const __chartTypes = folderReader.keys().map((k)=>{ return folderReader(k).default; });其中folderReader.keys()返回文件夹内的文件相对路径的数组: 应用返回的数组作为参数调用folderReader返回的办法，就能获得对应的文件内export default 的输入folderReader(k)的输入:最初取得__chartTypes的值: 还有要留神的是，我这里的动态option文件外部是附带了图片的援用，以不便生成带图片的选项。因为门路问题以及打包之后重命名的问题，option内是不能间接应用相对路径定位图片并传进去的。而是应该应用import：`import image from '@/pages/charts/assets/chartTypes/images/根底折线图.png'`

配置babel 依赖包 "devDependencies": {"@babel/cli": "^7.11.6","@babel/core": "^7.11.6","@babel/preset-env": "^7.11.5","@babel/plugin-proposal-decorators": "^7.10.5","@babel/plugin-proposal-class-properties": "^7.10.4"}babel.config // .babelrc{"presets":["@babel/preset-env"],"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }],["@babel/plugin-proposal-class-properties", { "loose" : true }]]}编译文件 "scripts": {"start": "npx babel app.js -o index.js -w"}类装璜器新增办法@flagclass Animal {constructor(name) {this.name = name;}sayHi() {console.log(this.getName()+" say:'hi'")}} function flag(constructor) {constructor.prototype.getName = function(){return this.name}} let monkey = new Animal("monkey");monkey.sayHi(); 传参@flag({specie:"mammal"})class Animal {constructor(name) {this.name = name;}sayHi() {console.log(this.getName()+" say:'hi'")}} function flag(params) {console.log(params);return (constructor)=>{constructor.prototype.getName = function(){return this.name}}}办法装璜器@flagclass Animal {constructor(name) {this.name = name;}@beforesayHi() {console.log(this.getName()+" say:'hi'")}} function flag(constructor) {constructor.prototype.getName = function () {return this.name}} function before(target,property,descripot){let oldMthod = descripot.value;descripot.value = function(){console.log("before exect");oldMthod.call(this, ...arguments);}} let monkey = new Animal("monkey");monkey.sayHi();

可能是最全最新的 “初体验”。 欸，一位敌人和我说，作者啊，你写这么多，指不定也没人看，一点意思都没有，还不如省下这点工夫坐下来 喝 杯 奶 茶 ，对吧。我气不过啊，收回来，就想看看有多少人，看了这篇文章，完事了还能给我点个 ???? ，气一气我这炫富的敌人。新一代 ECMAScript 和 Web Components 规范曾经倒退得十分全面，古代浏览器反对也非常宽泛。纯原生代码也能够写出 Vue 单文件组件的相似成果。 <game-character data-name="El Primo" data-image="//example.dev/el-primo.png"></game-character> import GameCharacter from '//example.dev/xxx.js'; GameCharacter.register('game-character'); Module + Components Example - CodePen （肯定要点开哦！） 元素，是组件的身躯HTML 虽是构建网页的根底技术，但不可否认地，其原生标签数和可扩展性相当无限。开发者总总不足一种主动将 JS 与 HTML 相关联的形式。 这所有继续到自定义元素的呈现。自定义元素（MDN）是 HTML 现代化过程中的里程碑，它将指定 HTML 元素与 ES Class 相绑定，加强了 Web 开发构造与性能的分割，是古代仿生学思维（人们钻研生物体的构造与性能工作的原理，发明先进技术） 在前端畛域的重要冲破，使得易于复用的 HTML 元素的创立和扩大分外简略。总总认同，通过原生自定义元素创立组件简略间接，合乎直觉，代码量小。 标准的命名为了区别原生元素、帮忙浏览器解析，HTML 标准明确而具体地制订了自定义元素的名称应遵循的规定： 自定义元素的名称必须蕴含连字符（-）。以字母结尾。不蕴含大写字母。不能是以下中的一个： <annotation-xml><color-profile> - <font-face> - <font-face-src> - <font-face-uri> - <font-face-format> - <font-face-name> - <missing-glyph>标准以 <math-> 和 <emotion-????> 为例，只有满足上述要求，名称都能够应用。 ...

let和const应用 var 带来的问题var 净化全局变量var a=1;console.log(window.a)var 会使变量晋升console.log(a) // undefinedvar a=1;var 能够被反复申明var a=1;var a=2;var a=3;var 作用域问题全局作用域 { var a=1;}console.log(a) // 1{ let b=2;}console.log(b) // b is not defined函数作用域 for(var i=0;i<3;i++){ setTimeout(()=>console.log(i),0) // 3,3,3}for(let i=0;i<3;i++){ setTimeout(()=>console.log(i),0) // 0,1,2}const 常量const 指向地址不变 开展运算符合并对象或数组 合并数组let a=[0,1];let b=[2,3];console.log([...a,...b]) //[0, 1, 2, 3]合并对象合并对象要辨别是深拷贝还是浅拷贝，开展运算符只拷贝对象一层，属于浅拷贝 let team={name:"Lakers",location:{city:"Los Angeles"}};let player=["LeBron","Davis"];let kuzma = {age:25};let coach = {name:"Frank Vogel",age:47};let Lakers = { ...team, ...coach, player:[...player,kuzma]}team.name="change"; // Lakers 批改失败，浅拷贝team.location.city = "change"; // Lakers 批改胜利，援用地址未变console.log(Lakers)实现深拷贝1、持续开展 ...

methods: { start () { console.log(this.test()) // Promise {<fulfilled>: 123} }, async test () { return 123 // return Promise.resolve(123) // return new Promise((res, rej) => { // res(123) // }) }}如果间接执行this.test()（不论间接return 123还是return Promise.resolve(123)），都将返回Promise对象（会被包装为一个立刻resolve的Promise对象）； 拿到return值的形式：1.Promise.then start () { this.test().then(res => { console.log(res) // 123 })}2.async-await async start () { console.log(await this.test()) // 123}

When I am doing a test of comparison between Stateful and Stateless BSP application ( mentioned in blog Stateless and Stateful – Different behavior in application side ), I meet with a strange issue. The conclusion is stateful BSP application will handle request sequentially. Suppose in client I send two request A and B to server. Request A takes 3 seconds to finish and B 2 seconds. ...

When I am doing a test of comparison between Stateful and Stateless BSP application ( mentioned in blog Stateless and Stateful – Different behavior in application side ), I meet with a strange issue. The conclusion is stateful BSP application will handle request sequentially. Suppose in client I send two request A and B to server. Request A takes 3 seconds to finish and B 2 seconds. ...

当初有一个svg，数据是这样的 path d="M0,0 1,1 ...z M1,1 2,2 ...z"这面有多个开始和完结，我想再这个图形的边上任意点击4个点，做宰割图形，这样就会生成3个图形，请问怎么实现，怎么做，请高人指导，在线等。。。

function dedupe(array) { return Array.from(new Set(array));}

首先先相熟一下Symbol类型的定义及其作用： 能够用作对象属性键的非字符串值的汇合。每个Symbol值都是惟一且不可变的。每个Symbol值都与一个[[Description]]的值关联，该值要么是undefined，要么是一个字符串。内置的Symbol值次要是用于ECMAScript标准算法扩大的。本文次要是通过对标准的解读来理解Symbol内置的值是如何应用及其标准定义的。 咱们先浏览一下标准里的Symbol内置的值： 标准名称Description值及其作用@@asyncIterator"Symbol.asyncIterator"一个返回异步迭代器的办法，次要用于for await@@hasInstance"Symbol.hasInstance"用于确认对象是否为该构造函数实例的办法，次要用于instanceof@@isConcatSpreadable"Symbol.isConcatSpreadable"一个Boolean值，标识是否能够通过Array.prototype.concat进行扁平化解决@@iterator"Symbol.iterator"一个返回异步迭代器的办法，次要用于for of@@match"Symbol.match"用于String.prototype.match调用@@replace"Symbol.replace"用于String.prototype.replace调用@@search"Symbol.search"用于String.prototype.search调用@@species"Symbol.species"一个用来返回创立派生对象的构造函数的办法@@split"Symbol.split"用于String.prototype.split调用@@toPrimitive"Symbol.toPrimitive"用于ToPrimitive形象办法@@toStringTag"Symbol.toStringTag"用于形容一个对象的字符串，次要用于Object.prototype.toString调用@@unscopables"Symbol.unscopables"用于with环境绑定中排除的属性名称下面有些形容比拟形象，不要急，咱们将一一来认真理解其标准定义和作用 Symbol.hasInstance(@@hasInstance)作用和下面形容的一样，用于确认对象是否为该构造函数实例的办法，次要用于instanceof,当调用instanceof时，外部办法会调用对象上的Symbol.hasInstance办法。 咱们来看一个例子 class MyArray { static [Symbol.hasInstance](val){ return val instanceof Array; }}[1,2,3] instanceof MyArray; // true标准解读在执行instanceof (V instanceof target) 操作时，Es6标准规定以下步骤： 判断target是否为对象，如果不是抛出TypeError exception.let instOfHandler = GetMethod(target, @@hasInstance). // GetMethod为外部的形象办法，获取对象的指定办法如果instOfHandler不等于undefined，返回调用target的@@hasInstance办法，并将后果返回Boolean值，算法完结。<font color="red">留神：这里会将后果值进行隐式转换</font> 判断对象是否IsCallable（能够看着是否是Function的实例）, 如果不是抛出TypeError exception.这里进入Es5中对instanceof的标准，Es6中称之为OrdinaryHasInstance。紧接着咱们看一下OrdinaryHasInstance是怎么规定的： 判断target是否IsCallable，如果是下面算法进来的，必定是能够Callable的。判断是否有[[BoundTargetFunction]]外部属性，如果有， let BC = target.[[BoundTargetFunction]]，返回 V instanceof BC， 算法完结。 <font color="red">留神： 这里的[[BoundTargetFunction]]其实是调用bind办法之前的原始办法</font> 看上面的例子阐明： function F1(){}const F2 = F1.bind({});const obj = new F2();obj instanceof F1 // true判断V是否为Object，如果不是 返回false。let P = target.prototype;判断P是否为Object，如果不是抛出TypeError exception；循环判断let V = V.__proto__;if (V === null) { return false;}if(P === V){ return true;}默认值Function.prototype[@@hasInstance] = function(V) { return OrdinaryHasInstance(this, V);}咱们能够看到在es6标准中，先尝试获取对象上的@@hasInstance办法，如果有，先调用对象上的@@hasInstance办法并返回。 ...

SymbolSymbol的特点 Symbol 是一种根底的数据类型。也就是说：应用typeof失去的是symbol类型。每个Symbol都是惟一的，所以当比拟两个Symbol的时候，会失去falseSymbol值能够作为对象属性的标识符，这是Symbol存在的意义。// 'sym'是形容，跟值没有关系const sym = Symbol('sym') console.log(typeof sym) // symbolconst a = Symbol()const b = Symbol()console.log(a===b) // false console.log(a==b) // false const obj = { [Symbol()]: '姓名', age: 18}Symbol能做什么？ Symbol定义一些 不心愿他人拜访的属性。 下面曾经说了Symbol能够作为对象属性的标识符，然而为什么要用呢？咱们先看一个简略的例子。 [Symbol()]: '姓名', age: 18 } Object.keys(obj) // [ 'age' ] for(let key in obj) { console.log(key) // age } ``` - 通过代码咱们能够看到，通过Symbol定义的属性，是无奈通过for in or Object.keys 查找的，这样咱们就能够用Symbol定义一些 不心愿他人拜访的属性。同时咱们能够通过以下办法进行查问 ```js const obj = { [Symbol(1)]: '姓名1', [Symbol(2)]: '姓名2', age: 18 } console.log(Object.getOwnPropertySymbols(obj)) // [ Symbol(1), Symbol(2) ] console.log(Reflect.ownKeys(obj)); // [ 'age', Symbol(1), Symbol(2) ] ```2. 应用Symbol 定义公有的属性和办法 ```js // 2.js const PASSWORD = Symbol() class Login { constructor(username, password) { this.username = username this[PASSWORD] = password } checkPassword(pwd) { return this[PASSWORD] === pwd } } module.exports = Login // 1.js const Login = require('./2.js') const PASSWORD = Symbol() const login = new Login('admin', '123456') console.log(login.checkPassword('123456')) // true console.log(login.username) // admin console.log(login['PASSWORD']) // undefined console.log(login[PASSWORD]) // undefined ``` - 下面代码分两个模块，通过commonjs引入，利用Symbol的唯一性，实现公有属性。checkPassword曾经检测以后的PASSWORD是123456，然而因为Symbol的唯一性，1.js模块无奈生成雷同的Symbol，所以拜访不到这个属性。

SymbolSymbol的特点 Symbol 是一种根底的数据类型。也就是说：应用typeof失去的是symbol类型。每个Symbol都是惟一的，所以当比拟两个Symbol的时候，会失去falseSymbol值能够作为对象属性的标识符，这是Symbol存在的意义。// 'sym'是形容，跟值没有关系const sym = Symbol('sym') console.log(typeof sym) // symbolconst a = Symbol()const b = Symbol()console.log(a===b) // false console.log(a==b) // false const obj = { [Symbol()]: '姓名', age: 18}Symbol能做什么？ Symbol定义一些 不心愿他人拜访的属性。 下面曾经说了Symbol能够作为对象属性的标识符，然而为什么要用呢？咱们先看一个简略的例子。 [Symbol()]: '姓名', age: 18 } Object.keys(obj) // [ 'age' ] for(let key in obj) { console.log(key) // age } ``` - 通过代码咱们能够看到，通过Symbol定义的属性，是无奈通过for in or Object.keys 查找的，这样咱们就能够用Symbol定义一些 不心愿他人拜访的属性。同时咱们能够通过以下办法进行查问 ```js const obj = { [Symbol(1)]: '姓名1', [Symbol(2)]: '姓名2', age: 18 } console.log(Object.getOwnPropertySymbols(obj)) // [ Symbol(1), Symbol(2) ] console.log(Reflect.ownKeys(obj)); // [ 'age', Symbol(1), Symbol(2) ] ```2. 应用Symbol 定义公有的属性和办法 ```js // 2.js const PASSWORD = Symbol() class Login { constructor(username, password) { this.username = username this[PASSWORD] = password } checkPassword(pwd) { return this[PASSWORD] === pwd } } module.exports = Login // 1.js const Login = require('./2.js') const PASSWORD = Symbol() const login = new Login('admin', '123456') console.log(login.checkPassword('123456')) // true console.log(login.username) // admin console.log(login['PASSWORD']) // undefined console.log(login[PASSWORD]) // undefined ``` - 下面代码分两个模块，通过commonjs引入，利用Symbol的唯一性，实现公有属性。checkPassword曾经检测以后的PASSWORD是123456，然而因为Symbol的唯一性，1.js模块无奈生成雷同的Symbol，所以拜访不到这个属性。

2019.05.27 10:14 一、子串的辨认ES6 之前判断字符串是否蕴含子串，用 indexOf 办法，ES6 新增了子串的识别方法。1、includes()：返回布尔值，判断是否找到参数字符串。2、startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。3、endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。以上三个办法都能够承受两个参数，须要搜寻的字符串，和可选的搜寻起始地位索引。 留神：这三个办法只返回布尔值，如果须要晓得子串的地位，还是得用 indexOf 和 lastIndexOf 。这三个办法如果传入了正则表达式而不是字符串，会抛出谬误。而 indexOf 和 lastIndexOf 这两个办法，它们会将正则表达式转换为字符串并搜寻它。例： let string = "apple,banana,orange";string.includes("banana"); // truestring.startsWith("apple"); // truestring.endsWith("apple"); // falsestring.startsWith("banana",6) // true二、字符串反复repeat() 将字符串反复指定次数后返回新的字符串。 //将字符串反复指定次数后返回新的字符串console.log("Hello,".repeat(2)); // "Hello,Hello,"//如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整失去 -0 ，等同于 repeat 零次console.log("Hello,".repeat(3.2)); // "Hello,Hello,Hello,"//如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整失去 -0 ，等同于 repeat 零次console.log("Hello,".repeat(-0.5)); // ""//如果参数是 NaN，等同于 repeat 零次console.log("Hello,".repeat(NaN)); // ""//如果参数是正数或者 Infinity ，会报错:console.log("Hello,".repeat(-1)); // RangeError: Invalid count valueconsole.log("Hello,".repeat(Infinity)); // RangeError: Invalid count value//如果传入的参数是字符串，则会先将字符串转化为数字console.log("Hello,".repeat("hh")); // ""console.log("Hello,".repeat("2")); // "Hello,Hello,"三、字符串补全1、padStart()：返回新的字符串，示意用参数字符串从头部补全原字符串。2、padEnd() ：返回新的字符串，示意用参数字符串从尾部补全原字符串。以上两个办法承受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。 ...

2019/05/14 14:31 ES2015(ES6) 新减少了两个重要的 JavaScript 关键字: let 和 const。 let 申明的变量只在 let 命令所在的代码块内无效。const 申明一个只读的常量，一旦申明，常量的值就不能扭转。let代码块内无效。let 是在代码块内无效，var 是在全局范畴内无效。 { let a = 0; var b = 1;}a // ReferenceError: a is not definedb // 1for循环计数器适宜用let： for (var i = 0; i < 10; i++) { setTimeout(function(){ console.log(i); })}// 输入十个 10for (let j = 0; j < 10; j++) { setTimeout(function(){ console.log(j); })}// 输入 0123456789变量 i 是用 var 申明的，在全局范畴内无效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器外面的 i 指的是全局变量 i ，而循环里的十个 setTimeout 是在循环完结后才执行，所以此时的 i 都是 10。 变量 j 是用 let 申明的，以后的 i 只在本轮循环中无效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器外面的 j 其实是不同的变量，即最初输入12345。（若每次循环的变量 j 都是从新申明的，如何晓得前一个循环的值？这是因为 JavaScript 引擎外部会记住前一个循环的值）。 ...

明天有工夫又看了一下es6的语法,略微做了一点总结,便于日后查阅:let / const 申明变量,一下所讲的所有的特点都是相较于var来说的 var: 1:变量晋升: var/function 申明的变量会被晋升到它的调用之前 console.log(aa); //undefined var aa; ==等价于== var aa; console.log(aa); //undefined aa = 12; console.log(aa); //12 2: 全局作用域 / 函数作用域 函数外部能够拜访全局作用域的变量,大那是全局作用域只能够拜访全局变量,let 特点: 1 . 不存在变量的晋升 console.log(bb); //报错 let bb;2 . 暂时性死区 在一个块级作用域内申明的变量就会绑定在这个区域内了,在let没有申明变量之前这个变量都是不可用的 1) : console.log(aa); // 报错 let aa; 2) : function fn(aa){ let aa; } fn();// 报错,aa曾经申明过了,这也阐明了函数的参数实是在这个函数外部申明一个变量 3) : function bar(x = y, y = 2) { return [x, y]; } bar(); // 报错 在赋值x = y 的时候,y 还没有被申明. //function bar(x = 2, y = x) { // return [x, y]; //} 这样是可行的 3 . 不容许反复申明;在同一个块作用域( "{ }" )内不能够反复申明同一个变量 1) : let aa = 1; let aa; console.log(aa); //报错, aa曾经申明 2) : function fn(bb){ let bb; } fn();//报错 ,bb 曾经申明 4 . 块级作用域 会计作用域外部能够拜访蕴含它的组用域内的变量,然而却不能拜访蕴含于它的块级作用域的变量 let tmp = "hello"; //console.log(aa); //找不到aa //console.log(bb); //找不到bb function f() { console.log(tmp); //hello //console.log(bb); //找不到bb let aa = 123; if (true) { let bb = 567; console.log(tmp); //hello console.log(aa); //123 } } f();const 特点:根本以let是统一的,只有一点const申明的变量是只读的,一但申明就必须初始化(赋值),边切前面也不能够在从新赋值 ...

明天有工夫又看了一下es6的语法,略微做了一点总结,便于日后查阅:let / const 申明变量,一下所讲的所有的特点都是相较于var来说的 var: 1:变量晋升: var/function 申明的变量会被晋升到它的调用之前 console.log(aa); //undefined var aa; ==等价于== var aa; console.log(aa); //undefined aa = 12; console.log(aa); //12 2: 全局作用域 / 函数作用域 函数外部能够拜访全局作用域的变量,大那是全局作用域只能够拜访全局变量,let 特点: 1 . 不存在变量的晋升 console.log(bb); //报错 let bb;2 . 暂时性死区 在一个块级作用域内申明的变量就会绑定在这个区域内了,在let没有申明变量之前这个变量都是不可用的 1) : console.log(aa); // 报错 let aa; 2) : function fn(aa){ let aa; } fn();// 报错,aa曾经申明过了,这也阐明了函数的参数实是在这个函数外部申明一个变量 3) : function bar(x = y, y = 2) { return [x, y]; } bar(); // 报错 在赋值x = y 的时候,y 还没有被申明. //function bar(x = 2, y = x) { // return [x, y]; //} 这样是可行的 3 . 不容许反复申明;在同一个块作用域( "{ }" )内不能够反复申明同一个变量 1) : let aa = 1; let aa; console.log(aa); //报错, aa曾经申明 2) : function fn(bb){ let bb; } fn();//报错 ,bb 曾经申明 4 . 块级作用域 会计作用域外部能够拜访蕴含它的组用域内的变量,然而却不能拜访蕴含于它的块级作用域的变量 let tmp = "hello"; //console.log(aa); //找不到aa //console.log(bb); //找不到bb function f() { console.log(tmp); //hello //console.log(bb); //找不到bb let aa = 123; if (true) { let bb = 567; console.log(tmp); //hello console.log(aa); //123 } } f();const 特点:根本以let是统一的,只有一点const申明的变量是只读的,一但申明就必须初始化(赋值),边切前面也不能够在从新赋值 ...

var、let、const关键字辨析var 能够反复定义同名变量var name='Bob';var name='Tom';console.log(name) //Tom 存在变量晋升//javascript 能够将变量晋升 a = 2console.log(a); //2 var a//然而初始化的变量是不能晋升的console.log(b); //undefinedvar b=3;没有块级作用域let arr=[];for(var i=0;i<2;i++){ arr[i]=function(){ console.log(i) }}arr[0](); //2arr[1](); //2//var 没有块级作用域，i是全局变量 又因为function不是立刻调用函数，循环会很快走到止境let 具备块级作用域let arr=[];for(let i=0;i<2;i++){ arr[i]=function(){ console.log(i) }}arr[0](); //0arr[1](); //1// 如果是var 后果就是2，2 因为var没有块级作用域，i是全局变量 又因为function不是立刻调用函数，循环会很快走到止境存在暂时性死区let b=10;function fn(){ console.log(b); let b=20}fn(); //会报错 Cannot access 'b' before initialization不存在变量晋升x=3;console.log(x); //会报错 Cannot access 'b' before initializationlet x;不能反复定义同名变量let name='Bob';let name='Tom';console.log(name) // 会报错 Identifier 'name' has already been declaredconst 具备块级作用域if(true){ const num=10;}console.log(num) //会报错 num is undefined申明的变量是只读并且须要赋值const PI console.log(PI) //会报错 Missing initializer in const declarationconst P=3.1415;p=3;console.log(p)//会报错 Assignment to constant variable.如果申明的是援用类型(简单类型数据)内容能够批改然而地址不能够批改const obj = { name: 'xm', age: 23 } obj.age = 24;console.log(obj); // 能够操作obj = {}; //欲批改地址，会报错console.log(obj);

1、Promise根本介绍及用法咱就不唠了，详见 传送门1唠一唠Promise的特点 两个特点 Promise对象的状态不受外界影响 > Promise对象代表一个异步操作，共三个阶段，pending(进行中)、fulfilled(已胜利)、rejected(已失败)。也就是只有异步操作的后果才能够决定以后是哪一种状态，其余操作都无奈扭转状态，所以才叫Promise(承诺)。状态一旦扭转，就不会再变，任何时候都能够失去这个后果那么看例子: let p2 = new Promise((resolve, reject) => { throw new Error('报错了');}).then(result => result).catch(e => e);// logundefined后果是undefined，此处尽管进行了throw err，然而没有在catch进行具体的操作，而只是e=>e，还是返回一个Promise实例。 再看: let p2 = new Promise((resolve, reject) => { throw new Error('报错了'); }) .then(result => result) .catch(e => e) .then(() => {console.log('111')}) .catch(() => {console.log('222')}) .then(() => {console.log('333')}) .catch(() => {console.log('444')}); // log 111 333也就是catch没有调用Promise.reject()扭转状态的话，Promise会始终默认走.then而不会走.catch。这也是Promise中的重头戏，咱们在用Promise的时候可能会发现，当then函数中return了一个值，咱们能够持续then上来，不过是什么值，都能在下一个then中获取，还有，当咱们不在then中放入参数，例：promise.then().then()，那么其前面的then仍旧能够失去之前then返回的值。 为什么呢，传送门2首先咱们要留神的一点是，then有返回值，then了之后还能在then，那就阐明之前的then返回的必然是个Promise。置信看完 传送门2 就不须要我多比比了，记得如果没扭转状态会始终默认走 then 而不会走 catch 就行了看例子： let p2 = new Promise((resolve, reject) => { throw new Error('报错了');}).then(result => result) .catch(e => {console.log(e);return Promise.reject('2')}) .then(() => {console.log('111')}) .catch(() => {console.log('222')}) .then(() => {console.log('333')}) .catch(() => {console.log('444')}); //log Error: 报错了 at <anonymous>:2:9 at new Promise (<anonymous>) at <anonymous>:1:10 222 333后果来看，可知进行Promise.reject()后，Promise实例状态从pending变为rejected了，所以才会走catch，然而走了catch之后还是能够持续.then，但此时Promise实例的状态曾经定格为rejected了，无奈再扭转了。先这样吧，后续补充，欢送斧正 ...

这是读书笔记1、概述历史上，JavaScript始终没有模块（module）体系，无奈将一个大程序拆分成相互依赖的小文件，再用简略的办法拼装起来。ES6在语言规范的层面上，实现了模块性能，而且实现得相当简略，齐全能够取代CommonJS和AMD标准，成为浏览器和服务器通用的模块解决方案。ES6模块的设计思维是尽量的动态化，使得编译时就能确定模块的依赖关系，以及输出和输入的变量。CommonJS和AMD模块，都只能在运行时确定这些货色，比方，CommonJS模块就是对象，输出时必须查找对象属性。 // CommonJS模块let { start, exits } = require('fs');// 等同于let _fs = require('fs');let start = _fs.start;let exits = _fs.exits;下面代码的本质是整体加载fs模块（即加载fs的所有办法），生成一个对象（_fs），而后再从这个对象下面读取办法。这种加载称为“运行时加载”，因为只有在运行时能力失去这个对象，导致齐全没方法在编译时做“动态优化”。ES6模块不是对象，而是通过export命令显式指定输入的代码，再通过import命令输出。 // ES6模块import { start, exists } from 'fs';下面代码的本质是从fs模块加载两个办法，其余办法不加载。这种加载称为“编译时加载”或者动态加载，即ES6能够在编译时就实现模块加载，效率要比CommonJS模块的加载形式高。当然，这也导致了没法援用ES6模块自身，因为它不是对象。 2、严格模式ES6的模块主动采纳严格模式，不论你有没有在模块头部加上“use strict”。须要留神this的限度（禁止this指向全局对象）。ES6模块之中，顶层的this指向undefined，即不应该在顶层代码应用this。 3、export命令模块性能次要由两个命令形成：export和import。export命令用于规定模块的对外接口，import命令用于输出其余模块提供的性能。一个模块就是一个独立的文件。该文件外部的所有变量，内部无奈获取。如果你心愿内部可能读取模块外部的某个变量，就必须应用export关键字输入该变量。 // profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';下面代码是profile.js文件，保留了用户信息。ES6将其视为一个模块，外面用export命令对外部输入了三个变量。export的写法，还有另外一种。 // profile.jsvar firstName = 'Michael';var lastName = 'Jackson';export { firstName, lastName };须要特地留神的是，export命令规定的是对外的接口，必须与模块外部的变量建设一一对应关系。 // 报错export 1;// 报错var m = 1;export m;下面这两种写法都会报错，因为没有提供对外的接口。第一种写法间接输入1，第二种写法通过变量，，还是间接输入1。1只是一个值，不是接口。 // 写法一export var m = 1;// 写法二var m = 1;export {m};// 写法三var n = 1;export { n as m };下面三种写法都是正确的，规定了对外的接口m。其余脚本能够通过这个接口，取到值1。它们的本质是，在接口名与模块外部变量之间，建设了一一对应的关系。同样的，function和class的输入，也必须恪守这样的写法。 ...

模块化ES6的模块化的基本规则或特点：1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象； 2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域； 3：模块内部的变量或者函数可以通过export导出； 4：一个模块可以导入别的模块一、导入和导出 1.导出导入： 2.只取需要的 3.导出数目太多时（无需一一对应） 4.推荐写法 1.什么是AMD、CMD、CommonJs？AMD（异步模块定义）是RequireJS在推广过程中对模块定义的规范化产出，它是一个概念，而RequireJS实现这个概念。可以通过require引用加载。RequireJS特点是依赖前置，即在定义前面通过数组的形式加载所有的依赖。 CMD（同步模块定义）是SeaJS在推广过程中对模块定义的规范化产出，SeaJS是CMD这个概念的实现。特点是就近依赖，即哪里用到依赖就在哪里引入，即用即返回（同步概念） CommonJs规范通过module.exports定义，前端浏览器并不支持，推荐在后端nodeJs中使用

Set是ES6中新增的类型，和数组类似，唯一不同在于该类型不会有重复的数据，一般常用来对数组去重****以下几个set常用方法 1. 数组去重 :单一数组的去重。let set1 = new Set([1, 2, 2, 3, 4, 3, 5]) console.log('distinct 1:', set1)结果：distinct 1: { 1, 2, 3, 4, 5 } 多数组的合并去重let arr1 = [1, 2, 3, 4] let arr2 = [2, 3, 4, 5, 6] let set2 = new Set([...arr1, ...arr2]) console.log('distinct 2:', set2)结果 ：distinct 2: { 1, 2, 3, 4, 5, 6 } 2. 类型转换set给数组去重以后得到的结果不是数组结构 , 需要转换成数组 , 方法如下 : ...

一丶Class的基本语法1.简介基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已.来个例子对比一下：ES6之前，生成实例对象的传统方法是通过构造函数。 function Point(x, y) { this.x =x; this.y=y;}Point.prototype.toString = function() { return '('+this.x+','+this.y+')';}var p = new Point(1,2)上面的代码用ES6改写： class Point { constructor(x,y){ this.x = x; this.y = y; } toString(){ return '('+this.x+','+this.y+')'; }}ES6的类，完全可看作构造函数的另一种写法（在类的实例上面调用方法，其实就是调用原型上的方法），这两句话用代码说明： ##demo1class liumz(){}typeof liumz //"function"liumz === liumz.prototype.constructor //true##demo2class B {}let b = new B();b.constructor === B.prototype.constructor // true构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。class Point { constructor() { // ... } toString() { // ... } toValue() { // ... }}// 等同于Point.prototype = { constructor() {}, toString() {}, toValue() {},};由于类的方法都定义在prototype对象上，所以类的新方法可以添加在protype对象上面: ...

生成实例对象的传统方法是通过构造函数，下面是一个案例：function Point(x, y) { this.x = x this.y = y}Point.prototype.toString = function() { return '(' + this.x + ', ' + this.y + ')'}var p = new Point(1, 2)弊端：和传统的面向对象语言写法差异很大，容易让刚入门的程序员产生困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。实例一：class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}好处：可以让对象原型的写法变得更清晰更像面向对象编程的语法私有属性es6不支持私有属性；在属性名之前，使用#，为class加了私有属性 this 的指向，类的方法内部如果含有this，它默认指向类的实例。实例一： class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); }}const logger = new Logger();const { printName } = logger;printName(); // TypeError: Cannot read property 'print' of undefined单独使用有可能报错 ...

变量 语法:$变量名:值 注意: $也是变量名的一部分!注释数组变量:(),(),(),… 例:$arr:(1,值1,值2),(2,值3,值4); 条件语句if条件@if 变量==值 { 样式}if-else条件@if 变量==值 { 样式}@else{样式}if-else if-else条件@if 变量==值 { 样式}@else if 变量==值{样式}@else{样式} 循环语句for-to循环@for 变量 from 数字 to 数字{ 样式 }包含第一个数字,不包含第二个数字在选择器里使用变量时候 格式为: #{变量}在样式中使用直接使用变量即可 for-through循环@for 变量 from 数字 through 数字{ 样式 }包含第一个数字,也包含第二个数字 each循环 选择器的嵌套后代选择器嵌套语法: 父级 { 后代 {} } 子代选择器嵌套语法: 父级 { > 子代 {} } 连字符选择器嵌套伪类选择器和伪元素选择器嵌套当你需要的伪类和伪元素和选择器连接再一起的时候使用 & 连接符操作语法: 选择器 { &:hover {} } 群组选择器的嵌套语法: 群组选择器 { 子级 {} }语法: 选择器 { 群组选择器 {} }语法: 群组选择器 { 群组选择器 {} } ...

引子看了 Redux 的 applyMiddleware 方法的实现，里面函数嵌套的写法都用了新语法，就想关注一下函数嵌套一类新旧的不同。 上一篇 JavaScript 新旧替换四：继承。 OriginMy GitHubES5 方式普通嵌套 function find(value) { return { in: function(arr) { return { combine: function(obj) { var result = arr.indexOf(value); obj.index = result; return obj; } }; } }; } var data = find(6).in([1,2,3,4,5,6]).combine({}); console.info(data); // {index: 5}管道机制管道机制（pipeline）是指前一个函数的输出是后一个函数的输入。 const plus = a => a + 1; const minus = a => a - 2; const multi = a => a * 3; const div = a => a / 4; function pipeline() { for (var len = arguments.length, funcs = [], key = 0; key < len; key++) { funcs[key] = arguments[key]; } return function(val) { var result = funcs.reduce(function(a, b) { return b(a); }, val); return result; }; } var cal = pipeline(plus,minus,multi,div); var result = cal(5); console.info(result); // 3ES2015+ 方式普通嵌套 const find = (value) => ( { in: (arr) => ( { combine: (obj) => { const result = arr.indexOf(value); obj.index = result; return obj; } } ) } ); const data = find2(6).in([1,2,3,4,5,6]).combine({}); console.info(data); // {index: 5}管道机制 const plus = a => a + 1; const minus = a => a - 2; const multi = a => a * 3; const div = a => a / 4; const pipeline = (...funcs) => val => funcs.reduce(function(a,b) { return b(a); }, val); const cal = pipeline(plus,minus,multi,div); const result = cal(5); console.info(result); // 3参考资料ReduxECMAScript StandardMDN Arrow_functionsECMAScript 6 functionBabel Online

Object.assign() 语法：Object.assing(target,…sources) 一、合并对象 const first = { name: "Bob" };const last = { lastName: "Smith" };let person = Object.assign(first, last);console.log(person);/\*{ name: 'Bob', lastName: 'Smith' }\*/二、克隆对象（浅拷贝！！！） const obj = { person: "Bob Smith"};const clone = Object.assign({}, obj);console.log(obj);/\*{ person: 'Bob Smith' }\*/ 三、"null或undefined源被视为空对象一样对待，不会对目标对象产生任何影响。" const test = null;const test1 = Object.assign({},test);console.log(test1);/\*{}\*/ const test2=undefined;const test4=Object.assign({},test2);console.log(test4);/\*{}\*/ 通过以上可以看出，test1和test4依然空对象