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 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
理解javascript async的用法
Aug 22 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
5 cool javascript apps
2007/03/24 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python pandas如何向excel添加数据
2020/05/22 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
Android笔试题总结
2014/11/29 面试题
关于Assembly命名空间的三个面试题
2015/07/23 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
检讨书范文
2019/04/16 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS