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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
可以将word转成html的js代码
Apr 11 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 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
自己做矿石收音机
2021/03/02 无线电
在PHP中使用curl_init函数的说明
2010/11/02 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
通过JAVAScript实现页面自适应
2007/01/19 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python中管道用法入门实例
2015/06/04 Python
Django验证码的生成与使用示例
2017/05/20 Python
python tornado微信开发入门代码
2018/08/24 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python实现自动打卡的示例代码
2020/10/10 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
python爬取代理ip的示例
2020/12/18 Python
python中os.remove()用法及注意事项
2021/01/31 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
旅游市场营销方案
2014/03/09 职场文书
论群众路线学习笔记
2014/11/06 职场文书
财政局个人年终总结
2015/03/03 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
Redis批量生成数据的实现
2022/06/05 Redis