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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
Javascript节点关系实例分析
May 15 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
js cavans实现静态滚动弹幕
May 21 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
一段php加密解密的代码
2006/10/09 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
介绍Python中的文档测试模块
2015/04/28 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python实现猜数字游戏
2020/03/25 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
生产内勤岗位职责
2013/12/07 职场文书
《学棋》教后反思
2014/04/14 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2015年度党员个人总结
2015/02/14 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis