三、数组拓展

发表于 | 更新于: | 分类于 ， ， |
| 字数: 5.5k | 时长 ≈ 24 分钟

三、数组拓展

3.1 判断数组

1
2
3
4
5
6
7
8
9
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    // 获取类数组对象
    var obj = document.getElementsByTagName("div");
    // 定义数组
    var arr = [];
    // 请问有几种方式能确定arr是一个数组

3.1.1 第一种 判断实例化对象

obj instanceof Array

1
2
3
4
5
// 第一种 instanceof 判断实例化对象
console.log(arr instanceof Array);  // true
// 判断数组是准确的，但是构造函数是Object也是true
console.log(arr instanceof Object);  // true
console.log(obj instanceof Array);  // false

3.1.2 第二种 判断构造函数是否是Array

obj.constructor === Array

1
2
3
4
//第二种 constructor   判断构造函数
console.log(arr.constructor === Array);  // true
console.log(arr.constructor === Object);  // false arr的构造函数只能是Array
console.log(obj.constructor === Array);  // false

3.1.3 第三种 判断对象的类型是否是数组

Object.prototype.toString.call(obj)

1
2
3
// 第三种 toString 判断对象类型是不是数组  call()执行函数并改变this指向
console.log(Object.prototype.toString.call(arr) === "[object Array]");  // true
console.log(Object.prototype.toString.call(obj) === "[object Array]");  // false

Ul7Q8s.png

3.1.4 第四种 数组的静态方法

Array.isArray(obj)

1
2
3
// 第四种 数组的静态方法
console.log(Array.isArray(arr));  // true
console.log(Array.isArray(obj));  // false

3.2 获取成员的索引值

3.2.1 indexOf， lastIndexOf

ES5为数组拓展了两个方法：indexOf， lastIndexOf，分别用于获取数组中成员的索引值

  • 参数就是要查找的成员

  • 返回值就是成员的索引值

    • 如果没有找到成员，则返回-1（和字符串的indexOf方法类似）

在查找成员的时候，不会做数据的类型转换，是真正的全等查找

1
2
3
4
5
6
7
8
9
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "江峰", "赵静", "江峰"];

// 我们想要获取江峰的索引值  
var pos = arr.indexOf("江峰");
console.log(pos);  // 1   有三个江峰，索引值依然只是 1
// 获取最后一个江峰的索引值
var pos1 = arr.lastIndexOf("江峰");
console.log(pos1);  // 5

在查找成员的时候，不会做数据的类型转换，是真正的全等查找

1
2
3
4
5
6
7
8
// // 定义一个数组
var arr = ["周浩", "江峰", "江新", 3, "赵静"];

var pos2 = arr.lastIndexOf(3);
console.log(pos2);  // 3

var pos3 = arr.lastIndexOf("3");
console.log(pos3);  // -1

3.2.2 实现indexOf方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
* indexOf  获取数组中成员的索引值
* @arr  查找的数组
* @item  要查找的成员
* return  索引值
*/

function indexOf(arr, item){
    // 遍历数组
    for (var i = 0; i < arr.length; i++){
        // i 表示索引值    arr[i] 表示当前成员
        // 判断arr[i]是否与item全等
        if (arr[i] === item){
            // 找到成员 返回索引值
            // return i;
            console.log(i);
        }
    }
    // 循环完毕，没有找到，返回 -1
    return -1;
}

// 测试
var arr = ["周浩", "江峰", "江新", "江峰", "赵静", "江峰"];
var pos = indexOf(arr, "江峰");
console.log(pos);  // 1

3.2.3 兼容IE8 实现indexOf方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 兼容 IE8 
// 实例化对象所拥有的方法，应该在类的原型上
if (!Array.prototype.indexOf){
    // 如果类的原型上没有这个方法
    // 拓展方法  在类的原型上添加这个方法
    Array.prototype.indexOf = function(item){
        // 遍历数组 本质上就是遍历this  因为在类的原型中，可以通过this获取它的实例化对象
        for (var i = 0; i < this.length; i++){
            // i 表示索引值    this[i] 表示当前成员
            // 判断this[i]是否与item全等
            if (this[i] === item){
                // 找到成员 返回索引值
                return i;
                // console.log(i);
            }
        }
        // 遍历完毕后，没有找到就返回 -1
        return -1;
    }
}

// 测试
var arr1 = ["周浩", "江峰", "江新", "江峰", "赵静", "江峰"];
var pos = arr1.indexOf("江峰");
console.log(pos);  // 1

3.2.4 兼容IE8 实现lastIndexOf方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 兼容IE8 实现lastIndexOf方法
if (!Array.prototype.lastIndexOf){
    // 如果类的原型上没有这个方法
    // 拓展方法  在类的原型上添加这个方法
    Array.prototype.lastIndexOf = function(item){
        // 遍历数组 本质上就是遍历this  因为在类的原型中，可以通过this获取它的实例化对象
        for (var i = this.length - 1; i >= 0; i--){
            // i 表示索引值    this[i] 表示当前成员
            // 判断this[i]是否与item全等
            if (this[i] === item){
                // 找到成员 返回索引值
                return i;
                // console.log(i);
            }
        }
        // 遍历完毕后，没有找到就返回 -1
        return -1;
    }
}
// 测试
var arr2 = ["周浩", "江峰", "江新", "江峰", "赵静", "江峰"];
var pos5 = arr2.lastIndexOf("江峰");
console.log(pos5);  // 5

3.3 forEach

3.3.1 forEach 使用方式

该方法用于替代for循环，是数组的迭代器方法，并没有将for循环移除，只是将循环封装在了数组迭代器方法forEach中。

使用方式：

  • 数组.forEach(fn);

    • fn：要执行的函数

      • 有三个参数：

        • 第一个参数：成员值

        • 第二个参数：索引值

        • 第三个参数：原数组

      • 作用域：window

      • 函数的返回值对forEach的执行结果时没有影响的

      • forEach方法的返回值始终是undefined

1
2
3
4
5
6
7
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 循环数组
arr.forEach(function(){
    console.log(this, arguments);
});

Ul7tVU.png

3.3.2 forEach方法 实现数组的迭代器方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* forEach方法  实现数组的迭代器方法
* @arr  要遍历的数组
* @fn  执行的函数   没有返回值
*/
function forEach(arr, fn){
    // 遍历数组
    for (var i = 0; i < arr.length; i++){
        // 执行函数
        // 函数中有三个参数：  成员值 arr[i]  索引值 i  原数组 arr
        fn(arr[i], i, arr);
    }
}
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 循环数组
var result = forEach(arr, function(value, index, arr){
    console.log(this, arguments);
});
console.log(result);   // undefined

3.3.3 兼容IE8 实现forEach方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 兼容 IE8
if (!Array.prototype.forEach){
    // 拓展方法
    Array.prototype.forEach = function(fn){
        // 遍历数组，就是遍历this
        for (var i = 0; i < this.length; i++){
            // 执行函数并传递参数
            // 传递三个参数： 成员值 this[i]   索引值 i    原数组 this
            fn(this[i], i, this);
        }
    }
}
// 测试
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 循环数组
var result = arr.forEach(function(value, index, arr){
    console.log(this, arguments);
});
console.log(result);   // undefined

Ul7wG9.png

3.3.4 jquery中的forEach方法

jquery中也有一个类似的方法，each方法，与forEach方法的区别是：

在jquery中的each方法，第一个参数是索引值，第二个参数是成员值

Ul7yqK.png

3.3.5 for循环的弊端

1
2
3
4
5
6
7
// 测试for循环
var arr = ["周浩", "江峰", "江新", "赵静"];
for (var i = 0, len = arr.length; i < len; i++){

}
console.log(i, len);  // 4  4    
// 弊端是里面的参数是全局变量，不在函数内，从外部可以直接调用参数变量

Ul7gaD.png

3.4 map

3.4.1 map方法使用方式

该方法用于遍历数组并映射结果，与forEach方法类似，只是它的返回值是有意义的

  • 参数是要执行的函数

    • 函数中有3个参数：成员值， 索引值， 原数组

    • 作用域是 window

    • 返回值就是执行结果的数组成员

map方法的返回值是一个新的数组，数组中的成员就是每一次函数执行的结果的成员

1
2
3
4
5
6
7
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 使用map循环数组
var result = arr.map(function(){
    console.log(this, arguments);
});

Ul7Tqf.png

返回值是有意义的：

1
2
3
4
var result = arr.map(function(value, index, arr){
    return "十七期：" + value;
});
console.log(result);

Ul7XGj.png

3.4.2 实现map方法 用于遍历数组并映射结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
* map方法  用于遍历数组并映射结果
* @arr  要遍历的数组
* @fn  执行的函数
* return 新的数组
*/
function map(arr, fn){
    // 创建结果数组容器
    var result = [];
    // 遍历数组
    for (var i = 0; i < arr.length; i++){
        // 执行函数并传递参数
        // 传递三个参数：  成员值 arr[i]   索引值 i    原数组 arr
        result.push(fn(arr[i], i, arr));
    }
    // 返回新的数组
    return result;
}
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 使用map循环数组
var result = map(arr, function(value, index, arr){
    console.log(this, arguments);
    return "十七期：" + value;
});
console.log(result);

UlHeQ1.png

3.4.3 兼容IE8 实现map方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 兼容 IE8  
if (!Array.prototype.map){
    // 拓展方法
    Array.prototype.map = function(fn){
        // 创建数组结果容器
        var result = [];
        // 遍历数组就是遍历this
        for (var i = 0; i < this.length; i++){
            // 执行fn并传递参数
            // 传递三个参数： 成员值 this[i]   索引值 i    原数组 this
            result.push(fn(this[i], i, this));
        }
        // 返回新的数组
        return result;
    }
}
// 测试
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 使用map循环数组
var result = arr.map(function(value, index, arr){
    console.log(this, arguments);
    return "十七期：" + value;
});
console.log(result);

UlHKeK.png

3.5 fill

3.5.1 fill方法使用方式

该方法用于填充数组中的成员

我们在使用new Array(len)或者 Array(len)来创建数组的时候，得到的只有长度没有成员，所以我们不能使用数组的迭代器方法（forEach， map），而是需要填充数组

参数就是需要填充的成员

如果参数为函数，也不会执行该函数

1
2
3
4
5
6
7
// 创建数组  创键长度为 5 的数组
var arr = new Array(5);

// 使用forEach遍历数组
arr.forEach(function(){
    console.log(123);   // 输出结果 ：为空  什么都不显示
});

UlH3JH.png

此时，就需要填充数组：

1
2
3
4
5
6
7
8
9
10
// 创建数组  创键长度为 5 的数组
var arr = new Array(5);

// 填充数组
arr.fill(1);

// 使用forEach遍历数组
arr.forEach(function(){
    console.log(123);   // 输出结果 ：打印 5 次 123
});

UlHdw8.png

如果参数为函数，也不会执行该函数：

1
2
3
4
5
6
7
8
9
10
11
12
// 创建数组  创键长度为 5 的数组
var arr = new Array(5);

// 填充数组  填充内容为函数，该函数不会执行
arr.fill(function(){
    console.log("success");    
});

// 使用forEach遍历数组
arr.forEach(function(value, index, arr){
    console.log(value);//输出结果：function(){console.log("success");} 5 次  而不是执行函数输出success
});

UlHrWj.png

3.5.2 实现fill方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
* fill方法  用于填充数组
* @arr 要填充的数组
* @item 要填充的成员
* return 填充后的数组
*/
function fill(arr, item){
    // 遍历数组
    for (var i = 0; i < arr.length; i++){
        // 填充数组
        arr[i] = item;
    }
    // 返回arr
    return arr;
}
// 创建数组  创键长度为 5 的数组
var arr = new Array(5);

// 填充数组
var result = fill(arr, 1);

// 使用forEach遍历数组
result.forEach(function(){
    console.log(arguments);
});
console.log(result);

UlHWwT.png

3.5.3 兼容IE8 实现fill填充方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 兼容IE8
if(!Array.prototype.fill){
    // 拓展方法
    Array.prototype.fill = function(item){
        // 遍历数组
        for (var i = 0; i < this.length; i++){
            // 填充数组
            this[i] = item;
        }
        // 返回arr
        return arr;
    }
}
// 创建数组  创键长度为 5 的数组
var arr = new Array(5);

// 填充数组
var result = arr.fill(1);
console.log(result);

3.6 断言方法 some

3.6.1 some方法使用方式

  • 数组中是否有成员满足条件

  • 使用方式和forEach类似

  • 参数就是要执行的函数

    • 有三个参数：成员值， 索引值， 原数组

    • 函数的返回值就是判断的依据

  • some方法的返回值：

    • true：至少有一个成员满足条件

    • false：都不满足条件

1
2
3
4
5
6
7
8
9
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 判断是否有姓赵的同学
var result = arr.some(function(value, index, arr){
    console.log(this, arguments);
    return value[0] == "赵";
});
console.log(result);

UlHbOx.png

some方法对true极其敏感，一旦有条件，立即停止遍历：

1
2
3
4
5
6
7
8
9
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 判断是否有姓赵的同学
var result = arr.some(function(value, index, arr){
    console.log(this, arguments);
    return value[0] == "江";
});
console.log(result);

UlHxte.png

3.6.2 实现some方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
* some 方法  判断数组中是否有成员满足条件
* @arr  要判断的数组
* @fn  执行的函数
* return bool 是否有成员满足条件
*/

function some(arr, fn){
    // 遍历数组
    for (var i = 0; i < arr.length; i++){
        // 执行函数并判断结果
        // 传递三个参数： 成员值 arr[i]   索引值 i   原数组 arr
        // some 对true敏感 判断true
        if (fn(arr[i], i, arr)){
            // 如果有成员满足条件  返回true
            return true;
        }
    }
    // 遍历完成，没有成员满足条件 返回 false
    return false;
}
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 判断是否有姓赵的同学
var result = some(arr, function(value, index, arr){
    console.log(this, arguments);
    return value[0] == "江";
});
console.log(result);

3.6.3 兼容IE8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 兼容IE8
if(!Array.prototype.some){
    // 拓展方法
    Array.prototype.some = function(fn){
        // 遍历数组
        for (var i = 0; i < this.length; i++){
            // 执行函数并判断结果 传递三个参数
            if (fn(this[i], i, this)){
                return true;
            }
        }
        return false;
    }
}
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 判断是否有姓赵的同学
var result = arr.some(function(value, index, arr){
    console.log(this, arguments);
    return value[0] == "江";
});
console.log(result);

3.7 断言方法 every

3.7.1 every方法使用方式

  • 数组中是否都满足条件

  • 使用方式与forEach类似

  • 参数就是要执行的函数

    • 函数中有三个参数：成员值， 索引值， 原数组

    • 函数的返回值就是判断的依据

  • every方法的返回值：

    • true：全部满足条件

    • false：有成员不满足条件

every对false敏感，一旦遇到一个不满足条件的，就会立即停止遍历

1
2
3
4
5
6
7
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 成员中是否都是 2 个字符
var result = arr.every(function(value, index, arr){
    console.log(this, arguments);
});

UlbVAS.png

1
2
3
4
var result = arr.every(function(value, index, arr){
    console.log(this, arguments);
    return true;
});

Ulbln0.png

1
2
3
4
var result = arr.every(function(value, index, arr){
    console.log(this, arguments);
    return false;
});

UlbYh4.png

1
2
3
4
5
6
7
8
9
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 成员中是否都是 2 个字符
var result = arr.every(function(value, index, arr){
    console.log(this, arguments);
    return value.length == 2;
});
console.log(result);

Ulbdj1.png

3.7.2 实现every方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
* every方法  用于判断数组中是否都满足条件
* @arr  要查找的数组
* @fn  执行的函数
* return bool  是否都满足条件
*/
function every(arr, fn){
    // 遍历数组
    for (var i = 0; i < arr.length; i++){
        // 执行函数并判断结果  传递三个参数
        // every 对false敏感 判断false
        if (!fn(arr[i], i, arr)){
            // 停止遍历  返回false
            return false;
        }
    }
    // 遍历完成 都满足条件 返回true
    return true;
}
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 成员中是否都是 2 个字符
var result = every(arr, function(value, index, arr){
    console.log(this, arguments);
    return value.length == 2;
});
console.log(result);

3.7.3 兼容IE8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 兼容IE8
if (!Array.prototype.every){
    // 拓展方法
    Array.prototype.every = function(fn){
        // 遍历数组
        for (var i = 0; i < this.length; i++){
            // 执行函数并判断结果  传递三个参数
            if (!fn(this[i], i, this)){
                // 有不满足条件的  停止遍历  返回false
                return false;
            }
        }
        // 遍历完成 都满足条件 返回true
        return true;
    }
}
// 定义一个数组
var arr = ["周浩", "江峰", "江新", "赵静"];

// 成员中是否都是 2 个字符
var result = arr.every(function(value, index, arr){
    console.log(this, arguments);
    return value.length == 2;
});
console.log(result);

3.8 filter

3.8.1 filter方法的使用方式

  • 实现对数组的过滤

  • 使用方式和forEach方法类似

  • 参数就是要执行的函数

    • 函数中有三个参数：成员值， 索引值， 原数组

    • 函数的返回值就是过滤的条件

  • filter方法的返回值就是满足过滤条件的成员组成的新数组

1
2
3
4
5
6
7
8
9
// 定义一个数组
var arr = ["周浩浩", "江峰峰", "江新", "赵静"];

// 寻找第二个字符和第三个字符相等的成员
var result = arr.filter(function(value, index, arr){
    console.log(this, arguments);
    return value[1] == value[2];
});
console.log(result);

UlbsAO.png

3.8.2 实现filter方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
* filter方法  实现对数组的过滤
* @arr  要查找的数组
* @fn  执行的函数
* return []  满足锅炉条件的成员组成的新数组
*/
function filter(arr, fn){
    // 创建一个新的空数组
    var result = [];
    // 遍历数组
    for (var i = 0; i < arr.length; i++){
        // 执行函数并传递参数
        if (fn(arr[i], i, arr)){
            // 如果条件满足，就将成员放到新的数组中
            result.push(arr[i]);
        }
    }
    // 遍历完成之后 返回新数组
    return result;
}
// 定义一个数组
var arr = ["周浩浩", "江峰峰", "江新", "赵静"];

// 寻找第二个字符和第三个字符相等的成员
var result = filter(arr, function(value, index, arr){
    console.log(this, arguments);
    return value[1] == value[2];
});
console.log(result);

3.8.3 兼容IE8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 兼容IE8
if (!Array.prototype.filter){
    // 拓展方法
    Array.prototype.filter = function(fn){
        // 创建一个新的空数组
        var result = [];
        // 遍历数组
        for (var i = 0; i < this.length; i++){
            // 执行函数并传递参数
            if (fn(this[i], i, this)){
                // 若果条件满足，就将成员放到新的数组中
                result.push(this[i]);
            }
        }
        // 遍历完成之后返回新数组
        return result;
    }
}
// 定义一个数组
var arr = ["周浩浩", "江峰峰", "江新", "赵静"];

// 寻找第二个字符和第三个字符相等的成员
var result = arr.filter(function(value, index, arr){
    console.log(this, arguments);
    return value[1] != value[2];
});
console.log(result);

3.9 reduce 累加方法

3.10 reduceRight

3.10.1 reduce 和reduceRight方法使用方式

  • 这两个是累加的方法，reduce是从前向后累加，而reduceRight是从后向前累加

  • 对所有成员逐一处理，并将结果返回

  • 参数就是要执行的函数

    • 有四个参数：上一次的累积结果，当前成员值，当前索引值，原数组

    • 函数的返回值就是当次累积的结果，将会在下一次遍历的时候作为第一个参数传递

    • reduce是从第二个成员开始遍历，第一个成员会在第一次开始遍历的时候作为第一个参数传递

    • reduceRight是从倒数第二个成员开始遍历，倒数第一个成员在第一次遍历的时候作为第一个参数传递

reduce 累加：

1
2
3
4
5
6
7
8
9
10
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求相加的结果
var result = arr.reduce(function(pre, value, index, arr){
    console.log(this, arguments);
    // return 100;
    return pre + value;
});
console.log(result);

Ulb23d.png

reduce 累积：

1
2
3
4
5
6
7
8
9
10
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求累积的结果
var result = arr.reduce(function(pre, value, index, arr){
    console.log(this, arguments);
    // return 100;
    return pre * value;
});
console.log(result);

Ulbhut.png

reduceRight 累加：

1
2
3
4
5
6
7
8
9
10
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求累加的结果
var result = arr.reduceRight(function(pre, value, index, arr){
    console.log(this, arguments);
    // return 100;
    return pre + value;
});
console.log(result);

UlqSET.png

reduceRight 累积：

1
2
3
4
5
6
7
8
9
10
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求累积的结果
var result = arr.reduceRight(function(pre, value, index, arr){
    console.log(this, arguments);
    // return 100;
    return pre * value;
});
console.log(result);

Ulqi8J.png

3.10.2 实现reduce方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
* reduce方法  实现reduce方法
* @arr  数组
* @fn  执行的函数
* return 累积的结果
*/
function reduce(arr, fn){
    // 定义当前累积结果
    // 由于是从第二个成员开始遍历，上次累积的结果应该是第一个成员
    var result = arr[0];
    // 遍历数组 从第二个成员开始遍历
    for (var i = 1; i < arr.length; i++){
        // 执行函数：上一次的累积结果， 当前成员值， 当前索引值， 原数组
        result = fn(result, arr[i], i, arr);
    }
    // 返回结果
    return result;
}
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求累积的结果
var result = reduce(arr, function(pre, value, index, arr){
    console.log(this, arguments);
    return pre * value;
});
console.log(result);

3.10.3 兼容IE8 实现reduce方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 兼容IE8 实现reduce方法
if (!Array.prototype.reduce){
    // 拓展方法
    Array.prototype.reduce = function(fn){
        // 定义当前累积结果
        var result = this[0];
        // 遍历数组
        for (var i = 1; i < this.length; i++){
            // 执行函数
            result = fn(result, this[i], i, this);
        }
        // 返回结果
        return result;
    }
}
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求累积的结果
var result = arr.reduce(function(pre, value, index, arr){
    console.log(this, arguments);
    return pre * value;
});
console.log(result);

3.10.4 实现reduceRight方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
* reduceRight方法  实现reduceRight方法
* @arr  数组
* @fn  执行的函数
* return 累积的结果
*/
function reduceRight(arr, fn){
    // 定义当前累积结果
    // 由于是从倒数第二个成员开始遍历，上次累积的结果应该是倒数第一个成员
    var result = arr[arr.length - 1];
    // 遍历数组 从倒数第二个成员开始遍历
    for (var i = arr.length - 2; i >= 0; i--){
        // 执行函数：上一次的累积结果， 当前成员值， 当前索引值， 原数组
        result = fn(result, arr[i], i, arr);
    }
    // 返回结果
    return result;
}
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求累积的结果
var result = reduceRight(arr, function(pre, value, index, arr){
    console.log(this, arguments);
    return pre * value;
});
console.log(result);

3.10.5 兼容IE8 实现reduceRight方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 兼容IE8 实现reduceRight方法
if (!Array.prototype.reduceRight){
    // 拓展方法
    Array.prototype.reduceRight = function(fn){
        // 定义当前累积结果
        var result = this[this.length - 1];
        // 遍历数组
        for (var i = this.length - 2; i >= 0; i--){
            // 执行函数
            result = fn(result, this[i], i, this);
        }
        // 返回结果
        return result;
    }
}
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 求累积的结果
var result = arr.reduceRight(function(pre, value, index, arr){
    console.log(this, arguments);
    return pre * value;
});
console.log(result);

3.11 addNum

实现addNum（num1， num2）方法，接收两个参数，分别是两个整数，求两个整数之间的所有整数之和

  • addNum（1， 100）

    • 可以包含两个参数，可以不包含两个参数

    • 我们统一为包含两个参数，即1~100之和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 定义方法
function addNum(num1, num2){
    // 确定最大值与最小值
    var max = Math.max(num1, num2);
    var min = Math.min(num1, num2);
    // console.log(max, min);

    // (5, 10) 5, 6, 7, 8, 9, 10    长度为 10 - 5 + 1
    // (5, 10) 6, 7, 8, 9           长度为 10 - 5 - 1

    // 创建数组  （连续打点 如果不连续打点可以定义一些变量进行接收）
    return Array(max - min + 1)
    // 为了遍历数组，所以需要填充数组
    .fill(min)
    // 构建一个从最小值到最大值之间的数组
    .map(function(value, index, arr){
        // index是递加的，用 min + index 可以得到一个从最小值到最大值之间的数组
        return min + index;
    })
    // 累加 只用到两个参数，传递两个参数就可以
    .reduce(function(pre, value){
        return pre + value;
    });
}
console.log(addNum(1, 100));        // 5050
相关文章
点击查看

本文标题:三、数组拓展

文章作者:Mango

发布时间:2020年07月14日 - 12:56:13

最后更新:2020年07月14日 - 13:27:10

原始链接:https://mango185.github.io/post/7170732a.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️