ES6 - 技术教程文章
es6 generator函数【代码】
es6 新增了Generator函数，一种异步编程的解决方案 回顾一下，es6 提供了新的遍历方法，for of ，适用于各种数据集合，统一了遍历操作，原生支持for of 集合的数据集合有。数组，字符串 一部分的类数组，map,set。而对象是不适合与 for of 遍历的，因为原生没有实现Iterator接口，而手动的为对象添加Iterator接口，我们之前使用 return next() 操作，而今天我们尝试用Generator 函数去实现对像的Iterator接口，// Gen...
ES6之Set与Map【代码】【图】
ES6向JS添加了Set和Map。一、Set定义：Set是一种无重复值的有序列表。1.1 创建Set，并添加一个元素<script type="text/javascript">//创建一个Set，名字为setlet set = new Set();//向set中添加元素set.add(5);set.add(‘5‘);//统计元素个数console.log(‘set中的元素个数：‘ + set.size); </script>观察Chrome浏览器的控制台输出：1.2 删除其中一个元素//删除元素5 set.delete(5);1.3 判断测试一个元素是否存在于Set//测试一个元...
[ES6] 07. Default Value for function param【代码】
Normally, we can set default value for function param://Here use "Hello" as default paramvar receive =function(message="Hello", handle){handler(message); }receive("Come", function(message){console.log(message + ", "+ "John"); }); What we can do is use function as a default param:var receive =function(message="Hello", handler=function(message){console.log(message + ", "+ "John"); }){handler(message...
ES6 Promise的理解与简单实现（链接）
理解 简单实现 原文：https://www.cnblogs.com/barryzhang/p/10840090.html
在IDEA(phpStorm)中使用Babel编译ES6【代码】
安装Babel官方文档建议我们根据单个项目进行本地安装，原因是不同的项目可以依赖不同版本的 Babel，使你的项目更方便移植、更易于安装。 在项目的根目录下使用命令行工具（CMD等）执行下面代码npm install --save-dev babel-cli安装编译规则官方提供了几套预设的规则集，分别适用于 ES2015、React 和 ES7 的一些实验性特性。我们可以根据需要安装（如果只需要学习 ES6 语法的话，就只选 ES2015 好了）。# ES2015转码规则 npm insta...
《深入理解ES6》之扩展对象的功能性【代码】
属性初始值的简写 当一个对象的属性与本地变量同名时，不必再写冒号和值，简单地只写属性名即可。function createPerson(name,age){return {name,age}; } //相当于function createPerson(name,age){return {name：name,age:age}; }对象方法的简写 ES6中对对象字面量定义方法的语法进行了改进，消除了冒号和function关键字。var person={name:"jiaxiaonuo",age:24,sayName(){console.log(this.name);} }; //相当于var person=...
基于ES6的函数库rgutil【图】
# 先讲武德上地址github地址: https://github.com/GuCangRan/rgutil使用手册: https://gucangran.github.io/rgutil/npm下载： npm install rgutil# 造轮子的初衷 经历无数个开发项目,掉了无数头发，再这样下去“面向对象编程”要改为“面向我佛编程”。有一个工具提高团队战斗力和保持发型是非常必要的。看了很多开源工具库和文章,从市场经济的宏观宇宙到生态系统的生物本能，于是自己思考开始造轮子，让心脏多休息，它一休息，我...
如何让浏览器支持ES6语法，步骤详细到小学生都能看懂！【代码】【图】
为什么ES6会有兼容性问题？由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布，而到了今天，我们在编程中如果使用了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器肯定无法识别我们的ES6代码，好比浏览器根本看不懂我写的let和const是什么东西？只能报错了。这就是浏览器对ES6的兼容性问题。好消息哪里有灾难，哪里就有勇士和救兵，针对ES6的兼容性问题，很多团队为此开发出...
es6 箭头函数【代码】
1 :x=>x*xfunction (x){ return x*x}2: x=>{ if(x>0){ return 1; }else{ return 0; }}function (x){ if(x>0){ return 1; }else{ return 0; }}3: (x,y)=>x+yfunction (x,y){ return x+y;}4: x=>({name:‘lili‘})function (x){ return {name:‘lili‘}} 原文：https://www.cnblogs.com/3wHaozi/p/8596044.html
JavaScript、ES5和ES6的介绍和区别【代码】【图】
什么是JavaScriptJavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。（好吧，概念什么最讨厌了）动态：在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。弱类：计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。原型：新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原型...
ES6-Iterator【代码】
Iterator 介绍原有的表示集合的数据结构，主要是数组和对象，ES6又添加了Map跟Set，Iterator是一种统一的接口机制，用来处理不同的数据结构Iterator是一种接口，为各种不同的数据结构提供统一的访问机制任何数据结构只要部署Iterator接口，就称这种数据结构是可遍历的ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性上 // 数组的Symbol.iterator属性let arr = [‘a‘, ‘b‘, ‘c‘];let iter = arr[Symbol.itera...
es6数组新方法【代码】
es6给我们带来了更多更便利的数组方法，开熏！！1Array.fromArray.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。 比如我们在获取标签时如果使用的是document.getElementByClassName获取到的就是一组伪数组，这里用from就很方便转化了let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3 };// ES5的写法 var arr1 = [].slice...
ES6 的解构赋值前每次都创建一个对象吗？会加重 GC 的负担吗？【代码】
本文来源于知乎上的一个提问。为了程序的易读性，我们会使用 ES6 的解构赋值：function f({a,b}){} f({a:1,b:2});这个例子的函数调用中，会真的产生一个对象吗？如果会，那大量的函数调用会白白生成很多有待 GC 释放的临时对象，那么就意味着在函数参数少时，还是需要尽量避免采用解构传参，而使用传统的：function f(a,b){} f(1,2);上面的描述其实同时提了好几个问题：会不会产生一个对象？参数少时，是否需要尽量避免采用解构传参...
ES6深入浅出-8 新版的类（下集）-2.全部语法【图】
解答提问 两边都没有构造函数的情况 父类没有构造函数，子类有构造函数的情况 下面用到的了this.body这个属性，所以super()必须要放在这行代码的上面。 在调用this之前必须调用super() 公有属性如果是一个数字，用原型可以，class不行 在原型上加人类的属性 在原型上加上了。 通过class的函数返回字符串来达到想要的效果get和set 前面加get 调用的时候就可以不用加括号了 p1的race实际上是一个函数。 刚开始写错了，后期想去修正，...
es6常用方法总结【代码】
1.let, const 都是块级作用域，其有效范围仅在代码块中。 //es5if(a==1){var b = ‘xxx‘; } console.log(b);//xxx//es6if(a==1){let b = ‘xxx‘; } console.log(b);//undefined ---------------------------------------- const sum = {num1:1,num2:2}; sum.num2 = 6; console.log(sum);//{num1:1,num2:6}常量只是指向了对象的指针，对象本身的内容却依然可以被修改 ----------------------------------------------------------...
ES6----Proxy（一）【代码】
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。听起来好像很绕，可以简单这样理解，Proxy相当于JavaScript对象的一个代理，通过Proxy的配置，可以实现对所代理的对象实现一些拦截和私有化定制。 ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。1var proxy = new Proxy(target, handler);通常，Proxy有以下几种形式： 1 get(target, propK...
读书笔记：深入理解ES6 (附录A)【代码】
附录A：ES6中较小的改动 第1节 使用整数 JavaScript 使用 IEEE 754 编码系统来表示整数和浮点数，多年来这给开发者造成了不少混乱。ES6力图通过降低整数的识别和使用的难度来解决这些问题。 1. 由于浮点数和整数的存储方式不同，Number.isInteger() 方法利用了这种存储的差异来确定该值是否为整数。 2. 只给数字添加小数点不会让整数变为浮点数。 3. IEEE 754 只能准确地表示 -2^53 - 2^53之间的整数，在这个“安全”范...
ES6 自定义事件【代码】
系统自带的自定义事件:使用自定义事件,绑定一些事件 EventTarget这是 系统 自己做了封装处理了;https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget1.继承 extends EventTarget2.super();3.绑定:addEventListenerthis.addEventListener("close",this.close);this.addEventListener("close",()=>{console.log("使用了自定义事件触发了,close")});4.触发:稍微麻烦一点,需要实例化一下let close = new CustomEvent("close"...
ES6高级技巧(五)【代码】【图】
Set由于Set结构没有键名,只有键值所有keys方法和values方法的行为完全一致let a=new Set([1,2,3,4])//a.keys() a.values() 或者直接用of遍历 for (let item of a) {console.log(item) } /* * 1,2,3,4 * */forEach()let a = new Set([1, 2, 3, 4]) let b = []; a.forEach(v=>b.push(v)) console.log(b)数组的map和filter方法也可以间接用于Setlet set =new Set([1,2,3]) let set1=new Set([...set].map(v=>v*2)) console.log(set...
ES6中的类【代码】
前面的话 大多数面向对象的编程语言都支持类和类继承的特性，而JS却不支持这些特性，只能通过其他方法定义并关联多个相似的对象，这种状态一直延续到了ES5。由于类似的库层出不穷，最终还是在ECMAScript 6中引入了类的特性。本文将详细介绍ES6中的类 ES5近似结构 在ES5中没有类的概念，最相近的思路是创建一个自定义类型：首先创建一个构造函数，然后定义另一个方法并赋值给构造函数的原型function PersonType(name) {this.n...
js 简化的（增强的）对象字面量 ES6【代码】
<!DOCTYPE html><html><head><meta charset="utf-8"><title>简化的（增强的）对象字面量</title></head><body><script type="text/javascript">// 字面量语法定义对象（ES5）// var obj = {// "age":30,// "nickname":"老三",// "sex":"男"// };//ES6语法//属性 如果属性值 单独有对应的变量，则可以简化var age =30;var nickname ="老三";var sex ="男";//预期效果如下// var obj = {// "age":age,// "nickn...
[ES6深度解析]11：代理（Proxies）【代码】【图】
这就是我们今天要做的事情：var obj = new Proxy({}, {get: function (target, key, receiver) {console.log(`getting ${key}!`);return Reflect.get(target, key, receiver);},set: function (target, key, value, receiver) {console.log(`setting ${key}!`);return Reflect.set(target, key, value, receiver);} }); 把这段代码当成第一个例子对你来说有点复杂。稍后我会解释所有部分。现在，看看我们创建的对象:> obj.count = ...
WebStorm ES6 语法支持设置&babel使用及自动编译【代码】【图】
一、语法支持设置 Preferences > Languages & Frameworks > JavaScript 二、Babel安装 1、全局安装 npm install -g babel-cli 2、当前项目，适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三、Babel基本用法# 转码结果输出到标准输出babel example.js# 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件babel example.js --out-file compiled.js # 或者babel example.js -o comp...
Babel编译es6【代码】
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。// 转码前 input.map(item => item + 1);// 转码后 input.map(function (item) {return item + 1; }); 上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。一、配置文件.babelrcBabel的配置文...
ES6-类（Class）【代码】
ES6躬行记（20）——类 ES6正式将类（Class）的概念在语法层面标准化，今后不必再用构造函数模拟类的行为。而ES6引入的类本质上只是个语法糖（即代码更为简洁、语义更为清晰），其大部分功能（例如继承、封装和复用等）均可在ES5中实现，只不过现在能用更符合面向对象的语法来操作类。但诸如接口、protected修饰符等一些面向对象常用的语法，ES6没有给出相关标准。一、创建 在ES5时代，可以像下面这样模拟一个类，先声明一个...
前端学习笔记之ES6快速入门【代码】
0x1 let和const letES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。{let x = 10;var y = 20; }x // ReferenceError: x is not defined y // 20 var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。console.log(x) // undefined，var声明变量之前可以使用该变量var x = 10; 而let不会这样，let声明的变量不能在声明之前使用。console.log(x) // ReferenceError: ...
ES6中的变量结构赋值【代码】
小编的上一篇文章更新了es6中关于变量定义的问题，这篇文章继续来一些实用的干货，关于数组、对象的赋值问题。特别是在前后端合作项目的时候，对后端数据的拆分，还有就是对于函数的默认值的惰性赋值问题。看完下面的，相信会忍不住对es6伸出大拇指。真是太方便了。一、数组的结构赋值1、es5语法1 let arr = [1,2,3] 2 let a = arr[0] 3 let b = arr[1] 4 let c = arr[2] 5 console.log(a,b,c) // 1 2 32、es6语法let [a,b,c] = [1...
ES6中函数新增的方式方法【代码】
绪 言ES6 大家对JavaScript中的函数都不陌生。今天我就为大家带来ES6中关于函数的一些扩展方式和方法。 1.1函数形参的默认值1.1.1基本用法 ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。如下代码：function func(x,y){y = y || "tom";console.log(x,y);}func("hello"); //hello tomfunc("hello","woeld"); //hello woeldfunc("hello",""); //hello tomfunction func(x,y){if(typeof...
ES6知识点三(set，map数据结构，promise)【代码】【图】
Map倾向于后台Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性。 1var map = new Map();2// 设置3// map.set(name,value); 4 map.set(‘a‘,‘apple‘);5 map.set(‘b‘,‘banana‘);6// 获取7// map.get(name); 8 console.log(map.get(‘a‘) + ‘‘ + map.get(‘b‘));9// 删除之前map对象...
es6-Set与Map【代码】
se5中的set与map在est5中开发者使用对象属性来模拟。set多用于检查键的存在，map多用于提取数据。{let set = Object.create(null)set.foo = true;//检查属性是否存在if (set.foo) {//其他操作}let map = Object.create(null);map.foo = ‘一个值‘;let val = map.foo;console.log(‘map-->:‘, val); //map-->:一个值‘ }在简单情况下将对象作为map和set来使用都是可行的，但是一旦接触到对象属性的局限性，此方式就会遇到更多的麻...