数组的方法

头像
hanbo_bo
     北京
    阅读 11 分钟

    数据分类

    可以改变原数组的方法:

    push() 末尾添加
pop() 删除末尾
unshift() 开头添加
shift()    删除开头
splice() 插入/删除
reverse() 翻转
sort()    排序

    不可以改变元原数组的方法

    join() 改变连接方式
concat() 拼接
indexOf() 获取第一次出现的元素下标
lastIndexOf() 获取最后一次出现的元素下标
includes() 检查参数是否在数组中存在
flat() 数组扁平化

    参数是方法/函数

    forEach() 遍历数组 没有返回值
filter() 过滤
map()     遍历数组 有返回值
find()     查询第一个满足条件的元素
findIndex()    获取第一个满足条件的下标
some()    检测是否有满足条件的元素
every()    检测是否所有元素都满足条件
reduce() 拼接数组
slice() 截取

    常用数组

    1.扩展运算符(...)

    扩展运算符通常用三个点表示(...),它主要用于展开数组，对象，字符串等，在数组中我们可以使用它用来合并数组，复制数组(浅拷贝),传递参数给函数，伪数组转换为真正的数组数组。
    案例：
    1.合并数组

     // 定义两个数组
    let arr = [1, 2, 3]
    let brr = [4, 5, 6]

    // 1.合并数组
    console.log([...arr, ...brr]); //  [1, 2, 3, 4, 5, 6]

    2.复制数组（浅拷贝数据）

        // 2.复制数组
    let crr = [...arr]
    console.log(crr); // [1, 2, 3]

    3.传递参数给函数

        // 3.传递参数给函数
    function fn(a, b, c) {
        console.log(a, b, c); // 1 2 3
    }
    fn(...arr)

    4.伪数组转换成真正的数组

        <body>
        // 创建多个li标签
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    
 // 4.伪数组转换成真正的数组
    // 获取 多个demo
    const uls = document.querySelectorAll("ul li") // 正常获取 NodeList 集合
    const lis = [...document.querySelectorAll("ul li")] // 使用扩展运算符
    console.log(uls, '检测是否是数组', uls instanceof Array); // false
    console.log(lis, '检测是否是数组', lis instanceof Array); // true

    打印结果：image.png

    2. push()

    概念：数组方法 push() --- 数组末尾添加一个或多个元素,返回新增后的数组和长度
    案例：

    //  push 数组末尾添加一个或多个元素的方法 
    let arr = ['a', 'b', 'c']
    arr.push('d')
    console.log(arr); // ['a', 'b', 'c', 'd']
    arr.push(1, 2, 3)
    console.log(arr); //  ['a', 'b', 'c', 'd', 1, 2, 3]

    效果图：image.png

    3.unshift()

    概念：数组方法 unshif() --- 数组开头添加一个或多个元素,返回新的数组长度
    案例：

     // unshift 数组开头添加一个或者多个元素的方法
    let arr = ['a', 'b', 'c']
    arr.unshift('ooo')
    console.log('新增一个', arr); //  ['ooo', 'a', 'b', 'c']
    arr.unshift(1, 2, 3)
    console.log('新增多个', arr); //   [1, 2, 3, 'ooo', 'a', 'b', 'c']

    效果图：image.png

    4.pop()

    概念：数组方法 pop() --- 数组末尾删除元素，返回删除后的数组
    案例：

        //  pop 数组末尾删除元素的方法 
    let arr = ['a', 'b', 'c']
    arr.pop()
    console.log(arr); //  ['a', 'b']

    效果图：
    image.png

    5.shift()

    概念：数组方法 shift() --- 删除数组开头的元素
    案例：

        // shift 删除数组开头元素
    let arr = ['a', 'b', 'c']
    arr.shift() // a 
    console.log(arr); // ['b', 'c']

    效果图：
    image.png

    6.filter()

    概念：filter() 过滤数组的方法，常常用于筛选满足指定条件的元素，并返回一个新的数组(数组内容为满足条件的元素)，使用场景如：模糊搜索、下拉框显示不同的信息。
    案例：

     // filter 数组过滤 筛选数组中满足条件的元素 并返回一个新的数组(满足条件的元素)
    let arr = [false, true, false, true, 1, 'a', {}]
    // 返回所有为真的数据
    let trueArr = arr.filter(item => item)
    console.log('真', trueArr); //  [true, true, 1, 'a', {…}]
    // 返回所有为假的数据
    let falseArr = arr.filter(item => !item)
    console.log('假', falseArr); // [false, false]
    // 返回满足指定条件的
    let newArr = arr.filter(item => item === 1)
    console.log(newArr); // [1]

    效果图：
    image.png

    7.map()

    概念：数组方法 map() 循环遍历数组中的每个元素，根据对每个元素进行指定的操作，返回一个新的数组(内容为被操作后的元素)，map方法常常用于渲染页面
    注意：map()具有返回值
    案例：

        <body>
        <ul>

        </ul>
    </body>

    // map 遍历数组中的每个元素，根据对每个元素进行指定的操作，返回一个新的数组(被操作后的元素/数据)
    let arr = [1, 2, 3, 4, 5, 6]
    // 渲染页面
    // 获取ul标签
    const ul = document.querySelector("ul")
    ul.innerHTML = arr.map((item) => {
        return `
            <li>${item}</li>
        `
    }).join("") // 使用join指定连接方式
    // 让arr数组中每个元素乘以2 
    const newArr = arr.map((item) => {
        return item * 2
    })
    console.log(newArr); // [2, 4, 6, 8, 10, 12]
    // 可以简写成
    const newArr2 = arr.map((item) => item * 3)
    console.log(newArr2); // [3, 6, 9, 12, 15, 18]

    效果图：image.png

    8.forEach()

    概念：数组方法 forEach() 同 map() 方法大同小异，都是循环遍历数组中的每个元素，并对每个元素进行指定的操作，与map()不用的是，forEach()不会返回一个新的数组，它是直接对原数组进行操作
    注意：forEach()没有返回值
    案例：

        // forEach 循环遍历数组 
    let arr = [1, 2, 3, 4, 5, 6]
    // 让arr数组中每个元素乘以2 
    arr.forEach((item) => {
        console.log(item * 2); // 2 4 6 8 10 12
    })

    效果图：image.png

    9.some()

    概念：数组方法 some() 检测数组中是否至少有一个元素满足指定条件，如果有就返回true,没有则返回false，同时some()也具有循环遍历数组中的每个元素，同时可以对元素进行指定条件的判断。
    案例：

        // some 检测数组中是否至少有一个元素满足指定条件 有返回 true 没有则返回false
    const arr = [1, 2, 3, 4]
    // 满足指定条件
    const newArr = arr.some(item => item === 3)
    console.log('满足指定条件',newArr); // true
    // 不满足指定条件
    const newArr2 = arr.some(item => item === 5)
    console.log('不满足指定条件',newArr2); // false

    效果图：
    image.png

    10.find()

    概念：数组方法 find() 检测数组中第一个满足指定条件的元素，并返回该元素，find()会对数组中每一个元素进行循环遍历，并对每个元素进行指定条件的判断，满足则返回该元素，不满足则返回undefined。
    案例：

     // find 检测数组中第一个满足指定条件的元素，满足则返回该元素 不满足则返回undefined
    const arr = [{
        name: '明天'
    }, {
        name: "今天"
    }]
    const newDemo = arr.find(item => item.name === "明天")
    console.log(newDemo); // {name: '明天'}

    效果图：
    image.png

    11.findIndex()

    概念：数组方法 findIndex() 检测数组中第一个满足指定条件的元素，并返回该元素的下标。findIndex()会对数组中每一个元素进行遍历，并对每个元素进行条件判断，满足条件则返回该元素对应的下标，不满足则返回-1。
    案例：

    // findIndex 检测数组中第一个满足指定条件的元素，满足则返回该元素的下标 不满足则返回-1
    const arr = [{
        name: '明天'
    }, {
        name: "今天"
    }]
    // 满足条件
    const newDemo = arr.findIndex(item => item.name === "今天")
    console.log('满足条件：', newDemo); // 1
    // 不满足条件
    const newDemo2 = arr.findIndex(item => item.name === "后天")
    console.log('不满足条件：', newDemo2); // -1

    效果图：
    image.png

    12.findLastIndex()

    概念：数组方法 findLastIndex() 检测数组中最后一个满足指定条件的元素，返回该元素的下标。findLastIndex() 会对数组中每一个元素进行遍历，同时对每一个元素进行指定条件的判断，满足条件则返回 1，不满足条件则返回-1。
    案例：

      // findIndex 检测数组中最后一个满足指定条件的元素，满足则返回该元素的下标，不满足则返回-1
    const arr = [1, 2, 3, 2, 5]
    const lastArr = arr.findLastIndex(item => item === 2)
    console.log('满足', lastArr);
    const lastArr2 = arr.findLastIndex(item => item === 6)
    console.log('不满足', lastArr2);

    效果图：
    image.png

    13.every()

    概念：数组方法 every() 检测数组中每个元素都满足指定条件，返回true, every()方法遍历数组对每个元素进行指定的条件判断，所有元素都满足则返回 true，有一个不满足则返回false。
    案例：

     // every 检测数组中所有的元素都满足指定条件，满足返回 true 不满足则返回false
    const arr = [1, 3, 5, 7] 
    // 满足 -- 检测数组中每个元素的类型 是 number数字类型
    const newArr = arr.every(item => typeof (item) === "number")
    console.log(newArr); // true
    // 不满足 -- 数组中每个元素 磨2 等于0
    const newArr2 = arr.every(item => item % 2 === 0)
    console.log(newArr2); // false

    效果图：
    image.png

    14.concat()

    概念：数组方法 concat() 将两个或多个数组合并成一个新的数组，注意 map()方法不会改变原数组，而是返回一个新的数组(内容是原数组和传入的参数数组)。
    案例：

        // concat 将两个或多个数组合并成一个新数组，concat不会改变原数组，而是返回一个新的数组
    // 定义两个数组
    const arr = [1, 2, 3] // 原数组
    const brr = [4, 5, 6] // 准备拼接传入的数组参数
    // 定义变量 存储新的数组
    const newArr = arr.concat(brr) // [1, 2, 3, 4, 5, 6]
    console.log(newArr);
    // 也可以多个
    const newArr2 = arr.concat([7, 8], brr, [9, 'a'])
    console.log(newArr2); //  [1, 2, 3, 7, 8, 4, 5, 6, 9, 'a']

    效果图:
    image.png：

    15.reverse()

    概念: 数组方法 reverse() 将数组中的元素顺序反转，前后顺序颠倒，reverse()会改变原始数组，不会返回一个新的数组。
    案例：

        // reverse 将数组中元素的顺序反转，前后顺序颠倒，reverse会改变原始数据，不会返回一个新数组
    let arr = [9, 8, 7, 6] // 原始数据
    arr.reverse() // 使用反转方法
    console.log('反转', arr); //  [6, 7, 8, 9]
    // 通过浅拷贝 可以避免使用reverse方法更改原始数据
    let newArr = [...arr]
    newArr.reverse()
    console.log('浅拷贝反转的数据', newArr); //  [9, 8, 7, 6]
    console.log('原始数据', arr); // [6, 7, 8, 9]

    效果图：
    image.png

    16.reduce()

    概念：数组方法 reduce() 将数组中的每个元素进行累加合并，返回合计的值。reduce()一共有五个参数，分别是：起始值、当前值、当前值的下标、当前调用reduce()方法的数组和 传递给起始值的参数值，常用于数据汇总，计算最大值，最小值等。
    案例：

     // reduce 将数组中的每个元素进行累加合并 返回汇总的值
    const arr = [1, 2, 3, 4, 5]
    // 计算总数
    const total = arr.reduce((startNum, currentNum, currentIndex, Arr) => {
        console.log(startNum, currentNum, currentIndex, Arr);
        //startNum：起始值；currentNum：当前值；currenIndex；当前值的下标；Arr：调用reduce()方法的数组
        /*
        1 2
        3 3
        6 4
        10 5
        */
        return startNum + currentNum // 返回累加的值
    }, 0) // 起始值 === startNum 可选参数 如果没有传递参数 起始值会默认以数组第一个元素为起始值
    console.log('总计', total); // 总计 15
    // 计算最大值
    const max = arr.reduce((startNum, currentNum) => {
        return Math.max(startNum, currentNum);
    })
    console.log('最大值', max); // 5

    效果图：
    image.png

    17.slice()

    概念：数组方法 slice() 截取数组 根据想要截取的元素的下标，从数组中截取一部分元素，同时不会改变原数组。slice()接受两个参数：一个是起始下标，一个是结束下标。都是可选参数。常常用于分页。
    案例：

        // slice 数组截取 从数组中截取一部分元素，形成一个新的数组，不会改变原数组
    const arr = [1, 2, 3, 4, 5, 6] // 原始数据
    // 截取 下标0 到 下标3 之间的元素
    const newArr = arr.slice(0, 3)
    console.log('两个参数', newArr); //[1, 2, 3]
    // 截取下标3到最后的元素
    const subArr = arr.slice(3)
    console.log('单个参数', subArr); // [4, 5, 6]
    console.log('原数组', arr); // [1, 2, 3, 4, 5, 6]

    效果图：
    image.png

    18.splice()

    概念：数组方法 splice() 在数组中添加或者删除元素，返回被操作后组成的新数组。splice()方法会改变原数组，同时也可以在指定下标的位置插入想要的内容。splice()方法的参数：下标，删除元素的数量，插入新元素的内容。跟扩展运算符有些类型。
    案例：

        // splice 在数组中添加或删除元素，返回操作后的数组。 会改变原数组
    const arr = [1, 2, 3, 4] // 0 1 2 3 
    // 在下标2前面插入一个新的元素
    arr.splice(2, 0, 'a')
    console.log('插入', arr); //  [1, 2, 'a', 3, 4]
    // 删除下标0对应的数据 第二个参数表示参数的数量
    arr.splice(0, 1)
    console.log('删除', arr); // [2, 'a', 3, 4]
    // 删除下标2对应的元素，同时插入新的数据
    const newArr = arr.splice(2, 1, 'b', 'c')
    console.log('插入和删除', arr); // [2, 'a', 'b', 'c', 4]
    console.log('删除下标对应的元素', newArr); // [3]

    效果图：
    image.png

    19.Array.from()

    概念：数组静态方法 Array.from(),将类似于数组的对象，Set等转换成真正的数组，同时也可以用来创建数组。
    案例：

       // Array from()  静态方法 用于创建新数组或 转换成真正的数组
    const str = "Hello";
    console.log('字符串创建数组', Array.from(str)); //['H', 'e', 'l', 'l', 'o']
    // Set创建数组
    const setArr = new Set([1, 2, 3])
    console.log('set',setArr); // Set(3) {1, 2, 3}
    console.log('转换后的set',Array.from(setArr)); //  [1, 2, 3]
    // 类似于数组的对象||伪数组 转成 真正的数组  
    const obj = {
        '0': "明天",
        '1': 18,
        length: 2
    }
    // 超出的长度会以undefined显示
    console.log('类似于数组的对象',Array.from(obj)); // ['明天', 18]

    效果图：
    image.png

    20.Array.of()

    概念：数组静态方法 Array.of() 用来创建数组，根据传入的不同参数，组成不用参数的数组。跟 new Array() 创建数组不同。new Array()根据输入的参数，决定数组的长度；而Array.of()则是你传入什么参数，他就返回什么参数组成的数组。
    案例：

        // Array.of() 创建一个新的数组 
    const strArr = Array.of('a', 'b', 'c')
    console.log('', strArr); //  ['a', 'b', 'c']
    const numArr = Array.of(3)
    console.log(numArr); // [3]
    console.log(new Array(3)); // [空属性 × 3]

    效果图：
    image.png

    21.new Set()

    概念：new Set() Set是用来存储唯一值集合，所以可以用来给数组去重， 因为Set中不允许有重复的元素，所以系统会自动给数组去重。
    案例：

    // new Set() 去重 
    const arr = [1, 1, 2, 3, 2, 3, 2]
    // 使用new Set()给数组去重 在使用Array.from()将Set转换成真正的数组
    console.log(Array.from(new Set(arr))); //  [1, 2, 3]

    效果图：
    image.png

    javascript
    hanbo_bo
    16 声望1 粉丝
    下一篇 »
    css3的新特性和css3的动画

    引用和评论

    推荐阅读
    头像
    TortoiseSVN安装详情

    hanbo_bo阅读 543

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 4k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 7阅读 2k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 4阅读 875

    头像
    巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

    chokcoco赞 3阅读 1.3k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 5阅读 2k评论 1

    头像
    JavaScript&ES6----数组去重的多种方法

    云绮棠兮赞 4阅读 4.3k评论 2

    0 条评论
    得票最新