ES6中的函数和数组补漏
对象的函数解构
我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。
let json = {
a:'xzblogs',
b:'小智'
}
function fun({a,b='如果没有b用这个替补'}){
console.log(a,b);
}
fun(json);
是不是感觉方便了很多,我们再也不用一个个传递参数了。
数组的函数解构
函数能解构JSON,那解构我们的数组就更不在话下了,我们看下边的代码。我们声明一个数组,然后写一个方法,最后用…进行解构赋值。
let arr = ['xzblogs','小智','zachary'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
in的用法
in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。
对象判断
let obj={
a:'xzblogs',
b:'小智'
}
console.log('a' in obj); //true
数组判断
先来看一下ES5判断的弊端,以前会使用length属性进行判断,为0表示没有数组元素。但是这并不准确,或者说真实开发中有弊端。
let arr=[,,,,,];
console.log(arr.length); //
上边的代码输出了5,但是数组中其实全是空值,这就是一个坑啊。那用ES6的in就可以解决这个问题。
let arr=[,,,,,];
console.log(0 in arr); //false let arr1=['xz','小智'];
console.log(0 in arr1); // true
注意:这里的0指的是数组下标位置是否为空。
数组的遍历方法
1.forEach
let arr=['xzblogs','小智','zachary'];
arr.forEach((val,index)=>console.log(index,val));
forEach循环的特点是会自动省略为空的数组元素,相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。
2.filter
let arr=['xzblogs','小智','zachary'];
arr.filter(x=>console.log(x));
这种方法在Vue实战里我讲过,他其实也有循环的功能,这里我们在复习一遍。
3.some
let arr=['xzblogs','小智','zachary'];
arr.some(x=>console.log(x));
4.map
let arr=['xzblogs','小智','zachary'];
console.log(arr.map(x=>'web'));
map在这里起到一个替换的作用,这个我们后续课程会详细讲解。
数组转换字符串
在开发中我们经常会碰到把数组输出成字符串的形式,我们今天学两种方法,你要注意两种方法的区别。
join()方法
let arr=['xzblogs','小智','zachary'];
console.log(arr.join('|'));
join()方法就是在数组元素中间,加了一些间隔,开发中很有用处。
toString()方法
let arr=['xzblogs','小智','zachary'];
console.log(arr.toString());
转换时只是是用逗号隔开了。
ES6中的函数和数组补漏的更多相关文章
- Es6中箭头函数与普通函数的区别
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...
- es6中的函数
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // ...
- C语言中的函数、数组与指针
1.函数:当程序很小的时候,我们可以使用一个main函数就能搞定,但当程序变大的时候,就超出了人的大脑承受范围,逻辑不清了,这时候就需要把一个大程序分成许多小的模块来组织,于是就出现了函数概念: 函 ...
- shell中的函数、数组、报警系统脚本
1.shell中的函数 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段代码时直接调用这 个小单元的名字即可.格式: function f_name() {commond} ...
- ES6中箭头函数的作用
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
- ES6中箭头函数与普通函数this的区别
普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直 ...
- ES6中对函数的扩展
ES6一路扩展,字符串.数组.数值.对象无一“幸免”,ES6说要雨露均沾,函数也不能落下,今天,就来讲解ES6对函数的扩展. 参数的默认值 在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求, ...
- 阿里前端测试题--关于ES6中Promise函数的理解与应用
今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...
- shell中的函数、数组
函数定义: 数组:
随机推荐
- sitecore系列教程之简单和个性化
现代Web开发倾向于关注内容管理系统(CMS)的功能丰富的程序.最终用户可以做什么?作为内容管理者,我们可以为最终用户实现其目标提供哪些功能?开发人员可以为内容管理员构建哪些组件来实现它们? 相关内容 ...
- .py文件 改成默认用idle打开
A.右键.py文件,edit with idle ==================================B.如果没有这个选项: 选择打开方式,进入python安装路径,选择 Python ...
- 为什么我们要使用HTTP Strict Transport Security?
http://www.freebuf.com/articles/web/66827.html
- Chrome浏览器相关细节整理
一.上传文件卡死 可能时由于输入法的原因导致上传文件浏览器卡死.将输入法改为英文模式再操作上传文件就不会卡死了.
- Linux基础命令---显示树形进程pstree
pstree pstree显示正在运行的进程的树形结构,树以PID为根:如果省略了pid则以init为根.如果指定了用户名,则显示根植于该用户拥有的进程的所有进程树.如果pstree被调用为pstre ...
- win7 怎么设置开机直接进入桌面? netplwiz 命令
电脑没设置密码,开机如何跳过帐户已锁定的界面,直接进入桌面呢? 1.单击[运行],或按快捷键:win+r2.输入命令:netplwiz 单击[确定]3.单击你的登录账户4.去掉[要使用本机,用户名必须 ...
- 1分钟完美安装最新CentOS+Nginx+PHP-FPM+MySQL
PHP 5.3.1 MySQL 5.0.89 Nginx 0.8.33 或 0.7.65 (可选) 现在,我们可以快速全自动搞定 CentOS + Nginx + PHP-FPM + MySQL 的安 ...
- python requests接口测试
Python 标准库中的 urllib2 模块提供了你所需要的大多数 HTTP 功能,但是它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最 ...
- python里面的xlrd模块
♦python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 今天就先来说一下xlrd模块: 一.安装xlrd模块 ♦ 到python官网下载 ...
- python协程之动态添加任务
https://blog.csdn.net/qq_29349715/article/details/79730786 python协程只能运行在事件循环中,但是一旦事件循环运行,又会阻塞当前任务.所以 ...