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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
python实现用户登录系统
2016/05/21 Python
python学生管理系统代码实现
2020/04/05 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
写给老师的表扬信
2014/01/21 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
公司借条范本
2015/05/25 职场文书
python实现局部图像放大
2021/11/17 Python