无锡建设网站,门户系统是什么意思,网站关键词下降,首页4399游戏大全文章导读#xff1a;AI 辅助学习前端#xff0c;包含入门、进阶、高级部分前端系列内容#xff0c;当前是 JavaScript 的部分#xff0c;瑶琴会持续更新#xff0c;适合零基础的朋友#xff0c;已有前端工作经验的可以不看#xff0c;也可以当作基础知识回顾。
这篇文章…文章导读AI 辅助学习前端包含入门、进阶、高级部分前端系列内容当前是 JavaScript 的部分瑶琴会持续更新适合零基础的朋友已有前端工作经验的可以不看也可以当作基础知识回顾。
这篇文章瑶琴带大家学习 js 中最常用的一个内置对象Array。数组在编程中非常常见它提供了一种方便的方式来组织和操作数据集合。
1.定义
Array 是JavaScript中的一种基本数据类型用于存储有序的元素集合。数组可以包含任意类型的数据包括数字、字符串、对象甚至是其他数组即多维数组。
使用场景
1.存储集合存储一系列相关的数据。
2.索引访问通过索引快速访问数组中的元素。
3.迭代处理对数组中的每个元素执行相同的操作。 4.数据操作添加、删除、排序和搜索数组元素。
基本操作
1.创建数组
let fruits [Apple, Banana, Orange];
2.访问元素
let firstFruit fruits[0]; // Apple3.修改元素
fruits[1] Pineapple; // 修改第二个元素4.添加元素
fruits.push(Grape); // 在数组末尾添加元素
5.删除元素
fruits.shift(); // 删除第一个元素
fruits.pop(); // 删除最后一个元素
常用方法 .push()在数组末尾添加一个或多个元素并返回新的长度。
.pop()删除数组的最后一个元素并返回被删除的元素。
.shift()删除数组的第一个元素并返回被删除的元素。
.unshift()在数组开头添加一个或多个元素并返回新的长度。
.slice()返回数组的一个浅拷贝。
.splice()添加、删除或替换数组中的元素。
.map()创建一个新数组其元素是调用一个提供的函数在每个元素上的返回值。
.filter()创建一个新数组包含通过测试的所有元素。
.reduce()对数组进行累加操作并返回一个累加值。
2.示例
1.使用 .map() 转换数组元素
let numbers [1, 2, 3, 4, 5];
let squaredNumbers numbers.map(number number * number);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
2.使用 .filter() 筛选数组元素
let users [
{ name: Alice, age: 21 },
{ name: Bob, age: 25 },
{ name: Carol, age: 18 }
];
let adults users.filter(user user.age 18);
console.log(adults); // 包含所有年龄大于或等于18的用户
3.使用 .reduce() 计算数组元素总和
let sum numbers.reduce((total, num) total num, 0);
console.log(sum); // 15注意事项
数组索引是从 0 开始的。
数组长度是可变的可以使用 .length 属性。
数组方法如 .push(), .pop(), .shift(), .unshift() 会改变原数组的长度。 4. .concat() - 连接两个或多个数组并返回一个新数组不改变原始数组。
let array1 [1, 2, 3]; let array2 [4, 5, 6];
let concatenatedArray array1.concat(array2); // concatenatedArray [1, 2, 3, 4, 5, 6]
5. .includes(searchElement[, fromIndex]) - 检查数组是否包含特定的元素并返回一个布尔值。
let numbers [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false
6. .indexOf(searchElement[, fromIndex]) - 返回数组中元素第一次出现的索引如果未找到则返回 -1。
let colors [red, green, blue];
console.log(colors.indexOf(green)); // 1
7. .lastIndexOf(searchElement[, fromIndex]) - 返回数组中元素最后一次出现的索引如果未找到则返回 -1。
let fruits [apple, banana, apple];
console.log(fruits.lastIndexOf(apple)); // 2
8. .join([separator]) - 将数组中的所有元素连接成一个字符串并可选地指定一个分隔符。
let parts [shoulders, knees];
let song parts.join(, ); // song shoulders, knees9. .reverse() - 将数组中的元素顺序颠倒并直接修改原始数组。
let letters [a, b, c, d];
letters.reverse(); // letters [d, c, b, a]10. .some([predicate]) - 检查数组中是否有至少一个元素满足提供的测试函数。
let ages [20, 30, 18, 22];
console.log(ages.some(function(age) { return age 18;
})); // true
11. .every([predicate]) - 检查数组中是否所有元素都满足提供的测试函数。
let ages [20, 30, 18, 22];
console.log(ages.every(function(age) { return age 18;
})); // false
12. .find([predicate]) - 返回数组中满足提供的测试函数的第一个元素。
let users [
{ name: Alice, age: 21 },
{ name: Bob, age: 25 },
{ name: Carol, age: 18 }
];
let user users.find(user user.age 20);
console.log(user); // { name: Bob, age: 25 }
13. .findIndex([predicate]) - 返回数组中满足提供的测试函数的第一个元素的索引。
let users [
{ name: Alice, age: 21 },
{ name: Bob, age: 25 },
{ name: Carol, age: 18 }
];
let index users.findIndex(user user.age 25);
console.log(index); // 1
14. .slice([begin[, end]]) - 返回一个数组的浅拷贝从 begin 到 end不包括 end。
let animals [ant, bison, camel, duck, elephant];
let animalsCopy animals.slice(1, 3); // animalsCopy [bison, camel]
15. .splice(start[, deleteCount[, item1[, item2[, ...]]]]) - 通过删除或替换现有元素或添加新元素来修改数组。
let fruits [apple, banana, orange, kiwi];
fruits.splice(2, 1, mango, lemon); // fruits [apple, banana, mango, lemon, kiwi]
16. .sort([compareFunction]) - 对数组元素进行排序并直接修改原始数组。
let numbers [4, 2, 5, 1, 3];
numbers.sort((a, b) a - b); // 升序排序 // numbers [1, 2, 3, 4, 5]
数组是JavaScript中处理数据集合的强大工具它们不仅可以用来存储数据还可以通过各种方法进行数据的转换和分析。
这些方法覆盖了数组的创建、访问、修改、删除、排序、搜索和迭代等基本操作。掌握这些方法对于日常的前端开发工作非常重要在处理DOM元素集合、用户输入、处理服务器响应数据等方面都很有用。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师加油。
最后啰嗦一句好记性不如烂笔头希望大家在学习的过程中养成做笔记的习惯形成自己的知识体系。
