ES6 - 技术教程文章
js es6 介绍set,WeakSet【代码】
前言介绍一下es6 的set 和 weakset正文setES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。{let list = new Set();list.add(5);list.add(7);console.log(list.size); //2 } Set 函数可以接受一个数组作为参数，用来初始化。{let arr = [1,2,3,4,5];let list = new Set(arr);console.log(list.size); //5 } Set中重复的元素不会添加，可以用于去...
ES6 语句判断简写【代码】
链判断运算符编程实务中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。比如，要读取message.body.user.firstName，安全的写法是写成下面这样。// 错误的写法 const firstName = message.body.user.firstName;// 正确的写法 const firstName = (message&& message.body&& message.body.user&& message.body.user.firstName) || ‘default‘;这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（option...
ES6系列--【ES6 新增字符串方法】【代码】【图】
1、简单使用includes()返回布尔值，表示是否找到了参数字符串startsWith()返回布尔值，表示参数字符串是否在源字符串的头部endsWith()返回布尔值，表示参数字符串是否在源字符串的尾部 let str="lxy";//字符串是否以某个字符开头console.log(str.startsWith(‘l‘));//trueconsole.log(str.startsWith(‘x‘));//false//字符串是否以某个字符结尾console.log(str.endsWith(‘x‘));//falseconsole.log(str.endsWith(‘y‘));//true...
【ES6专题】——var、let、const的区别和使用场景【代码】
在ES6中，新出了let和const这两个新的声明变量的命令。与之前的var相比，let和const有几个不同的特性。 var可以重复声明，且存在变量提升没有块级作用域 <!--可以重复声明-->var a = "this is a";var a = "this is another a"; //重复声明了aconsole.log(a); //输出this is another a<!--存在变量提升-->console.log(b); //变量提升，var b 被提升至所在作用域顶部，输出undefinedvar b = "this is ...
Set()--Es6新的数据结构
新的数据结构Setset实例的属性和方法1）Set结构的实例有以下属性 Set.prototype.constructor: 构造函数，默认就是Set函数 Set.prototype.size:返回Set实例的成员总数2）set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）操作方法（用于操作数据） -add(value): 添加某个值，返回Set结构本身。 -delete(value):删除某个值，返回一个布尔值，标书删除是否成功 -has(va...
ES6 入门系列 - 函数的扩展【代码】
1函数参数的默认值基本用法在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function log(x, y) {y = y || ‘World‘;console.log(x, y); }log(‘Hello‘) // Hello World log(‘Hello‘, ‘China‘) // Hello China log(‘Hello‘, ‘‘) // Hello World上面代码检查函数log的参数y有没有赋值，如果没有，则指定默认值为World。这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用...
ES6箭头函数【代码】
【转】ES6箭头函数（Arrow Functions）ES6可以使用“箭头”（=>）定义函数，注意是函数，不要使用这种方式定义类（构造器）。 一、语法1. 具有一个参数的简单函数var single = a => a single(‘hello, world‘) // ‘hello, world‘ 2. 没有参数的需要用在箭头前加上小括号var log = () => {alert(‘no param‘) } 3. 多个参数需要用到小括号，参数间逗号间隔，例如两个数字相加var add = (a, b) => a + b add(3, 8) // 11 4. 函数...
es6 generator 函数中的yield理解【图】
es6 generator 的yield理解原文：https://www.cnblogs.com/malong1992/p/12129561.html
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，分别表示异步操作执行成功后的回...
浅谈ES6——ES6中let、const、var三者的区别【代码】
在了解let、const、var的区别之前，先了解一些什么是es6Es6 全称ECMAscript 是JavaScript语言的一个标准，其实Es6本质就是JavaScript的一个版本，为什么叫ECMAscript呢，一个原因是JavaScript商标名称的原因，还有一个是ECMA是一个标准化组织，将这门语言规范化，可以更有利于成为一种国际标准和保持其开放性。 Es6和es2015、es2016、es2017 ；es6是一个名词也是一个泛指，含义是5.1版以后javaScript的下一代标准，涵盖了es2015、e...
ES6中6种声明变量的方法【代码】
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，还有两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。(1) var命令。var a ; //undefinedvar b = 1;var定义的变量可以修改，如果不初始化会输出undefined，不会报错var 声明的变量在window上，用let或者const去声明变量，这个变量不会被放到window上很多语言中都有块级作用域，但JS没有，它使用var声明变量，...
es6高频面试题，请查收【图】
整理的是高频知识点，不足之处还请指出哈，后续会完善 新特性let，const申明箭头函数模板字符串解构赋值拓展运算符set()、map()async、awaitpromiseimport导入、export导出for of、for in let、const、var三者区别let声明变量，const声明常量let、const都有块级作用域，而var没有var存在变量提升，而let、const不会const与let最大不同在于，const声明后无法再次赋值 箭头函数与普通函数区别箭头函数是匿名函数，不能作为构造函数，...
ES6新特性：增加新类型：Symbol【代码】
本文所有Demo的运行环境都为nodeJS， 参考：让nodeJS支持ES6的词法----babel的安装和使用 ； ES6新增了一种数据类型：Symbol，Symbol是用来定义对象的唯一属性名的不二之选； Symbol如何使用 Symbol如何使用呢， Symbol不是一个构造函数哦， 如果用new Symbol的话， 会报错的：var sym1 = Symbol(); var sym2 = Symbol("foo"); var sym3 = Symbol("foo"); console.log(sym1, sym2, sym3) //输出Symbol() Symbol(foo) Symb...
es6冲刺02【代码】【图】
1、Symboles6新增的数据类型1）概念提供一个独一无二的值let a=Symbol()let b=Symbol()或let c=Symbol.for(‘c‘)let d=Symbol.for(‘c‘)c是一个key，标识着这个独一无二的变量 2、数据结构1)setSet中的元素不可重复其长度用.size表征添加重复元素（严格相等）后不会报错，但不生效，用来去重很方便{let list=new Set()list.add(1)//用add来添加元素list.add(2)}{let arr=[1,2,3,4,5]let list=new Set(arr)} 方法有.add(obj)//添加...
ES6系列_10之Symbol在对象中的作用【代码】
在ES5中 对象属性名都是字符串，这容易造成属性名的冲突，比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突，于是 ES6 引入了Symbol。Symbol是一种新的原始数据类型，表示独一无二的值。它是继undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）六种数据类型之后的第七种数据类型。凡是属性名属于 Symbol 类型，就都是...
ES6 class学习笔记【代码】
ES5中生成实例对象的方法是通过构造函数:function Person(name, age){this.name = namethis.age = age } Person.prototype.sayName = function () {console.log(this.name) } ES6中添加新的语法生成对象实例：class Person {constructor (name, age) {this.name = namethis.age = age}sayName () {console.log(this.name)} } 原文：http://www.cnblogs.com/running1/p/7506339.html
ES6新增语法(四)——面向对象【代码】
ES6中json的2个变化简写：名字和值相同时，json可以可以简写let a=12,b=5; let json = {a,b } console.log(json) // { a:12 , b:5 } 省略function：json中的函数可以简写let persen ={name:‘倩倩‘,age:18,showName(){alert(this.name)} } persen.showName() ES6与传统面向对象传统面向对象：类和构造函数在一起，为对象添加方法时使用prototype。传统面向对象实例如下：function Person(name,age){this.name = name;this.age = a...
ES6---Set数据结构
// Set数据结构：是es6中新增的一种数据结构，它类似与数据，单里面的数据都是唯一的，并且不能够通过索引获取对应的值 // Set本身是一个构造函数，用来生成Set数据结构 var arr = [1, 2, 3, 4, ‘韩信‘, ‘李白‘] let setarr = new Set(arr) console.log(setarr); // Set(6) {1, 2, 3, 4, "韩信", …} console.log(setarr[3]);//undefined Set数据结构不能通过索引来获取元素 // Se...
ES6中的const命令【转】【代码】
1 const PI=3.1415; 2 console.log(PI);//3.1415 3 4 PI=3;//Uncaught TypeError: Assignment to constant variable.2.const一旦声明常量，就必须立即初始化，不能留到以后赋值1 const WIDTH;//Uncaught SyntaxError: Missing initializer in const declaration3.const声明的常量只在当前作用域内有效1 if(true){ 2 const NAME=‘XG‘ 3 } 4 5 console.log(NAME);//Uncaught ReferenceError: NAME is not defined4.const声明的...
es6 解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。let { foo: baz } = { foo: "aaa", bar: "bbb" };baz // "aaa"foo // error: foo is not defined上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而...
[js高手之路] es6系列教程 - var, let, const详解【代码】
function show( flag ){ console.log( a ); if( flag ){ var a = ‘ghostwu‘; return a; } else { console.log( a ); return null; } }我们从es5的变量提升开始说起， 由于变量提升的原因， 上述程序， 在第2行和第7行都能访问到a的值， 只不过是undefined, 如果你不熟悉javascript这种变量的预解释机...
ES6 Class【代码】
首先，主要是es5 与 es6 的比较！es5开发没有类的概念，只是用函数模拟成构造函数来创建对象，使用原型链来继承方法。那么相对于es6来说，增加了类的概念，使得类的概念更加形象具体，更有利于开发着学习！首先，学习下es6 类的写法class Foo {constructor(name){// ...实例对象方法this.name = name;}// ..... 原型上方法 study() {} }我们再来看下es5的构造函数写法：function Foo(name) {// ... 实例方法this.name = name; }Fo...
3分钟带你搞懂ES6 import 和 export【代码】
如下语句是 default import:// B.js import A from ‘./A‘且只在A存在 default export 时生效:// A.js export default 42这种情况下你用import语句, 随便取什么名字都没关系:// B.js import A from ‘./A‘ import MyA from ‘./A‘ import Something from ‘./A‘因为他最终解析的是A.js 的 default export.如下是命名为A的 import :import { A } from ‘./A‘它只在A.js存在 具名export 时起作用, 像这样:// A.js export const ...
找出数组中的最小值（es5/es6）【代码】
1、命令式编程，只需要迭代数组，检查当前最小值是否大于数组元素，如果是更新最小值即可。var s = [2,3,4,5,6,7,8]; for(var i=0,m=s.length;i<m;i++){var min = s[0];if(s[i]<min){min = s[i]} } console.log(min); //22、函数式编程，可用Math.min函数，传入比较的数组元素，使用es6的解构操作符（...），把数组转换成单个的元素。var s = [2,3,4,5,6,7,8]; console.log(Math.min(...s)); //2使用箭头函数let ss = [2,3,4,5,6,...
JS最新技术ES6，结合Vue全局注册，实现Axios封装配置插件！【代码】
接下来，带来js全新技术ES6，结合Vue install全局组件实现Axios封装，以代码形式讲解。1、请求封装//file：src/api/http/http.js import axios from ‘axios‘ axios.create(); axios.interceptors.request.use((config)=>{ //axios请求拦截return config; //记得return请求}) axios.interceptors.response.use((response)=>{return response; }) class http{static async get(url,params,contentType="application/x-www-form-u...
ES6——Symbol【代码】
原始数据类型，表示独一无二的值let sy = Symbol(‘kk‘) console.log(sy) //Symbol(kk) typeof(sy) //‘Symbol‘ 相同参数 Symbol() 返回的值不相等let sy1 = Symbol(‘kk‘) sy == sy1 //false 用做属性名每一个 Symbol 的值是不相等的，保证属性名不重复//方法1 let sy = Symbol(‘key1‘) let obj = {} obj[sy] = ‘kk‘ console.log(obj) //{Symbol(key1):‘kk‘} //方法2 let obj = {[sy]: ‘kk‘ } //方法3 Object.define...
ES6新特性使用小结（四）【代码】
十一、Proxy 、Reflect ①、Proxy 的概念和常用方法{ let obj = { //1、定义原始数据对象 对用户不可见time: ‘2017-09-20‘,name: ‘net‘,_r: 123};let monitor = new Proxy(obj, { //2、通过Proxy新生成一个对象 映射obj 代理所有对obj的操作//拦截对象的属性读取get(target, key){ //设置访问规则return target[key].replace(‘2017‘, ‘2018‘);},set(target, key,...
es6异步解决方案【代码】
最初使用回调函数? 由于最初j s官方没有明确的规范，各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范， 没有明确各个参数的意义， 不便于使用。? 但是node中有明确的规范? node中的的回调模式： 1. 所有回调函数必须有两个参数，第一个参数表示错误，第二个参数表示结果2. 所有回调函数必须作为函数最后的参数3. 所有回调函数不能作为属性出现es6 异步处理模型Es6 出现以后， 官方就提出了异步处理的规范， ...
ES6新特性【代码】
#解构：从数组和对象中提取值，对变量进行赋值，这被称为解构1 数组解构 let [a,[b,c],d]=[1,[2,3],4]; 形式要统一按次序排列的let [a,b="JSPang"]=[‘技术胖‘]console.log(a+b); //控制台显示“技术胖JSPang”2 对象的解构赋值 let {foo,bar} = {foo:‘JSPang‘,bar:‘技术胖‘}; 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。3 字符串解构 const [a,b,c,d,e,f]="JSPang";console.log(a);console.log(b);...
ES6 => 箭头函数【代码】
箭头函数ES6一个非常有用的新特性，我这里小小的总结一下用法：箭头函数相当于直接return一个值，当没有参数时，可以这么写：var f = () => 0; // 上面这句话相当于var f = function(){ return 0;}当有一个参数时：var f = num => return num; // 上面这一句相当于var f = function(num) { return num;}当有两个或以上的参数时，要用括号并用逗号分隔开：var f = (a,b) => a+b; // 相当于var f = function(a,b) { return a+b;}上面...