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

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

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]