Array( 1. 数组的概念,2. 创建数组,3. 数组空位,4. 数组方法)


1. 数组的概念

数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。

数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

2. 创建数组

1. 利用 new 创建数组

		let 数组名 = new Array()let arr = new Array();   // 创建一个新的空数组

如果知道数组中元素的数量,那么可以给构造函数传入一个数值,然后 length 属性就会被自动创建并设置为这个值

        let arr1 = new Array(20);// 给构造函数传入一个数值
        console.log(arr1); // (20) [空属性 × 20]

给 Array 构造函数传入要保存的元素

        let colors = new Array("red", "blue", "green");
        console.log(colors) // ['red', 'blue', 'green']

创建数组时可以给构造函数传一个值。这时候就有点问题了,因为如果这个值是数值,则会创建一个长度为指定数值的数组;而如果这个值是其他类型的,则会创建一个只包含该特定值的数组。

        let arr2 = new Array(3); // 创建一个包含 3 个元素的数组
        let names = new Array("Greg"); // 创建一个只包含一个元素,即字符串"Greg"的数组
        console.log(arr2) //(3) [空属性 × 3]
        console.log(names) //['Greg']

使用 Array 构造函数时,也可以省略 new 操作符。

		let 数组名 = Array()let arr = Array();   // 创建一个新的空数组
        let arr2 = Array(3); // 创建一个包含 3 个元素的数组
        let names = Array("Greg"); // 创建一个只包含一个元素,即字符串"Greg"的数组
        console.log(arr2) //(3) [空属性 × 3]
        console.log(names) //['Greg']

2. 利用数组字面量创建数组

数组字面量是在中括号中包含以逗号分隔的元素列表

		//1. 使用数组字面量方式创建空的数组
		var  数组名 = []//2. 使用数组字面量方式创建带初始值的数组
		var  数组名 = ['小白','小黑','大黄','瑞奇'];
		let colors = ["red", "blue", "green"]; // 创建一个包含 3 个元素的数组
		let arr = []; // 创建一个空数组
		let values = [1,2,]; // 创建一个包含 2 个元素的数组

注意: 与对象一样,在使用数组字面量表示法创建数组不会调用 Array 构造函数。

3. ES6 新增的用于创建数组的静态方法:from()和 of()

from()用于将类数组结构转换为数组实例

Array.from()第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个 length 属性和可索引元素的结构。

字符串会被拆分为单字符数组:

		// 字符串会被拆分为单字符数组
		console.log(Array.from("Matt")); // ["M", "a", "t", "t"]

使用 from()将集合和映射转换为一个新数组:

        const m = new Map().set(1, 2)
            .set(3, 4);
        const s = new Set().add(1)
            .add(2)
            .add(3)
            .add(4);
        console.log(Array.from(m)); // [[1, 2], [3, 4]] 
        console.log(Array.from(s)); // [1, 2, 3, 4]

Array.from()对现有数组执行浅复制:

const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1); 
console.log(a1); // [1, 2, 3, 4] 
alert(a1 === a2); // false

使用任何可迭代对象:

        // 可以使用任何可迭代对象
        const iter = {
            *[Symbol.iterator]() {
                yield 1;
                yield 2;
                yield 3;
                yield 4;
            }
        };
        console.log(Array.from(iter)); // [1, 2, 3, 4]

Symbol.iterator 为每一个对象定义了默认的迭代器。当需要对一个对象进行迭代时(比如开始用于一个for…of循环中),它的@@iterator方法都会在不传参情况下被调用,返回的迭代器用于获取要迭代的值。

arguments 对象可以被轻松地转换为数组:

        function getArgsArray() {
            return Array.from(arguments);
        }
        console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]

from()也能转换带有必要属性的自定义对象:

        const arrayLikeObject = {
            0: 1,
            1: 2,
            2: 3,
            3: 4,
            length: 4
        };
        console.log(arrayLikeObject);// {0: 1, 1: 2, 2: 3, 3: 4, length: 4}
        console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

Array.from()的第二个可选的映射函数参数,这个函数可以直接增强新数组的值,而无须像调用 Array.from().map()那样先创建一个中间数组。

Array.from()的第三个可选参数,用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。

        const a1 = [1, 2, 3, 4];
        const a2 = Array.from(a1, x => x ** 2);
        const a3 = Array.from(a1, function (x) { return x ** this.exponent }, { exponent: 2 });
        console.log(a2); // [1, 4, 9, 16] 
        console.log(a3); // [1, 4, 9, 16]

Array.of()可以把一组参数转换为数组。

        console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
        console.log(Array.of(undefined)); // [undefined]

3. 数组空位

使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)。

        const options = [, , , , ,]; // 创建包含 5 个元素的数组
        console.log(options.length); // 5 
        console.log(options); // [空属性 × 5]

ES6 新增方法普遍将这些空位当成存在的元素,只不过值为 undefined

        const options = [1, , , , 5];
        for (const option of options) {
            console.log(option === undefined);
        }
        // false
        // true 
        // true 
        // true 
        // false

使用 ES6 的 Array.from()创建的包含 3 个空位的数组

        const a = Array.from([, , ,]); // 使用 ES6 的 Array.from()创建的包含 3 个空位的数组
        for (const val of a) {
            alert(val === undefined);
        }
        // true 
        // true 
        // true 
        alert(Array.of(...[, , ,])); // [undefined, undefined, undefined] 
        for (const [index, value] of options.entries()) {
            alert(value);
        }
        // 1
        // undefined
        // undefined
        // undefined
        // 5

注意 由于行为不一致和存在性能隐患,因此实践中要避免使用数组空位。如果确实需要空位,则可以显式地用 undefined 值代替。

4. 数组索引

索引 (下标) :用来访问数组元素的序号(数组下标从 0 开始)

在这里插入图片描述
数组可以通过索引来访问、设置、修改对应的数组元素,可以通过“数组名[索引]”的形式来获取数组中的元素。

        let colors = ["red", "blue", "green"]; // 定义一个字符串数组
        console.log(colors[0]); // 显示第一项
        colors[2] = "black"; // 修改第三项
        colors[3] = "brown"; // 添加第四项
        console.log(colors)//['red', 'blue', 'black', 'brown']

通过修改 length 属性,可以从数组末尾删除或添加元素

  • 从数组末尾删除
        let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
        colors.length = 2;
        console.log(colors) // ['red', 'blue']
        console.log(colors[2]); // undefined
        //将数组 colors 的 length 设置为 4,虽然数组只包含 3 个元素。			
        //位置 3 在数组中不存在,因此访问其值会返回特殊值 undefined。
  • 从数组末尾添加元素
        let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
        colors[colors.length] = "black"; // 添加一种颜色(位置 3)
        colors[colors.length] = "brown"; // 再添加一种颜色(位置 4)
        console.log(colors)//(5) ['red', 'blue', 'green', 'black', 'brown']

注意: 数组最多可以包含 4 294 967 295 个元素,这对于大多数编程任务应该足够了。如果尝试添加更多项,则会导致抛出错误。以这个最大值作为初始值创建数组,可能导致脚本运行时间过长的错误。

5. 检测数组

问题:判断一个对象是不是数组

1. instanceof ()方法

判断某个实例(arr)是否属于某个对象。

		if (value instanceof Array){ 
		 // 操作数组
		}
       let value = []
        if (value instanceof Array) {
            // 操作数组
            console.log('value是数组')
        } else {
            console.log('value不是数组')
        }
        console.log(value instanceof Array)// true

2. Array.isArray()方法

ES5新增数组方法,判断数组是不是数组。

        let value = []
        if (Array.isArray(value)) {
            console.log('value是数组')
        } else {
            console.log('value不是数组')
        }
        console.log(Array.isArray(value))// true

3. constructor

判断实例(arr)的构造函数是否等于某个对象。

let arr = [1,2,3];
console.log(arr.constructor == Array); //true

6. 迭代器方法

1. keys()方法

返回数组索引的迭代器

        const arr = ["foo", "bar", "baz", "qux"];
        // 因为这些方法都返回迭代器,所以可以将它们的内容
        // 通过 Array.from()直接转换为数组实例
        const Keys = Array.from(arr.keys());
        console.log(Keys); // [0, 1, 2, 3] 

2. values()方法

返回数组元素的迭代器

		const arr = ["foo", "bar", "baz", "qux"];
		const Values = Array.from(arr.values());
		console.log(Values); // ["foo", "bar", "baz", "qux"] 

3. entries()方法

返回索引/值对的迭代器

        const arr = ["foo", "bar", "baz", "qux"];
        const Entries = Array.from(arr.entries());
        console.log(Entries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

使用 ES6 的解构拆分键/值对:

        const arr = ["foo", "bar", "baz", "qux"];
        for (const [index, item] of arr.entries()) {
            console.log(item, index)
        }

在这里插入图片描述

注意 虽然这些方法是 ES6 规范定义的,但在 2017 年底的时候仍有浏览器没有实现它们。

7. 复制和填充方法

1. 批量复制方法 copyWithin()

copyWithin()会按照指定范围浅拷贝数组中的部分内容,然后将它们插入到指定索引开始的位置

开始索引和结束索引则与 fill()使用同样的计算方法

  • 从 arr 中复制索引 0 开始的内容,插入到索引 5 开始的位置
        let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        // 从 arr 中复制索引 0 开始的内容,插入到索引 5 开始的位置
        // 在源索引或目标索引到达数组边界时停止
        arr.copyWithin(5);
        console.log(arr); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4] 

在这里插入图片描述

  • 从 ints 中复制索引 5 开始的内容,插入到索引 0 开始的位置
		let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        // 从 arr 中复制索引 5 开始的内容,插入到索引 0 开始的位置
        arr.copyWithin(0, 5);
        console.log(arr); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]

在这里插入图片描述

  • 从 arr 中复制索引 0 开始到索引 3 结束的内容,插入到索引 4 开始的位置
		let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        arr.copyWithin(4, 0, 3);
        console.log(arr); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]

在这里插入图片描述

  • JavaScript 引擎在插值前会完整复制范围内的值
        // JavaScript 引擎在插值前会完整复制范围内的值
        // 因此复制期间不存在重写的风险
        arr.copyWithin(2, 0, 6);
        console.log(arr); // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]

在这里插入图片描述

  • 支持负索引值,与 fill()相对于数组末尾计算正向索引的过程是一样的
        // 支持负索引值,与 fill()相对于数组末尾计算正向索引的过程是一样的
        arr.copyWithin(-4, -7, -3);
        console.log(arr); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6] 

静默忽略超出数组边界、零长度及方向相反的索引范围:

  • 索引过低,忽略
        // 索引过低,忽略
        arr.copyWithin(1, -15, -12);
        console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
  • 索引过高,忽略
        arr.copyWithin(1, 12, 15);
        console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  • 索引反向,忽略
        arr.copyWithin(2, 4, 2);
        console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
  • 索引部分可用,复制、填充可用部分
        arr.copyWithin(4, 7, 10)
        console.log(arr); // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];

2. 填充数组方法 fill()

使用 fill()方法可以向一个已有的数组中插入全部或部分相同的值

  • 用 5 填充整个数组:
        zeroes.fill(5);
        console.log(zeroes); // [5, 5, 5, 5, 5] 
        zeroes.fill(0); // 重置
        console.log(zeroes); // [0, 0, 0, 0, 0]
  • 用 6 填充索引大于等于 3 的元素
        const zeroes = [0, 0, 0, 3, 3];
        zeroes.fill(6, 3);
        console.log(zeroes); // [0, 0, 0, 6, 6]
  • 用 7 填充索引大于等于 1 且小于 3 的元素
        const zeroes = [0, 0, 2, 3, 3];
        zeroes.fill(8, -4, -1);
        console.log(zeroes);//[0, 8, 8, 8, 3]

fill()静默忽略超出数组边界、零长度及方向相反的索引范围:

        const zeroes = [0, 0, 0, 0, 0];
        // 索引过低,忽略
        zeroes.fill(1, -10, -6);
        console.log(zeroes); // [0, 0, 0, 0, 0] 
        // 索引过高,忽略
        zeroes.fill(1, 10, 15);
        console.log(zeroes); // [0, 0, 0, 0, 0] 
        // 索引反向,忽略
        zeroes.fill(2, 4, 2);
        console.log(zeroes); // [0, 0, 0, 0, 0] 
        // 索引部分可用,填充可用部分
        zeroes.fill(4, 3, 10)
        console.log(zeroes); // [0, 0, 0, 4, 4]

8. 转换方法

1. valueOf()方法

返回的还是数组本身

        let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
        console.log(colors.valueOf()); // ['red', 'blue', 'green']

2. toString()方法

返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串

        let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
        console.log(colors.toString()); // red,blue,green 

3. join()方法

join()方法接收一个参数,即字符串分隔符,返回包含所有项的字符串

        let colors = ["red", "green", "blue"];
        console.log(colors.join("*")); // red*green*blue 
        console.log(colors.join("||")); // red||green||blue

注意: 如果数组中某一项是 null 或 undefined,则在 join()、toLocaleString()、toString()和 valueOf()返回的结果中会以空字符串表示。

9. 栈方法

1. push()方法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

        let arr1 = Array()
        console.log(arr1);//[]
        arr1.push("red", "green")
        arr1.push("brown"); // 再添加一项
        arr1[3] = "black"; // 添加一项
        console.log(arr1);//['red', 'green']

提示: 在数组起始位置添加元素请使用 unshift() 方法

2. pop()方法

pop()方法删除数组的最后一项,同时减少数组的 length 值,返回被删除的项。

        let arr1 = Array()
        console.log(arr1);//[]
        arr1.push("red", "green")
        arr1.push("brown"); // 再添加一项
        arr1[3] = "black"; // 添加一项
        arr1.pop() // ['red', 'green', 'brown']
        console.log(arr1);//['red', 'green']

10. 队列方法

1. shift()方法

删除数组的第一项并返回它,然后数组长度减 1

        let arr1 = new Array("red", "green")
        arr1.shift()
        console.log(arr1);// ['green']

2. unshift()方法

在数组开头添加任意多个值,然后返回新的数组长度

        let arr1 = new Array("3", "4")
        arr1.unshift('1', '2')
        console.log(arr1);// ['1', '2', '3', '4']

通过使用 unshift()和 pop(),可以在相反方向上模拟队列,即在数组开头添加新数据,在数组末尾取得数据

		let colors = new Array(); // 创建一个数组
		let count = colors.unshift("red", "green"); // 从数组开头推入两项
		alert(count); // 2 
		count = colors.unshift("black"); // 再推入一项,通过 unshift()填充数组
		alert(count); // 3 
		let item = colors.pop(); // 取得最后一项,调用 pop()时,删除最后一项"green"并返回它。
		alert(item); // green 
		alert(colors.length); // 2

11. 排序方法

1. reverse()方法

reverse()方法就是将数组元素反向排列

        let arr1 = new Array()
        arr1.unshift(1, 2, 3, 4, 5)
        arr1.reverse() //[5, 4, 3, 2, 1]
        console.log(arr1);

2. sort()方法

默认情况下,sort()会按照升序重新排列数组元素

调用 sort()会按照这些数值的字符串形式重新排序

sort()方法可以接收一个比较函数,用于判断哪个值应该排在前面。

        let arr1 = new Array()
        arr1.unshift(1, 2, 6, 4, 5, 3)
        arr1.sort()
        console.log(arr1)//[1, 2, 3, 4, 5, 6]
        let arr2 = arr1.sort((a, b) => {
            return b - a
        })
        console.log(arr2)//[6, 5, 4, 3, 2, 1]

注意 reverse()和 sort()都返回调用它们的数组的引用。

12. 操作方法

1. concat()方法

concat ()方法用于连接两个或多个数组。

        let arr1 = ["red", "green"];
        let arr2 = arr1.concat("blue", "yellow", "purple")
        console.log(arr2);//["red", "green","blue", "yellow", "purple"]

打平数组参数的行为可以重写,方法是在参数数组上指定一个特殊的符号:Symbol.isConcatSpreadable。这个符号能够阻止 concat()打平参数数组。相反,把这个值设置为 true 可以强制打平类数组对象:

	let colors = ["red", "green", "blue"]; 
	let newColors = ["black", "brown"]; 
	let moreNewColors = { 
	 [Symbol.isConcatSpreadable]: true, 
	 length: 2, 
	 0: "pink", 
	 1: "cyan" 
	}; 
	newColors[Symbol.isConcatSpreadable] = false; 
	// 强制不打平数组
	let colors2 = colors.concat("yellow", newColors); 
	// 强制打平类数组对象
	let colors3 = colors.concat(moreNewColors); 
	console.log(colors); // ["red", "green", "blue"] 
	console.log(colors2); // ["red", "green", "blue", "yellow", ["black", "brown"]] 
	console.log(colors3); // ["red", "green", "blue", "pink", "cyan"]

2. slice()方法

slice()方法创建一个包含原有数组中一个或多个元素的新数组

  1. slice()方法可以接收一个或两个参数:返回元素的开始索引和结束索引。
  2. 如果只有一个参数,则 slice()会返回该索引到数组末尾的所有元素。
  3. 如果有两个参数,则 slice()返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素。
        let arr1 = ["red", "green", "blue", "yellow", "purple"];
        let arr2 = arr.slice(1);
        let arr3 = arr.slice(1, 4);
        alert(arr2); // green,blue,yellow,purple 
        alert(arr3); // green,blue,yellow

注意 :

  1. 如果 slice()的参数有负值,那么就以数值长度加上这个负值的结果确定位置。
    比如,在包含 5 个元素的数组上调用 slice(-2,-1),就相当于调用 slice(3,4)。
  2. 如果结束位置小于开始位置,则返回空数组。
  • 删除

需要给 splice()传 2 个参数:要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素,比如 splice(0, 2)会删除前两个元素。

        let arr1 = ["red", "green", "blue"];
        let removed = colors.splice(0, 1); // 删除第一项
        alert(arr1); // green,blue 
        alert(removed); // red,只有一个元素的数组
  • 插入

需要给 splice()传 3 个参数:开始位置、0(要删除的元素数量)和要插入的元素,可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数,乃至任意多个要插入的元素。
比如,splice(2, 0, “red”, “green”)会从数组位置 2 开始插入字符串"red"和"green"。

        let arr1 = ["red", "green", "blue"];
        removed = arr1.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
        console.log(arr1); // ['red', 'yellow', 'orange', 'green', 'blue']
        console.log(removed);
  • 替换

splice()在删除元素的同时可以在指定位置插入新元素,同样要传入 3 个参数:开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。
比如,splice(2, 1, “red”, “green”)会在位置 2 删除一个元素,然后从该位置开始向数组中插入"red"和"green"。

        let arr1 = ["red", "green", "blue"];
        removed = arr1.splice(2, 1, "yellow", "orange"); // 在位置 1 插入两个元素
        console.log(arr1); // ['red', 'green', 'yellow', 'orange']
        console.log(removed);// ['blue']

13. 搜索和位置方法

ECMAScript 提供两类搜索数组的方法:按严格相等搜索和按断言函数搜索。

1. 严格相等(indexOf()、lastIndexOf()和 includes())

indexOf()和 includes()方法从数组前头(第一项)开始向后搜索

lastIndexOf()从数组末尾(最后一项)开始向前搜索。

indexOf()lastIndexOf()都返回要查找的元素在数组中的位置,如果没找到则返回-1。

includes()返回布尔值,表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时,会使用全等(===)比较,也就是说两项必须严格相等。

        let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
        console.log(numbers.indexOf(4)); // 3 
        console.log(numbers.lastIndexOf(4)); // 5 
        console.log(numbers.includes(4)); // true 
        console.log(numbers.indexOf(4, 4)); // 5 
        console.log(numbers.lastIndexOf(4, 4)); // 3 
        console.log(numbers.includes(4, 7)); // false 
        let person = { name: "Nicholas" };
        let people = [{ name: "Nicholas" }];
        let morePeople = [person];
        console.log(people.indexOf(person)); // -1 
        console.log(morePeople.indexOf(person)); // 0 
        console.log(people.includes(person)); // false 
        console.log(morePeople.includes(person)); // true

2. 断言函数(find()和 findIndex())

find()和 findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。

find()返回第一个匹配的元素

        const people = [{ name: '张三疯', age: 23 }, { name: '史珍香', age: 21 }]
        console.log(people)
        let find = people.find((element, index, array) => element.age < 23)
        console.log(find);//{name: '史珍香', age: 21}

findIndex()返回第一个匹配元素的索引。这两个方法也都接收第二个可选的参数,用于指定断言函数内部 this 的值。

        const people = [{ name: '张三疯', age: 23 }, { name: '史珍香', age: 21 }]
        let findIndex = people.findIndex((element, index, array) => element.age < 23)
        console.log(findIndex);// 1

找到匹配项后,这两个方法都不再继续搜索。

14. 迭代方法

1. every()方法

every方法与some方法相反,every方法是数组中的所有值都符合你给定的判断条件的时候才会返回true,否则就返回false。

        let arr1 = [1, 2, 3].every(item => item >= 2)
        let arr2 = [1, 2, 3].every(item => item <= 1)
        console.log(arr1);// false
        console.log(arr2);// true

2. filter()方法

“过滤”、“筛选”的意思。指数组filter后,返回过滤后的新数组。

函数返回 true 的项会组成数组之后返回,0false

        var arr1 = [1, 2, 3, 4];
        var newArr = arr1.filter((item) => {
            return item;
        })
        var newArr2 = arr1.filter((item) => {
            return item >= 2;
        })
        // var newArr2 = arr.filter(e => e >= 2)   (简写,只有一个return语句时,将括号都去掉)
        console.log(newArr); //  [1, 2, 3, 4]
        console.log(newArr2); // [2, 3, 4]

3. forEach()方法

forEach 对数组的每个元素执行一次提供的函数

var arr = [1, 2, 3];
arr.forEach(function (element, index, array) {
  console.log(element, index, array)
})
// output
  1 0 [ 1, 2, 3 ]
  2 1 [ 1, 2, 3 ]
  3 2 [ 1, 2, 3 ]

forEach方法还可以传入第二个参数,这个参数是可选的。如果给forEach传递了第二个参数,callback函数里的this将指向这个参数。

注意:如果是箭头函数形式,那么第二个参数改变指向这种操作是无效的,因为箭头函数没有自己的this,它的this是继承而来。

4. map()方法

map方法的作用就是将原数组按照一定的规则映射成一个新的数组。再将其返回,是返回一个新的数组,而不是将原数组直接改变。使用方法和参数都跟forEach相似。

        var arr1 = [1, 2, 3];
        var newArr = arr1.map(function (element) {
            return element * 2; // 需要有return
        });
        console.log(newArr); //[1, 4, 9]

5. some()方法

只要数组中的某个值,符合你给定的判断条件就返回true;否则,返回false。

        let arr1 = [1, 2, 3].some(item => item >= 4)
        let arr2 = [1, 2, 3].some(item => item <= 4)
        console.log(arr1);// false
        console.log(arr2);// true

15. 归并方法

1. reduce()方法

reduce()方法从数组第一项开始遍历到最后一项

2. reduceRight()方法

reduceRight()从最后一项开始遍历至第一项

这两个方法都接收两个参数:对每一项都会运行的归并函数,以及可选的以之为归并起点的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数:上一个归并值当前项当前项的索引数组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入可选的第二个参数(作为归并起点值),则第一次迭代将从数组的第二项开始,因此传给归并函数的第一个参数是数组的第一项,第二个参数是数组的第二项。

使用 reduce()函数执行累加数组中所有数值的操作

        let arr1 = [1, 2, 3, 4, 5]
        let sum = arr1.reduce((prev, item, index, array) => {
            return prev + item
        })
        console.log(sum); //15

究竟是使用 reduce()还是 reduceRight(),只取决于遍历数组元素的方向。除此之外,这两个方法没什么区别。

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值