array数组总结(包含ES6)

小灰灰 2021-09-01 07:06 452阅读 0赞

array.of()     静态方法定义数组

push()在数组结尾增加数据

pop()在数据结尾删除数据

shift()在数组开头删一个

unshift()在数据开头添加一个值

concat()合并数组

fill()数组填充

filter() 数组过滤

find()方法 用于模糊查询数组中的成员是否在其中  返回表达式的成员  与some方法相似

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 扁平化处理

forEach() 方法对数组的每个元素执行一次提供的函数 只能遍历数组

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。与foreach一样 无非就是map有返回值,只能遍历数组

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。 第二个参数是从第几个开始查找

join用于连接数组与分隔符，将数组与分隔符拼接输出转化为String格式的字符串。

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。累加器

reverse() 方法将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组。 不是倒序 是颠倒数组

slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括end）。原始数组不会被改变。

:Array.from() 用于将一个类数组对象，转化为数组。用法与slice相似

some() 方法测试数组中是不是有元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

arr.copyWithin(pos, start, end);   数组的内部复制

迭代器

### 0：array.of 静态方法定义数组 ###

参数：属性值

返回值：返回新的数组

// 定义数组 4中方法
            let arr = [];    
    
            let arr1 = new Array(1, 2); 
    
            let arr2 = Array(2); 
    
            // ES6中新增了Array.of静态方法 
             let arr3 = Array.of(1); 
    
             let arr4 = Array.of(1, 2); 
    
            console.log(arr);    //空数组
            console.log(arr1);   // [1, 2]
            console.log(arr2);   // [empty X 2]
            console.log(arr3);   // [1]
            console.log(arr4);   // [1, 2]

### 1： push()在数组结尾增加数据 ###

参数：添加的数据，可以有多项，用逗号隔开

返回值：新数组长度

案例:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

### 2：pop()在数据结尾删除数据 ###

参数：不用

返回值：数组最后一项对应的值

案例:

![20200824221154786.png][]

### 3：shift()在数组开头删一个 ###

参数：添加的数据

返回值：删除的数组第一项值

案例:

![20200824221826939.png][]

### 4：unshift()在数据开头添加一个值 ###

参数：添加的数据

返回值:新数组长度

案例:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

### 5：concat()合并数组    Array.prototype.concat() ###

参数: 方式1：新数组的变量名          方式2： 原数组与新数组的变量名

返回值:合并后的数组

案例:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2][]

### 6：fill数组填充 (value, start, end) ###

参数:

value:填充值

start：填充起始位置，可以省略。

end：填充结束位置，可以省略，实际结束位置是end-1。

返回值: 填充后的新数组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 4][]

### 7：filter 数组过滤   ###

参数:函数 (function(currentValue, indedx, arr), thisValue)  function为必须值     currentValue,代表当前元素的值

返回值:新数组

案例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 5][]

### 8：find(handler) 用于模糊查询数组中的成员是否在其中  返回表达式的成员  与some方法相似 ###

handler: 函数 该函数必须返回一个布尔值

该函数中有3个参数：value、index、arr

返回值：返回的是符合handler布尔值表达式的成员

### 9：some() 方法查询数组中的成员是否在其中。它返回的是一个Boolean类型的值。 ###

只要数组中有一个元素通过回调函数的测试就会返回true；

所有元素都没有通过回调函数的测试返回值才会为false

案例:

let arr1 = ["东邪", "西毒", "南帝", "北丐", "中神通", "北乔峰"]
    console.log(arr1.some((item, index, arr) => {
                return item === "西毒"
    }));   //  true

### 10：findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。 ###

### 11：flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 扁平化处理 ###

参数默认为1 1代表扁平化处理一层 比如\[ \[\] \] 2代表扁平处理三层 \[ \[ \[\] \] \] 以此类推 参数为infinity 可以扁平化处理N层

数组中空项会移除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 6][]

### 12：forEach(fn) 方法对数组的每个元素执行一次提供的函数 只能遍历数组 ###

参数：function

fn有是三个参数(item,index,arr)

item 当前每一项    index 索引值    arr原数组

返回值：undefined

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 7][]

### 13：indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。 第二个参数是从第几个开始查找 ###

![2020082512542927.png][]

### 14：join用于连接数组与分隔符，将数组与分隔符拼接输出转化为String格式的字符串。 ###

![20200825125936560.png][]

### 15：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。与foreach一样 无非就是map有返回值,只能遍历数组 ###

var arr = [0,2,4,6,8];
    
        var str = arr.map(function(item,index,arr){
    
        console.log(this，arguments);    //Window
    
    
        return item+2;
    });
    
    console.log(str); //[2,4,6,8,10]

###  16：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。 ###

`         方法接收一个函数作为累加器`,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组

语法：`arr.reduce(callback,[initialValue])`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 8][]

案例:

const arr = [1, 2, 3, 4, 5]
    const sum = arr.reduce((pre, item) => {
        return pre + item
    }, 0)
    console.log(sum) // 15

### 17：reverse() 方法将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组。 不是倒序 是颠倒数组 ###

案例:

let result = [1, 5, 3, 6, 8, 8]
    console.log(result.reverse());   8，8,6,3,5,1

### 18：slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。  ###

参数是开始位置和结束位置

第一个参数省略 从索引0开始截取

第二个省略截取到末尾 左开右闭 如果是负数 加一个数组长度

案例:

![20200915151438672.png][]

### 19:Array.from()用于将一个类数组对象，转化为数组。用法与slice相似 ###

类数组对象：数字下标、length属性

// 定义一个类数组对象   注意类数组对象必须携带length
            let likeArr = {
                0: "a",
                1: "b",
                2: "c",
                3: "d",
                length: 4
            }
    
            let arr = Array.from(likeArr);
            console.log(arr);    []

![20200915151535886.png][]

### 20：sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的 ###

案例:对年纪age进行排序

let result = [{
                    name: "小明",
                    age: 15,
                    height: 151
                }, {
                    name: "小红",
                    age: 12,
                    height: 11231
                }, {
                    name: "笑哭",
                    age: 111,
                    height: 1231
                }, {
                    name: "小王",
                    age: 16,
                    height: 11231
                }, ]
                // 对 对象中的age进行排序
            console.log(result.sort((a, b) => {
                return (a.age - b.age)
            }));

![20200825140730676.png][]

### 21：splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 ###

案例:

let arr = ["上海", "北京", "深圳", "武汉","重庆","成都"]
            
              arr.splice(2)
             //开始位置2这时候从深圳开始截取包含深圳后面的全部删除
             console.log(arr);      // 上海  北京
    
            
            //传两个参数  从哪里开始 删除几个 
             arr.splice(2,2)
             console.log(arr);     //  上海  北京 重庆 成都
    
    
     
            // 传三个参数 或者更多参数 从哪里开始删除几个 插入后面的所有参数
             arr.splice(1,2,"西安","南京")
             console.log(arr);     //  上海   西安  南京 武汉  重庆 成都
    
    
    
             
            // 第二个参数为0 表示插入到所写位置索引
             arr.splice(1,0,"南昌","长沙")
            console.log(arr);     //上海  南昌  长沙 北京 深圳 武汉 重庆 成都

### 22：arr.copyWithin(pos, start, end);   **数组的内部复制** ###

该方法用于数组的内部复制 将数组内的start开始（包含）到end结束（不包含）复制，从pos位置开始粘贴（替换）。

pos: 粘贴（替换）的起始位置

start: 复制的开始位置（包含）

end: 复制的结束位置（不包含）

// 定义数组
    let arr = ["东邪", "西毒", "南帝", "北丐", "中神通", "北乔峰"];
    // 调用copyWithin方法
    arr.copyWithin(1, 4, 6);
    // 输出arr
    console.log(arr);
    
    
    //还原copyWithin方法
    Array.prototype.copyWithin = function(pos, start, end) {
        // 截取从开始到结束的位置
        let newArr = this.slice(start, end);
        // 保存原数组的长度
        let length = this.length;
        // 从pos位置开始粘贴（替换）
        for (let i = 0; i < newArr.length; i++) {
            // 将原数组的从pos位置开始替换
            this[i + pos] = newArr[i];
        }
        // 重新设置数组的长度
        this.length = length;
        // 返回this
        return this;
    }

### ![20200915153842893.png][] ###

### 23：迭代器需要执行next entries()  返回索引值和value 索引从0开始 ###

**keys方法**

该方法用于获取数组的所有的keys 也就是下标、索引

**values方法**

该方法与keys方法的使用方式一致，区别：

keys方法的迭代器对象调用了next之后返回的对象中的value是下标

values方法的迭代器对象调用了next之后返回的对象中的value是成员

案例:

let arr = ["上海", "北京", "深圳", "武汉", "重庆", "成都"]
    
       let result = arr.entries();
      // 返回索引值和value 索引从0开始
       console.log(result.next());
       console.log(result.next());
       console.log(result.next());

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 9][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/cbcf402b74b24faa9ae0f1a86d22e2bc.png
[20200824221154786.png]: /images/20210813/6815b2a2acb54372acc997d3b0126705.png
[20200824221826939.png]: /images/20210813/09edda478c1248a29382464edc8f3b9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/90813eda6c5b429f9e74a05c1c331732.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2]: /images/20210813/555f55132aef45c9a89331b2f68fc5dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3]: /images/20210813/a2ad887db2954792bd3377391f84dcb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 4]: /images/20210813/4a963c7d576143ac8a2976740abbe880.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 5]: /images/20210813/319ba282c3f0486b8f9cfeb7dc7ba090.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 6]: /images/20210813/9a7ad04440934fc4847b9c3ec4a8c8c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 7]: /images/20210813/79ccf6a9296346c8b9dcba64f3f5e100.png
[2020082512542927.png]: /images/20210813/31dc140481374ac8a59ace1769688737.png
[20200825125936560.png]: /images/20210813/66068f804354479fb0783f9a24960b63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 8]: /images/20210813/bc9322a3134c4584a96e57b41912e3a7.png
[20200915151438672.png]: /images/20210813/51d8f74133f542f28660ddecf5f94f2f.png
[20200915151535886.png]: /images/20210813/dd0112c7d29144c0ac192c9f947cb635.png
[20200825140730676.png]: /images/20210813/b2841a18ecb24235b62a03999e17bff6.png
[20200915153842893.png]: /images/20210813/fc74bc82bb704af4bcf4bce15843c495.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 9]: /images/20210813/5599155eba394f58b0c19f49f47429f3.png