ES6函数和数组用法实例分析


Posted in Javascript onMay 23, 2020

本文实例讲述了ES6函数和数组用法。分享给大家供大家参考,具体如下:

ES6函数和数组用法实例分析

1.对象的函数解构

ES6为我们提供了这样的解构赋值使在前后端分离时,后端返回来JSON格式的数据,前端可以直接把这个JSON格式数据当作参数,传递到函数内部进行处理。比如:

let json = {
  a:'es6',
  b:'es5'
}
function fun({a,b='es5'}){
  console.log(a);//es6
  console.log(b);//es5
}
fun(json);

结果为:

ES6函数和数组用法实例分析

2.数组的函数解构

 声明一个数组,然后写一个方法,最后用…进行解构赋值。

let arr = ['1','2','3'];
function fun(a,b,c){
  console.log(a,b,c);//1,2,3
}
fun(...arr);

3.in的用法

in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。

(1)对象判断

let obj={
  a:'a-es6',
  b:'b-es5'
}
console.log('a' in obj); //true

(2)数组判断

先来看一下ES5判断的弊端,以前会使用length属性进行判断,为0表示没有数组元素。但是这并不准确,或者说真实开发中有弊端。

let arr=[,,,,,];
console.log(arr.length); //5

上边的代码输出了5,但是数组中其实全是空值,这就是一个坑啊。那用ES6的in就可以解决这个问题。

let arr=[,,,,,];
console.log(0 in arr); //false
let arr1=['a','b'];
console.log(0 in arr1); // true

注意:这里的0指的是数组下标位置是否为空。

4.数组的遍历方法

(1)forEach

let arr=['a',b','c'];
arr.forEach((val,index)=>console.log(index,val));

结果为:

ES6函数和数组用法实例分析

forEach循环的特点是会自动省略为空的数组元素,相当于直接给我们筛空了。

(2)filter

let arr=['a','b','c'];
arr.filter(x=>console.log(x));

输出结果为:

ES6函数和数组用法实例分析

(3)some

let arr=['a','b','c'];
arr.some(x=>console.log(x));

结果为:

ES6函数和数组用法实例分析

(4)map

map在这里起到一个替换的作用.

let arr=['a','b','c'];
console.log(arr.map(x=>'web'));

结果为:

ES6函数和数组用法实例分析

5.数组转换字符串

(1)toString()方法

let arr=['a','b','c'];
console.log(arr.toString());

转换时只是是用逗号隔开了。

结果为:

ES6函数和数组用法实例分析

(2)join()方法

let arr=['a','b','c'];
console.log(arr.join("|"));

结果为:

ES6函数和数组用法实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
详解Vue slot插槽
Nov 20 Vue.js
ES6箭头函数和扩展实例分析
May 23 #Javascript
ES6新增的数组知识实例小结
May 23 #Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 #Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 #Javascript
JavaScript组合模式---引入案例分析
May 23 #Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 #Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 #Javascript
You might like
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
用Python写王者荣耀刷金币脚本
2017/12/21 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
我们的节日清明节活动方案
2014/03/05 职场文书
市场策划求职信
2014/08/07 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
秋收起义观后感
2015/06/11 职场文书
企业团队精神心得体会
2016/01/19 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP