本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
目录
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、内置对象 Array 详解
Array 是 JavaScript 中最常用的内置对象之一，用于存储有序的元素集合。下面全面介绍 Array 对象的主要特性和方法。
1、创建数组
1. 数组字面量表示法
javascript
let arr1 = []; // 空数组
let arr2 = [1, 2, 3]; // 包含数字的数组
let arr3 = ['a', 'b', 'c']; // 包含字符串的数组
let arr4 = [1, 'two', true, null]; // 混合类型数组2. Array 构造函数
javascript
let arr5 = new Array(); // 空数组
let arr6 = new Array(3); // 创建长度为3的空数组
let arr7 = new Array(1, 2, 3); // 包含元素的数组2、数组属性
length 属性
javascript
let fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.length); // 输出: 3
// 修改length可以截断或扩展数组
fruits.length = 2;
console.log(fruits); // 输出: ['Apple', 'Banana']
fruits.length = 5;
console.log(fruits); // 输出: ['Apple', 'Banana', empty × 3]3、数组方法
1. 修改数组的方法
push() / pop()
javascript
let stack = [];
stack.push('a'); // 添加到末尾
stack.push('b', 'c'); // 可以添加多个元素
console.log(stack); // ['a', 'b', 'c']
let last = stack.pop(); // 移除并返回最后一个元素
console.log(last); // 'c'
console.log(stack); // ['a', 'b']shift() / unshift()
javascript
let queue = ['a', 'b', 'c'];
let first = queue.shift(); // 移除并返回第一个元素
console.log(first); // 'a'
console.log(queue); // ['b', 'c']
queue.unshift('x', 'y'); // 在开头添加元素
console.log(queue); // ['x', 'y', 'b', 'c']splice()
javascript
let arr = ['a', 'b', 'c', 'd', 'e'];
// 从索引2开始删除1个元素，并插入'x', 'y'
arr.splice(2, 1, 'x', 'y');
console.log(arr); // ['a', 'b', 'x', 'y', 'd', 'e']
// 只删除不添加
arr.splice(1, 2); // 从索引1开始删除2个元素
console.log(arr); // ['a', 'y', 'd', 'e']
// 只添加不删除
arr.splice(2, 0, 'z');
console.log(arr); // ['a', 'y', 'z', 'd', 'e']2. 遍历数组的方法
forEach()
javascript
let numbers = [1, 2, 3, 4];
numbers.forEach(function(item, index, array) {
console.log(`索引 ${index}: 值 ${item}`);
});map()
javascript
let numbers = [1, 2, 3];
let doubled = numbers.map(function(item) {
return item * 2;
});
console.log(doubled); // [2, 4, 6]filter()
javascript
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(item) {
return item % 2 === 0;
});
console.log(evens); // [2, 4]reduce() / reduceRight()
javascript
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(accumulator, current) {
return accumulator + current;
}, 0);
console.log(sum); // 103. 搜索和排序方法
find() / findIndex()
javascript
let users = [
{id: 1, name: 'John'},
{id: 2, name: 'Jane'},
{id: 3, name: 'Bob'}
];
let user = users.find(function(item) {
return item.id === 2;
});
console.log(user); // {id: 2, name: 'Jane'}indexOf() / lastIndexOf()
javascript
let arr = ['a', 'b', 'a', 'c', 'a'];
console.log(arr.indexOf('a')); // 0
console.log(arr.lastIndexOf('a')); // 4includes()
javascript
let arr = [1, 2, 3, NaN];
console.log(arr.includes(2)); // true
console.log(arr.includes(NaN)); // true (与indexOf不同)sort()
javascript
let arr = [3, 1, 4, 1, 5, 9];
arr.sort(); // 默认按字符串Unicode码点排序
console.log(arr); // [1, 1, 3, 4, 5, 9]
// 数字排序
arr.sort(function(a, b) {
return a - b; // 升序
});4. 其他常用方法
slice()
javascript
let arr = ['a', 'b', 'c', 'd', 'e'];
let sub1 = arr.slice(2); // 从索引2开始到末尾
let sub2 = arr.slice(1, 4); // 从索引1到3
console.log(sub1); // ['c', 'd', 'e']
console.log(sub2); // ['b', 'c', 'd']join()
javascript
let arr = ['a', 'b', 'c'];
console.log(arr.join()); // "a,b,c"
console.log(arr.join('-')); // "a-b-c"concat()
javascript
let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]
// 也可以合并多个数组或值
let more = arr1.concat(5, [6, 7]);
console.log(more); // [1, 2, 5, 6, 7]flat() / flatMap()
javascript
let nested = [1, [2, [3, [4]]]];
console.log(nested.flat(2)); // [1, 2, 3, [4]]
let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // [1, 2, 2, 4, 3, 6]4、数组迭代
ES6 引入了数组的迭代器：
entries()- 返回键值对迭代器keys()- 返回键(索引)迭代器values()- 返回值迭代器
javascript
let arr = ['a', 'b', 'c'];
// 使用entries()
for (let [index, value] of arr.entries()) {
console.log(index, value);
}
// 输出:
// 0 'a'
// 1 'b'
// 2 'c'5、数组类型检测
javascript
console.log(Array.isArray([])); // true
console.log(Array.isArray(new Array())); // true
console.log(Array.isArray({})); // false6、类数组对象
JavaScript 中有一些类数组对象（如 arguments、DOM 集合等），可以使用 Array.from() 转换为真正的数组：
javascript
function example() {
let args = Array.from(arguments);
console.log(args instanceof Array); // true
}
example(1, 2, 3);7、稀疏数组
JavaScript 数组可以包含"空槽"（empty slots），这些位置的值是 undefined：
javascript
let arr = [1, , 3];
console.log(arr.length); // 3
console.log(arr[1]); // undefined
console.log(0 in arr); // true
console.log(1 in arr); // false8、性能考虑
- 在数组末尾添加/删除元素（push/pop）通常比在开头（shift/unshift）更快
- 预先知道数组大小时，可以指定长度提高性能
- 连续内存访问比随机访问更快
Array 是 JavaScript 中非常强大且灵活的数据结构，掌握其各种方法对于高效编程至关重要。
二、代码实践
代码如下：
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置对象-ARRAY</title>
</head>
<body>
<script type="text/javascript">
//创建
var a=[1,2,3];
var myArray=new Array();
//myArray[2]=3;
//console.log(myArray);
var myArray1=new Array(3);
console.log(myArray1);
var myArray2=new Array(1,2,3,4);
console.log(myArray2);
//1-100放入数组
var myArray3=new Array();
for(var i=1;i<=100;i++){
myArray3[myArray3.length]=i;
}
console.log(myArray3);
</script>
</body>
</html>
代码运行如下：
总结
以上就是今天要讲的内容，本文简单记录了JavaScript-内置对象ARRAY，仅作为一份简单的笔记使用，大家根据注释理解
扫一扫
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
