ES6 - 技术教程文章
ES6中的模板字符串---反引号``【图】
在react中，反引号``有特殊的含义。如MDN中所述，模板字符串（Template literals）允许嵌入表达式，并且支持多行字符串和字符串插补特性。基本语法为以下几种：其中第一行为最基本用法，即使用反引号 (‘`’) 来代替普通字符串中的用双引号和单引号。第二行为多行字符串用法，即反引号中文本可以直接接受换行而不必使用\n换行符来强制换行。第三行则为模板字符串的最核心用法，即反引号中的${expression}占位符中expression可以为任...
配置react+webpack+es6中的一些教训【代码】
1.要用es6,因为目前浏览器的支持情况，那么肯定需要插件将e6的代码转换成es5，我用的是babel-loader，事实证明使用6.x版本似乎是不行的，我换成5.3.2之后就成功了。2.webpack.config.js配置文件中，配置loader的时候，我从网上博客中copy的loader: ‘babel-loader!jsx-loader?harmony‘ 不知道是语法错误还是本身不通，编译时会报错改成仅用babel-loader 错误解决 有空整理一下配置步骤发出来。原文：http://www.cnblogs.com/t...
ES6基础-4【代码】【图】
字符串操作//ES6字符串操作var str = "I am your father fuck you?";str.indexOf("you");//ES5 查找子串的位置str.lastIndexOf("fuck");str.includes("world");//ES6判断是否存在该字符串str.startsWith("I am");str.endsWith("you?");//注意用于查看字符串所在位置只能使用ES5 的indexOf 和lastIndexOf 这两个还能传递正则表达式重复显示某字符串//console.log("A".repeat(-1));//这里使用负数或者infinity都会报错 /*使用NaN 0~-...
ES6深入浅出-2 新版函数：4 迭代器与生成器-1.字面量增强【图】
今天的内容字面量literal 写出来就是它的值 例如字符串hello。这就是自变量。 一个空对象，也是自变量 写出来就是代表它写出来的那个意思就是自变量。 与其相反的就是构造出来的。例如下面的new Object()就不是自变量。 非自变量就是构造出来的量二进制 以前的二进制是怎么写的呢 以前的二进制基本没有什么用 十进制没有十 八进制没有八 二进制，是以0b开头的 es6新语法，以0b开头的是二进制。0o开头的是八进制 在es5里面0777代表是...
ES6 class【代码】
//父类class People {constructor(name) {this.name = name}eat() {console.log(`eat: 姓名 ${this.name}`)} } //子类class Student extends People {constructor(name, number) {super(name)this.number = number}sayHi() {console.log(`sayHi: 姓名 ${this.name} , 学号 ${this.number}`)} } //子类class Teacher extends People {constructor(name, major){super(name)this.major = major}teach(){console.log(`teach: 姓名 ${t...
es6 export和import相关【代码】
在最近写的react项目中，把组件分离出单个文件以供使用，这里可以用export导出，再通过import在别的文件引入。通常的用法如下： 1，从A文件导出单个函数（也可是对象或原语），在B文件引入： 在A文件使用export default导出需要在B文件使用的那个组件（比如Func组件） ==> export default class Func extends React.Component {} 那么在B文件引入时，可以这样写 ==> import FunName from ‘./B.js‘; ，然后在下面的代码中...
ECMAScript、EC5、ES6、ES7
一.ECMAScript入门介绍JavaScript是ECMAScript的实现 JavaScript三部分核心：1.ECMAScript实现2.额外对象，BOM/DOM扩展3.额外对象，Server侧扩展 2009，ES5发布2015，ES6发布2016，ES7发布（草案为主）ES8草案也已发布 二.ES5严格模式相对于正常模式（混杂模式），语法更严格 ‘user strict‘;，打开严格模式，适用于全局或者函数 要求：1.用var声明变量。否则自动成为window对象的一个变量，污染全局环境。2.禁止自定义的函数中t...
es6 Promise对象【图】
（为啥用promise） 基本用法Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。一个简单的例子 原文：https://www.cnblogs.com/huancheng/p/10565054.html
es6 find方法用于查找第一个符合条件的数组成员,如果没有找到返回undefind【代码】【图】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>find方法</title></head><body></body><script>let arr = [{id:1,name:‘zhangsan‘},{id:2,name:‘lisi‘}];//find方法用于查找第一个符合条件的数组成员,如果没有找到返回undefind let target = arr.find((item,index) => {return item.id ==1})console.log(target) </script></html>运行结果原文：https://www.cnblogs.com/malong1992/p/12774115.html
ES6的代码暴露三种方式
多行暴露export function foo() { console,console.log(‘foo() moudle1‘); }export function bar() { console.log(‘bar() moudle1‘) }统一暴露模块2： module2.jsfunction fun1() { console.log(‘fun1() module2‘) }function fun2() { console.log(‘fun2() module2‘) } // 统一暴露 export {foo,bar} 以上两种向外暴露方式在主文件引入时必须使用对象的解构赋值引用（不能使用变量接收的方式来映入） 主模块：main.jsimpor...
ES6躬行记（13）——类型化数组【代码】
类型化数组（Typed Array）是一种处理二进制数据的特殊数组，它可像C语言那样直接操纵字节，不过得先用ArrayBuffer对象创建数组缓冲区（Array Buffer），再映射到指定格式的视图（view）之后，才能读写其中的数据。总共有两类视图，分别是特定类型的TypedArray和通用类型的DataView。在ES6引入类型化数组之后，大大提升了JavaScript数学运算的性能。一、ArrayBuffer 虽然ArrayBuffer对象可以开辟一片固定大小的内存区域（即数组...
ES6新属性（追加）【代码】
话不多说，直接进正题一、MapMap也是ES6新增的一种数据类型，它的本质和对象一样都是键值对的集合。与对象不同的是，它的键值可以是各种数据类型首先我们创建一个Map数据//用var创建一样 let map1 = new Map();我们通过Object实例化两个对象var obj1 = new Object(); var obj2 = new Object();我们使用set方法对Map进行添加值map1.set(obj1,"对象键值1"); map1.set(obj2,"对象键值2"); console.log(map1);还可以用get方法进行取值c...
ES6中表达export default const是无效的【代码】【图】
问题 如果您是ES6新手，可以参考一下本文——高手请移驾别往!请先看下面的图形描述：也就是说，ES6中default后面是不允许跟const关键字的。分析上图中表达可以更换成另一种形式，就可以了，如下所示：const decreaseAction={type:‘decrease‘} export default decreaseAction引用1，https://segmentfault.com/q/10100000101260102，https://blog.csdn.net/zhou_xiao_cheng/article/details/52759632原文：http://blog.51cto.com/z...
ES5和ES6中的继承【代码】【图】
看到一篇写的非常好的关于js继承的文章，其中对构造函数、原型、实例之间的关系的描述十分透彻，故转载作者文章以随时学习，并供大家共同进步！ES5ES5中的继承，看图： 1function Super() {}2 3function Sub() {}4 Sub.prototype = new Super();5 Sub.prototype.constructor = Sub;6 7var sub = new Sub();8 9 Sub.prototype.constructor === Sub; // ② true10 sub.constructor === Sub; // ④ true11 sub.__proto__ === Sub.pro...
ES6-模块化【代码】
ES6-模块化 在es6标准中，js原生支持modulele。这种将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS、AMD和CMD。接下来我们看一下这几种规范。 一、模块化规范1.1 CommonJs规范实例 详细请移步这里。1 import ‘./demo‘; //导入当前目录下的模块2 import ‘mysql‘ ; //导入模块目录中的模块34 export.exports = {} //导出模块NodeJS对其有更好的实现。1.2 AMD规范实例 ...
ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html深入浅出ES6（四）：模板字符串 http://www.infoq.com/cn/articles/es6-in-depth-template-string原文：http://www.cnblogs.com/alalashizi/p/6159033.html
ES6实现数组快速去重【代码】
ES6实现数组快速去重的方法如下：方法一：以数组为参数，新建一个集合，再展开集合，直接用数组符号包括。arr=[...new Set(arr)]方法二：自定义dedupe（去重）函数，使用Array.from()方法转换集合为数组。function dedupe(array) {return Array.from(new Set(array)); //Array.from()能把set结构转换为数组 } 原文：https://www.cnblogs.com/luoyihao/p/15139434.html
传统的类定义和ES6的类定义【图】
上述代码是传统的通过function来定义类上述代码是ES6的类定义方法，在ES6中有了class这个语法糖便可以更好的定义类并理解原文：https://www.cnblogs.com/chujunqiao/p/11625444.html
ES6 之 Reflect 的方法总结【代码】
1. 概述 将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty ），放到 Reflect 对象上。 修改某些 Object 方法的返回结果，让其变得更合理。比如， Object.defineProperty(obj, name, desc) 在无法定义属性时，会抛出一个错误，而 Reflect.defineProperty(obj, name, desc) 则会返回 false 。 让 Object 操作都变成函数行为。某些 Object 操作是命令式，比如 name in obj 和 delete obj[name] ，而 Reflect....
ES6之函数参数【代码】【图】
ES6中对于函数参数主要增加了以下内容：1.参数的扩展/数组的展开；2.默认参数。 什么是参数的扩展？看下面代码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>函数参数的扩展</title><script>function show(a,b,...args) { console.log(a)console.log(b)console.log(args)...
再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6【代码】
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。Javascript社区做了很多努力，在现有的运行环境中，实现”模块”的效果。CommonJSCommonJS定义的模块分为: 模块引用(require) 模块输出(exports) 模块标识(module)CommonJS Modules有1.0、1.1、1.1.1三个版本:Node.js、SproutCore实现了 Modules 1.0SeaJS、AvocadoDB、CouchDB等实现了Mo...
ES6中Promise的原理解析【代码】
转载于原文地址：https://blog.csdn.net/u013217071/article/details/76911627简介Promise 对象用于延迟(deferred) 计算和异步(asynchronous )计算。一个Promise对象代表着一个还未完成，但预期将来会完成的操作。Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象...
ES6：let 与 const【代码】【图】
在ES6中，let 用来定义变量，const 用来定义常量事实上var可以看成是js语言设计上的错误，但是不能移除，因为需要向后兼容 于是提出了一个新的关键字let，可以将let看成更完美的var块级作用域js中使用var来声明一个变量的时候，变量的作用域主要与函数的定义有关针对其他块的定义来说是没有作用域的，比如for、if等，这往往会引发一些问题比如：这个a在大括号外面还是可以用的{var a = 1; }但是这个a在大括号外面是不起作用的{let ...
es6模块化【代码】
在es6出来之前，javascript还不支持模块化，想要实现模块化，只能用requrie.js（国外）和seajs（国内）之类相关的库。随着大前端的工作越来越繁杂，系统越来越庞大，更好的分工使其模块化就显得很重要。在复习之前有一个很重要的，就是目前没有浏览器支持ES6的module模块，如果直接写会报错的。对于ES6的模块化，主要有两个属性，一个是export（导出模块），一个是import（导入模块）；基础用法，假设有两个模块，a.js和b.js//---a...
ES6 利用 Set 数组去重法
例子： const set = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => set.add(x) ); const arr = [...set]; console.log(arr); // [ 2, 3, 5, 4 ]稍做一下解释： 因为，ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 所以，可以做出这样的方法；原文：https://www.cnblogs.com/cnblogs-jcy/p/8508318.html
es6 属性名表达式【代码】
定义对象的属性// 方法一 obj.foo = true;// 方法二 obj[‘a‘ + ‘bc‘] = 123;var obj = {foo: true,abc: 123 }; ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。let propKey = ‘foo‘;let obj = {[propKey]: true,[‘a‘ + ‘bc‘]: 123 }; 定义方法let obj = {[‘h‘ + ‘ello‘]() {return ‘hi‘;} };obj.hello() // hi 原文：https://www.cnblogs.com/blogZhao/p/12560924.html
ES6学习笔记（十一）Object的继承者Reflect【代码】
1.概述Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。（1） 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。（2） 修改某些Object方法的返回结果，让其变得更合理。比如，Object....
ES6扩展——数组扩展【代码】
1、结合扩展运算符使用。通过扩展运算符，在调用函数的时候，把一个数组展开，然后作为这个函数的参数//结合扩展运算符使用function foo(a,b,c){console.log(a); //1console.log(b); //3console.log(c); //2 }//通过扩展运算符，在调用函数的时候,把一个数组展开,然后作为这个函数的参数foo(...[1,3,2]); 实际应用：比如从服务端拿到了json数据，它代表用户信息的集合，相对于对象，按照一定规则使用数组，长度会更...
ES6新增特性——Promise【代码】
一：为什么会出现？1、场景一：在很多业务需求中，你需要通过ajax进行多次请求，而且每次请求返回的数据需要作为参数进行下一次的请求，于是会出现ajax层层嵌套问题。多个请求操作层层依赖，加上每一层还会有复杂的业务逻辑需要处理，使得代码可读性很差，不直观，难以维护和调试。注：这种回调函数层层嵌套又称为回调地狱//请求A $.ajax({success:function (res1) {//请求B $.ajax({success:function (res2) {//请求...
ES6新特性使用小结（一）【代码】
一、let const 命令‘use strict‘; /*function test(){//let a = 1;for(let i=1;i<3;i++){console.log(i)}console.log(i); //引用错误let a = 1;let a= 2; //报错 let 不能重复定义同一个变量 } test(); */function last(){const PI = 3.1515926;//const 也具有块级作用域 const 声明变量时 *必须赋值// PI = 8; 报错 const声明的原始类型常量无法修改 PI is readOnly// console.log(PI);const K = {a:1};K....