ES6的内置对象扩展实现示例
更新时间：2022年07月04日 11:32:19 作者：一条咸鱼o*v*o
本文主要介绍了ES6的内置对象扩展实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、Array的扩展方法
1.扩展运算符（展开语法）
扩展运算符可以将数组或者对象转换为逗号分隔的参数序列
let ary = [1,2,3]; ...ary //1,2,3 console.log(...ary); //1 2 3 //console.log方法可以接收以","分隔的参数，一次输出多个内容 //为啥输出的结果没有逗号了，因为参数序列里的逗号被console.log当成参数分隔符了
<script type="text/javascript">
let arr = ['a', 'b', 'c'];
console.log(...arr); //a b c
console.log('a', 'b', 'c'); //a b c
</script>2、扩展运算符的应用
1.合并数组
扩展运算符可以用于合并数组
//方法一 let ary1 = [1,2,3]; let ary2 = [4,5,6]; let ary3 = [...ary1,...ary2]; console.log(ary3); //[1,2,3,4,5,6]
//方法二 ary1.push(...ary2);
注意：push()方法可以接收多个值，每个值之间用“,”分隔
let ary1 = [1, 2, 3]; let ary2 = [4, 5, 6]; ary2.push(...ary1); console.log(ary2); //[4,5,6,1,2,3]
2. 将伪数组转换为真正的数组
将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementByTagName('div');
oDivs = [...oDivs];<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script type="text/javascript">
var oDivs = document.getElementsByTagName('div');
console.log(oDivs);
var ary = [...oDivs];
console.log(ary);
</script>
</body>
3.构造函数方法：Array.from()
将类数组或可遍历对象转换为真正的数组
let arrayLike = {
'0': 'a',
'1'：'b',
'2': 'c',
length: 3 //必须要有这一句
};
console.log(arrayLike);
let arr2 = Array.from(arrayLike); // ['a','b','c']
console.log(arr2);
方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
let arrayLike = {
"0":1,
"1":2,
"length":2
}
let newAry = Array.from(arrLike,item=> item*2);var arrayLike = {
"0": "1",
"1": "2",
"length": 2
}
var ary = Array.from(arrayLike, item => item * 2) //数组里有多少元素 这一句就执行多少次
console.log(ary) //[2,4]4.实例方法 ：find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let ary = [{
id :1,
name:'张三'
},{
id:2,
name:'李四'
}
];
let target = ary.find((item,index) => item.id==2 )<script type="text/javascript">
var ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find((item) => {
return item.id == 1;
});
console.log(target);
</script>
5.findIndex()
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary = [1, 5, 10, 15]; let index = ary.findIndex((value,index) => value>9); console.log(index); //2
<script type="text/javascript">
let ary = [10, 20, 50];
let index = ary.findIndex((item) => {
return item > 15;
});
console.log(index); //1
</script>6.includes()
表示某个数组是否包含给定的值，返回布尔值
[1,2,3].includes(2); //true [1,2,3].includes(4); //false
到此这篇关于ES6的内置对象扩展实现示例的文章就介绍到这了,更多相关ES6 内置对象扩展内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于前端如何用post的方式进行eventSource请求的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Bootstrap页面标题Page Header的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
JS localStorage实现本地缓存的方法，需要的朋友可以参考一下2013-06-06
这篇文章主要详细介绍了JavaScript的原型继承的相关资料，十分详细,需要的朋友可以参考下2015-02-02
JavaScript是一种功能强大的编程语言，支持面向对象的编程范式，本文将介绍JavaScript中面向对象编程的基本概念，包括对象、属性类型、定义多个属性和读取属性的特性2023-06-06
bootstrap日期插件daterangepicker使用详解
这篇文章主要为大家详细介绍了bootstrap日期插件daterangepicker的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了JavaScript通过事件代理高亮显示表格行的方法,涉及javascript事件代理及页面元素的操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JavaScript 中创建私有成员，下面介绍以 # 作为前缀几种在 JavaScript 代码中实现私有属性和方法的方式，需要的小伙伴可以参考一下2021-12-12
renderjs是一个运行在视图层的js,它只支持app-vue和h5,下面这篇文章主要给大家介绍了关于uniapp中renderjs使用与传值问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了javascript用rem来做响应式开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论