ES6 Array常用扩展的应用实例分析


Posted in Javascript onJune 26, 2019

本文实例讲述了ES6 Array常用扩展的应用。分享给大家供大家参考,具体如下:

在ES6中又对Array扩展了不少方法,下面我们来看下

from方法

将伪数组转换为数组

let obj = {
 '0':'h',
 '1':'i',
 'length':2
};
let arr = Array.from(obj);
console.log(Array.isArray(arr)); // true
console.log(arr); // ["h", "i"]

通过第二个回调参数对值进行再加工处理

let obj = {
 '0':'h',
 '1':'i',
 'length':2
};
let arr = Array.from(obj,function(item, index) {
 // 对返回的值进行处理
 return item + '...'
});
console.log(arr); // ["h...", "i..."]

可转换实现了interator接口的类型如:set和map 为数组

var set = new Set(['me','book','Joh']);
var arr = Array.from(set);
console.log(arr); // ["me", "book", "Joh"]

其他:使dom节点NodeList转化为数组

of方法

var arr = new Array(5); // 数组之前的这种形式和字符串等类型的操作不统一,得到的只是长度为5的空数组
console.log(arr); // [empty × 5]
var arr2 = Array.of(12);
console.log(arr2);// [12]
var arr3 = Array.of(12,3,5,22);
console.log(arr3); // [12, 3, 5, 22]

使用of方法,直接获得数组

find方法

find 查找符合函数的标准,返回一个真值,第一个就符合 :

var arr = [undefined, 22,33,44];
var val = arr.find(function () {
 return true;
});
console.log(val); // undefined 始终返回第一个值,无论是0,'', NaN, undefined, null 都返回第一个值

返回false, 将没有一个符合,最终结果是undefined

var arr = [20, 22,33,44];
var val = arr.find(function () {
 return false;
});
console.log(val); // undefined

通过find参数中的value来判断

var arr = [21, 22, 33, 44];
var val = arr.find(function (value, index, arr) {
 return value > 22;
});
console.log(val); // 33

findIndex方法

和find方法几乎一样,就是返回值是索引

var arr = [21, 22, 33, 44];
var val = arr.findIndex(function (value, index, arr) {
 return value > 22;
});
console.log(val); // 2

findIndex可以解决indexOf无法解决的问题:

var arr = [NaN];
var res1 = arr.indexOf(NaN);
var res2 = arr.findIndex(function (v) {
 return Object.is(NaN, v);
});
console.log(res1); // -1 未找到
console.log(res2); // 0 找到

copyWithin方法

copyWithin 操作原数组 (起始索引,拷贝值的索引起点,拷贝值的索引终点), 将拷贝的值替换原值 ,注意左闭右开

// 替换多个值
var arr1 = [1,2,3,4,5,6,7];
arr1.copyWithin(1,5,7);
console.log(arr1); // [1, 6, 7, 4, 5, 6, 7]
// 替换一个值的不同表示1
var arr2 = [1,2,3,4,5,6,7];
arr2.copyWithin(2,5,6); // 将6替换3
console.log(arr2); // [1, 2, 6, 4, 5, 6, 7]
// 替换一个值的不同表示2 从后面数,最后一个是-1,倒数第二个是-2
var arr3 = [1,2,3,4,5,6,7];
arr3.copyWithin(2,-2,-1);
console.log(arr3); // [1,2,6,4,5,6,7]
// 替换一个值的不同表示3 前后混合使用
var arr3 = [1,2,3,4,5,6,7];
arr3.copyWithin(2,5,-1);
console.log(arr3); // [1,2,6,4,5,6,7]

fill方法

fill(默认填充值,填充起始索引,填充结束索引) , 注意区间的左闭右开

var arr1 = [1,2,3,4,5,6,7];
arr1.fill(10);
console.log(arr1); // [10, 10, 10, 10, 10, 10, 10]
var arr2 = [1,2,3,4,5,6,7];
arr2.fill(10,2,5);
console.log(arr2); // [1, 2, 10, 10, 10, 6, 7]

includes方法

includes 用于查找是否包含某种元素

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN];
console.log('%s', arr1.includes('c')) // true
console.log('%s', arr1.includes('z')) // false
console.log('%s', arr1.includes(NaN)) // true

函数的第二个参数表示判断的起始位置 :

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN];
console.log('%s', arr1.includes('d', 1)) // true
console.log('%s', arr1.includes('d', 3)) // true
console.log('%s', arr1.includes('d', 4)) // false

第二个参数也可以是负数,表示从右数过来第几个,但是不改变判断搜索的方向,搜索方向还是从左到右

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN]
console.log('%s', arr1.includes('k', -1)); // false
console.log('%s', arr1.includes('k', -2)); // true
console.log('%s', arr1.includes('i', -3)); // false

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
jquery中this的使用说明
Sep 06 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
react中使用swiper的具体方法
May 15 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
Vue.js实现备忘录功能
Jun 26 #Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 #Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 #Javascript
js+html实现周岁年龄计算器
Jun 25 #Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 #Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 #Javascript
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
python实现目录树生成示例
2014/03/28 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python删除某个字符
2018/03/19 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
pycharm修改file type方式
2019/11/19 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python 实现超级玛丽游戏
2020/11/25 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
心得体会范文
2014/01/04 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
讲解员培训方案
2014/05/04 职场文书
住房租房协议书
2014/08/20 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
爱国之歌(8首)
2019/09/29 职场文书