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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
我常用的几个类
2006/10/09 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP文件操作详解
2016/12/30 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
js单向链表的具体实现实例
2013/06/21 Javascript
js实现拖拽效果
2015/02/12 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
python字符串替换的2种方法
2014/11/30 Python
基于python socketserver框架全面解析
2017/09/21 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
python实现文字版扫雷
2020/04/24 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
工作的心得体会
2013/12/31 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
关于幸福的感言
2015/08/03 职场文书
python之基数排序的实现
2021/07/26 Python
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers