数组是 JavaScript 开发中最核心的数据结构之一灵活运用数组方法能让代码更简洁高效。本文将结合一段实战代码逐一讲解 12 个常用 Array 方法的用法、特性及注意事项并通过表格汇总帮助你快速掌握。一、代码实战与方法解析先看这段包含 12 个数组方法的代码我们逐行解析每个方法的作用// Array对象 var array1 [a, s, d, f]; // 1. push()末尾添加元素 array1.push(ggx, ggx1); // 2. unshift()开头添加元素 array1.unshift(ggx0); // 3. pop()删除末尾元素 array1.pop(); // 4. shift()删除开头元素 array1.shift(); console.log(array1); // 输出[a, s, d, f, ggx] // 5. reverse()反转数组 var array2 array1.reverse(); console.log(array2); // 输出[ggx, f, d, s, a] // 6. sort()数组排序 var arr [1, 3, 2, 4, 6, 5]; console.log(arr.sort()); // 输出[1, 2, 3, 4, 5, 6] // 7. indexOf()查找元素首次出现的索引 var index array1.indexOf(a); console.log(index); // 输出4 // 8. lastIndexOf()查找元素末次出现的索引 var index1 array1.lastIndexOf(s); console.log(index1); // 输出3 // 9. forEach()遍历数组 var person { name: ggxxxx, age: 18 } array1.forEach(function (value, index) { console.log(value); // 输出数组元素 console.log(index); // 输出元素索引 console.log(this.name); // 输出ggxxxxthis指向person }, person) // 10. splice()增删改数组 array2.splice(0, 2, CFK, FUCK, CXK); console.log(array2); // 输出[CFK, FUCK, CXK, d, s, a] // 11. concat()连接数组 console.log(arr.concat(array2)); // 输出[1,2,3,4,5,6,CFK,FUCK,CXK,d,s,a] // 12. slice()截取数组 var array3 array2.slice(0, 3); console.log(array3); // 输出[CFK, FUCK, CXK]二、12 个数组方法详细讲解1. push ()向数组末尾添加元素作用向数组末尾添加一个或多个元素返回新数组的长度。语法array.push(item1, item2,..., itemX)参数要添加的元素可多个。返回值新数组的长度。是否改变原数组是。示例var arr [a, b]; arr.push(c, d); // 返回 4arr 变为 [a, b, c, d]2. unshift ()向数组开头添加元素作用向数组开头添加一个或多个元素返回新数组的长度。语法array.unshift(item1, item2,..., itemX)参数要添加的元素可多个。返回值新数组的长度。是否改变原数组是。示例var arr [a, b]; arr.unshift(x, y); // 返回 4arr 变为 [x, y, a, b]3. pop ()删除数组末尾元素作用删除数组最后一个元素返回被删除的元素。语法array.pop()参数无。返回值被删除的元素。是否改变原数组是。示例var arr [a, b, c]; arr.pop(); // 返回 carr 变为 [a, b]4. shift ()删除数组开头元素作用删除数组第一个元素返回被删除的元素。语法array.shift()参数无。返回值被删除的元素。是否改变原数组是。示例var arr [a, b, c]; arr.shift(); // 返回 aarr 变为 [b, c]5. reverse ()反转数组顺序作用反转数组中元素的顺序返回反转后的数组。语法array.reverse()参数无。返回值反转后的数组原数组也会改变。是否改变原数组是。示例var arr [1, 2, 3]; arr.reverse(); // 返回 [3, 2, 1]arr 也变为 [3, 2, 1]6. sort ()数组排序作用对数组元素进行排序默认按字符串 Unicode 码点排序返回排序后的数组。语法array.sort(compareFunction)参数compareFunction可选自定义排序函数若不传则按 Unicode 码点排序。返回值排序后的数组原数组也会改变。是否改变原数组是。注意数字排序需传比较函数否则会按字符串排序如[10, 2]会变成[10, 2]因为10 2。示例// 默认排序字符串 var arr1 [10, 2, 5]; arr1.sort(); // 返回 [10, 2, 5] // 数字升序排序 var arr2 [10, 2, 5]; arr2.sort((a, b) a - b); // 返回 [2, 5, 10] // 数字降序排序 var arr3 [10, 2, 5]; arr3.sort((a, b) b - a); // 返回 [10, 5, 2]7. indexOf ()查找元素首次出现的索引作用查找元素在数组中第一次出现的索引若不存在则返回-1。语法array.indexOf(item, start)参数item要查找的元素。start可选开始查找的索引默认从 0 开始。返回值元素首次出现的索引不存在则返回-1。是否改变原数组否。示例var arr [a, b, c, a]; arr.indexOf(a); // 返回 0 arr.indexOf(a, 1); // 从索引 1 开始找返回 3 arr.indexOf(x); // 返回 -18. lastIndexOf ()查找元素末次出现的索引作用查找元素在数组中最后一次出现的索引若不存在则返回-1。语法array.lastIndexOf(item, start)参数item要查找的元素。start可选开始查找的索引默认从数组末尾开始。返回值元素末次出现的索引不存在则返回-1。是否改变原数组否。示例var arr [a, b, c, a]; arr.lastIndexOf(a); // 返回 3 arr.lastIndexOf(a, 2); // 从索引 2 往前找返回 09. forEach ()遍历数组作用对数组的每个元素执行一次回调函数无返回值。语法array.forEach(function(value, index, array), thisValue)参数回调函数value当前元素。index可选当前元素的索引。array可选原数组。thisValue可选回调函数中this的指向。返回值无。是否改变原数组否但回调函数可修改原数组。示例var arr [a, b, c]; var obj { name: test }; arr.forEach(function (value, index) { console.log(value, index); // 输出a 0, b 1, c 2 console.log(this.name); // 输出testthis指向obj }, obj);10. splice ()增删改数组万能方法作用向数组中添加、删除或替换元素返回被删除元素组成的数组。语法array.splice(start, deleteCount, item1, item2,..., itemX)参数start开始操作的索引必填。deleteCount要删除的元素数量必填0 表示不删除。item1...要添加的元素可选。返回值被删除元素组成的数组若未删除则返回空数组。是否改变原数组是。示例var arr [a, b, c, d]; // 1. 删除从索引 1 开始删除 2 个 arr.splice(1, 2); // 返回 [b, c]arr 变为 [a, d] // 2. 添加从索引 1 开始删除 0 个添加 x, y arr.splice(1, 0, x, y); // 返回 []arr 变为 [a, x, y, d] // 3. 替换从索引 1 开始删除 2 个添加 m, n arr.splice(1, 2, m, n); // 返回 [x, y]arr 变为 [a, m, n, d]11. concat ()连接数组作用连接两个或多个数组返回新数组原数组不变。语法array.concat(array1, array2,..., arrayX)参数要连接的数组可多个。返回值连接后的新数组。是否改变原数组否。示例var arr1 [1, 2]; var arr2 [3, 4]; var arr3 [5, 6]; var newArr arr1.concat(arr2, arr3); // 返回 [1,2,3,4,5,6] // arr1、arr2、arr3 仍保持不变12. slice ()截取数组作用从数组中截取指定范围的元素返回新数组原数组不变。语法array.slice(start, end)参数start开始截取的索引必填包含该索引元素。end可选结束截取的索引不包含该索引元素若不传则截取到数组末尾。返回值截取后的新数组。是否改变原数组否。示例var arr [a, b, c, d, e]; arr.slice(1, 3); // 返回 [b, c]从索引 1 到 3不包含 3 arr.slice(2); // 返回 [c, d, e]从索引 2 到末尾 arr.slice(-3); // 返回 [c, d, e]负数表示从末尾倒数-3 即倒数第 3 个三、方法汇总表格方法名作用语法参数说明返回值是否改变原数组push()末尾添加元素array.push(item1,...)要添加的元素可多个新数组长度是unshift()开头添加元素array.unshift(item1,...)要添加的元素可多个新数组长度是pop()删除末尾元素array.pop()无被删除的元素是shift()删除开头元素array.shift()无被删除的元素是reverse()反转数组顺序array.reverse()无反转后的数组是sort()数组排序array.sort(compareFn)compareFn可选自定义排序函数排序后的数组是indexOf()查找元素首次索引array.indexOf(item, start)item要查找的元素start可选开始索引首次索引无则返回-1否lastIndexOf()查找元素末次索引array.lastIndexOf(item, start)item要查找的元素start可选开始索引末次索引无则返回-1否forEach()遍历数组array.forEach(fn, thisValue)fn回调函数value, index, arraythisValue可选this 指向无否splice()增删改数组万能方法array.splice(start, deleteCount,...)start开始索引deleteCount删除数量item...添加元素被删除元素组成的数组是concat()连接数组array.concat(arr1, arr2,...)要连接的数组可多个连接后的新数组否slice()截取数组array.slice(start, end)start开始索引end可选结束索引截取后的新数组否总结掌握这 12 个常用数组方法是 JavaScript 开发的基础建议通过多练习来巩固增删改优先用push/pop/shift/unshift/splice查用indexOf/lastIndexOf/slice排序用sort注意数字排序需传比较函数遍历用forEach无返回值连接用concat不改变原数组
零基础快速入门前端JavaScript Array 常用方法详解与实战(可用于备赛蓝桥杯Web应用开发)
数组是 JavaScript 开发中最核心的数据结构之一灵活运用数组方法能让代码更简洁高效。本文将结合一段实战代码逐一讲解 12 个常用 Array 方法的用法、特性及注意事项并通过表格汇总帮助你快速掌握。一、代码实战与方法解析先看这段包含 12 个数组方法的代码我们逐行解析每个方法的作用// Array对象 var array1 [a, s, d, f]; // 1. push()末尾添加元素 array1.push(ggx, ggx1); // 2. unshift()开头添加元素 array1.unshift(ggx0); // 3. pop()删除末尾元素 array1.pop(); // 4. shift()删除开头元素 array1.shift(); console.log(array1); // 输出[a, s, d, f, ggx] // 5. reverse()反转数组 var array2 array1.reverse(); console.log(array2); // 输出[ggx, f, d, s, a] // 6. sort()数组排序 var arr [1, 3, 2, 4, 6, 5]; console.log(arr.sort()); // 输出[1, 2, 3, 4, 5, 6] // 7. indexOf()查找元素首次出现的索引 var index array1.indexOf(a); console.log(index); // 输出4 // 8. lastIndexOf()查找元素末次出现的索引 var index1 array1.lastIndexOf(s); console.log(index1); // 输出3 // 9. forEach()遍历数组 var person { name: ggxxxx, age: 18 } array1.forEach(function (value, index) { console.log(value); // 输出数组元素 console.log(index); // 输出元素索引 console.log(this.name); // 输出ggxxxxthis指向person }, person) // 10. splice()增删改数组 array2.splice(0, 2, CFK, FUCK, CXK); console.log(array2); // 输出[CFK, FUCK, CXK, d, s, a] // 11. concat()连接数组 console.log(arr.concat(array2)); // 输出[1,2,3,4,5,6,CFK,FUCK,CXK,d,s,a] // 12. slice()截取数组 var array3 array2.slice(0, 3); console.log(array3); // 输出[CFK, FUCK, CXK]二、12 个数组方法详细讲解1. push ()向数组末尾添加元素作用向数组末尾添加一个或多个元素返回新数组的长度。语法array.push(item1, item2,..., itemX)参数要添加的元素可多个。返回值新数组的长度。是否改变原数组是。示例var arr [a, b]; arr.push(c, d); // 返回 4arr 变为 [a, b, c, d]2. unshift ()向数组开头添加元素作用向数组开头添加一个或多个元素返回新数组的长度。语法array.unshift(item1, item2,..., itemX)参数要添加的元素可多个。返回值新数组的长度。是否改变原数组是。示例var arr [a, b]; arr.unshift(x, y); // 返回 4arr 变为 [x, y, a, b]3. pop ()删除数组末尾元素作用删除数组最后一个元素返回被删除的元素。语法array.pop()参数无。返回值被删除的元素。是否改变原数组是。示例var arr [a, b, c]; arr.pop(); // 返回 carr 变为 [a, b]4. shift ()删除数组开头元素作用删除数组第一个元素返回被删除的元素。语法array.shift()参数无。返回值被删除的元素。是否改变原数组是。示例var arr [a, b, c]; arr.shift(); // 返回 aarr 变为 [b, c]5. reverse ()反转数组顺序作用反转数组中元素的顺序返回反转后的数组。语法array.reverse()参数无。返回值反转后的数组原数组也会改变。是否改变原数组是。示例var arr [1, 2, 3]; arr.reverse(); // 返回 [3, 2, 1]arr 也变为 [3, 2, 1]6. sort ()数组排序作用对数组元素进行排序默认按字符串 Unicode 码点排序返回排序后的数组。语法array.sort(compareFunction)参数compareFunction可选自定义排序函数若不传则按 Unicode 码点排序。返回值排序后的数组原数组也会改变。是否改变原数组是。注意数字排序需传比较函数否则会按字符串排序如[10, 2]会变成[10, 2]因为10 2。示例// 默认排序字符串 var arr1 [10, 2, 5]; arr1.sort(); // 返回 [10, 2, 5] // 数字升序排序 var arr2 [10, 2, 5]; arr2.sort((a, b) a - b); // 返回 [2, 5, 10] // 数字降序排序 var arr3 [10, 2, 5]; arr3.sort((a, b) b - a); // 返回 [10, 5, 2]7. indexOf ()查找元素首次出现的索引作用查找元素在数组中第一次出现的索引若不存在则返回-1。语法array.indexOf(item, start)参数item要查找的元素。start可选开始查找的索引默认从 0 开始。返回值元素首次出现的索引不存在则返回-1。是否改变原数组否。示例var arr [a, b, c, a]; arr.indexOf(a); // 返回 0 arr.indexOf(a, 1); // 从索引 1 开始找返回 3 arr.indexOf(x); // 返回 -18. lastIndexOf ()查找元素末次出现的索引作用查找元素在数组中最后一次出现的索引若不存在则返回-1。语法array.lastIndexOf(item, start)参数item要查找的元素。start可选开始查找的索引默认从数组末尾开始。返回值元素末次出现的索引不存在则返回-1。是否改变原数组否。示例var arr [a, b, c, a]; arr.lastIndexOf(a); // 返回 3 arr.lastIndexOf(a, 2); // 从索引 2 往前找返回 09. forEach ()遍历数组作用对数组的每个元素执行一次回调函数无返回值。语法array.forEach(function(value, index, array), thisValue)参数回调函数value当前元素。index可选当前元素的索引。array可选原数组。thisValue可选回调函数中this的指向。返回值无。是否改变原数组否但回调函数可修改原数组。示例var arr [a, b, c]; var obj { name: test }; arr.forEach(function (value, index) { console.log(value, index); // 输出a 0, b 1, c 2 console.log(this.name); // 输出testthis指向obj }, obj);10. splice ()增删改数组万能方法作用向数组中添加、删除或替换元素返回被删除元素组成的数组。语法array.splice(start, deleteCount, item1, item2,..., itemX)参数start开始操作的索引必填。deleteCount要删除的元素数量必填0 表示不删除。item1...要添加的元素可选。返回值被删除元素组成的数组若未删除则返回空数组。是否改变原数组是。示例var arr [a, b, c, d]; // 1. 删除从索引 1 开始删除 2 个 arr.splice(1, 2); // 返回 [b, c]arr 变为 [a, d] // 2. 添加从索引 1 开始删除 0 个添加 x, y arr.splice(1, 0, x, y); // 返回 []arr 变为 [a, x, y, d] // 3. 替换从索引 1 开始删除 2 个添加 m, n arr.splice(1, 2, m, n); // 返回 [x, y]arr 变为 [a, m, n, d]11. concat ()连接数组作用连接两个或多个数组返回新数组原数组不变。语法array.concat(array1, array2,..., arrayX)参数要连接的数组可多个。返回值连接后的新数组。是否改变原数组否。示例var arr1 [1, 2]; var arr2 [3, 4]; var arr3 [5, 6]; var newArr arr1.concat(arr2, arr3); // 返回 [1,2,3,4,5,6] // arr1、arr2、arr3 仍保持不变12. slice ()截取数组作用从数组中截取指定范围的元素返回新数组原数组不变。语法array.slice(start, end)参数start开始截取的索引必填包含该索引元素。end可选结束截取的索引不包含该索引元素若不传则截取到数组末尾。返回值截取后的新数组。是否改变原数组否。示例var arr [a, b, c, d, e]; arr.slice(1, 3); // 返回 [b, c]从索引 1 到 3不包含 3 arr.slice(2); // 返回 [c, d, e]从索引 2 到末尾 arr.slice(-3); // 返回 [c, d, e]负数表示从末尾倒数-3 即倒数第 3 个三、方法汇总表格方法名作用语法参数说明返回值是否改变原数组push()末尾添加元素array.push(item1,...)要添加的元素可多个新数组长度是unshift()开头添加元素array.unshift(item1,...)要添加的元素可多个新数组长度是pop()删除末尾元素array.pop()无被删除的元素是shift()删除开头元素array.shift()无被删除的元素是reverse()反转数组顺序array.reverse()无反转后的数组是sort()数组排序array.sort(compareFn)compareFn可选自定义排序函数排序后的数组是indexOf()查找元素首次索引array.indexOf(item, start)item要查找的元素start可选开始索引首次索引无则返回-1否lastIndexOf()查找元素末次索引array.lastIndexOf(item, start)item要查找的元素start可选开始索引末次索引无则返回-1否forEach()遍历数组array.forEach(fn, thisValue)fn回调函数value, index, arraythisValue可选this 指向无否splice()增删改数组万能方法array.splice(start, deleteCount,...)start开始索引deleteCount删除数量item...添加元素被删除元素组成的数组是concat()连接数组array.concat(arr1, arr2,...)要连接的数组可多个连接后的新数组否slice()截取数组array.slice(start, end)start开始索引end可选结束索引截取后的新数组否总结掌握这 12 个常用数组方法是 JavaScript 开发的基础建议通过多练习来巩固增删改优先用push/pop/shift/unshift/splice查用indexOf/lastIndexOf/slice排序用sort注意数字排序需传比较函数遍历用forEach无返回值连接用concat不改变原数组
