ES6的内置对象扩展实现示例

目录
  • 一、Array的扩展方法
    • 1.扩展运算符（展开语法）
  • 2、扩展运算符的应用
    • 1.合并数组
    • 2. 将伪数组转换为真正的数组
  • 3.构造函数方法：Array.from()
  • 4.实例方法 ：find()
  • 5.findIndex()
  • 6.includes()

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

赞 (0)

相关推荐

  • ES6基础之 Promise 对象用法实例详解

    本文实例讲述了ES6基础之 Promise 对象用法.分享给大家供大家参考,具体如下: Promise 对象 1.Promise对象是ES6对异步编程的一种解决方案,它有以下两个特点: Promise对象代表一个异步操作,它只有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败),并且该状态不会受外界的影响 Promise对象的状态改变,只有两种可能:从 Pending 变为 Resolved 或者从 Pending 变为 Reje

  • es6新增对象的实用方法总结

    目录 一.属性的简写 二.属性名表达式 三.super关键字 四.扩展运算符的应用 五.属性的遍历 六.对象新增的方法 Object.is() Object.assign() Object.getOwnPropertyDescriptors() Object.setPrototypeOf() Object.getPrototypeOf() Object.keys() Object.values() Object.entries() Object.fromEntries() 总结 一.属性的简写

  • ES6 如何改变JS内置行为的代理与反射

    代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代理与反射的基本概念 什么是代理和反射呢? 代理是用来替代另一个对象(target),JS 通过new Proxy()创建一个目标对象的代理,该代理与该目标对象表面上可以被当作同一个对象来对待. 当目标对象上的进行一些特定的底层操作时,代理允许你拦截这些操作并且覆写它,而这原本只是 JS 引擎的内部能

  • ES6基础语法之对象用法

    一.对象和属性和方法 JavaScript中对象: var person={name:"Jack",age:20}; 或: var name = "jack"; var age = 20; var person = {name:name,age:age}; console.log(person.age); //20 ES6中的简洁表示: let [name,age]=["jack",20]; let person = {name,age}; //

  • ES6对象操作实例详解

    ES6对象操作实例详解

    本文实例讲述了ES6对象操作.分享给大家供大家参考,具体如下: 1.对象赋值 es5中的对象赋值方式如下: let name="小明"; let skill= 'es6开发'; var obj= {name:name,skill:skill}; console.log(obj); 结果为: ES6允许把声明的变量直接赋值给对象,例如: let name="小明"; let skill= 'es6开发'; var obj= {name,skill}; console.

  • ES6 Promise对象概念及用法实例详解

    ES6 Promise对象概念及用法实例详解

    本文实例讲述了ES6 Promise对象概念及用法.分享给大家供大家参考,具体如下: 参考文章:ECMAScript 6 入门 一. Promise是什么 Promise是异步编程的一种解决方案,它是一个容器,里面保存着某个未来才会结束的事件的结果.它有三种状态,只有异步操作的结果才能决定当前的状态,不受外界因素的影响.而一旦状态改变,就不会再变,也就是状态凝固了(resolved),任何时候都可以得到这个结果. Promise的缺点: 1. 无法取消Promise,一旦新建它就会立即执行,无法

  • ES6基础语法之Map和Set对象

    一.Map对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. Map中的键值是有序的. let myMap = new Map(); myMap.set("23","乔丹"); myMap.set("33","皮蓬"); let name = myMap.get("33"); console.log(name); //皮蓬 let has = myMap.has("

  • ES6基础之数组和对象的拓展实例详解

    本文实例讲述了ES6基础之数组和对象的拓展.分享给大家供大家参考,具体如下: 数组的扩展 1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列: console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 2.如果扩展运算符后面是一个空数组,则不产生任何效果: [...[], 1] // [1] 3.常见的拓展运算符的应用: //合并数组 let a

  • ES6的内置对象扩展实现示例

    ES6的内置对象扩展实现示例

    目录 一.Array的扩展方法 1.扩展运算符(展开语法) 2.扩展运算符的应用 1.合并数组 2. 将伪数组转换为真正的数组 3.构造函数方法:Array.from() 4.实例方法 :find() 5.findIndex() 6.includes() 一.Array的扩展方法 1.扩展运算符(展开语法) 扩展运算符可以将数组或者对象转换为逗号分隔的参数序列 let ary = [1,2,3]; ...ary //1,2,3 console.log(...ary); //1 2 3 //con

  • JavaScript封闭函数及常用内置对象示例

    本文实例讲述了JavaScript封闭函数及常用内置对象.分享给大家供大家参考,具体如下: 封闭函数 在封闭函数内部定义的函数与外部函数尽管同名也没有关系,同理,定义的变量也可以同名. 封闭函数的写法,一是加括号,一是加感叹号. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>封闭函数</title> &

  • Javascript 类型转换、封闭函数及常见内置对象操作示例

    本文实例讲述了Javascript 类型转换.封闭函数及常见内置对象.分享给大家供大家参考,具体如下: Javascript组成 1.ECMAscript javascript的语法(变量.函数.循环语句等语法) 2.DOM 文档对象模型 操作html和css的方法 3.BOM 浏览器对象模型 操作浏览器的一些方法 类型转换 1.直接转换 parseInt() 与 parseFloat() alert('12'+7); //弹出127 alert( parseInt('12') + 7 ); /

  • javascript function、指针及内置对象

    函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: 以下是引用片段: function func1(-){-} var func2=function(-){-}; var func3=function func4(-){-}; var func5=new

  • Python3列表内置方法大全及示例代码小结

    Python中的列表是简直可说是有容乃大,虽然看似类似C中的数组,但是Python列表可以接受任意的对象元素,比如,字符串,数字,布尔值,甚至列表,字典等等,自由度提升到一个新的高度,而Python也提供了大量列表相关的内置方法来有效操作列表: 方法 描述 append 将单个对象添加至列表末尾 clear 删除列表中所有项目 copy 列表的浅拷贝,参见上篇文章<Python列表赋值,复制,深拷贝以及5种浅拷贝详解> count 统计指定对象在列表中出现的次数 extend 通过附加iter

  • 深入理解JavaScript单体内置对象

    深入理解JavaScript单体内置对象

    JavaScript中定义了两个单体内置对象:Global和Math. Global对象 Global对象是JavaScript中最特别的一个对象.不属于任何其他对象的属性和方法,最终都是它的属性和方法.实际上,没有全局变量或全局作用域,所有在全局作用域中定义的属性和函数,都是Global对象的属性. Global对象包含了一些有用的方法: 1.URI编码方法 Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码,encodeURI()主要用

  • JavaScript高级程序设计 读书笔记之十一 内置对象Global

    内置对象 定义:由ECMAScript实现提供的.独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现. 由定义可知开发者不必明确实例化内置对象,它已被实例化了.在ECMAScript-262只定义了两个内置对象,即Global和Math Global Global对象是ECMAScript中最特别的对象,因为实际上它根本不存在. 由于在ECMAScript中不存在独立的对象,所有函数都必须是某个对象的方法,如前面提到的isNaN().isFinite().parseInt()和p

  • asp内置对象 ObjectContext 事务管理 详解

    asp内置对象 ObjectContext 详解 您可以使用 ObjectContext 对象提交或放弃一项由 Microsoft Transaction Server (MTS) 管理的事务,它由 ASP 页包含的脚本初始化. ASP 包含 @TRANSACTION 指令时,该页会在事务中运行,直到事务成功或失败后才会终止. 语法 ObjectContext.method 方法 SetComplete SetComplete 方法声明脚本不了解事务未完成的原因.如果事务中的所有组件都调用 Se

  • asp 内置对象 Application 详解

    asp内置对象 Application 详解  在 ASP 的内建对象中除了用于发送.接收和处理数据的对象外,还有一些非常实用的代表 Active Server 应用程序和单个用户信息的对象.  让我们先来看看 Application 对象.在同一虚拟目录及其子目录下的所有 .asp 文件构成了 ASP 应用程序.我们非但可以使用 Application 对象,在给定的应用程序的所有用户之间共享信息,并在服务器运行期间持久的保存数据.而且,Application 对象还有控制访问应用层数据的方法

  • 浅谈Python中的常用内置对象

    浅谈Python中的常用内置对象

    一.常用的python内置对象 对象类型 类型名称 示例 简要说明 数字 int,float,complex 1234,3.14,3+4j 数字大小没有限制,内置支持复数及其运算 字符串 str 'swfu' 使用单引号.双引号.三引号作为定界符,以r/R引导表示原始字符串 字节串 bytes b'hello world' 以字母b引导,可以使用单引号.双引号.三引号作为定界符 列表 list [1,2,3] 所有元素放在[ ]中,元素之向使用","分隔,其中的元素可以是任意类型 字典

随机推荐