es6: 数组的扩展

最新推荐文章于 2025-06-06 17:38:32 发布

原创最新推荐文章于 2025-06-06 17:38:32 发布 · 89 阅读

CC 4.0 BY-SA版权

本文深入讲解JavaScript中数组的创建、转换、查询、填充等方法，包括Array.of、Array.from、find、findIndex、fill及copyWithin等新特性，通过实例演示如何在DOM操作、类数组处理、数组拷贝等场景下运用。

创建数组

Array.of

        let arr2 = new Array(10);     // 返回10个空数组
let arr3 = Array.of(10);      // [10]

Array.from

在DOM节点使用Array.from

        <p>楚雄</p>
<p>普洱</p>
<p>玉溪</p>
<script>
let myP = document.getElementsByTagName('p')             // HTMLCollection HTML集合
// let myPArr = Array.from(myP)                          // from的第一参数是把类数组变成数组
// console.log( myPArr.map( item => item.textContent ) )
let myPArr = Array.from(myP, item => item.textContent )  // from的第二参数是.map的回调函数
</script>

在arguments上使用Array.from

        function add() {
       console.log(arguments)           // arguments是类数组
       return Array.from(arguments).reduce( (item, sum) => sum += item, 0 )
       // 把类数组变成数组 使用累加器reduce()计算
}
console.log(add(1, 2, 3, 4, 5));

在浅拷贝中使用Array.from

        let arr = [1, 2, 3]
let arr1 = arr.concat();           // 对空数组数组拼接
let arr2 = arr.slice();            // 返回选定元素
let arr3 = Array.from(arr);        // 把数组变成一个新数组

数组新方法

find findIndex

        var data = [{
    id: 1,
    name: 'zlm'
    },{
    id: 2,
    name: 'fhy'
    }, {
    id: 2,
    name: 'lxj'
    },{
    id: 3,
    name: 'lzl'
}]
data.find((item, index, arr) => console.log(item, index, arr))
// 回调函数参数 item = 接收项 , index = 索引, arr = 所在数组
console.log(data.find((item, index, arr) => item.id === 2))       // 根据turn得到 对象
// find只会找一个  若要多个查找使用data.filter
console.log(data.filter((item, index, arr) => item.id === 2))     // 得到数组包含turn的对象

console.log(data.findIndex((item, index, arr) => item.id === 2))  // 返回找到第一个的索引

fill 填充

        var arr = new Array(10);
arr.fill(1, 4, 9)          // fill 填充 第二参数 从索引几开始填充   第三个参数 什么数之前结束

copyWithin

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.copyWithin(0, 6, 9)   // 第一个参数 粘贴的位置 第二个参数 从索引几开始复制  第三个参数 从哪里之前停止复制

some every

        console.log( ages.some( age => age >= 18))  // age接受每一项参数进行遍历 单有大于的就返回true
console.log( ages.every( age => age >= 18)) // 每一项大于18才能true

includes

        var arr = [1, 2, NaN, -0, 3]
console.log(arr.indexOf(1))  // 返回索引0 没有的话返回-1
console.log(arr.includes(3)) // 有返回true 无返回false
console.log(arr.indexOf(NaN))  // 返回-1
console.log(arr.includes(NaN)) // 返回true includes中NaN === NaN
console.log(arr.indexOf(+0))   // 返回缩影
console.log(arr.includes(+0))  // 返回true 在Array.includes中+0-0无区分
 // 在String.includes中有区别