ES6 - 技术教程文章
ES6入门概览二--数组【代码】
一 数组1. Array.from() 将两类对象转为真的数组 : 类似数组的对象（伪数组,如arguments、document.getElementsByTagNames等）和可遍历对象（包括ES6新增的Set Map） --ES5,伪数组转为真正的数组 Array.prototype.slice().call(fakeArray) Array.from()的另一个应用是将字符串转为数组2. Array.of() 将一组值转换为数组 弥补数组构造函数Array()的不足3. 数组实例的copyWithin() 参数：targetstartend4.数组实例的find() 用...
ES6判断对象是否为空【代码】
1.ES6判断对象是否为空{}let obj = {} if(Object.keys(obj).length == 0){console.log("对象是空的") }else{ // Object.keys(obj).length 可获取对象的长度 console.log("obj的长度：" + Object.keys(obj).length) } 原文：https://www.cnblogs.com/lilelile/p/13925963.html
ES6语法 Promise Iterator【代码】【图】
类和对象基本定义：class Parent{constructor(name=‘lmx‘){ //name= 默认值 this.name=name} } let v_parent = new Parent(‘v‘); console.log(v_parent); //输出Parent {name: "v"}继承class Parent{constructor(name=‘lmx‘){this.name=name} } class Child extends Parent{constructor(name=’child’){super(name); //如果super中没有参数则都按照父类的默认值 } } console.log(new Child())getter和setterclass Pa...
ES6基础-变量的解构赋值【代码】【图】
作者 | Jeskson 来源 | 达达前端小酒馆解构赋值：数组的解构赋值，对象的解构赋值，字符串的解构赋值，数值与布尔值的解构赋值，函数参数的解构赋值。开发环境准备：编辑器，VS Code，Atom，Sublime，或IDE（Webstorm）浏览器（最新的Chrome）或Node.js环境越新越好。数组的解构赋值：解构赋值语法是一个JavaScript表达式，这使得可以将值从数组或属性从对象提取道不同的变量中。重点解构赋值的概念理解：数组的解构赋值 对象的解构...
ES6(Proxy 和 Reflect)【图】
Proxy 和 Reflect1.Proxy 和 Reflect 的概念Proxy 意为 ‘代理’，连接了用户和真实对象之间的一个层Reflect 意为‘反射’ 反射的是Object2.适用场景 一、Proxy 语法1.类似于供应商的原始对象 obj ，通过 Proxy 新生成对象，这个对象是映射 Object 的，用户访问 monitor,通过 Proxy ,再传递给 obj 对象。2.设置最简单的代理操作（拦截读取作用）真实的为 2017-03-11，通过‘代理’的作用，将 2017 替换为 2018. 3.设置属性只能修...
ES6语法——let和const【代码】
一、let 1.定义 ES6新增了let命令，用来声明变量，用法类似于var，但是和var有一定的区别 2.let只在块级作用域内有效 首先来看一个比较简单的例子，请告诉我，他们分别输出什么//代码段1 for(var i = 0; i < 10 ;i++){console.log(‘我是var声明的‘) } console.log(i)//10 //代码段2 for(let i = 0; i < 10 ;i++){console.log(‘我是let声明的’) } console.log(i)// i is not defined两段代码的不同之处就在...
ES6对象赋值的一个小坑【代码】
错误代码：let foo {foo} = {foo:"Mosan:} console.log(foo) 这样会报错，声明和赋值分开应该这样写let foo ({foo} = {foo:"Mosan:}) //加上括号 console.log(foo) 感觉对我来说没啥用……现在还是菜鸡，很少用到，所以先记录一下原文：https://www.cnblogs.com/mengsha/p/13742657.html
ES6对象赋值的一个小坑【代码】
错误代码：let foo {foo} = {foo:"Mosan:} console.log(foo) 这样会报错，声明和赋值分开应该这样写let foo ({foo} = {foo:"Mosan:}) //加上括号 console.log(foo) 感觉对我来说没啥用……现在还是菜鸡，很少用到，所以先记录一下原文：https://www.cnblogs.com/mengsha/p/13742657.html
ES6中Number中的扩展【代码】
1、Number.parseInt() , Number.parseFloat()在ES6中将parseInt()和parseFloat()都移植到Number对象上去，方法的行为保持不变。 // ES5的写法parseInt(‘11.22‘) // 11parseFloat(‘11223.45#‘) // 11223.45// ES6的写法Number.parseInt(‘11.22‘) // 11Number.parseFloat(‘11223.45#‘) // 11223.45这样做可以逐步减少全局性方法，是语言逐步模块化Number.parseInt === parseInt // true Number.parseFloat === p...
ES6简介
随着JavaScript在程序魔界的地位越来越高，ECMA组委会不得不加强对他的封印，同时也是促进他的进化。组委会在修订JavaScript语言新版本时，不仅在质量上加以完善，同时更加快了更新速度。ECMAScript6,或称为ES2015,简称ES6，是JavaScript语言的下一代标准，15年6月正式发布。这可是能够载入前端发展史册的重大事件。o(▼皿▼メ;)o JS对我说，哼，你能出生在见证这个奇迹的时刻，感到荣耀吧，垃圾！ o(▼皿▼メ;)o现在对ES6的主要新...
es5和es6中怎么声明一个类
//es5let Animal = function(type){ this.type = type}Animal.prototype.eat = function (){ console.log(‘eat food‘)}let dog = new Animal(‘dog‘)let monkey = new Animal(‘monkey‘)monkey.constructor.prototype.eat = function (){ console.log(‘eating‘)}dog.eat()monkey.eat()//es6class Animal{ constructor(type){ this.type = type } eat(){ console.log(‘eating‘) }}let dog = new A...
ES6 中字符串的扩展【代码】
1. 字符的Unicode表示法JavaScript允许采用 \uxxxx 形式表示一个字符，其中 xxxx 表示字符的 Unicode 码点。"\u0061" // 表示小写字母"a"但是这种表示法只限于码点在 \u0000-\uFFFF 之间的字符，有些字符的 Unicode 编码超出了这个范围，那么就必须使用2个双字节的形式表示。"\uD842\uDFB7" // "??" 注意不是吉祥的"吉" "\u5409" // "吉" 这个才是吉祥的"吉"在 ES5 中如果在 \u 后面超过 oxFFFF 的数值，如 "\u0061我" 输出结果为 ...
你知道 ES6~ES12等叫法是怎么来的吗？【图】
你知道 ES6~ES12等叫法是怎么来的吗？前言作为一名前端开发，学习 JavaScript 自是天经地义的事，但是，JavaScript 的发展历史是怎样的，恐怕有相当一部分人都不太了解。我们常常听别人说并且自己也会说 ES6、ES7……ES12，那么，这些叫法到底是怎么来的？今天，我们就来总结一下这些有关 JavaScript 的发展历程。通过阅读本文，你将了解以下知识：ECMA 是什么ECMAScript 是什么JavaScript 的由来ES5 ~ ES12 的意义关于 ECMAECMA 全...
利用es6解构赋值快速提取JSON数据；【代码】
直接上代码{let JSONData = {title:‘abc‘,test:[{nums:5,name:‘jobs‘},{nums:11,name:‘bill‘}]}let {title:estitle,test:[num,names]} = JSONData;console.log(estitle,num,names); }//得到abc { nums: 5, name: ‘jobs‘ } { nums: 11, name: ‘bill‘ }解构赋值还可以用在交换变量值上 let a=1;let b = 2;[a,b] = [b,a]; ==》b=1,a=2；还可以用在接受参数上当只想接收某些返回值的时候例：function f(){return [1,3,5,7];}...
简述ES6
this指向 this 是javascript的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用随着函数使用场合的不同，this的值会发生变化但是有一个总的原则，那就是this指的是函数的调用对象或事件的调用对象注意：找不到调用对象时this指向window对象 改变匿名函数的this指向：function (){}.bind(函数体内this指向的对象)var obj = {name: ‘隔壁王叔叔‘,age: 33};setTimeout(function (){ console.log(this);}...
【ES6】数组的扩展【代码】
1.Array.from(): 将伪数组对象和遍历的对象转为真数组 如果一个对象的键都是正整数或者0，并且有 Length属性，那么这个对象很想数组，称它为伪数组。 伪数组： let obj = {0: 0,1: ‘1‘,2: ‘2‘,‘length‘: 3}obj.length = 3;let arr = Array.from(obj) // 将伪数组转换为数组console.log(arr) // [0,1,2] （1）对象中没有length属性的话， Array.from() 返回一个 [] （2）如果对象中的剪不是正整数的或0 ...
ES6+React+Webpack初步构建项目流程【代码】【图】
当我们打算使用Webpack构建工具，React和ES6来开发项目的时候，构建这么一套自动化的项目的流程见下： 第一步：webpack是一个基于node的项目，我们使用命令行对webpack进行全局的安装npm install webpack –g。可以通过webpack –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack，我们需要将webpack安装到当前的项目依赖中，在新建的文件夹下输入：npm init（安装webpack依赖，...
webpack编译es6【图】
1 安装已安装npm前提下，先全局后在使用的文件夹下安装局部，npm init 初始化package.jsonnpm install webpack --save-dev2 测试 运行后生成b.js运行除了直接webpack命令，还可以修改package.json里面，在scripts里添加 "start":"webpack"，然后npm start就可以了，npm run start一样，跟vue-cli全家桶的npm run dev一样的报错详细，可以用webpack --display-error-details3 配置webpack.config.js更详细参见：http://webp...
VUE入门准备------>ES6【代码】【图】
声明变量的方式： var let const let 和 var的区别 var定义的变量是全局的会覆盖全局的定义 var i = 6; for(var i = 0;i<5;i++){console.log(i) } 01 234 undefined i 5 这个时候已经覆盖了全局的变量 let定义的变量是局部的变量 let i = 6; for(let i = 0;i<5;i++){console.log(i) } 报错 VM144:1 Uncaught SyntaxError: Identifier ‘i‘ has already been declaredat <anonymous>:1:1 (anonymous) @ VM144:1...
ES6(Module模块化）【图】
模块化ES6的模块化的基本规则或特点：1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；3：模块内部的变量或者函数可以通过export导出；4：一个模块可以导入别的模块 一、导入和导出1.导出导入：结果：2.只取需要的结果：3.导出数目太多时（无需一一对应）* 代表全部...
es6中的类及es5类的实现【代码】
目录类的特点类的特点1.类只能通过new得到在es6中类的使用只能是通过new，如果你将它作为一个函数执行，将会报错。//es6的写法 class Child {constructor() {this.name = 1;} } let child = new Child(); console.log(child.name)//1 //如果直接方法调用的形式，会报错 let child = Child();//Class constructor Child cannot be invoked without ‘new‘es5中的class其实就是一个方法，没有关键字class//es5中类的写法，...
ES6深入浅出-1 新版变量声明：let 和 const-1.视频 概述【图】
es7语法比较少，只占了一点点 ES 6 新特性一览：https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let https://zhuanlan.zhihu.com/p/28140450原文：https://www.cnblogs.com/wangjunwei/p/11546269.html
es6基础
分模块引入，回调地狱，this 指向不明 es6优势Promise 是异步编程的一种解决方案 容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息 （1）对象的状态不受外界影响 （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果（此有点即缺点，无法中途取消） var promise = new Promise(function(resolve, reject) { // ... some code if (/* 异...
es6----set map应用场景【代码】
1.数组去重2.字符串去重属性：Set.prototype.size：返回Set实例的成员总数。Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。add(value)：添加某个值，返回 Set 结构本身。delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。has(value)：返回一个布尔值，表示该值是否为Set的成员。clear()：清除所有成员，没有返回值。 遍历操作Set 结构的实例有四个遍历方...
ES6标准入门之正则表达式的拓展【代码】
所谓正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。在之前使用基于Jquery库开发项目的时候，用的正则表达式最多的就是一些输入框的检验，比如检验电话号码或者邮箱的格式是否合适等。 在ES5中，RegExp构造函数的参数有两种情况： 一、参数是字符串，这是第二个参数标识正则表达式的修...
WebStorm ES6 语法支持设置【图】
1 语法支持设置Preferences > Languages & Frameworks > JavaScript这里只要配置ECMAScript版本即可配置之后2 自动转码为ES5file watcher + babel（ES6转码器）你可能希望你写的代码有更好的兼容性，但目前的ES6肯定不是所有浏览器都支持的，所以我们要用到ES6转码器。Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。...
ES6 学习笔记
Let 命令声明变量 － 只在let命令所在的代码块内有效。ex:{ let a = 10; var b = 21;}a // 报错 ReferenceError: a is not definedb ex:var ar = [];for(var i=0; i<10; i++){ var ix = i; ar[ix] = function(){ console.log(ix); };}ar[6](); // 9 变量提升 for(var y=0;y<10;y++){ let num = y; ar[y] = function(){ console.log(num); }}ar[6](); // 6 Let 不允许在相同作用域内，重复声明同一个变量。ex：...
ES6 Promise 用法讲解【代码】【图】
Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){//做一些异步操作setTimeout(function(){console.log(‘执行完成‘);resolve(‘随便什么数据‘);}, 2000); });Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后...
React/React Native 的ES5 ES6写法对照表【代码】
很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。模块引用在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：...
深入理解ES6（二）（解构赋值）【代码】
变量的解构赋值(1) 数组的解构赋值1、基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring ）。只要等号两边的模式相同，左边的变量就会被赋予对应的值。let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; h...