时间戳

首页 > 技术文章 > 第三章 数组

第三章 数组

wangzhaoyv 2020-11-15 13:07 原文

HTML部分

<ul id="app">
    <li ></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

不改变原数组,返回boolean值(every / some)

    let arr = [2, 5, 6, 4, 7, 8, 21, 3, 4, 5, 6, 21, 45]; 
    //every 会执行到5,条件为false,结束迭代
    let everyArr = arr.every(x => x % 2 === 0);
    console.log('every: ', arr, everyArr)
    
    //some 会执行三次 到5的时候,条件为true,结束迭代
    let someArr = arr.some(x => x % 2 === 1)
    console.log('some: ', arr, someArr)

不改变原数组,但是返回一个新的数组(map / filter )

    /*不改变原数组,但是返回一个新的数组*/
    //map 迭代执行数据,并返回一个新的对象
    let mapArr = arr.map(x => x % 2)
    console.log('map: ', arr, mapArr)

    //filter 迭代执行数据,返回满足条件的"原数组中"的数据
    let filterArr = arr.filter(x => x % 2)
    console.log('filter: ', arr, filterArr)

不改变原数组,但是会返回一个累加后的数(reduce)

    //reduce 迭代执行数据,返回累加后的值
    /**
     * @param previousValue    必需:累加值,也是返回值
     * @param currentValue     必需:迭代的当前数据
     * @param currentIndex     迭代的当前下标
     * @param array            当前元素所属的数组对象
     * @type {number}
     */
    let reduceArr = arr.reduce((previousValue, currentValue, currentIndex, array) => {
        console.log("reduce: ", previousValue, currentIndex, array)
        return currentValue + previousValue
    })
    console.log("reduceArr: ", reduceArr)

创建数组 --- 拷贝数组 伪数组转真数组(of / from)

    //of 创建数组 [1, 2, 3, 4]
    let ofArr = Array.of(1,2,3,4);
    //拷贝一个数组  但是为浅拷贝
    let currentArr = [{a: 1, b: 1, c: 1, d: 1},{e: 1, f: 1, g: 1, h: 1}]
    let copyArr = Array.of(...currentArr);
    copyArr[0].a = 55;
    console.log(copyArr, currentArr)

    //from 创建一个新数组  但是也为浅拷贝
    //这里获取的为伪数组,然后新的querySelectorAll获取到的就是一个真数组
    let lis = document.getElementsByTagName("li");
    // 伪数组支持...的展开运算符
    console.log(...lis)
    //但是少了真数组中的一些方法
    try{
        lis.forEach(item => {
            console.log(item)
        })
    }catch (e) {
        console.error(e)
    }
    //使用of转化
    let ofNewLis = Array.of(...lis);
    //使用from转化
    let fromNewLis = Array.from(lis);
    console.log(lis,ofNewLis,fromNewLis)

数组填充(fill / from)

    /**/
    // fill
    //创建一个长度为6并默认值为0的数组 
    let newArr = Array(6).fill(0)
    console.log(newArr)
    arr.fill(0,12,13);
    /*   0(参数一):填充元素
     *  12(参数二):起始填充位置(不包含)
     *  13(参数三):结束填充位置(包含)
     *  2,3参数可不填写,则是填充所有
     */
    console.log(arr)

注意这里填充对象类型数据的话,是填充的引用地址

数组元素复制(copyWithin)

    let copyWithinArr = [1,2,3,4,5,6]
    /**
     * 0(第一个参数): 复制数据填充的开始位置
     * 3(第二个参数): 复制的数据起始位置 (包含)
     * (第三个参数): 复制的数据结束位置  (不包含)
     */
    // copyWithinArr.copyWithin(0,3);
    // console.log(copyWithinArr);

    copyWithinArr.copyWithin(0, 1 ,5);
    console.log(copyWithinArr);
    //过程
    // 1 2 3 4 5 6
    // 参数二 到 参数三  取出 2 3 4 5
    // 从0号位开始放
    // 2 3 4 5 5 6

    //起始 1 2 3 4 5 6
    //取出 2 3 4 5
    //结果 2 3 4 5 5 6
 /*数组元素复制*/
    let copyWithinArr = [1,2,3,4,5,6]
    /**
     * 0(第一个参数): 复制数据填充的开始位置
     * 3(第二个参数): 复制的数据起始位置 (包含)
     * (第三个参数): 复制的数据结束位置  (不包含)
     */
    // copyWithinArr.copyWithin(0,3);
    // console.log(copyWithinArr);

    copyWithinArr.copyWithin(0, 1 ,5);
    console.log(copyWithinArr);
    //过程
    // 1 2 3 4 5 6
    // 参数二 到 参数三  取出 2 3 4 5
    // 从0号位开始放
    // 2 3 4 5 5 6

    //起始 1 2 3 4 5 6
    //取出 2 3 4 5
    //结果 2 3 4 5 5 6

搜索数据(indexOf / lastIndexOf / find / findIndex)

    let findIndex = [1,2,3,4,5,6,7,4,9];
    // indexOf:返回找到元素的索引
    let indexOfIndex = findIndex.indexOf(4);
    console.log("indexOf:" + indexOfIndex)
    // lastIndexOf:从后面开始寻找元素的第一个,并返回索引
    let lastOfIndex = findIndex.lastIndexOf(4);
    console.log("lastIndexOf:" + lastOfIndex)
    // includes: 存在该元素返回true,否则返回false
    let includeBol = findIndex.includes(4);
    console.log("includes:" + includeBol)
    // find: 查找满足回调条件的第一个元素,返回查找到的数据,没有返回undefined
    let findItem = findIndex.find(item => {
        return item === 4;
    });
    console.log("find:" + findItem)
    // findIndex: 查找满足回调条件的第一个数据,返回对应的下标,没有返回-1
    let findItemIndex = findIndex.findIndex(item => {
        return item === 4;
    });
    console.log("findIndex:" + findItemIndex)

推荐阅读