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 内置对象扩展内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS应用正则表达式转换大小写示例
这篇文章主要介绍了JS应用正则表达式转换大小写，以首字母大写，其它字母小写为例，喜欢的朋友可以参考下
2014-09-09
IE8提示Invalid procedure call or argument 异常的解决方法
某台机器上，访问公司的好几个产品网站，都抛出很多 Invalid procedure call or argument ，跟进了下，情况最后简化为
2012-09-09
js实现简易购物车功能
这篇文章主要为大家详细介绍了js实现简易购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
基于JavaScript实现简单的音频播放功能
本文给大家带来了基于js实现简单的音频播放功能，数据是由后台提供的，具体实例代码大家参考下本文
2018-01-01
详解Js 根据文件夹目录获取Json数据输出demo
这篇文章主要为大家介绍了Js 根据文件夹目录获取Json数据输出示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
angularjs模态框的使用代码实例
这篇文章主要介绍了angularjs模态框的使用代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
如何在一个页面显示多个百度地图
经常有人问，百度地图JavaScript API能在同一页面显示多个地图吗？当然可以啊，为什么不可以呢？地图之于页面无非就是个div，我们可以在页面显示多个div，自然也可以显示多个地图。
2013-04-04
JavaScript中的原型和继承详解(图文)
到现在，我们就有讨论 JavaScript 中的原型和继承问题的基础了。它虽然并不像你在 C++、Java 或 C# 中了解的经典继承模式一样，但这种方式同样强大，并且有可能会更加灵活
2014-07-07
JavaScript中常见的数据格式化方式详解
这篇文章主要为大家详细介绍了JavaScript中常见的数据格式化方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
2023-12-12
js查看一个函数的执行时间实例代码
本篇文章给大家分享一段实例代码，主要介绍js查看一个函数的执行时间，代码简单易懂，感兴趣的朋友一起跟着小编来学习学习吧
2015-09-09