马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
我们有一系列关于数组的方法，包括静态方法Array.isArray和实例方法push, pop, shift, unshift, join, concat, reverse, indexOf。下面将分别解释这些方法，并给出示例。 Array.isArray() 静态方法
push() 方法 pop() 方法 从数组中删除最后一个元素，并返回该元素的值。 语法：arr.pop()
shift() 方法 从数组中删除第一个元素，并返回该元素的值。 语法：arr.shift()
unshift() 方法 join() 方法 concat() 方法 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
reverse() 方法 indexOf() 方法
数组方法详解1. Array.isArray() - 静态方法判断值是否为数组 javascript
// 基本用法console.log(Array.isArray([)); // trueconsole.log(Array.isArray({})); // falseconsole.log(Array.isArray("array")); // falseconsole.log(Array.isArray(new Array())); // true// 与 typeof 对比console.log(typeof [); // "object" - 这不够准确console.log(Array.isArray([)); // true - 更准确// 实际应用function processData(data) { if (Array.isArray(data)) { // 处理数组 data.forEach(item => console.log(item)); } else { // 处理非数组 console.log("数据不是数组"); }}
2. push() 和 pop() - 栈操作push(): 数组末尾添加元素 pop(): 数组末尾移除元素
javascript
// push() - 在末尾添加元素，返回新长度let fruits = ["apple", "banana";let newLength = fruits.push("orange", "mango");console.log(fruits); // ["apple", "banana", "orange", "mango"]console.log(newLength); // 4// pop() - 移除最后一个元素，返回该元素let lastFruit = fruits.pop();console.log(lastFruit); // "mango"console.log(fruits); // ["apple", "banana", "orange"]// 栈的应用 - 括号匹配function checkBrackets(str) { let stack = [; let pairs = { ')': '(', ']': '[', '}': '{' }; for (let char of str) { if (['(', '[', '{'.includes(char)) { stack.push(char); } else if ([')', ']', '}'.includes(char)) { if (stack.pop() !== pairs[char) { return false; } } } return stack.length === 0;}console.log(checkBrackets("({[]})")); // true
3. shift() 和 unshift() - 队列操作shift(): 数组开头移除元素 unshift(): 数组开头添加元素
javascript
// shift() - 移除第一个元素，返回该元素let queue = ["张三", "李四", "王五";let firstPerson = queue.shift();console.log(firstPerson); // "张三"console.log(queue); // ["李四", "王五"]// unshift() - 在开头添加元素，返回新长度let newLength2 = queue.unshift("赵六", "钱七");console.log(queue); // ["赵六", "钱七", "李四", "王五"]console.log(newLength2); // 4// 队列模拟let taskQueue = [;taskQueue.push("任务1"); // 入队taskQueue.push("任务2");taskQueue.push("任务3");let currentTask = taskQueue.shift(); // 出队console.log("执行:", currentTask); // "执行: 任务1"
4. join() - 数组转字符串将数组元素连接成字符串 javascript
// 基本用法let arr = ["a", "b", "c";console.log(arr.join()); // "a,b,c" - 默认逗号分隔console.log(arr.join("")); // "abc" - 无分隔符console.log(arr.join("-")); // "a-b-c"console.log(arr.join(" | ")); // "a | b | c"// 实用例子let dateParts = [2023, 12, 15;console.log(dateParts.join("-")); // "2023-12-15"let words = ["Hello", "world", "!";console.log(words.join(" ")); // "Hello world !"// URL路径拼接let pathParts = ["api", "users", "123";let url = "https://example.com/" + pathParts.join("/");console.log(url); // "https://example.com/api/users/123"
5. concat() - 数组合并合并数组，不改变原数组 javascript
// 基本用法let arr1 = [1, 2;let arr2 = [3, 4;let arr3 = [5, 6;let result1 = arr1.concat(arr2);console.log(result1); // [1, 2, 3, 4]console.log(arr1); // [1, 2] - 原数组不变let result2 = arr1.concat(arr2, arr3);console.log(result2); // [1, 2, 3, 4, 5, 6]// 合并值和数组let result3 = arr1.concat(7, arr2, 8);console.log(result3); // [1, 2, 7, 3, 4, 8]// 浅拷贝数组let original = [{id: 1}, {id: 2};let copy = original.concat();copy[0.id = 99; // 修改引用类型会影响原数组console.log(original[0.id); // 99// 深度拷贝解决方案let deepCopy = original.map(obj => ({...obj}));
6. reverse() - 数组反转反转数组顺序，会改变原数组 javascript
// 基本用法let numbers = [1, 2, 3, 4, 5;numbers.reverse();console.log(numbers); // [5, 4, 3, 2, 1]// 字符串反转let str = "hello";let reversedStr = str.split("").reverse().join("");console.log(reversedStr); // "olleh"// 创建不改变原数组的反转function reverseArray(arr) { return arr.concat().reverse();}let arr = [1, 2, 3;let reversed = reverseArray(arr);console.log(arr); // [1, 2, 3] - 原数组不变console.log(reversed); // [3, 2, 1]
7. indexOf() - 查找元素位置查找元素首次出现的索引 javascript
// 基本用法let fruits = ["apple", "banana", "orange", "banana", "mango";console.log(fruits.indexOf("banana")); // 1console.log(fruits.indexOf("grape")); // -1 (不存在)console.log(fruits.indexOf("banana", 2)); // 3 (从索引2开始查找)// 查找所有匹配的索引function findAllIndexes(arr, value) { let indexes = [; let index = arr.indexOf(value); while (index !== -1) { indexes.push(index); index = arr.indexOf(value, index + 1); } return indexes;}console.log(findAllIndexes(fruits, "banana")); // [1, 3]// 检查元素是否存在let exists = fruits.indexOf("orange") !== -1;console.log(exists); // true// ES6+ 替代方法：includes() 和 findIndex()console.log(fruits.includes("apple")); // trueconsole.log(fruits.findIndex(fruit => fruit.startsWith("m"))); // 4
综合应用示例javascript
// 购物车管理class ShoppingCart { constructor() { this.items = [; } addItem(item) { this.items.push(item); console.log(`添加了: ${item}`); } removeLastItem() { let removed = this.items.pop(); console.log(`移除了: ${removed}`); return removed; } removeFirstItem() { let removed = this.items.shift(); console.log(`移除了: ${removed}`); return removed; } addPriorityItem(item) { this.items.unshift(item); console.log(`优先添加: ${item}`); } getCartSummary() { return this.items.join(", "); } reverseOrder() { this.items.reverse(); console.log("购物车顺序已反转"); } findItemIndex(item) { let index = this.items.indexOf(item); return index !== -1 ? index : "未找到"; } combineCart(otherCart) { this.items = this.items.concat(otherCart.items); console.log("购物车已合并"); }}// 使用示例let cart = new ShoppingCart();cart.addItem("牛奶");cart.addItem("面包");cart.addItem("鸡蛋");console.log(cart.getCartSummary()); // "牛奶, 面包, 鸡蛋"cart.addPriorityItem("水果");console.log(cart.getCartSummary()); // "水果, 牛奶, 面包, 鸡蛋"console.log(cart.findItemIndex("面包")); // 2console.log(cart.findItemIndex("巧克力")); // "未找到"
方法对比总结
方法 作用 是否改变原数组 返回值
push()末尾添加元素✅ 是新长度
pop()末尾移除元素✅ 是移除的元素
unshift()开头添加元素✅ 是新长度
shift()开头移除元素✅ 是移除的元素
concat()合并数组❌ 否新数组
reverse()反转数组✅ 是原数组（已反转）
join()数组转字符串❌ 否字符串
indexOf()查找元素索引❌ 否索引/-1
注意事项push/pop 操作比 unshift/shift 更快，因为前者不影响其他元素的索引 concat() 创建新数组，适合需要保持原数组不变的场景 reverse() 会修改原数组，需要时可以先创建副本 indexOf() 使用严格相等（===）进行比较
|
