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 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
Apr 23 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP微信分享开发详解
2017/01/14 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Django发送邮件功能实例详解
2019/09/02 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
浅析python内置模块collections
2019/11/15 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
python实现滑雪者小游戏
2020/02/22 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
我未来的职业规划范文
2014/01/11 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android