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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python中用Spark模块的使用教程
2015/04/13 Python
python基础知识小结之集合
2015/11/25 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
python import 上级目录的导入
2020/11/03 Python
营业员实习自我鉴定
2013/12/07 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
mysql自增长id用完了该怎么办
2022/02/12 MySQL