ECMAScript6轮播图实践知识总结


Posted in Javascript onAugust 17, 2016

模板字符串

这是我非常喜欢的ES6的特点之一,非常直观的反应出变量和字符串之间的关系,在ES5中,如果我们想在字符串中添加变量,需要用如下写法:

animate(box, 'translate(-' + itemWidth * num + 'px,0)', 1000, function () {
  box.style.transitionDuration = '';
  box.style.transform = 'translate(-800px,0)';
  flag = true;
});

现在用ES6的模板字符串,可以直接把字符串和变量相结合,更加易懂。

animate(box, `translate(-${itemWidth*num}px,0)`, 1000, function() {
  box.style.transitionDuration = '';
  box.style.transform = `translate(-${itemWidth*(item.length-2)}px,0)`;
  flag = true;
});

是不是非常直观方便,从上面的两个简单示例中可以看出,在ES6中,字符串用反引号(``)标识,这一点需要知道。

还有一个特点,模板字符串可以输出折行的字符串,这在ES5传统字符串中是无法做到的,必须借助(\n),且不能在书写时候写入回车,但是在ES6的字符串模板中,可以直接写入回车,空格,然后在字符串输出时候直接输出,非常方便。

let myString=`abc
de
ffff 
fas`;
console.log(myString);
/*输出abc
de
ffff 
fas*/

对函数的扩展

1.给函数设置默认值

在对函数的扩展中,添加了一项给函数设置默认值的功能,这个功能可以说是非常赞的。是否记得我们在ES5中是怎么给函数设置默认值?

function test(a,b,c){
  var a=a||10;
  var a=b||15;
  var c=c||20;
  console.log(a+b+c);
}

这里我们设置默认值,可以达到自己的预期效果,直到有一天,我们把a=0传入,这时候,我们这么写就不对了,对于程序来说,0就是false,所以a会取默认值10,从而达不到我们预期的效果。但是ES6为我们提供非常好的设置默认值的方式。上面的代码可以改写成下面的这样:

function test(a=10,b=15,c=20){
  console.log(a+b+c);
}

2.箭头函数

了解Coffescript的同学应该清楚,Cofficescript的强大之处在于它的无处不在的箭头函数,写起来非常爽,现在,ES6正式引入箭头函数,让我们的程序可以得到简化,例如:

//ES5的写法
var test = function (a,b){
  return a+b;
}
//ES6的箭头函数
var test2 = test(a,b)=>a+b;

在写轮播时候,需要鼠标移动到下面的这个小圆点在小圆点类数组对象中是第几个,从而才能让图运动到正确位置,在ES5的时候,我们需要给当前这个对象添加属性,写起来比较繁琐,写法如下:

var liList = document.querySelectorAll('li');
for(var i=0;i<liList.length;i++){
  liList[i].index=i;
  liList[i].addEventListener('mouseenter',function(){
    console.log(this.index);
  },false);
}

这个this.index属性就是当前的鼠标放上去的元素的索引,然后根据这个索引去得到当前的元素。但是在ES6中,我们可以直接使用箭头函数以及在数组中新引入的findIndex来找到当前的活动元素的索引,代码如下:

let liList = document.querySelectorAll('li');
let ArrayliList=Array.form(liList);
for(var i=0;i<liList.length;i++){
  liList[i].index=i;
  liList[i].addEventListener('mouseenter',function(){
    let thisIndex = ArrayliList.findIndex((n) => n == this);
  },false);
}

以上代码得到的thisIndex就是当前鼠标放上去的索引,这里我对箭头函数中n这个参数的理解是,传入参数n后会遍历数组中的对象,从而找到与this相等的那个对象,然后返回它的索引,这里用到Array.from(),这是一个ES6中数组中新增的方法,可以将类数组转换成数组。

ES6的for…of循环

上面的JS代码循环用了for,其实可以用ES6中的for…of循环去代替,这样写法更加简洁。是否记得JS中的for…in循环,这个循环可以循环键值对中的键,但是无法循环值,而for…of的出现正是为了弥补它的不足,for…of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、Generator对象,以及字符串。所以我们可以利用该循环替代for循环,但是这里要注意一点如果直接用for…of循环,在chrome49下会报错,官方已证实这是chrome49的BUG,将会在chrome51中修复,所以我在写的时候,利用Array.from()将NodeList对象转换为数组,这样可以放心操作,代码如下:

let liList = document.querySelectorAll('li');
let ArrayliList=Array.form(liList);
for(let li of liList){
  li.addEventListener('mouseenter',function(){
    let thisIndex = ArrayliList.findIndex((n) => n == this);
  },false);
}

总结

以上就是本文的全部内容,是不是非常简洁,通过这篇文章感觉仅仅只是这些就已经让我感受到ES6的魅力了,希望对大家学习ES6能有所帮助。

Javascript 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
jQuery 全选 全部选 反选 实现代码
Aug 17 #Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 #Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 #Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 #Javascript
深入理解jQuery layui分页控件的使用
Aug 17 #Javascript
AngularJS 作用域详解及示例代码
Aug 17 #Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 #Javascript
You might like
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript中this的四种用法
2015/05/11 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
javascript实现时钟动画
2020/12/03 Javascript
linux下安装easy_install的方法
2013/02/10 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
详解Python中的文件操作
2021/01/14 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
初一体育教学反思
2014/01/29 职场文书
培训后的感想
2015/08/07 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
《开国大典》教学反思
2016/02/16 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫