您现在的位置是:网站首页> 编程资料编程资料
ES6的内置对象扩展实现示例_javascript技巧_
2023-05-24
328人已围观
简介 ES6的内置对象扩展实现示例_javascript技巧_
一、Array的扩展方法
1.扩展运算符(展开语法)
扩展运算符可以将数组或者对象转换为逗号分隔的参数序列
let ary = [1,2,3]; ...ary //1,2,3 console.log(...ary); //1 2 3 //console.log方法可以接收以","分隔的参数,一次输出多个内容 //为啥输出的结果没有逗号了,因为参数序列里的逗号被console.log当成参数分隔符了
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];12345

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 )

5.findIndex()
用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1
let ary = [1, 5, 10, 15]; let index = ary.findIndex((value,index) => value>9); console.log(index); //2
6.includes()
表示某个数组是否包含给定的值,返回布尔值
[1,2,3].includes(2); //true [1,2,3].includes(4); //false
到此这篇关于ES6的内置对象扩展实现示例的文章就介绍到这了,更多相关ES6 内置对象扩展内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- 代号为Naruto的Vue 2.7正式发布功能详解_vue.js_
- vue.js基于ElementUI封装了CRUD的弹框组件_vue.js_
- JS实现添加缓动画的方法_javascript技巧_
- Vue3中使用Supabase Auth方法详解_vue.js_
- JS实现给不同元素设置不同的定时器_javascript技巧_
- vue+iview Table表格多选切换分页保持勾选状态_vue.js_
- vue iview实现分页功能_vue.js_
- js实现模态窗口增加与删除_javascript技巧_
- Vue分页组件的封装方法_vue.js_
- Vue dialog模态框的封装方法_vue.js_
