ES6 - 技术教程文章
ES6还是ES2015？
遇到了一个困惑 原来称作es6的现在突然变成es2015 了 原因是这个事ecma-262 的第六次变更，所有以前按照惯例称为es6。但是为了更小版本频繁发布，现在 标准叫法是： esmascrip 2015 百度资料： 截止发布日期，JavaScript的官方名称是ECMAScript 2015，Ecma国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于2016年发布，命名为ECMAScript 2016。从现在开始，新版本将按照ECMAScript+年份的形式发布。 官方资料：...
前端知识点回顾之重点篇——ES6的async函数和module【代码】
async函数ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖什么是语法糖？意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西async函数使用时就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已async函数对 Generator 函...
ES6 set和map数据结构对对象数组去重简单实现【代码】
自从有了es6的set数据结构，数组的去重可以简单用一行代码实现，比如下面的方式let arr = [1, 2, 2, 3, 4] function unique (arr) {return [...new Set(arr)] } console.log(unique(arr)) // [1, 2, 3, 4]但是当数组的项不再是简单的数据类型时，比如是对象时，这种方法就会导致错误，比如下面的结果let arr = [{ name: ‘a‘, num: 1},{ name: ‘b‘, num: 1},{ name: ‘c‘, num: 1},{ name: ‘d‘, num: 1},{ name: ‘a‘, num:...
es6【代码】
定义 ：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构1.从数组中结构：1.1 es6语法//数组结构 let [a,b,c]=[1,2,3]; //带默认值的数组结构 let [a1,b1="yueban"]=[‘月半琳‘]let [a2,b2="yueban"]=[‘月半琳‘] 1.1 转义后的es5语法 "use strict";//数组结构 var a = 1,b = 2,c = 3; //带默认值的数组结构var _ref = [‘月半琳‘],a1 = _ref[0],_ref$ = _ref[1],b1 = _ref$ === undefined ? "...
ES6中Try...Catch....finally 异常捕获【代码】
基本语法/** * * try { * tryCode -- 尝试执行的代码 * } catch(error) { * catchCode -- 捕捉到错误的代码时触发 * } finally { * finallyCode -- 无论走 try/catch 都要执行这里的代码 * } * */简单案例try {alert("1"); } catch (error) {alert(error); } finally {alert("Hello, 郑州"); }复杂案例var a = 3; try {if (a < 5) {alert("+++++++");let a = 10000;// throw 的值会传递给 catchthrow a;}if (a < 10 &&...
es6中的promise对象
promise对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的API。promise对象有两个特点：1.对象的状态不受外界影响。promise对象代表一个异步操作，有3种状态：pending（进行种），resolved（已完成,又称fulfilled），rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是"promise"这个名字的由来，它在英语中...
es6中新增的常用数值扩展
Number.integer(123) //true 是否为整形数字 //注意，参数必须是数字，字符串的数字都不行Number.MAX_SAFE_INTEGER / Number.MIN_SAFE_INTEGER // js可处理的最大和最小的数值，也就是安全区Number.isFinite() //用来检查一个数值是否为有限的。和integer一样，不会把字符串隐式转换成数字Math.trunc(1.1) //只取整数， 不涉及四舍五入，类似双波浪号效果（~~1.1）Math.sign(1) //这个是相当有用的，判断数字是正数/负数/0/非数字 ...
ES6 Promise 用法讲解(转)【代码】【图】
Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。 var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log(‘执行完成‘); resolve(‘随便什么数据‘); }, 2000);}); Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和...
ES6数字操作
// 二进制声明let binary = 0B010101console.log(binary) //21 // 八进制声明let octal = 0O666console.log(octal) //438 //判断是否是数字let a = 11console.log(Number.isFinite(a)) //true //判断是否是整数let b = 11console.log(Number.isInteger(b)) //true //判断是否是浮点数let c = 11.11console.log(!Number.isInteger(c)) //true //转换为整型let d = 11.11console.log(NUmber.parseInt(d)) //11 //转换为浮点型let e =...
[ES6深度解析]6：箭头函数【代码】
前世今生<!-- 单行注释箭头从一开始就是JavaScript的一部分。第一个JavaScript教程建议用HTML注释包装内联脚本。这将防止不支持JS的浏览器将JS代码错误地显示为文本。你可以这样写:<script language="javascript"> <!--document.bgColor = "brown"; // red // --> </script> 旧的浏览器会看到两个不支持的标签和一个评论;只有新的浏览器才会看到JS代码。为了支持这种奇怪的破解方法，浏览器中的JavaScript引擎将字符<!作为一行注释...
复习es6-let和const
1、声明变量的方法 es5 : var function es6 : var function let const class 2、let（const）与var 不同 let不能变量提升 let不能多次声明统一变量 let不能声明在window对象上 let内的变量不能作为全局 变量引用 3、const const 不能只声明不赋值 const 只是该变量的指向的地址不变 4、函数中this指向 当函数以一个对象方法运行，指向该方法 当函数直接运行，指向顶层对象 node模...
JavaScript ES6 Promiss对象【代码】
说明Node.js中，以异步(Async)回调著称，使用了异步，提高了程序的执行效率，但是，代码可读性较差的。 假如有几个异步操作，后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去，如果使用Node.js，就需要一层层嵌套下去，Promised对象就是针对此问题所提出来的的解决办法。基本概念Promise对象状态：pending 初始状态,也称为未定状态，就是初始化Promise时，调用executor执行器函数后的状态。fulfilled 完成状态，意味...
ES6 React 组件引用本地图片问题
es6不支持在<img />标签内直接写图片的路径，即：<img src="../../static/banner.png"/> （1）import 方法：import imgURL from ‘../../static/banner.png‘;<img src={imgURL } />（2）require方法<img src={require(‘../../static/banner.png‘)}/>原文：https://www.cnblogs.com/guanpingping/p/10351141.html
Vue基础（ES6）【代码】【图】
起步1.扎实的HTML/CSS/Javascript基本功，这是前置条件。2.不要用任何的构建项目工具，只用最简单的<script>，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。 什么是ECMAScript，以及es6的诞生？1997年 ECMAScript 1.0 诞生1999年12月 ECMAScript 3.0诞生，它 是一个巨大的成功，在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版本完全继承。直到今天，我们...
ES6 中的继承【代码】
ES6 继承 （逼格最高，也是未来的趋势，必学必用）知识点：class 类 ES6给我们提供了class的语法糖，可以通过class来创建类 1 class Person {//此行没有括号，在第二行constructor（）传参 2 constructor(name,age){3this.name = name;4this.age = age;5 }6/*下面的写法就等同于把方法挂在原型上*/ 7 static say(){// 加了static 静态方法，只给类用的方法 8 console.log(‘...
简述ES6其他的东西
第一是修饰器是ES7的一个提案，现在Babel转码器已经支持。那么什么是修饰器呢，修饰器是对类的行为的改变，在代码编译时发生的，而不是在运行时发生的且修饰器只能用于类和类的方法。修饰器可以接受三个函数依次是目标函数、属性名和该属性的描述对象，最后两个参数可以省略。 第二是export和import分别用来导出和导入，如果使用*号指定加载某个对象，那么所有输出值都会加载在这个对象上，使用module命令可以取代import语句，达...
使用gulp搭建es6运行环境【代码】
es6引入很多新的语法特性,但是想要在现有浏览器环境执行,需要将ES6代码转为ES5代码,网上有很多转码器babel,traceur之类的,参考之后,使用traceur和gulp搭建es6运行环境,开始我的es6.开始安装首先确保电脑上安装了nodejs.1.创建一个项目目录2.全局安装Traceur,在控制台输入npm install -g traceur3.打开项目目录,安装gulp以及gulp-traceur插件npm install -g gulpnpm install gulp gulp-traceur –save-dev4.创建package.json文件 np...
ES6-----学习系列九（Symbol数据类型）【代码】
Symbol是es6新的数据类型。 Symbol所声明的值是唯一的，独一无二的。永远不可能相等。Symbol.for(key) 先检查是否声明了key值 如果未声明就相当于调用Symbol 如果已经声明了 就相当于获取这个Symbol{// 声明let a1=Symbol();let a2=Symbol();console.log(a1===a2);//falselet a3=Symbol.for(‘a3‘);let a4=Symbol.for(‘a3‘);console.log(a3===a4);//true } Symbol的使用 可以使用Symbol声明属于自己的唯一的变量 当其...
JavaScript --- ES6 Map集合结构详解【代码】
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。语法new Map([iterable])参数iterableIterable 可以是一个数组或者其他 iterable 对象，其元素或为键值对，或为两个元素的数组。 每个键值对都会添加到新的 Map。null 会被当做 undefined。描述一个Map对象以插入顺序迭代其元素 — 一个 for...of 循环为每次迭代返回一个[key，value]数组。 键的相等(Key equality)键的比较是基于 "SameValueZero" 算法：N...
ES6-变量的结构赋值
比如有一个对象obj={name:‘tom‘,age:11};，当我们需要将这个对象的name和age赋值给另外的变量时候，es5中是var name = obj.name;var age =obj.age;，在es6中针对这种将对象的属性（或者数组的值）赋值给外面的变量的需求，提供了一种更加简便的方式： //1 变量的解构赋值 let obj = {name:‘tom‘,age:11}; //这种对象的结构赋值要求定义的变量名必须和对象的属性名一致，在这里必须是变量名必须是name和age //也可以...
ES6箭头函数基本用法【代码】
ES6箭头函数基本用法``` window.onload = function(){ alert(abc); } //箭头函数 window.onload = ()=>{ alert("abc"); } // 如果只有一个参数圆括号可以省 let play = function(num){ alert(num*2); //24 } play(12);let play = num => {alert(num*2); //100 } play(50);//如果只有一个return 花括号可以省 let move = function(e){return e; } console.log(move(123)); //123let move = num => num*2;console.log(move(234)); ...
ES6特性-rest 与 扩展运算符（...）【代码】【图】
rest参数作用：用于获取参数的实参，用来代替 arguementsfunction date(...args){console.log(args) } date(‘张三‘,‘李四‘,‘王五‘); 效果如图：注意：rest参数必须要放到参数最后扩展运算符（...）作用：将数组转换为逗号分隔的参数序列。例：//声明一个数组 ... const aaa = [‘张三‘,‘李四‘,‘王五‘];//->‘张三‘,‘李四‘,‘王五‘//声明一个函数 function person(){console.log(arguments); } person(...aaa); 效果...
ES6(Decorator(修饰器）)【图】
Decorator(修饰器）1.基本概念函数用来修改 类 的行为1.Decorator 是一个函数 2.通过Decorator(修饰器）能修改 类 的行为（扩展 类 的功能）3.Decorator(修饰器）只在类的范围有用2.基本用法见代码 一、Decorator(修饰器）定义结果修改 time 属性结果：（不允许修改，达到“只读”的功能） 2.类外面进行操作（必须在 class 前面）结果：第三方库：二、实例（卖点系统）1.2.实例化3.运行结果：好处：1.将卖点系统抽离出来成为一个可...
Es6【代码】【图】
一.let&const 1.没有变量提升，不能重复定义，不挂在到window上。 2.声明在{}内部的变量无法在外部使用（块级作用域）】、 3.产生临时死区 4.const声明后不能修改；二：spreed&rest 收集与展开 1.写 1function average(...arg){2 var averageNumber = 0;3 //数组按照从小到大排序4 arg.sort(function(a, b){5 return a - b;6 });7 //去掉第一个和...
ES6模块的使用示例【代码】【图】
1、整体文件结构：2、profile.jsvar firstName = ‘Michael‘; var lastName = ‘Jackson‘; var year = 2019;function test1(){console.log("this is test1"); }function test2(){console.log("this is test2"); }export default{firstName,lastName,year,test1,test2 }3、profile2.jsvar firstName = ‘Michael2‘; var lastName = ‘Jackson2‘; var year = 20192;function test1(){console.log("this is test12"); }function t...
ES6学习笔记（四）—— async 函数【代码】
await 是 async wait 的简写, 是 generator 函数的语法糖。async 函数的特点：async 声明一个方法是异步的，await 则等待这个异步方法执行的完成asyncReadFile = async function () {var f1 = await readFile(‘/etc/fstab‘)var f2 = await readFile(‘/etc/shells‘)console.log(f1.toString())console.log(f2.toString()) }await 只能出现在 async 函数中, 用在 async 外或者普通函数内都会报错function getDay () {returnnew D...
深入理解es6中的Promise
https://www.jianshu.com/p/9e4af5b77253 https://zhuanlan.zhihu.com/p/30797777原文：https://www.cnblogs.com/zuobaiquan01/p/10792325.html
【React Natvie】React-native-swiper的安装和配置【ES6】【代码】【图】
react-native-swiper轮播图，是我们开发中特别常见的效果，首先感谢编写react-native-swiper的大神，让我们方便了很多。这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图. github地址: https://github.com/leecade/react-native-swiper React Native官方文档：https://reactnative.cn/docs/getting-started/ react-native-swiper官方教程：https://github.com/leecade/react-native-swiper 项目地址GitHub地址...
ES6 Generator(生成器) 函数【代码】
ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。 基本用法Generator 函数组成Generator 有两个区分于普通函数的部分：一是在 function 后面，函数名之前有个 * ；函数内部有 yield 表达式。其中 * 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。function* func(){console.log("one");yield ‘1‘;console.log("two");yield ‘...
Es6中let与const的区别：（神奇的块级作用域）【代码】
所谓的块级作用域：形成一个暂时性的死区；{ }一、共同点：a：都是用来声明变量；b：都能形成一个块级作用域；c：都只能在声明变量的块级作用域里面有效；二、不同点： 1.let： a：在同一作用域里面不能使用let声明多个相同变量； b：变量不会泄露在全局； c：let声明的变量不会进行变量的提升； 2.const： a：也不会进行变量的提升； b：const常用来声明一个常量；用const声明的变量的值时不能改变的！！...