• ES6的内置对象扩展

    目录

    一、Array的扩展方法

    1.扩展运算符（展开语法）

    2、扩展运算符的应用

    1.合并数组

    2. 将伪数组转换为真正的数组

    3.构造函数方法：Array.from()

    4.实例方法 ：find()

     5.findIndex()

    6.includes()

     

    一、Array的扩展方法

    1.扩展运算符（展开语法）

    扩展运算符可以将数组或者对象转换为逗号分隔的参数序列

    1. let ary = [1,2,3];
    2. ...ary //1,2,3
    3. console.log(...ary);  //1 2 3  
    4. //console.log方法可以接收以","分隔的参数，一次输出多个内容 
    5. //为啥输出的结果没有逗号了，因为参数序列里的逗号被console.log当成参数分隔符了
    1. <script type="text/javascript">
    2. 		let arr = ['a', 'b', 'c'];
    3. 		console.log(...arr); //a b c
    4. 		console.log('a', 'b', 'c'); //a b c
    5. 	</script>

    2、扩展运算符的应用

    1.合并数组

    扩展运算符可以用于合并数组

    1. //方法一
    2. let ary1 = [1,2,3];
    3. let ary2 = [4,5,6];
    4. let ary3 = [...ary1,...ary2];
    5. console.log(ary3);  //[1,2,3,4,5,6]
    1. //方法二
    2. ary1.push(...ary2);

    注意：push()方法可以接收多个值，每个值之间用“,”分隔

    1. 	    let ary1 = [1, 2, 3];
    2. 		let ary2 = [4, 5, 6];
    3. 		ary2.push(...ary1);
    4. 		console.log(ary2); //[4,5,6,1,2,3]

    2. 将伪数组转换为真正的数组

    将类数组或可遍历对象转换为真正的数组

    1. let oDivs = document.getElementByTagName('div');
    2. oDivs = [...oDivs];
    1. <body>
    2. 	<div>1</div>
    3. 	<div>2</div>
    4. 	<div>3</div>
    5. 	<div>4</div>
    6. 	<div>5</div>
    7. 	<script type="text/javascript">
    8. 		var oDivs = document.getElementsByTagName('div');
    9. 		console.log(oDivs);
    10. 		var ary = [...oDivs];
    11. 		console.log(ary);
    12. 	</script>
    13. </body>

    3.构造函数方法：Array.from()

    将类数组或可遍历对象转换为真正的数组

    1. let arrayLike = {
    2.     '0': 'a',
    3.     '1'：'b',
    4.     '2': 'c',
    5.     length: 3  //必须要有这一句
    6. };
    7. console.log(arrayLike);
    8. let arr2 = Array.from(arrayLike); // ['a','b','c']
    9. console.log(arr2);

     

     

    方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

    1. let arrayLike = {
    2.     "0":1,
    3.     "1":2,
    4.     "length":2
    5. }
    6. let newAry = Array.from(arrLike,item=> item*2);
    1. var arrayLike = {
    2. 			"0": "1",
    3. 			"1": "2",
    4. 			"length": 2
    5. 		}
    6.  
    7. 		var ary = Array.from(arrayLike, item => item * 2)  //数组里有多少元素 这一句就执行多少次
    8. 		console.log(ary)  //[2,4]

    4.实例方法 ：find()

    用于找出第一个符合条件的数组成员，如果没有找到返回undefined

    1. let ary = [{
    2.     id :1,
    3.     name:'张三'
    4.     },{
    5.      id:2,
    6.      name:'李四'
    7.     }
    8. ];
    9. let target = ary.find((item,index) => item.id==2 )
    1. <script type="text/javascript">
    2. 		var ary = [{
    3. 			id: 1,
    4. 			name: '张三'
    5. 		}, {
    6. 			id: 2,
    7. 			name: '李四'
    8. 		}];
    9. 		let target = ary.find((item) => {
    10. 			return item.id == 1;
    11. 		});
    12. 		console.log(target);
    13. 	</script>

     5.findIndex()

    用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

    1. let ary = [1, 5, 10, 15];
    2. let index = ary.findIndex((value,index) => value>9);
    3. console.log(index); //2
    1. <script type="text/javascript">
    2. 		let ary = [10, 20, 50];
    3. 		let index = ary.findIndex((item) => {
    4. 			return item > 15;
    5. 		});
    6. 		console.log(index);  //1
    7. 	</script>

    6.includes()

    表示某个数组是否包含给定的值，返回布尔值 

    1. [1,2,3].includes(2); //true
    2. [1,2,3].includes(4); //false

  • 相关阅读:
    JAVA计算机毕业设计作业管理系统Mybatis+系统+数据库+调试部署
    【Python Web】Flask框架（七）jQuery类库
    Git项目Readme.md文件编写格式与语法
    CorelDRAW2022最新版本号V24.0.0.301订阅版
    [概述] 获取点云数据的仪器
    LeetCode每日一题——779. 第K个语法符号
    零刻SER8 AMD 8845Hs Ryzen AI 本地部署大语言模型教程！
    Python基础
    什么是Java中的反射（Reflection），如何使用它
    Google play的企业开发者账号比个人号上包成功率更高？
  • 原文地址：https://blog.csdn.net/m0_45659764/article/details/125574180