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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
React Router V4使用指南(精讲)
Sep 17 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP二维数组的去重问题解析
2011/07/17 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
javascript操作css属性
2013/12/30 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Three.js基础部分学习
2017/01/08 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
小程序转发探索示例
2019/02/19 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python正则表达式re模块详解
2014/06/25 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python实现汽车管理系统
2018/11/30 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
初三新学期计划书
2014/05/03 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
详解Python flask的前后端交互
2022/03/31 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python