ES6 - 技术教程文章
区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题【代码】
ES3 ES5this的指向问题 this指的是该函数被调用的对象 var foo = function () {this.a = ‘a‘,this.b = ‘b‘,this.c = {a: ‘new a‘,b: function () {//new a 此时this指的是该函数被调用的对象return this.a;}}}console.log(new foo().c.b()); //new aES6的箭头函数 箭头函数的this指的是定义时this的指向，b在定义时，this指向的是c被定义时的函数 var foo = function () {this.a = ‘a‘,this.b = ‘b‘,this.c = {a...
前端面试之ES6新增了数组中的的哪些方法？!【代码】【图】
前端面试之ES6新增了数组中的的哪些方法？!我们先来看看数组中以前有哪些常用的方法吧！1新增的方法！1 forEach() 迭代遍历数组回调函数中的三个参数value: 数组中的每一个元素-index: 每一个数组元素中的索引号！arr: 数组对象本身 <script>// ES5中新增的方法// forEach() 迭代遍历数组var arr = [2, 3, 5];var sum = 0;arr.forEach(function(value, index, arr) {console.log(‘数组当中的每一个元素‘ + value);console.log(‘...
vue-ES6模块化的导入和导出【代码】【图】
在ES6的模块化开发中，一个JS文件就相当一个模块，其他地方想要使用模块中的数据，模块必须export导出，其他地方进行import导入才行。 第一步，先引入对应的JS文件，通过script标签，不过不能单单用script标签，如果是这样的话此时各个JS文件还不是一个模块，得设置一个type属性的值为module，如下：<script src="./first.js" type="moudule"></script> 第二步，在其他的JS文件进行导出，而导出的方式太多了，下面一一介绍：...
ES6兼容ie9, flex兼容ie9【代码】
vue兼容ES6在 ie9 的环境上，es6 的部分新对象、表达式，并不支持，解决方案是使用 babel-polyfill 组件，它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码npm install babel-polyfill --save 安装完成后，在项目的主入口文件 main.js 的首行就可以直接引用： import ‘babel-polyfill‘; 或者 在webpack.base.conf.js中的entry中添加一项entry: { app: [ ‘babel-polyfill‘, ‘./src/main.js‘] }, //以上参考来...
ES6 学习笔记 3 --- Promise【代码】
ES6(2015)异步解决方案 PromiseES5 回调 callbackfunction load (src,callback){let script = document.creatElement(‘script‘)script.src = src // 次操作 是 引擎默认的异步script.onload = () => { callback(src) }document.head.append(script) } load(‘./1.js‘,test)function test(name){console.log(name) } test(‘tt‘) // 先执行test() 后执行 load()load(‘./1.js‘,function(st){load(‘./2.js‘,function(st){loa...
ES6--JavaScript扩展知识点（let、const、解构）【代码】
一，ES2015(ES6)新增了两个声明变量的关键字：let、constlet：只在代码块内{}有效，不可重复声明，不会提前初始化1.只在代码块内有效{let a = 1; var b = 2; } console.log(b); console.log(a);//输出a会报错 因为let声明只在代码块内有效2.不可重复声明 let a = 1; let a = 2;//报错Uncaught SyntaxError: Identifier ‘a‘ has already been declared3.不会提前初始化console.log(b);//undefinedvar b = 2; console.log(a);/...
ES6 Class类【代码】
在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法类定义class 以及 构造方法 constructor<script type="text/javascript">// 通过class定义类 class Person{// constructor类构造方法 constructor(name,age){this.name=name;this.age=age;}toString(){return `姓名：${this.name},年龄：${thi...
面试题汇总 JS（ES6）【代码】
一、新增数据类型Symbol 概念： Symbol代表独一无二的 Symbol类型的值通过Symbol函数来生成，同时Symbol函数返回的值的唯一的 Symbol函数可以接收字符串作为参数，但是即使相同参数返回的值也是唯一的 作用： 属性私有化 数据保护//没有参数的情况var s1=Symbol();var s2=Symbol();s1===s2; //false//有参数的情况var s1=Symbol("foo");var s2=Symbol("foo");s1===s2; //falsevar ...
ES6新数据类型map与set【代码】
一、map，简单的键值对映射，具有很快的查找速度1. 初始化map，map的键名可以使用其他数据类型，对象的属性名只能使用字符串或symbol使用二维数组var m = new Map([[‘name‘, ‘LQW‘], [‘age‘, 23], [123, ‘我的键名是数字类型‘]]);m.get(‘name‘); // LQW初始化一个空Mapvar m = new Map();m.set(‘name‘, ‘LQW‘);m.set(‘age‘, 23);m.set(123, ‘我的键名是数字类型‘);m.get(123); // 我的键名是数字类型备注：由于一...
题解【Codeforces607B】Zuma【代码】
题面题意简述：有 \(n\) 个石头排成一排，第 \(i\) 个石头的颜色是 \(a_i\)。你可以选择一段连续的回文的子段，然后把它消去，剩下的石头会向中间靠近，把之前消去的石头的空隙补上。问按照这样的规则，最少要几次把 \(n\) 个石头都消去。\(\texttt{Data Range:}\ 1\leq n\leq500,\ 1\leq a_i\leq n。\)看到数据范围这么小，一眼想到区间 DP。我们设 \(dp_{i,j}\) 表示消除区间 \([i, j]\) 所要花费的最少次数。一些简单的边界不难...
ES6中 const 关键字【图】
const声明一个只读的常量。一旦声明，常量的值就不能改变。定义后可以使用但不能修改但是，const 定义的对象可能与我们想象的不太一样定义了对象b ,我们可以在b上添加修改属性,再看一个列子现在又不让修改了 如果想让对象变成不可变数据，可以使用Object.freeze 方法 原文：https://www.cnblogs.com/zhangtao1990/p/8283330.html
es6的class关键字与es5的构造函数【代码】【图】
todo构造函数：function Point(x, y) {this.x = x;this.y = y; }Point.prototype.toString = function () {return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘; };var p = new Point(1, 2);console.log(p) console.log(p.toString)效果等同于function Point(x, y) {this.x = x;this.y = y;this.toString = function () {return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;}; }var p = new Point(1, 2);console.log(p) console.log(p...
ES6-04：函数的扩展【代码】
ES6 针对新的语法特性(解构、参数默认值、箭头语句、块级作用域let)，对于函数的属性、参数、作用域进行了扩展，并对递归调导致内存栈溢出用进行了优化。 同时ES6规定，只要函数参数使用了默认值、解构赋值、扩展运算符，函数内部都不可以使用严格模式(ES5可以)，否则会报错；1. 函数参数默认值ES6之前，函数定义/声名时不能指定默认值；ES6可以在函数定义时进行初始化；同时有以下几点需要注意：参数设置默认值时，参数直接写在默...
ES6【代码】【图】
新的变量声明方式：const与let声明 让我们回顾一下var声明var(变量声明)变量声明提升、可重复定义、全局变量挂载到windowconsole.log(a); var a = ‘CZ‘;//undefined。变量声明提升var a = 10; var a = 20; console.log(a)//20。可重复定义；a = 10; console.log(a)//10。全局变量 let(变量声明)console.log(a) let a = 10;//直接就他娘的报错了！ 不存在变量声明提升。let a = 10; let a = 20; console.log(a) //控制台报错“Ide...
ES6解构赋值【代码】
写vue或react项目，我们经常在接收到数据的时候，需要对数据进行二次加工操作，一些传统的办法可以实现对数据的加工。但利用到ES6的解构赋值，则更为简单。解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们的赋值是这样的let arr = [1,2,3] let a = arr[0] let b = arr[1] let c = arr[2]这样写很繁琐，解构赋值可以轻松解决上面的问题。一、数组的解构赋值let arr = [0,1,2] let [a,b,c] = arr console.log(a...
ES6中的解构赋值【代码】
在解释什么是解构赋值前，我们先来看一下， ES5 中对变量的声明和赋值。var str = ‘hello word‘;左边一个变量名，右边可以是字符串，数组或对象。ES6 中增加了一种更为便捷的赋值方式。称为 Destructuring 。好像大家普遍翻译为解构。解构赋值允许我们将数组或对象的属性赋予给任何变量，该变量的定义语法与数组字面量或对象字面量很相似。举个例子可以直观的说明。let [speak, name] = [‘hello‘, ‘destructuring‘]; console...
使用gulp+bebal实现前端自动化es6转es5的构建【代码】
说明：es6语法已经越来越普及，但是一些低版本的浏览器不支持es6的语法特性，所以我们在开发完前端项目后，往往需要统一把前端es6的代码编译成es5的代码。本文介绍的就是如何手动和自动的把es6转成es5的方法。本文前提：需要提前安装好nodejs环境，能够使用npm命令。如果不了解如果配置npm，可以查看笔者前几次的博文。使用babel来手动构建es5的方式：1、创建一个空的前端项目可以使用webStorm等前端工具创建一个空的项目即可。并创...
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 function函数和箭头函数区别【代码】
1.写法不一样//function function fn(a,b){ return a+b } //arrow function var foo = (a,b)=>{ return a+b } 2.this的指向,function中的this可变（window,内部）,箭头函数固定不变指向windowfunction foo(){ console.log(this) } var obj = {aa:foo} foo() //window obj.aa()//objvar foo = ()=>{ console.log(this) } var obj = {aa:foo} foo()//window obj.aa()//window 3.构造函数function Person(name,age){ this.name =name ...
es6 --- 功能【代码】
标记的模板文字1.模板文字！确实很棒。我们不再会这样做….const concatenatedString = "I am the " + number + "person to recommend this article." 然而，当我们使用下面这种方式做的话：const concatenatedString = `I am the ${number} person to recommend this article.` 2.标记的模板文字允许我们向前迈出一步 - 并使用字符串调用函数。const consoleLogAstring = (string) => {console.log(string) } consoleLogAstring`...
JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)【代码】
多态（Polymorphism）按字面的意思就是“多种状态”，同样的行为（方法）在不同对象上有不同的状态。 在OOP中很多地方都要用到多态的特性，比如同样是点击鼠标右键，点击快捷方式、点击桌面空白处、点击任务栏等弹出的菜单都是不同的。方法重写（override）: 即子类定义一个与父类名字相同的方法，以此覆盖父类方法，以此来实现不同的功能。 1function Animal(){}2var AnimalP = Animal.prototype;3 AnimalP.eat = funct...
ES6学习小结5：何为symbol？【图】
我们知道ES5中的基本数据类型有undefined、null、boolean、number、string，引用类型有object（包含Array、Function、Date、RegExp、Error）；在ES6中新增了一个基本数据类型：symbol。那什么是symbol？类似于一种标识唯一性的ID，独一无二。方法：https://www.jianshu.com/p/f40a77bbd74e内置方法：应用场景：1、唯一化对象属性名：属性名属于Symbol类型，就都是独一无二的，可保证不会与其他属性名产生冲突 2、消除魔术字符串：...
ES6中有关数组的一些新操作【代码】
1、Array.isArray() 用于确定传递的值是否是一个 Array。Array.isArray([1, 2, 3]);// trueArray.isArray({foo: 123});// falseArray.isArray("foobar");// falseArray.isArray(undefined);// false语法Array.isArray(obj)参数obj需要检测的值。返回值如果值是 Array，则为true; 否则为false。描述如果对象是 Array ，则返回true，否则为false。有关更多详细信息，请参阅文章严格判定JavaScript对象是否为数组。 原文：https://www...
ES6函数扩展【代码】
1、函数的 length 属性ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。function test(x, y = ‘World‘) {console.log(x, y); }注意:函数的length属性，将返回没有指定默认值的参数个数。如果遇到有默认值的参数 就停止。function test(x, m,y = ‘World‘,z,f) {... } console.log(test.length) // 2 遇到默认参数则停止 所以为22、rest参数ES6引入rest参数，用于获取函数的多余参数，这样就不需要使用arguments...
JavaScript、ES5、ES6有什么【代码】【图】
什么是JavaScriptJavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。（好吧，概念什么最讨厌了）动态：在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。弱类：计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。原型：新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原型...
最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】【代码】
原文地址本文内容ECMAScript 发生了什么变化？新标准版本号6兑现承诺迭代器和for-of循环生成器 Generators模板字符串不定参数和默认参数解构 Destructuring箭头函数 Arrow FunctionsSymbols集合学习Babel和Broccoli，马上就用ES6代理 ProxiesES6 说自己的宗旨是“凡是新加入的特性，势必已在其它语言中得到强有力的实用性证明。”——TRUE！如果你大概浏览下 ES6 的新特性，事实上它们都不是什么新东西，而是在其他语言中已经被广泛...
JavaScript（es6）数组常用的方法【代码】
常用方法1.forEach()var data = [1,2,3,4,5]; var sum = 0;//求和 data.forEach((item)=>{sum+=item}) //给原数组的每个值加1 data.forEach((value,index,data)=>{data[index] = value + 1}) 2.concat() //合并多个数组，返回合并后的新数组，原数组没有变化。const array = [1,2].concat([‘a‘, ‘b‘], [‘name‘]); // [1, 2, "a", "b", "name"]3.filter() //返回一个新数组，包含通过callback函数测试的所有元素...
手撕ES6--Promise
手撕ES6--Promise:https://www.jianshu.com/p/0925eae38d2c手写一个Promise，附源码分析:https://blog.csdn.net/weixin_33881753/article/details/91448116原文：https://www.cnblogs.com/bydzhangxiaowei/p/11618537.html
ES6中的reduce【代码】
let arr1 = [0, 1, 2, 3, 4].reduce(function (accumulator, currentValue, currentIndex, array) {// accumulator 累计器// currentValue 当前值// currentIndex 当前索引// array 数组return accumulator + currentValue})// 等价于let arr2 = [0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr)console.log(arr2)// 提供一个初始值作为reduce()方法的第二个参数let arr3 = [0, 1, 2, 3, 4].reduce((accumulator, currentValu...
vue+vux+es6+webpack移动端常用配置步骤【代码】
1.创建项目（vue项目的流程就不多讲了）2.cnpm install vux --save3.在build/webpack.base.conf.js配置：const vuxLoader = require(‘vux-loader‘)把第一个module.exports赋值变量let webpackConfig ={里面代码不动}然后这个放在最底部去module.exports = vuxLoader.merge(webpackConfig, {plugins: [‘vux-ui‘, ‘progress-bar‘, ‘duplicate-style‘] })4.安装vux-loader使用命令cnpm install vux-loader -D5.cnpm install l...