ES6 - 技术教程文章

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声明的变量的值时不能改变的!!...

es6字符串模板总结【图】

我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了1.模板中的变量写在${}中,${}中的值可以进行运算2.模板中可以引入标签,并且会被解析3.字符串中的空格位置在输出时候会保留一个空格,字符串换行不会出错原文:http://www.cnblogs.com/douyaer/p/7719853.html

js es6 map weakmap【代码】

前言这里介绍一些map和weakmap的一些属性和他们不同之处。正文mapJavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制.ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完...

ES6 之 Math对象的扩展【代码】

1、ES5http://www.w3school.com.cn/jsref/jsref_obj_math.asp2、ES6Math.trunc() - 取整,去掉一个数的小数部分 console.log(Math.trunc(3.5)); // 3console.log(Math.trunc(-3.5)); // -3// 对于非数值,Math.trunc() 内部使用Number()方法咸江奇转化为数值console.log(Math.trunc(‘123.456‘)); //123console.log(Math.trunc(NaN)); // NaNconsole.log(Math.trunc(‘abc‘)); // NaNconsole.log(Math.trunc()); // NaN Math....

ES6-21:编程风格、ECMAScript规格

良好的代码编程习惯是一个优秀的软件工程师的必备素养,也是一个团队开发易于阅读、高可维护性的大型项目的基础;虽然Javascript弱语言的本质给前端开发者带来了更大的灵活性,但从工程的角度来说这是非常不合理的,也是一个可维护性项目潜在的致命缺陷。为了避免出现‘‘连自己以前写过的代码都不忍睹视’’以及‘‘一个团队成员休假或离职,造成整个项目瘫痪’’的尴尬局面,对于一个大型项目而言,项目的代码风格,和项目的代码...

JavaScript常用数组操作方法,包含ES6方法【代码】

一、concat()concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1); //[1, 2, 3] console.log(arr3); //[1, 2, 3, 4, 5] 二、join()join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,默认使用‘,‘号分割,不改变原数组。var arr = [2,3,4]; console.log(...

es6-变量的解构赋值【代码】

// 变量的解构赋值 从数组对象中提取值,对变量进行赋值,解构赋值在实际开发中大量减少我们的代码量// 数组的结构赋值// es5的写法// let a = 1;// let b =2;// let c = 3;let [a,b,c] = [1,2,3]; //左边的结构和右边的结构对称let [d,[f,k],e] = [1,[3,4],5]console.log(a+b+c); //6console.log(d+f+k+e); //13let [foo="true"] = []; //默认值console.log(foo); //true//undefind和null的区别:null这个值有但为空 undefined没有...

es6语法【图】

es5 中提供了 两个声明变量的方式  var  function  es6 中提供了 四种声明变量的方式  let  const  class  import  现在,定义变量的关键字有 6 个了  备注:不能忽略函数的形参函数的私有变量;  var 定义变量  var 的功能: 变量提升,但是未定义,给 window 添加一个定义的属性  function 定义变量  function 的功能:既可以变量提升,同时还进行了定义  let 定义变量  是 es6 提供的一种声明变量...

ES6学习总结之 正则表达式【代码】

整体来说,ES6对正则表达式的更新和改变不多也不难,下面简单总结于下1.RegExp构造函数ES5 RegExp构造函数只能接受字符串作为参数,而ES6中,其可以接受正则表达式作为参数var reg = new RegExp(/xyz/i)如果使用RegExp的构造函数的第二个参数指定修饰符,那么返回的正则表达式会忽略其原有的的修饰符 2.字符串的正则方法字符串的四个可以使用正则表达式的方法:match(),replace(),search(),split(),ES6中在语言内部都调用了Reg...

ES6解构【代码】

解构赋值:解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性:解构。解构是一种打破数据结构,将其拆分为更小部分的过程。 然而javascript是一门很灵活的语言,所以只要符合要求,即可实现结构赋值,比如对象,数组,函数返回值等只要结果是可以遍历即可解构赋值。比如Math对像...

ES6---字符串【代码】

字符串模板let name="yu"; let age=18;let=`我的名字叫${name},年龄:${age}`;字符串模板在拼装html内容时非常有用的 ,换行不需要用法做任务处理,可以随意的换行 2:字符串新增方法2.1 字符串查找2.1.1 includes包含let str=" apple balala pear";以前的方法if(str.indexOf("apple")!=-1){ console.log("包含apple")}现在新增的方法:includesstr.includes("apple") 结果返回true或者false;2.1.2 startsWith 以什么开头;...

es6 promise的使用【图】

Promise.all()的使用打印结果原文:https://www.cnblogs.com/malong1992/p/12129301.html

webpack 兼容低版本浏览器,转换ES6 ES7语法【代码】

ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛)但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆插件,不能解析es6的语法,导致混淆打包报错。进入正题:ES6转ES51.安装依赖模块npm install babel-polyfill --save-dev npm install babel-preset-es2015-ie --save-dev npm install babel-preset-env --save-dev npm install babel-preset-stage...

在技术胖博客上学习ES6遇到的坑和想法

第一节:ES6的开发环境搭建坑1:全局安装babel-cli已经不被官方推荐,改为局部安装(cnpm install babel-cli --save-dev);坑2:babel src/index.js -o dist/index.js命令失效,可以直接跳过这一步。 想法相对于来说,这是一个挺好的入门的教程,既没有阮老师写的那么晦涩难懂,也没有各种视频一来就写上一堆代码,毫无侧重点,让人学的简直吐血。 总结在学习技术的时候,必须要快速入门(尽量三天内)。刚开始的时,尽量别看视频...

js-ES6学习笔记-Proxy【代码】

1、Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。2、Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。3、ES6 原生提供 Proxy 构造函数,用来生成 P...

ES6 module的其他高级用法【代码】

//content.js export default ‘A cat‘ export function say(){return ‘Hello!‘ } export const type = ‘dog‘ 上面可以看出,export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)//index.js import { say, type } from ‘./content‘ let says = say() console.log(`The ${type} says ${says}`) //The dog says Hello 这里输入的时候要注意:大括号里面的变量名,必须与被导入模块(c...

es6新增语法详解【图】

ES 6 新增JS语法《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。电子版:http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。本书为中级难度,适合已经掌握 ES5 的读者,用来了解这门语言的最新发展;也可当作参考手册,查寻新增的语...

《ES6标准入门》29~48Page 字符串拓展 正则拓展【代码】

1.字符串的拓展ES3允许使用类似\u0061这样的形式来表示字符,其中的数字是Unicode-8编码。但如果超出\uffff的字符,必须使用双字节的形式表达,例如 \uD842\uDFB7。在ES6中,可以用\u{20BB7}这种形式表示,其中数字是Unicode-16编码。对于需要Unicode-16编码存储的字符,ES认为有2个字符。此时使用String.codePoinAt()方法,可以准确的识别字符串中的字符,如果需要遍历,则需要使用for...of循环。与此相对,String.charAt方法则不...

ES6新语法之---对象字面量扩展、模板字符串(5)【代码】

这节课学习ES6中对象字面量扩展和新增模板字符串第一部分:对象字面量扩展1.简洁写法  ES6对于对象字面量属性提供了简写方式。1.1:属性简写//传统写法var x = 2, y = 3,o = {x: x,y: y};//ES6简洁写法var x = 2, y = 3,o = {x, //属性名和赋值变量名相同时,可简写 y};  1.2:方法简写//传统写法var o = {x: function() {//... },y: function() {//... }}//ES6简洁写法var o = {x() {/...

ES6(六) --- Symbol【代码】

概述:ES5 中属性名都是字符串,这容易就造成命名的冲突,特别是在混入模式(mixin模式)下.为解决这个问题ES6 引入了Symbol, Symbol是一种新的基本数据类型,表示独一无二的值! 和ES5 中的六种基本数据类型(Undefined,Null,Boolean,String,Number,Object)同级.简单的来说Symbol 的作用就是为了防止属性方法命名冲突var s1 = Symbol(‘rain‘) var s2 = Symbol(‘rain‘) s1==s2 //false typeof s1 //"symbol" 新的基本数据类...

es6--箭头函数【代码】【图】

箭头函数var c = (a,b)=>{return a+b; }对象函数的解构let j = {a:10,b:‘156‘}; var f = ({a,b="dasa"})=>{console.log(a,b) }数组函数的解构let arrra = [4,,65,5,6,9]; let c= (...arg)=>{console.log(...arg) } c(...arr)原文:https://www.cnblogs.com/cyany/p/9249558.html

es6中相关知识

一、es6块级作用域1. 使用es6中块级作用域的原因  (1)防止局部变量污染全局  (2)防止变量泄露在全局2. 块级作用域{ }形成一个暂时性的死区3. es6中的let和const  let和const 都只能在声明变量的块级作用域内部有效  (1)let声明变量的特点    声明变量只能在当前作用域内使用    在同一块级作用域里面,不能用let声明多个相同的变量    变量不会泄露再全局    变量不会提升  (2)const声明变量的特...