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中函数声明优先于变量声明的实例分析
Mar 01 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
js使用递归解析xml
Dec 12 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
vue实现树形菜单效果
Mar 19 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
taro开发微信小程序的实践
May 21 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
wxPython色环电阻计算器
2019/11/18 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
经理职责范文
2013/11/08 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
收入证明范本
2015/06/12 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL