JavaScript对象与数组核心操作详解:从字面量到迭代方法
本文深入解析JavaScript中的对象与数组高级特性。首先介绍对象字面量的定义方式及属性访问的点与方括号表示法区别,随后详细阐述数组的创建陷阱、长度属性操作及字符串转换。重点讲解栈方法(push/pop)、队列方法(shift/unshift)、重排序与切片操作,最后系统介绍ECMAScript5定义的五大数组迭代方法(every/filter/forEach/map/some)及其参数与返回值差异。
JavaScript对象与数组核心操作详解:从字面量到迭代方法
继承是面向对象语言中备受关注的核心概念,主要包含接口继承与实现继承两种模式。接口继承仅获取方法签名,而实现继承则获取具体方法实现。由于ECMAScript中的函数没有签名这一概念,因此无法实现接口继承,该语言仅支持基于原型链的实现继承。
对象字面量与属性访问
1. 使用对象字面量定义对象
var person={};
采用对象字面量语法创建对象时,系统不会调用Object构造函数。
这种简洁的语法风格更受开发者的青睐。
2. 在需要传递大量可选参数的场景下,通常使用对象字面量来封装这些参数。
3. 对象属性的点表示法与方括号表示法的区别
(1) 功能层面:两者没有区别。
(2) 方括号表示法的优势在于可以通过变量来动态访问属性。
例如:
var person={
name:"Nic"
}
点表示法示例:person.name
方括号表示法示例:var prop="name"; person[prop]
(3) 另一个显著优点是:
当属性名包含会导致语法错误的字符,或者是关键字、保留字时,使用方括号表示法不会报错。
例如:person["first name"]="OK";
(4) 通常情况下,建议优先使用点表示法。
数组创建陷阱与长度属性
4. 创建数组时存在的问题
var colors=[1,2,] //避免这样做,这可能会创建一个包含2个或3个项的数组 var opy=[,,,,,] //避免这样做,这可能会创建一个包含5个或6个项的数组
这是因为IE8及更早版本在实现数组字面量时存在Bug。
使用字面量语法创建数组时,并不会调用Array构造函数。
5. 如果设置某个值的索引超过了数组现有的项数。
如:var color=[1,2,3]
当访问color[3]时,数组会自动扩展至该索引值加1的长度。
此时,color[3]的值即为undefined。
6. 数组的length属性并非只读。通过设置length属性,可以不断向数组末尾添加新项。
7. 数组转换为字符串的方法:toString() 和 join()。
array.toString() //返回以逗号分隔的字符串
array.valueOf() //返回的还是数组
array.join(",") //也可以
数组栈方法与队列方法
8. 数组的栈方法:push() 和 pop()。
栈是一种数据结构,遵循最新添加的项最早被移除的原则(后进先出)。栈中项的插入和移除仅发生在一个位置——栈顶。ECMAScript提供了push()与pop()方法来实现这种栈结构。
push() 方法可向数组末尾添加一个或多个元素,并返回新的长度。
pop() 方法用于删除并返回数组的最后一个元素。
例子:
var arr=[];
var count=arr.push('a','b'); //count=2
arr.push('c');
var item=arr.pop(); //移除最后一项 c item=c 并且改变数组长度
9. 队列方法:shift() 和 unshift()。
队列数据的访问规则是先进先出。ECMAScript提供了shift()来实现。shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
数组重排序与拼接切片
10. 重排序方法:sort() 和 reverse()。
ECMAScript提供了sort()与reverse()来实现。
sort() 会调用每个数组项的toString()方法,比较得到的字符串来进行排序。
11. 数组的拼接方法:concat()。
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
12. slice() 方法可从已有的数组中返回选定的元素。
13. 位置方法:indexOf() 与 lastIndexOf()。
ECMAScript5数组迭代方法
14. 迭代方法。
ECMAScript5定义了下列5种方法,这5种方法都接收三个参数:数组项的值、该项在数组中的位置、数组对象本身。
every(),filter(),forEach(),map(),some()
例子:
var num=[1,2,3,4];
var res=num.every(function(item,index,array){
return (item>2)
}) //false 必须每一项都大于2,才返回true
var res=num.some(function(item,index,array){
return (item>2)
}) //true 只要有一个大于2,就返回true
var res=num.filter(function(item,index,array){
return (item>2)
}) //[3,4]
var res=num.forEach(function(item,index,array){
return (item>2)
}) //[1,4,9,16]
javascript 数组对象中的迭代方法
/* javascript 数组对象中的迭代方法
* ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象【可选】。
* 进行迭代的函数接受三个参数,第一个是数组中要进行迭代的元素的值,第二个是数组候总要进行迭代的元素的位置,第三个是迭代数组本身。
* 1. every() 对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true
* 2. filter() 对数组中的每一项运行给定的函数,返回该函数返回true的项组成的数组。
* 3. forEach() 对数组中的每一项运行给定的函数,这个方法没有返回值
* 4. map() 对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组
* 5. some() 对数组中的每一项运行给定的函数,如果该函数对任意一项返回true,则返回true
*
* 这些迭代方法支持的浏览器有,IE9+,Firefox2+,Safari3+,Opera 9.5+,chrome
*/
var num = [1,2,3,4,5,6,7,8,9];
var everyResult = num.every(function(item, index, array) {
if(item > 2) {
return true;
}
});
alert(everyResult);
var someResult = num.some(function(item) {
if(item > 2) {
return true;
}
});
alert(someResult);
var filterResult = num.filter(function(item) {
if(item > 2) {
return true;
}
});
alert(filterResult);
var mapResult = num.map(function(item) {
if(item > 2) {
return true;
}
});
alert(mapResult);
var forEachResult = num.forEach(function(item) {
if(item > 2) {
return true;
}
});
alert(forEachResult);
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
