ES6 - 技术教程文章
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声明变量的特...
ES6 中的 Symbol 是什么？【代码】【图】
前言记得刚找工作那会，几种数据类型是必问题，当时的答案一般都是七种——字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined），时至今日，某些网络教程上还是这样的分类：其实，随着 ECMAScript 的发展和完善，在 ES6(2015) 和 ES11(2020) 中，又分别增加了 Symbol 和 BigInt 两种类型，所以，完整的分类应该是下面这样的：今天，我们就来看看 Symbol 到底是什么类型，...
15.ES6模块【代码】
概述在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化分为导出（export） @与导入（import）两个模块。特点ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔...
uglify-es 解决webpack 不能压缩es6 的问题【图】
https://www.npmjs.com/package/uglify-es原文：http://www.cnblogs.com/web-fusheng/p/7483794.html
es6-class基本语法【代码】【图】
class基本语法es5创建对象的方式function Point(x,y){this.x = x;this.y = y;this.line = function(){return "this is line"} } Point.prototype.toString = function(){return '(' + this.x + ',' + this.y + ')'; } var p = new Point(1,2); console.log(p)原型属性(prototype属性)原型属性也叫prototype属性，每一个函数都有prototype属性，初始指向一个空对象(也叫原型对象)。我们可以给prototype进行修改，让它引用一个费控对...
ES6常用特性总览【图】
以前看过一遍es6，今天面试时被问到了一个很简单的es6特性，竟然没回答上来，特来重温一下es6，做个总结性笔记。一、什么是es6 es6是新版本JavaScript语言的标准，在2015年6月发布，现在浏览器已支持绝大部分特性，某些不支持的也可以使用Babel转码器转换成JavaScript别的版本。es6提供了很多的新特性和语法糖，使JavaScript更加完善和丰富。二、十大新特性简介 1、const和let关键字 let：新增的用来声明变量的命令，...
NodeJS模块和ES6模块系统语法及注意点【代码】
社区模块规范:1.CommonJS规范 规范实现者： NodeJS 服务端 Browserify 浏览器2.AMD规范 全称 异步模块定义 规范实现者： RequireJS 浏览器3.CMD规范 通用模块定义 规范实现者： seaJS 服务端和浏览器通用官方模块规范1.ESM规范 就是ES6 Module 各浏览器和服务端目前常用的就是浏览器端的RequireJS、NodeJS、以及ESMCommonJS语法分析module.export关键 1.module.exports实质上是一个对象,最后模块导出的对象就是这个引用指向的对象 ...
es6笔记5^_^set、map、iterator【代码】【图】
一、set1.基本用法 数据结构Set类似于数组，但是成员的值都是唯一的，没有重复的值。 let s = new Set();[2,3,5,4,5,2,2].map(x => s.add(x))for (let i of s) {console.log(i)}// 2 3 5 4 //Set函数可以接受一个数组作为参数，用来初始化。var items = new Set([1,2,3,4,5,5,5,5]);console.log(items); // set objectconsole.log(items.size); // 5 //向Set加入值的时候，不会发生类型转换，所以5和“5”是两个不同的值。le...
ES6 高效的map【代码】
//高效的map let json={name:‘nl‘,skill:‘web‘ }; console.log(json.name); var map=new Map(); map.set(json,‘iam‘); console.log(map); //下面看下set里面设置一对key，value值 map.set(‘nl‘,json); console.log(map); //map增删查 //get取值console.log(map.get(json)); console.log(map.get(‘nl‘)); //delete删除特定的值，clear删除全部的值 map.delete(json); console.log(map); console.log(map.size); map.clear...
ES6 set方法对数组去重和排序【代码】
之前对数组做去重有很多方法，但大多比较麻烦，现在用ES6里面的set方法非常方便直接上代码 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><script>function 初级写法(){let arr = [3,5,2,1,3,2,4];let setArr =new Set( arr ); // set方法不允许重复 此时setArr已经去重了let newArr = [];for( let i of setArr ){// set不能用普通的for循环和for in 循环 但是可以用foreach ...