一、数组的基本概念数组可以理解成一个箱子用来存放一组数据。一维数组就是一个箱子或多个箱子。二维数组就是一个箱子里面套了一个箱子。以此类推多维数组就是箱子层层嵌套。例如创建一个一维数组var arr [1, 2, 3, 4, 5]; console.log(arr); // 输出 [1, 2, 3, 4, 5]创建一个二维数组var matrix [ [1, 2], [3, 4], [5, 6] ]; console.log(matrix[0][1]); // 输出 2二、数组的遍历遍历数组可以使用 for 循环或 while 循环。使用 for 循环遍历var username [张三, 李四, 王五]; for (var i 0; i username.length; i) { console.log(username[i]); }使用 for...in 遍历遍历下标for (var index in username) { console.log(index : username[index]); }使用 for...of 遍历遍历元素for (var name of username) { console.log(name); }使用 while 循环遍历var i 0; while (i username.length) { console.log(username[i]); i; }三、数组的静态方法Array.isArray() 用于判断一个对象是否为数组返回布尔值。var arr [1, 2, 3]; console.log(Array.isArray(arr)); // 输出 true console.log(Array.isArray(hello)); // 输出 false四、数组的增删方法push、pop、unshift、shift数组太长的情况下使用这些方法可以方便地在头部或尾部增删元素。push() 在数组末尾加入一个或多个元素返回数组的新长度后加。var arr [1, 2, 3]; var len arr.push(4, 5); console.log(arr); // 输出 [1, 2, 3, 4, 5] console.log(len); // 输出 5pop() 删除数组最后一个元素返回被删除的元素后删。var arr [1, 2, 3]; var last arr.pop(); console.log(arr); // 输出 [1, 2] console.log(last); // 输出 3unshift() 在数组开头加入一个或多个元素返回数组的新长度前加。var arr [1, 2, 3]; var len arr.unshift(a, b); console.log(arr); // 输出 [a, b, 1, 2, 3] console.log(len); // 输出 5shift() 删除数组第一个元素返回被删除的元素前删。var arr [1, 2, 3]; var first arr.shift(); console.log(arr); // 输出 [2, 3] console.log(first); // 输出 1五、数组的常用方法concat() 用于合并多个数组返回一个新数组原数组不变。var arr1 [1, 2]; var arr2 [3, 4]; var arr3 arr1.concat(arr2); console.log(arr3); // 输出 [1, 2, 3, 4]reverse() 颠倒数组元素的顺序会改变原数组。var arr [1, 2, 3, 4]; arr.reverse(); console.log(arr); // 输出 [4, 3, 2, 1]indexOf() 查找元素在数组中的下标存在则返回下标不存在则返回 -1。var arr [a, b, c, d]; console.log(arr.indexOf(c)); // 输出 2 console.log(arr.indexOf(x)); // 输出 -1indexOf() 还可以指定起始查找位置从第二个元素后面开始查找。var arr [a, b, c, b]; console.log(arr.indexOf(b, 2)); // 从下标 2 开始找输出 3split() 用于把字符串按指定分隔符拆分成数组。var str apple,banana,orange; var arr str.split(,); console.log(arr); // 输出 [apple, banana, orange]六、补充其他常用方法join() 把数组元素用指定分隔符合并成字符串与 split() 相反。var arr [apple, banana, orange]; var str arr.join(-); console.log(str); // 输出 apple-banana-orangeslice() 截取数组的一部分返回新数组不改变原数组。var arr [1, 2, 3, 4, 5]; var sub arr.slice(1, 3); console.log(sub); // 输出 [2, 3]splice() 可以删除、替换或插入元素会改变原数组。var arr [1, 2, 3, 4, 5]; arr.splice(1, 2, a, b); // 从下标 1 开始删除 2 个元素再插入 a 和 b console.log(arr); // 输出 [1, a, b, 4, 5]sort() 对数组元素进行排序默认按字符串顺序排序。var arr [3, 1, 4, 2]; arr.sort(); console.log(arr); // 输出 [1, 2, 3, 4]forEach() 遍历数组对每个元素执行一次回调函数是数组遍历中最常用的方法之一。var arr [1, 2, 3]; arr.forEach(function (item) { console.log(item * 2); // 输出 2、4、6 });七、forEach 的详细讲解forEach() 是数组自带的高阶方法它接收一个回调函数数组中的每个元素都会依次调用一次该回调函数。回调函数可以接收三个参数当前元素、当前下标、原数组本身。var arr [a, b, c]; arr.forEach(function (item, index, array) { console.log(元素 item 下标 index); console.log(原数组 array); }); // 输出 // 元素a下标0 // 原数组a,b,c // 元素b下标1 // 原数组a,b,c // 元素c下标2 // 原数组a,b,cforEach() 也可以使用箭头函数简写代码更简洁。var arr [10, 20, 30]; arr.forEach(item console.log(item 1)); // 输出 11、21、31forEach() 不会改变原数组也不会返回新数组它只负责对每个元素执行操作。如果需要在遍历后得到一个新数组应该使用 map()。var arr [1, 2, 3]; var doubled arr.map(function (item) { return item * 2; }); console.log(doubled); // 输出 [2, 4, 6] console.log(arr); // 原数组不变输出 [1, 2, 3]forEach() 的应用场景非常广泛例如累加求和、统计符合条件的元素个数、批量修改对象属性等。// 场景一累加求和 var scores [80, 90, 75, 95]; var total 0; scores.forEach(function (score) { total score; }); console.log(total); // 输出 340 // 场景二统计大于 85 分的人数 var count 0; scores.forEach(function (score) { if (score 85) { count; } }); console.log(count); // 输出 2 // 场景三批量修改对象属性 var users [ { name: 张三, age: 18 }, { name: 李四, age: 20 } ]; users.forEach(function (user) { user.age 1; // 每个人年龄加 1 }); console.log(users[0].age); // 输出 19 console.log(users[1].age); // 输出 21forEach() 的特殊点在于它不能使用 break 或 return 提前终止循环一旦开始就会遍历完所有元素。如果需要在满足某个条件时提前退出应该使用 for 循环或 some()、every() 等方法。// forEach 无法提前终止 var arr [1, 2, 3, 4, 5]; arr.forEach(function (item) { if (item 3) { return; // 这里只是跳过当前回调并不会终止循环 } console.log(item); // 输出 1、2、4、5 }); // 需要提前终止时使用 for 循环 for (var i 0; i arr.length; i) { if (arr[i] 3) { break; // 遇到 3 就终止循环 } console.log(arr[i]); // 输出 1、2 }什么时候用 forEach() 更好当你只需要对每个元素执行一次操作、不需要提前终止、也不需要返回新数组时forEach() 是最简洁直观的选择。例如打印日志、累加统计、修改对象属性等场景。而需要提前退出、需要跳过某些元素、或需要根据条件控制循环流程时使用 for 循环更合适。
js数组相关
一、数组的基本概念数组可以理解成一个箱子用来存放一组数据。一维数组就是一个箱子或多个箱子。二维数组就是一个箱子里面套了一个箱子。以此类推多维数组就是箱子层层嵌套。例如创建一个一维数组var arr [1, 2, 3, 4, 5]; console.log(arr); // 输出 [1, 2, 3, 4, 5]创建一个二维数组var matrix [ [1, 2], [3, 4], [5, 6] ]; console.log(matrix[0][1]); // 输出 2二、数组的遍历遍历数组可以使用 for 循环或 while 循环。使用 for 循环遍历var username [张三, 李四, 王五]; for (var i 0; i username.length; i) { console.log(username[i]); }使用 for...in 遍历遍历下标for (var index in username) { console.log(index : username[index]); }使用 for...of 遍历遍历元素for (var name of username) { console.log(name); }使用 while 循环遍历var i 0; while (i username.length) { console.log(username[i]); i; }三、数组的静态方法Array.isArray() 用于判断一个对象是否为数组返回布尔值。var arr [1, 2, 3]; console.log(Array.isArray(arr)); // 输出 true console.log(Array.isArray(hello)); // 输出 false四、数组的增删方法push、pop、unshift、shift数组太长的情况下使用这些方法可以方便地在头部或尾部增删元素。push() 在数组末尾加入一个或多个元素返回数组的新长度后加。var arr [1, 2, 3]; var len arr.push(4, 5); console.log(arr); // 输出 [1, 2, 3, 4, 5] console.log(len); // 输出 5pop() 删除数组最后一个元素返回被删除的元素后删。var arr [1, 2, 3]; var last arr.pop(); console.log(arr); // 输出 [1, 2] console.log(last); // 输出 3unshift() 在数组开头加入一个或多个元素返回数组的新长度前加。var arr [1, 2, 3]; var len arr.unshift(a, b); console.log(arr); // 输出 [a, b, 1, 2, 3] console.log(len); // 输出 5shift() 删除数组第一个元素返回被删除的元素前删。var arr [1, 2, 3]; var first arr.shift(); console.log(arr); // 输出 [2, 3] console.log(first); // 输出 1五、数组的常用方法concat() 用于合并多个数组返回一个新数组原数组不变。var arr1 [1, 2]; var arr2 [3, 4]; var arr3 arr1.concat(arr2); console.log(arr3); // 输出 [1, 2, 3, 4]reverse() 颠倒数组元素的顺序会改变原数组。var arr [1, 2, 3, 4]; arr.reverse(); console.log(arr); // 输出 [4, 3, 2, 1]indexOf() 查找元素在数组中的下标存在则返回下标不存在则返回 -1。var arr [a, b, c, d]; console.log(arr.indexOf(c)); // 输出 2 console.log(arr.indexOf(x)); // 输出 -1indexOf() 还可以指定起始查找位置从第二个元素后面开始查找。var arr [a, b, c, b]; console.log(arr.indexOf(b, 2)); // 从下标 2 开始找输出 3split() 用于把字符串按指定分隔符拆分成数组。var str apple,banana,orange; var arr str.split(,); console.log(arr); // 输出 [apple, banana, orange]六、补充其他常用方法join() 把数组元素用指定分隔符合并成字符串与 split() 相反。var arr [apple, banana, orange]; var str arr.join(-); console.log(str); // 输出 apple-banana-orangeslice() 截取数组的一部分返回新数组不改变原数组。var arr [1, 2, 3, 4, 5]; var sub arr.slice(1, 3); console.log(sub); // 输出 [2, 3]splice() 可以删除、替换或插入元素会改变原数组。var arr [1, 2, 3, 4, 5]; arr.splice(1, 2, a, b); // 从下标 1 开始删除 2 个元素再插入 a 和 b console.log(arr); // 输出 [1, a, b, 4, 5]sort() 对数组元素进行排序默认按字符串顺序排序。var arr [3, 1, 4, 2]; arr.sort(); console.log(arr); // 输出 [1, 2, 3, 4]forEach() 遍历数组对每个元素执行一次回调函数是数组遍历中最常用的方法之一。var arr [1, 2, 3]; arr.forEach(function (item) { console.log(item * 2); // 输出 2、4、6 });七、forEach 的详细讲解forEach() 是数组自带的高阶方法它接收一个回调函数数组中的每个元素都会依次调用一次该回调函数。回调函数可以接收三个参数当前元素、当前下标、原数组本身。var arr [a, b, c]; arr.forEach(function (item, index, array) { console.log(元素 item 下标 index); console.log(原数组 array); }); // 输出 // 元素a下标0 // 原数组a,b,c // 元素b下标1 // 原数组a,b,c // 元素c下标2 // 原数组a,b,cforEach() 也可以使用箭头函数简写代码更简洁。var arr [10, 20, 30]; arr.forEach(item console.log(item 1)); // 输出 11、21、31forEach() 不会改变原数组也不会返回新数组它只负责对每个元素执行操作。如果需要在遍历后得到一个新数组应该使用 map()。var arr [1, 2, 3]; var doubled arr.map(function (item) { return item * 2; }); console.log(doubled); // 输出 [2, 4, 6] console.log(arr); // 原数组不变输出 [1, 2, 3]forEach() 的应用场景非常广泛例如累加求和、统计符合条件的元素个数、批量修改对象属性等。// 场景一累加求和 var scores [80, 90, 75, 95]; var total 0; scores.forEach(function (score) { total score; }); console.log(total); // 输出 340 // 场景二统计大于 85 分的人数 var count 0; scores.forEach(function (score) { if (score 85) { count; } }); console.log(count); // 输出 2 // 场景三批量修改对象属性 var users [ { name: 张三, age: 18 }, { name: 李四, age: 20 } ]; users.forEach(function (user) { user.age 1; // 每个人年龄加 1 }); console.log(users[0].age); // 输出 19 console.log(users[1].age); // 输出 21forEach() 的特殊点在于它不能使用 break 或 return 提前终止循环一旦开始就会遍历完所有元素。如果需要在满足某个条件时提前退出应该使用 for 循环或 some()、every() 等方法。// forEach 无法提前终止 var arr [1, 2, 3, 4, 5]; arr.forEach(function (item) { if (item 3) { return; // 这里只是跳过当前回调并不会终止循环 } console.log(item); // 输出 1、2、4、5 }); // 需要提前终止时使用 for 循环 for (var i 0; i arr.length; i) { if (arr[i] 3) { break; // 遇到 3 就终止循环 } console.log(arr[i]); // 输出 1、2 }什么时候用 forEach() 更好当你只需要对每个元素执行一次操作、不需要提前终止、也不需要返回新数组时forEach() 是最简洁直观的选择。例如打印日志、累加统计、修改对象属性等场景。而需要提前退出、需要跳过某些元素、或需要根据条件控制循环流程时使用 for 循环更合适。