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 特殊字符
Apr 05 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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与SQL注入攻击[一]
2007/04/17 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
python 判断一个进程是否存在
2009/04/09 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python中作用域的深入讲解
2018/12/10 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
护理自荐信范文
2013/10/05 职场文书
超市创业计划书
2014/09/15 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
通报表扬范文
2015/01/17 职场文书
2015年材料员工作总结
2015/04/30 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python