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 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
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
PHP 采集程序 常用函数
2008/12/18 PHP
php7性能提升的原因详解
2019/10/13 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
对python 调用类属性的方法详解
2019/07/02 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
暑期社会实践方案
2014/02/05 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
追悼会主持词
2014/03/20 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
学习普通话的体会
2014/11/07 职场文书
世界气象日活动总结
2015/02/27 职场文书
经理聘任证明
2015/03/02 职场文书
红色经典电影观后感
2015/06/18 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书