改变原数组的方法和不改变原数组的方法

1.改变原数组的方法

    var arr = []
    arr.splice()
    arr.reverse()
    arr.fill()
    arr.copyWithin()
    arr.sort()
    arr.push()
    arr.pop()
    arr.unshift()
    arr.shift()

arr.splice()

    // 1.删除功能。
    let arr = ['a', 'b', 'c', 'd'];
    // 从下标0开始，删除2个元素，并接收删除的元素。
    let deletedElements = arr.splice(0, 2);
    console.log(arr); // ["c", "d"]
    console.log(deletedElements); //["a", "b"]

    // 2.插入功能
    arr = ['a', 'b', 'e', 'f'];
    // 从下标2处开始，删除0个元素，插入c, d两个元素。
    arr.splice(2, 0, 'c', 'd');
    console.log(arr); //  ["a", "b", "c", "d", "e", "f"]

    // 3.替换功能。
    arr = ['a', 'a', 'a', 'b'];
    // 从下标1处开始，删除3个元素，插入b,c两个元素。
    arr.splice(1, 3, 'b', 'c');
    console.log(arr); // ["a", "b", "c"]

arr.reverse()

    // reverse方法没有参数   原数组改变了 返回的数组也是改变后的数组
    var arr = [4, 5, 6, 3, 2, 5, 4, 3, 9];
    var arrReturn = arr.reverse();

    console.log(arr); //[9, 3, 4, 5, 2, 3, 6, 5, 4]
    console.log(arrReturn); //[9, 3, 4, 5, 2, 3, 6, 5, 4]

arr.fill()

    // arr.fill() 是 ES6 的新方法。
    // fill() 方法用于将一个固定值替换数组的元素。
    // 语法： array.fill(value, start, end)
    // 1.value 必需。填充的值。
    // 2.start 可选。开始填充位置。
    // 3.end 可选。停止填充位置 (默认为 array.length)填充是从 start 位置开始，到 end-1 位置结束，不包含end位置.直接修改原数组

    let arr1 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
    arr1.fill(4, 2, 5);
    console.log(arr1); //   [1, 2, 4, 4, 4, 7, 7, 8, 9]
    let arr2 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
    arr2.fill(4);
    console.log(arr2); //  [4, 4, 4, 4, 4, 4, 4, 4, 4]

arr.copyWithin()

    // 数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

    // 它接受三个参数。
    // target（必需）：从该位置开始替换数据。
    // start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
    // end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
    // 这三个参数都应该是数值，如果不是，会自动转为数值。

    [1, 2, 3, 4, 5].copyWithin(0, 3);
    // 结果为 [4, 5, 3, 4, 5]
    // 上面代码表示将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2。下面是更多例子。

    // 将3号位复制到0号位
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]
    // 将索引从3开始到4结束 复制到索引1的位置

    // -2相当于3号位，-1相当于4号位
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
    // [4, 2, 3, 4, 5]

arr.sort()

    // arr.sort() 是给数组进行排序

    var peiData=  [
        { name: '输电', y: 28, h: 50 },
        { name: '变电', y: 20, h: 40 },
        { name: '配电', y: 10, h: 20 },
        { name: '新业务', y: 3, h: 6 }
    ]

    peiData.sort(function (a, b) {
        return a.y - b.y
    })
    console.log(peiData);
    // 已数组中的每一项的y值比较 进行排序

arr.push()

    // push方法 ：接受任意数量的参数 把参数逐个添加到数组的末尾 改变了原数组 返回插入后数组的长度

    var arr1 = [1, 2, 3, 4, 5, 6];
    var newarr = arr1.push(7, 8, 9, 10);
    console.log(arr1); // arr1[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];  改变了原数组
    console.log(newarr); // 10    返回插入后数组的长度

    // 下面是在接数据时的用法
    var newval = [
        { name: '输电', y: 28 },
        { name: '变电', y: 20 },
        { name: '配电', y: 10 },
        { name: '新业务', y: 3 }
    ];
    var peiData = [];
    newval.forEach((item) => {
        peiData.push({
            name: item.name,
            y: item.y * 1,
            h: item.y * 1.5
        });
    });
    console.log(peiData);
    //  peiData结果为----
    [
        { name: '输电', y: 28, h: 42 },
        { name: '变电', y: 20, h: 30 },
        { name: '配电', y: 10, h: 15 },
        { name: '新业务', y: 3, h: 4.5 }
    ];

arr.pop()

    // pop : 删除数组中的最后一个 元素 并返回  影响原数组
    var arr = [1, 3, 5, 7];
    console.log(arr.pop()); //  输出 7
    console.log(arr); //  [1,3,5]

arr.unshift()

    // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
    // 返回值
    // 把指定的值添加到数组的开头之后的新长度。

    // 说明
    // unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

    // 请注意：unshift() 方法不创建新的创建，而是直接修改原有的数组。

    // 提示和注释
    // 注释：该方法会改变数组的长度。

    // 注释：unshift() 方法无法在 Internet Explorer 中正确地工作！

    // 提示：要把一个或多个元素添加到数组的尾部，请使用 push() 方法。

    var arr = new Array();
    arr[0] = 'George';
    arr[1] = 'John';
    arr[2] = 'Thomas';

    document.write(arr + '<br />');
    document.write(arr.unshift('William') + '<br />');
    document.write(arr);

    // 输出结果为
    //       George, John, Thomas;
    //       4;
    //       William, George, John, Thomas;

arr.shift()

    // shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
    var arr = ['北京', '上海', '广州', '天津'];
    var arr1 = arr.shift(); // 有返回值 用arr1接受一下
    console.log(arr); //['上海', '广州', '天津']
    console.log(arr1); // 北京

1.不改变原数组的方法

    var arr = []
    arr.slice()
    arr.map()
    arr.forEach()
    arr.every()
    arr.some()
    arr.filter()
    arr.reduce()
    arr.entries()
    arr.find()
    arr.concat('1',['2','3']) //[1,2,3]

arr.slice()

    // slice方法 主要用来截取数组 原数组不发生变化 返回一个新数组

    var arr1 = ['arr1', 'arr2', 'arr3', 'arr4', 'arr5', 'arr6'];

    // 传入两个参数 一个是开始截取的下标 一个是结束截取的下标
    var newarr1 = arr1.slice(1, 5);

    console.log(newarr1); // ["arr2", "arr3", "arr4", "arr5"] 下标为1, 2, 3, 4的值都被截取出来了 但是没有下标为5的值 所以截取并的不包括第二个参数
    console.log(arr1); // ["arr1", "arr2", "arr3", "arr4", "arr5", "arr6"]

    // 传入一个参数 表示需要开始截取的下标 默认截取从开始截取的下标开始到数组结束

    var newarr2 = arr1.slice(1);
    console.log(newarr2); // [ "arr2", "arr3", "arr4", "arr5", "arr6"]; 可以看到除了下标为1的都被截取了

arr.map()

    // map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

    const array1 = [1, 4, 9, 16];
    // pass a function to map
    const map1 = array1.map((x) => x * 2);
    console.log(map1);
    // expected output: Array [2, 8, 18, 32]

    // 下面是在处理数据上用的   用于把name和value 分别拆成一个新的数组
    var allData = [
    { name: '北京', value: 30 },
    { name: '伤害', value: 1946 },
    { name: '陕西', value: 5407 },
    { name: '西安', value: 8466 },
    { name: '广州', value: 5666 },
    { name: '深圳', value: 35 }
    ];
    var provinceArr = this.allData.map((item) => {
    return item.name;
    });

    var valueArr = this.allData.map((item) => {
    return item.value;
    });

    console.log(provinceArr); //  ['北京', '伤害', '陕西', '西安', '广州', '深圳']
    console.log(valueArr); // [30, 1946, 5407, 8466, 5666, 35]

arr.forEach()

    var arr = [1, 3, 5, 13, 2];
    var res = arr.forEach(function (item, index) {
    console.log(item, index);
    });
    console.log(res); //forEach的返回值为undefined,

    // 下面是我在项目里运用过的
    // 下面是在接数据时的用法
    var newval = [
    { name: '输电', y: 28 },
    { name: '变电', y: 20 },
    { name: '配电', y: 10 },
    { name: '新业务', y: 3 }
    ];
    var peiData = [];
    newval.forEach((item) => {
    peiData.push({
    name: item.name,
    y: item.y * 1,
    h: item.y * 1.5
    });
    });
    console.log(peiData);
    //  peiData结果为----
    [
    { name: '输电', y: 28, h: 42 },
    { name: '变电', y: 20, h: 30 },
    { name: '配电', y: 10, h: 15 },
    { name: '新业务', y: 3, h: 4.5 }
    ];

arr.every()

    // every()方法会返回一个Boolean类型的值，该值取决了数组中是否所有的元素满足给定的条件
    // every()为数组中的每一个元素执行一次回调函数，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有的元素都满足给定的条件，那么将返回一个true
    // demo如下：
    var arr = [1, 8, 19, 48, 10];

    var flag = arr.every((item) => {
    return item < 100;
    });

    // var flag = arr.every(function (item) {
    //   return item > 100;
    // });

    console.log(flag); // true

arr.some()

    // some()方法会返回一个Boolean类型的值，该值取决了数组中是否有元素满足给定的条件
    // some()为数组中的每一个元素执行一次回调函数，直到找到一个使得回调函数返回一个“真值”（即可转换为布尔值 true 的值），如果找到了这样一个值，some() 将会立即返回 true；否则，some() 返回 false
    // demo如下：
    let arr = [10, 20, 40, 50, 60];

    let flag = arr.some((item) => {
    return item >= 50;
    });
    /*
    let flag = arr.some(function(item) {
    return item <= 50;
    })
    */

    console.log(flag); // true

arr.filter()

    // 1、创建新数组
    // 2、不改变原数组
    // 3、输出的是判断为true的数组元素形成的新数组
    // 4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)
    // 5、使用return操作输出，会循环数组每一项，并在回调函数中操作

    var arr = [1, 2, 3, 4, 5];
    var newArr = arr.filter(function (item, index) {
    return item > 2 && item < 5; //根据判断为true来遍历循环添加进新数组   返回大于2 小于5 的数  并形成一个新数组
    });
    console.log(newArr); //打印新数组   [3,4]
    console.log(arr); //打印原数组，map()没有改变原数组 [1, 2, 3, 4, 5];

arr.reduce()

    // arr.reduce(callback,[initialValue])
    // reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
    // callback （执行数组中每个值的函数，包含四个参数）

    // 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    // 2、currentValue （数组中当前被处理的元素）
    // 3、index （当前元素在数组中的索引）
    // 4、array （调用 reduce 的数组）
    // initialValue （作为第一次调用 callback 的第一个参数。）

    // （1）简单用法
    let arr1 = [1, 2, 3, 4, 5];
    //求和
    let sum = arr1.reduce((pre, item) => {
        return pre + item;
    }, 0);
    console.log('sum=', sum); //15
    //求积
    let mul = arr1.reduce((x, y) => {
        return x * y;
    });
    console.log('mul=', mul); //120

    // （2）数组中元素出现的次数
    let name = [1, 5, 2, 1, 6, 5, 1, 2, 4, 2, 4, 3, 5, 6];
    let nameNum = name.reduce((pre, item) => {
        if (item in pre) {
            pre[item]++;
        } else {
            pre[item] = 1;
        }
        return pre;
    }, {});
    console.log('次数', nameNum); //{1: 3, 2: 3, 3: 1, 4: 2, 5: 3, 6: 2}

    // （3）数组去重
    let name = [1, 5, 2, 1, 6, 5, 1, 2, 4, 2, 4, 3, 5, 6];
    let newArr = name.reduce((pre, item) => {
        if (!pre.includes(item)) {
            return pre.concat(item);
        } else {
            return pre;
        }
    }, []);
    console.log('newArr', newArr); //[1,5,2,6,4,3]

arr.entries()

    // 获取数组的键值对entries方法
    var arr = [1, 2, 3, 4, 5, 6];
    for (const [idx, val] of arr.entries()) {
    console.log(idx, val);
    }

    // 打印结果为
    // 0 1
    // 1 2
    // 2 3
    // 3 4
    // 4 5
    // 5 6

arr.find()

    // arr.find():查找出第一个符合条件的数组成员，并返回该成员，如果没有找到就返回undefine
    // 返回数组中满足提供的测试函数的第一个元素的值，若没有满足测试函数的元素，则返回undefined
    // function（必选）：在数组的元素上执行的函数，它带有三个参数
    // 1、currentValue（必选）：元素
    // 2、index（可选）：元素索引
    // 3、arr（可选）：数组本身
    let a = [
        { name: 'chen', age: 18 },
        { name: 'li', age: 10 },
        { name: 'li', age: 13 },
        { name: 'huang', age: 44 },
        { name: 'zhou', age: 100 }
    ];
    let result = a.find((item) => item.name === 'li');
    console.log(result); //返回第一个符合的元素{name:'li',age:10}

arr.concat()

    // 合并数组
    arr.concat('1',['2','3']) //[1,2,3]

posted @ 2024-04-28 15:58 磊~~ 阅读(195) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Array.prototype.slice()

· js函数柯里化

· 数组相关API

· 最新数组方法（包括es6）

· 最新数组方法

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：磊~~
园龄： 9年8个月
粉丝： 2
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

蟹老板日常

记录每一刻~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

改变原数组的方法和不改变原数组的方法

1.改变原数组的方法

arr.splice()

arr.reverse()

arr.fill()

arr.copyWithin()

arr.sort()

arr.push()

arr.pop()

arr.unshift()

arr.shift()

1.不改变原数组的方法

arr.slice()

arr.map()

arr.forEach()

arr.every()

arr.some()

arr.filter()

arr.reduce()

arr.entries()

arr.find()

arr.concat()

公告

搜索

常用链接

我的标签

随笔分类 (118)

随笔档案 (104)

阅读排行榜

推荐排行榜

~~蟹老板日常~~

记录每一刻~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

改变原数组的方法和不改变原数组的方法

1.改变原数组的方法

arr.splice()

arr.reverse()

arr.fill()

arr.copyWithin()

arr.sort()

arr.push()

arr.pop()

arr.unshift()

arr.shift()

1.不改变原数组的方法

arr.slice()

arr.map()

arr.forEach()

arr.every()

arr.some()

arr.filter()

arr.reduce()

arr.entries()

arr.find()

arr.concat()

公告

搜索

常用链接

我的标签

随笔分类 (118)

随笔档案 (104)

阅读排行榜

推荐排行榜

蟹老板日常