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 17 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php采集时被封ip的解决方法
2010/08/29 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python编写简单端口扫描器
2019/09/04 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
党员剖析材料范文
2014/09/30 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js