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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
纯js封装的ajax功能函数与用法示例
May 14 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
Vue获取微博授权URL代码实例
Nov 04 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 获取select下拉列表框的值
2010/05/08 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
工程项目经理任命书
2014/06/05 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
靠谱准确的求职信
2019/04/02 职场文书
导游词之天津古文化街
2019/11/09 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
AI:如何训练机器学习的模型
2021/04/16 Python
python利用while求100内的整数和方式
2021/11/07 Python
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers