前端基础之《ECMAScript 6（6）

一、扩展运算符

1、【...】

扩展运算符能将【数组】转换为逗号分隔的【参数序列】

 //声明一个数组const school = ['张三','李四','王五'];//用...转换成逗号分隔的序列：'张三','李四','王五'//声明一个函数function biaoyan(){console.log(arguments);}biaoyan(school);

arguments里面只有一个参数，它是一个数组：

用扩展运算符写法：

 //声明一个数组const school = ['张三','李四','王五'];//用...转换成逗号分隔的序列：'张三','李四','王五'//声明一个函数function biaoyan(){console.log(arguments);}biaoyan(...school);

arguments里面变成了三个参数：

二、数组的合并

    //1. 数组的合并const kuaizi = ['小王','小肖'];const fenghuang = ['小曾','小玲'];//ES5写法const zuixuan = kuaizi.concat(fenghuang);console.log(zuixuan);//ES6写法const zuixuan2 = [...kuaizi, ...fenghuang];console.log(zuixuan2);

三、数组的克隆

    //2. 数组的克隆const sanzhihua = ['E','G','M'];const sanyecao = [...sanzhihua];console.log(sanyecao);

四、将伪数组转为真正的数组

    //3. 将伪数组转为真正的数组const divs = document.querySelectorAll('div');console.log(divs);const divArr = [...divs];console.log(divArr);

打印第一个对象，是NodeList：

打印第二个对象，是数组：

五、迭代器

1、什么是迭代器

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。
任何数据结构只要部署Iterator接口，就可以完成遍历操作。

2、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费

3、原生具备Iterator接口的数据（可用for...of遍历）

（1）Array
（2）Arguments
（3）Set
（4）Map
（5）String
（6）TypedArray
（7）NodeList
这里说的Iterator接口，就是对象里的一个属性，属性名字叫Symbol.iterator。

4、迭代器工作原理

（1）创建一个指针对象，指向当前数据结构的起始位置。
（2）第一次调用对象的next方法，指针自动指向数据结构的第一个成员。
（3）接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员。
（4）每调用next方法返回一个包含value和done属性的对象。

    //获取迭代器对象let iterator = xiyou[Symbol.iterator]();console.log(iterator);//调用对象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());

当循环到第5次，done变为true，表示循环已经完成。value是undefined。

5、for...of循环和for...in循环的区别

 //声明一个数组const xiyou = ['唐僧','孙悟空','猪八戒','沙和尚'];//使用for...of遍历数组for (let v of xiyou){console.log(v);}//使用for...in循环for(let j in xiyou){console.log(j);}

for...of循环取数组的值，for...in循环取数组的索引。

六、迭代器应用

1、自定义遍历数据

 //声明一个对象const banji = {name: "一班",stus:["小明","小王","小天","king"]}//用for...of遍历这个对象for (let v of banji){console.log(v);}

报错：Uncaught TypeError: banji is not iterable

2、添加迭代器

 //声明一个对象const banji = {name: "一班",stus:["小明","小王","小天","king"],[Symbol.iterator](){//索引变量let index = 0;//保存banji对象的thislet _this = this;  //因为在return花括号里的this指向的是return这个对象return {next: function(){if (index < _this.stus.length){const result = {value: _this.stus[index], done: false};//下标自增index++;//返回结果return result;}else{return {value: undefined, done: true};}}}}}//用for...of遍历这个对象for (let v of banji){console.log(v);}

实现按照我们自己的意愿，对对象的遍历。

前端基础之《ECMAScript 6（6）—数组》相关推荐

前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
一.data-开头的是什么是bootstrap封装的js. data-toggle data-target data-dismiss data-spy 参考资料:https://blog.csdn. ...
bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
AndroidStudio_安卓原生开发_自定义蒙板弹出框WaitDialog---Android原生开发工作笔记134
android在执行程序过程中,很可能会用到,正在执行的提示.下面我们就自己做一个提示框,自带蒙板,执行过程中,后面的窗口内容不能操作. 下面的代码可以直接复制粘贴使用: 1.首先写一个WaitDia ...
前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
Bootstrap系列之弹出框（Popovers）
文章の目录 1.概述 2.Example: Enable popovers everywhere 3.Example: Using the container option 4.Example 4.1 ...
弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
html弹出框教程,JavaScript 弹出框
JavaScript 弹出框在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框警告框是最简单的弹 ...
web前端基础之Bootstrap(三) - 插件
模态框放在body内的直接子元素弹出方式 1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...
# 前端基础（HTML + CSS + JavaScript）
一.HTML 基础概念:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 可以使用 HTML 来建立自己的 WEB 站点,H ...

前端基础之《ECMAScript 6（6）—数组》

前端基础之《ECMAScript 6（6）—数组》相关推荐

最新文章

热门文章