ES6扩展——数组扩展
1、结合扩展运算符使用。通过扩展运算符,在调用函数的时候,把一个数组展开,然后作为这个函数的参数
//结合扩展运算符使用
function foo(a,b,c){
console.log(a); //1
console.log(b); //3
console.log(c); //2
}
//通过扩展运算符,在调用函数的时候,把一个数组展开,然后作为这个函数的参数
foo(...[1,3,2]);
实际应用:比如从服务端拿到了json数据,它代表用户信息的集合,相对于对象,按照一定规则使用数组,长度会更短一些,就更节省流量
//实际应用:比如从服务端拿到了json数据,它代表用户信息的集合,相对于对象,按照一定规则使用数组,长度会更短一些,就更节省流量
//比如数据交互的时候规定好用户的数据格式,第一个代表名字;第二个代表年龄;第三个是数组,代表他的爱好;第四个是他的简短描述 const user = ['小明',14,['吃饭','打游戏'],'我没有女朋友'];
function say(name,age,hobby,desc){
console.log(`我叫${ name },我今年${age}岁,我喜欢${ hobby.join('和') },${ desc }`);
}
//es5写法:
say(user[0],user[1],user[2],user[3]); //我叫小明,我今年14岁,我喜欢吃饭和打游戏,我没有女朋友
//es6写法:
say(...user);
//以前还会使用apply这种方法,基本上所有函数都可以调用apply
//第一个参数跟一个对象,它可以改变调用方法时this的指向,但是传undefined的时候就不会改变
//第二个参数就是传方法的参数,接收的是一个数组,跟扩展运算符差不多,会把数组展开,作为函数的参数
//跟call很相似,不过call的后面就是跟参数的列表,而apply可以跟数组
say.apply(null,user); //对比一下两种方式,更推荐使用扩展运算符
const arr = [1,2,233,3,4,5];
//Math.max()接收一堆参数,然后会帮你把里面的最大值求出来
//当参数是不确定个数的时候,就可以用扩展运算符或者apply展开数组,
console.log(Math.max(...arr)); //233
console.log(Math.max.apply(null,arr)); //233,不改变this 的指向,把arr传过去
2、使用扩展运算符复制或合并数组
//复习,使用扩展运算符来合并复制数组
const arr1 = [1,2,3,4];
const arr2 = [4,3,2,1];
const arr3 = [2.2,'123',false];
//复制
const cArr1 = [1,2,3, ...arr3];
const cArr2 = [...arr1];
const [...cArr3] = arr3;
//合并
const cArr4 = [...arr1,...arr2,...arr3];
3、es6新特性:扩展运算符可以将生成器函数传出来的值作为数组项,形成数组,
可以通过生成器让一个函数暂停,通过yield关键字暂停,同时暂停的时候还可以传出去一个值
//es6新特性:扩展运算符可以将生成器函数传出来的值作为数组项,形成数组,
//可以通过生成器让一个函数暂停,通过yield关键字暂停,同时暂停的时候还可以传出去一个值
function *g() {
console.log(1);
//生成器函数通过yield关键字就可以暂停这个函数的执行
yield 'hi~'; //到这里函数就停止了,除非.next
console.log(2);
yield 'imooc~';
} //调用生成器,生成的就是一个迭代器对象
const arr9 = [...g()]; //通过扩展运算符调用生成器函数,这个时候arr就变成hi~和imooc组成的数组了
console.log(arr9); //['hi~','imooc~']
//通过.next方法可以继续执行这个函数
const gg = g();
gg.next(); //1
setTimeout(function(){
gg.next(); //2
},1000); //借助生成器和Promise可以极大的改变书写异步流程的方式,从某个角度讲是解决了回调地狱
4、Set
es6提供新的数据结构Set集合,可以使用扩展运算符把它转成一个数组
Set有一个特性是它里面的元素是不能重复的,所以可以用来去重
//es6提供新的数据结构Set集合,可以使用扩展运算符把它转成一个数组
//Set有一个特性是它里面的元素是不能重复的,所以可以用来去重。除了数组之外,还可以传入一个类数组。 let set = new Set([1,2,2,3]);
console.log(set); //{1,2,3}
//可以用set去重,去完重再转为数组(用扩展运算符)
console.log([...set]); //[1,2,3]
ES6扩展——数组扩展的更多相关文章
- ES6之数组扩展方法【一】(相当好用)
form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: ...
- ES6(五) 数组扩展
Array.of方法用于将一组值,转换为数组. Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...
- call,apply,bind与es6的数组扩展运算符...
js中每一个Function对象都有一个apply个一个call方法: function.apply(thisObj,[argArray]); function.call(thisObj,arg1,a ...
- 【es6】数组扩展
只有一个参数,为数组中的值.
- ES6数组扩展
前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...
- es6核心特性-数组扩展
1. Array.from() : 将伪数组对象或可遍历对象转换为真数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,称为伪数组.典型的伪数组有函数的argu ...
- ES6对数组的扩展(简要总结)
文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...
- ES6 - 数组扩展(扩展运算符)
扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算(函数),将一个数组转为用逗号分隔的参数序列. rest: 变量将多余的参数放入数组中. spread(扩展): ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
随机推荐
- shell脚本(10)-流程控制while
一.while循环介绍 while循环与for一样,一般不知道循环次数使用for,不知道循环的次数时推荐使用while 二.while语法 while [ condition ] #条件为真才会循环, ...
- Python 接口之request ,headers格式不对
复制heardes格式,模拟请求报错 原因:粗心,headers带了空格
- springmvc学习指南 之---第27篇 spring如何实现servlet3.0无web.xml 配置servlet对象的
writedby 张艳涛 基于web.xml配置,有人说麻烦,tomcat给按照servlet3.0,实现了基于注解@WebServlet,有人说springmvc的springmvc.xml配置麻烦 ...
- maven之---资源过滤 在java/main/resourse/*.xml ,*.properties引用maven属性${db.username}
本文主要来源maven实战14.3 为了应对环境的变化,首先使用Maven属性将这个会发生变化的部分提取出来.在上一节的数据库配置中,连接数据库使用的驱动类,URL,用户名和密码都可能发生变化,因此使 ...
- SQL Server CPU 利用率毛刺的分析定位与解决
一.背景 1.1 问题描述 近期发现一台SQL Server的CPU利用率很不稳定,发现不定时的飙升到100%,更可怕的是在业务繁忙时,影响了业务调用,失败率明显增加,所以,减低CPU的利用率,是迫切 ...
- git合作开发流程
一.创建项目与管理 创建项目和管理项目都是管理账号需要做的事情,如果只是合作开发不进行管理,只需要浏览第二部分的内容即可. 1.创建项目 登录代码托管网站,点击添加项目,如下图所示: 填写相应的项目信 ...
- JAVAWEB的基本入门(JSP、Tomcat)>从零开始学JAVA系列
目录 JAVAWEB的基本入门(JSP.Tomcat) 使用idea创建web项目的两种方式 1.直接创建一个web项目(这样创建好的项目可以直接运行) 2.创建一个普通的java项目并配置web模块 ...
- Windows协议 NTLM篇
NTLM 基础 介绍 LM Hash & NTLM Hash Windows本身是不会存储明文密码的,只保存密码的hash 其中本机用户的密码hash是放在本地的SAM文件里面,域内用户的密码 ...
- RedisTemplate连接不释放、Redis断线不重连问题、Redis连接数高飙升
使用RedisTemplate操作Redis数据,但遇到网络断线后不会重新连接 毫无头绪 一顿捣鼓 最终解决 整理如下 帮助更多的人 1.起因 使用RedisTemplate 配置 开启了事务 ena ...
- RationalRose使用
UML 概述 什么是 UML? Unified Modeling Language (UML)又称统一建模语言或标准建 模语言,是始于 1997 年一个 OMG 标准,它是一个支持模型化 和软件系统开 ...