分类：es6

2020
09-29

ES6箭头函数和扩展实例分析

ES6箭头函数和扩展实例分析 本文实例讲述了ES6箭头函数和扩展。分享给大家供大家参考，具体如下：1.默认值在ES6中给我们增加了默认值的操作相关代码如下：functionadd(a,b=1){returna+b;}console.log(add(1));可以看到现在只需要传递一个参数也是可以正常运行的。输出结果为：2。2.主动抛出错误ES6中我们直接用thrownewError(xxxx),就可以抛出错误。functionadd(a,b=1){if(a==0){thrownewError('Thisiserror')}returna+b;}console... 继续阅读 >
2020
09-29

ES6新增的数组知识实例小结

ES6新增的数组知识实例小结 本文实例讲述了ES6新增的数组知识。分享给大家供大家参考，具体如下：1.JSON数组格式转换JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式，json数组格式如下：letjson={'0':'男','1':'女',length:3}这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。把上边的JSON代码使用Array.from(xxx)来转换成数组，代码如下：... 继续阅读 >
2020
09-29

ES6扩展运算符和rest运算符用法实例分析

本文实例讲述了ES6扩展运算符和rest运算符用法。分享给大家供大家参考，具体如下：运算符可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。运算符有两种：对象扩展运算符与rest运算符。1.对象扩展（spread）运算符（...）（1）解决参数个数问题以前我们编程是传递的参数一般是确定，否则将会报错或者异常，如下：functiontest(a,b,c,d){console.log(a)console.log(b)console.log(c)console.... 继续阅读 >
2020
09-29

Vue如何基于es6导入外部js文件

Vue如何基于es6导入外部js文件 也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件，但是很是可惜，这写法。在es6，或则说vue环境下不支持真的写法是怎样？首先。我们要改造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到代码：functionrealconsole(){alert("hello.thanksuseme");}export{realconsole}其次，到我们的寄主那里，我们需要导入，仿造其他的文件，写法是这样... 继续阅读 >
2020
09-29

ES6函数实现排它两种写法解析

排它思想：清除其它所有的没有选中元素的样式,只设置当前选中元素的样式html代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><ul><liclass="current">我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li><li>我是第6个li</li><li>我是第7个li</li><li>我是第8个li</li></ul></body></html>css代码<sty... 继续阅读 >
2020
09-29

详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

详解ES6新增字符串扩张方法includes()、startsWith()、endsWith() 当有人问到用来确定一个字符串是否包含在另一个字符串中有哪些方法时，我们会不假思索回答道：indexOf方法。其实，ES6又提供了三种新方法includes()、startsWith()、endsWith()，也是比较好用的。indexOf方法在这里就不多说了，大家都比较熟悉，意思就是：返回给定元素在数组中第一次出现的位置，返回结果是匹配开始的位置，如果没有出现则返回-1。下面详细介绍ES6新增的这三种方法：①includes()：返回布尔值，表示是否找到了参... 继续阅读 >
2020
09-29

详解ES6数组方法find()、findIndex()的总结

详解ES6数组方法find()、findIndex()的总结 本文主要讲解ES6数组方法find()与findIndex()，关于JS的更多数组方法，可参考以下：①JavaScript内置对象之-Array②ES5新增数组方法（例：map()、indexOf()、filter()等）③ES6新增字符串扩张方法includes()、startsWith()、endsWith()1.find()该方法主要应用于查找第一个符合条件的数组元素，即返回通过测试（函数内判断）的数组的第一个元素的值。它的参数是一个回调函数,为数组中的每个元素都调用一次函数执行。在回调函数中... 继续阅读 >
2020
09-28

ES6使用新特性Proxy实现的数据绑定功能实例

本文实例讲述了ES6使用新特性Proxy实现的数据绑定功能。分享给大家供大家参考，具体如下：项目地址：https://github.com/jrainlau/mog在线体验：https://codepen.io/jrainlau/pen/YpyBBY作为一个前端开发者，曾踩了太多的“数据绑定”的坑。在早些时候，都是通过jQuery之类的工具手动完成这些功能，但是当数据量非常大的时候，这些手动的工作让我非常痛苦。直到使用了VueJS，这些痛苦才得以终结。VueJS的其中一个卖点，就是“数据... 继续阅读 >
2020
09-28

JavaScript ES6 Class类实现原理详解

JavaScriptES6之前的还没有Class类的概念，生成实例对象的传统方法是通过构造函数。例如：functionMold(a,b){this.a=a;this.b=b;}Mold.prototype.count=function(){returnthis.a+this.b;};letsum=newMold(1,2);console.log(sum.count())//3这中写法跟传统的面向对象语言差异较大，写起来也比较繁杂。ES6提供了更加接近其他语言的写法，引入了Class（类）的概念，作为对... 继续阅读 >
2020
09-28

ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

本文实例讲述了ES5模拟ES6的Symbol实现私有成员功能。分享给大家供大家参考，具体如下：ES6中有类语法，定义类变得简单了classPerson{constructor(name){this._name=name;}getname(){returnthis._name;}}然而，并没有提供私有属性。比如上面的Person其实是希望在构造的时候传入name，之后不允许修改了。不过，由于没有私有属性，所以难免有人会这样干：Personjames=newPerson("James");jam... 继续阅读 >
2020
09-27

es6函数之箭头函数用法实例详解

本文实例讲述了es6函数之箭头函数用法。分享给大家供大家参考，具体如下：es6允许使用“箭头”(=>)定义函数。varf=v=>v//等同于varf=function(v){returnv}如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。varf=()=>5//等同于varf=function(){return5}varsum=(num1,num2)=>num1+num2//等同于varsum=function(num1,num2){returnnum1+num2}如果箭头函数的代码块部分... 继续阅读 >
2020
09-27

es6数组之扩展运算符操作实例分析

本文实例讲述了es6数组之扩展运算符操作。分享给大家供大家参考，具体如下：扩展运算符(spread)是三个点(…)。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1,2,3])//123console.log(1,...[2,3,4],5)//12345[...document.querySelectorAll('div')]该运算符主要用于函数调用。functionpush(array,...items){array.push(...items)}functionadd(x,y){returnx+y}constnumb... 继续阅读 >
2020
09-27

es6函数之尾调用优化实例分析

本文实例讲述了es6函数之尾调用优化。分享给大家供大家参考，具体如下：什么是尾调用优化？尾调用是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。functionf(x){returng(x)}上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下三种情况，都不属于尾调用。//情况一functionf(x){lety=g(x)returny}//情况二functionf(x){returng(x)+1}//情况... 继续阅读 >
2020
09-27

es6函数之尾递归用法实例分析

本文实例讲述了es6函数之尾递归用法。分享给大家供大家参考，具体如下：函数调用自身，称为递归，如果尾调用自身，就称为尾递归。递归非常耗费内存。因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stackoverflow）。但是对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。functionfactorial(n){if(n===1)return1returnn*factorial(n-1)}如果改成尾递归，只保留一个调用记录... 继续阅读 >
2020
09-27

详解ES6 CLASS在微信小程序中的应用实例

ES6CLASS基本用法classPoint{constructor(x,y){this.x=x;this.y=y;}toString(){return'('+this.x+','+this.y+')';}}1.1constructor方法constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。classPoint{}//等同于classPoint{constructor(){}}上面代码中，定义了一个... 继续阅读 >
2020
09-27

es6函数name属性功能与用法实例分析

本文实例讲述了es6函数name属性功能与用法。分享给大家供大家参考，具体如下：函数的name属性，返回该函数的函数名。functionfoo(){}foo.name//foo这个属性早就被浏览器广泛支持，但是直到es6，才将其写入了标准。需要注意的是，es6对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量，es5的name属性，会返回空字符串，而es6的name属性会返回实际的函数名。varf=function(){}//es5f.name//""//es6f... 继续阅读 >