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 相关文章推荐
JQuery select标签操作代码段
May 16 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
json数据处理及数据绑定
Jan 25 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 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
谈一谈收音机的高放电路
2021/03/02 无线电
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
js微信支付实现代码
2016/12/22 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
python实现二分查找算法
2017/09/21 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
幼儿园英语教学反思
2014/01/30 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
水知道答案观后感
2015/06/08 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Python os和os.path模块详情
2022/04/02 Python