JavaScript学习笔记——数组循环详解

for循环遍历

            var arr = ["vue","js","jq"];
            for(var i = 0;i<arr.length;i++){
                console.log(arr[i]);  // arr[i]代表的是数组中的每一个元素i
            }
            console.log(arr);

forEach()方法

• forEach() 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。
  所以如果需要兼容IE8，则不要使用forEach，改为使用for循环来遍历即可

• forEach()方法需要一个函数作为参数
  这种函数，是由我们创建但是不由我们调用的，我们称为回调函数

• 数组中有几个元素，该回调函数就会执行几次。执行完毕后，浏览器会将遍历到的元素

• 回调函数中传递三个参数：
  第一个参数，就是当前正在遍历的元素
  第二个参数，就是当前正在遍历的元素的索引
  第三个参数，就是正在遍历的数组

注意：
forEach() 的返回值是 undefined。也就是说，它没有返回值

			var arr = ["vue", "js", "jq"];
			arr.forEach(function (item, index, obj) {
				console.log("item:" + item);
				console.log("index:" + index);
				console.log("obj:" + obj);
				console.log("----------");
			});

map()方法

对数组中每一项运行回调函数，返回该函数的结果，组成的新数组
（返回的是加工之后的新数组）

举例1：（拷贝的过程中改变数组元素的值）

有一个已知的数组arr1，我要求让arr1中的每个元素的值都加10，这里就可以用到 map 方法

			var arr1 = [1, 3, 6, 2, 5, 6];
			var arr2 = arr1.map(function (item, index) {
				return item + 10; //让arr1中的每个元素加10
			});
			console.log(arr2);

举例2：【重要案例】

将A数组中某个属性的值，存储到B数组中

			const arr1 = [
				{ name: "vue", age: "28" },
				{ name: "js", age: "32" },
			];
			const arr2 = arr1.map((item) => item.name);
			 // 将数组 arr1 中的 name 属性，存储到数组 arr2 中
			console.log(arr1);
			console.log("arr2:" + JSON.stringify(arr2));

filter()方法

对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）

**举例1：**找出数组 arr1 中大于4的元素，返回一个新的数组

			var arr1 = [1, 3, 6, 2, 5, 6];
			var arr2 = arr1.filter(function (item, index) {
				return item > 4; //将arr1中大于4的元素返回，组成新的数组
			});
			console.log(JSON.stringify(arr2));

**举例2：**获取数组A中指定类型的对象，放到数组B中

    const arr1 = [
        { name: '许嵩', type: '一线' },
        { name: '周杰伦', type: '过气' },
        { name: '邓紫棋', type: '一线' },
    ];
​
    const arr2 = arr1.filter(item => item.type == '一线'); // 筛选出一线歌手
​
    console.log(JSON.stringify(arr2));

every()方法

对数组中每一项运行回调函数，如果都返回true，every就返回true；如果有一项返回false，则停止遍历，此方法返回false

注意：every()方法的返回值是boolean值，参数是回调函数

			var arr1 = ["1", "23", "456", "25"];
			var bool1 = arr1.every(function (item, index, array) {
				if (item.length > 2) {
					return false;
				}
				return true;
			});
			console.log(bool1);
             //输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false
			var arr2 = ["32", "43", "67", "89"];
			var bool2 = arr2.every(function (item, index, array) {
				if (item.length > 2) {
					return false;
				}
				return true;
			});
			console.log(bool2); 
            //输出结果：true。因为每个元素的长度都是两个字符。

some()方法

对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true

注意：some()方法的返回值是boolean值

reduce()方法

为数组中的每一个元素，依次执行回调函数

    arr.reduce(
        function(previousValue, item, index, arr) {
​
    }, initialValue)

• previousValue：上一次调用回调函数时的返回值，或者初始值
• item：当前正在处理的数组元素
• index：当前正在处理的数组元素下标
• arr：调用reduce()方法的数组
• initialValue：可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）

举例1： 计算数组中所有元素项的总和

			var arr = [2, 0, 1, 9, 6];
			sumValue = arr.reduce(function (total, item) {
				//  计算 arr 数组中，所有元素项的综合
				return total + item;
			}, 0);
			console.log("sumValue:" + sumValue); // 打印结果：18