如何在Javascript中给js 对象里面添加函数添加一个函数

博客分类:
一条面试题
公司最近在招web fronter,免不了需要进行面试,于是大家在群里讨论一些题目。其中一题如下:
var a = new O
var b = new O
var c = new O
alert(c[a]===a); //输出什么
这个题目还是很有意思的,第一反应往往会心中涌起一丝疑惑,这难道不是true么(我就是的= =!)事实上还真输出了一个false...这样也许看不出什么端倪,但是如果稍微变动一下代码:
var a = new O
var b = new O
var c = new O
alert(c[a]===b); //输出true
alert(c[b]===b); //输出true
从结果可以明显的推断出一个事实:当运行了c[b]=b这条语句之后,原先的属性c[a]被覆盖了。也就是说,其实c[a]和c[b]指向的是同一个东西。
创建JS对象
现在需要深究一下,JS对象的属性究竟是怎么回事...一般而言,我们会认为JS中的对象就是一个无序的属性集,这个属性集中的每个属性都由键值对构成,就好比一种散列表类似的数据结构。对象里属性的值可以用来存放JS中原型的值、对象的引用、函数的引用。这在Ecmascript-262标准中可以找到理论依据:
Ecmascript-262 3rd
An object is a member of the type Object. It is an unordered collection of properties each of which
contains a primitive value, object, or function. A function stored in a property of an object is called a method.
JS中有两种创建对象的方式,一种是通过new运算符,还有一种是通过字面量的方式。前文的面试题中就是利用了new Object来创建一个貌似是空的对象。下面来分别分析一下这两种创建对象的方式:
字面量创建的方式很简单,根据Ecma标准语法:
Ecma 262 10.1.5
ObjectLiteral :
{ PropertyNameAndValueList }
PropertyNameAndValueList :
PropertyName : AssignmentExpression
PropertyNameAndValueList , PropertyName : AssignmentExpression
PropertyName :
Identifier
StringLiteral
NumericLiteral
根据描述,如果创建的不是空对象,而是一个带有Name和Value的对象,那么Name可以是JS中的标识符、字符串或者数字。具体的创建过程是可以描述成:
1)var obj = {} 就等于var obj = new Object()
The production ObjectLiteral : {}
is evaluated as follows:
1. Create a new object as if by the expression new Object().
2. Return Result(1).
2)var obj = { PropertyNameAndValueList }
如果是这种带了键值对的对象,首先还是调用new Object()来创建一个新的对象,然后会计算PropertyName、AssignmentExpression,利用GetValue方法获取AssignmentExpression的值,最后调用被新创建对象的[[Put]] 方法(obj的put方法是内部方法,外部无法调用),具体细节如下:
The production ObjectLiteral : { PropertyNameAndValueList }
is evaluated as follows:
1. Evaluate PropertyNameAndValueList.
2. Return Result(1);
The production PropertyNameAndValueList : PropertyName : AssignmentExpression
is evaluated as follows:
1. Create a new object as if by the expression new Object().
2. Evaluate PropertyName.
3. Evaluate AssignmentExpression.
4. Call GetValue(Result(3)).
5. Call the [[Put]] method of Result(1) with arguments Result(2) and Result(4).
6. Return Result(1).
这里的GetValue和[[Put]]方法都可以暂且不管,因为它们对于程序员并不可见。进一步看一下Evaluate PropertyName的过程:
The production PropertyName : Identifier is evaluated as follows:
1. Form a string literal containing the same sequence of characters as the Identifier.
2. Return Result(1).
The production PropertyName : StringLiteral is evaluated as follows:
1. Return the value of the StringLiteral.
The production PropertyName : NumericLiteral is evaluated as follows:
1. Form the value of the NumericLiteral.
2. Return ToString(Result(1)).
可以发现,在利用字面量创建对象的时候:如果属性的name用JS中的标识符表示,那么name会被转成值相同的字符串;如果属性的name是number,那么会调用ToString来计算该number的字符串表示,这儿的ToString也是JS内部的方法。
2.利用new Object()
调用new Object()也是一种创建对象的方法,如果不传参数进去,本质上来说跟直接使用字面量{}没有区别。实际上new Object的过程还是有些复杂的:
new Object ( [ value ] )
When the Object constructor is called with no arguments or with one argument value, the following steps are taken:
1. If value is not supplied, go to step 8.
2. Ifthetypeof value isnotObject,gotostep5.
3. If the value is a native ECMAScript object, do not create a new object but simply return value.
4. If the value is a host object, then actions are taken and a result is returned in an implementation-dependent manner that may depend on the host object.
5. Ifthetypeof value is String, return ToObject(value).
6. Ifthetypeof value is Boolean, return ToObject(value).
7. Ifthetypeof value is Number, return ToObject(value).
8. (The argument value was not supplied or its type was Null or Undefined.)Create a new native ECMAScript object.
The [[Prototype]] property of the newly constructed object is set to the Object prototype object.
The [[Class]] property of the newly constructed object is set to "Object".
The newly constructed object has no [[Value]] property.
Return the newly created native object
很显然,如果是不传参数,那么会创建一个 native ECMAScript object,随后会给这个object添加一系列的内部属性
,比如将 [[Prototype]]设置为Object prototype object(即Object.prototype),将[[Class]]设置为字符串“Object”。注意,在Object.prototype中已经包含了一些方法:
1.toString ( )
2.toLocaleString ( )
3.valueOf ( )
4.hasOwnProperty (V)
5.isPrototypeOf (V)
6.propertyIsEnumerable (V)
利用new Object新创建的对象不会有除了上面之外别的方法。
对象的属性访问、赋值
对JS中的对象进行属性访问同样也是两种形式,一种是利用“[ ]”运算符,还有一种是利用“.”运算符。即:
CallExpression. Identifier 或CallExpression[ Expression ]
注意就是利用“.”的时候,只能后接一个合法的Identifie。但是如果是利用“[ ]”却可以包含一个表达式进来,本文刚开始的题目中就是利用这种形式去访问obj的属性。其实CallExpression. Identifier也会按照CallExpression[ &Identifier-string&]去执行。
CallExpression[ Expression ] is evaluated as follows:
1. Evaluate CallExpression.
2. Call GetValue(Result(1)).
3. Evaluate Expression.
4. Call GetValue(Result(3)).
5. Call ToObject(Result(2)).
6. Call ToString(Result(4)).
7. Return a value of type Reference whose base object is Result(5) and whose property name is Result(6).
尤其要注意第6行, 所有方括号中的Expression的值要经过ToString这一步。
对于赋值,具体的计算过程如下:
The production AssignmentExpression : LeftHandSideExpression = AssignmentExpression is evaluated as follows:
1. Evaluate LeftHandSideExpression.
2. Evaluate AssignmentExpression.
3. Call GetValue(Result(2)).
4. Call PutValue(Result(1), Result(3)).
CallExpression就是一种 LeftHandSideExpression。
题目详解:
下面来拆分题目,逐行来推敲具体的执行过程,首先是三条创建对象的语句:
//创建一个native Ecmascript object
//[[Prototype]]指向Object.prototype
//[[Class]]设为"Object"
var a = new O
var b = new O
var c = new O
注意,一个obj里并非只有 [[Prototype]]和[[Class]]两个内部属性,具体的内部属性以及内部方法可以参考Ecma262的8.6章节。
在创建完对象后,又是两条属性赋值语句。
//c[a]会按照CallExpression[ Expression ] 的7个步骤来计算,
//其中的GetValue较为复杂,可以参考http://www.w3help.org/zh-cn/causes/SD9028的注释2
//注意第6步,ToString(a)会调用到ToPrimitive(a),进而调用a的[[DefaultValue]]方法,具体参考Ecma规范
//这里最终会调用到a.toString方法,根据Object.prototype.toString的描述,会返回[object Object]
//即最终相当于c["[object Object]"]=a;
//即最终相当于c["[object Object]"]=b;
alert(c[a]===a);
稍微变个形
var a = {};
var b = {};
var c = {};
alert(c[a]===a);
你可能会立马想到,c.a是怎么处理的,很显然这是利用了“.”运算符访问属性,而不是“[ ]”。根据上面的描述, CallExpression. Identifier会按照CallExpression[ &Identifier-string&]去执行,那么这里的c.a就相当于c["a"]。因此最后结果肯定是true了?
真的是这样么?别忘了,在alert语句中还有c[a]的存在,如前文所述,c[a]完全就相当于c["[object Object]"],因此这段代码相当于:
var a = {};
var b = {};
var c = {};
alert(c["[object Object]"]===a);
真是相当的恶心....
再来变一变
这次c的属性直接在声明里写好了。
var a = {};
var b = {};
alert(c.a===a);
这回是利用了字面量创建对象的方式。根据上面的描述,如果键值对的name是一个合法的JS标识符,那么name就是将该标识符变成直接字符串,简单来说,就是两边加上引号。
因此,上面这段代码相当于:
var a = {};
var b = {};
var c = {};
alert(c.a===a);
终于输出了true....
浏览 13239
driftcloudy
浏览: 100302 次
来自: 上海
fellatioyzx 写道关于返回值那个,早期的C规定,不写 ...
关于返回值那个,早期的C规定,不写返回值的话,默认为int,你 ...
RednaxelaFX 写道话说,要是读过Inside the ...
话说,要是读过Inside the C++ Object Mo ...
RednaxelaFX 写道也就是完全兴趣驱动?算是吧...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'JavaScript实现自定义对象的自定义事件
大家都知道,在使用Script可以很方便的使用addEventListener函数给DOM对象快速绑定一个或多个事件侦听器。
我们又如何在的自定义对象中使用此方法并触发事件呢?这就是本章节的核心内容了。
现在有一个需求,要求&a对象&能够让&b对象&做一系列动作。
分析后我们得知。首先,&b对象&有一个固定名称作为入口让a对象调用,并且这个入口可以自动检索所有符合这个动作要求的函数并依次触发。
好的,经过以上内容我们可以简单的了解到为什么我们需要自定义事件了。
接下来我们来用代码具体实现一下。
function CursomObject (table) {
/// 这是一个自定义对象类型
///要添加的函数及属性表
// 这里要存放我们的自定义事件
// 因为是一个表,所以我们使用Object类型
this._events = {};
// 得到函数及属性表中的内容
for (var i in table) this[i] = table[i];
上面这段代码定义了一个CursomObject类型,这将作为下面所做操作的基础。
CursomObject.prototype.addEventListener = function (type, listener, capture) {
/// 添加事件侦听器
///事件类型
///触发的函数
///是否在捕获阶段触发(这里只是做了顺序排列)
// 判断一下传入的参数是否符合规格
if (typeof type !== string || typeof listener !== function)
// 缓存符合条件的事件列表
var list = this._events[type];
// 判断是否已经有该类型事件,若没有则添加一个新数组
if (typeof list === undefined) list = (this._events[type] = []);
/* 判断插入函数的位置 */
if (!!capture) list.push(listener);
else list.insert(0, listener);
至此,我们已经实现了一个简单的事件监听器的添加功能了。
这里需要注意一下,list.insert中的insert函数在JavaScript的Array中是不存在的,我们将在下面的扩展函数中找到。
另外, 则是为了方便链式【详情请参阅&附录1&】
CursomObject.prototype.removeEventListener = function (type, listener, capture) {
/// 移除事件侦听器
///事件名称
///触发的函数
///是否在捕获阶段触发
// 判断一下传入的参数是否符合规格
if (typeof type !== string || typeof listener !== function)
// 缓存符合条件的事件列表
var list = this._events[type];
// 若没有绑定过此类事件则不需要做处理
if (typeof list === undefined)
for (var i = 0, len = list. i & i++) {
// 通过循环判断来确定事件列表中存在要移除的事件侦听函数
if (list[i] == listener) {
// 找到后将此侦听函数从事件列表中移除
list.remove(i);
以上过程简单明了,一个循环搞定问题。
同时这个也需要注意,JavaScript中的Array中是不存在remove函数的,同样在下面扩展函数中会出现。
CursomObject.prototype.fireEvent = function (type, e) {
/// 触发事件
///事件名称
///附加参数对象
// 若存在DOM0用法的函数,则触发
this[on + type.toLowerCase()] && this[on + type.toLowerCase()].call(this, e);
// 缓存符合条件的事件列表
var list = this._events[type];
// 若事件列表中没有内容则不需要做处理
if (!list || list.length &= 0)
// 阻止事件冒泡开关
var isStop =
// 模拟事件对象
window.event = { stopPropagation: function () { isStop = } };
e.stopPropagation = window.event.stopP
for (var i = 0, len = list. i & i++) {
// 通过循环触发符条件的事件列表中存在的所有事件侦听函数
// 若函数内返回false或事件内调用了event.stopPropagation函数则阻止接下来的所有调用
if (list[i].call(this, e) === false || isStop)
注释已经说的很清楚了,这里就不再累述。
那么至此就主体就已经完成了。下面放出扩展函数。
Array.prototype.insert = function (index, value) {
/// 插入项
if (index & this.length) index = this.
if (index & -this.length) index = 0;
if (index & 0) index = this.length +
for (var i = this. i & i--) {
this[i] = this[i - 1];
this[index] =
Array.prototype.remove = function (index) {
/// 移除项
if (isNaN(index) || index & this.length)
this.splice(index, 1);
OK,已经全部完成了。
下面放出完整代码。
function CursomObject(table) {
/// 这是一个自定义对象类型
///要添加的函数及属性表
// 这里要存放我们的自定义事件
// 因为是一个表,所以我们使用Object类型
this._events = {};
// 得到函数及属性表中的内容
for (var i in table) this[i] = table[i];
CursomObject.prototype.addEventListener = function (type, listener, capture) {
/// 添加事件侦听器
///事件类型
///触发的函数
///是否在捕获阶段触发(这里只是做了顺序排列)
// 判断一下传入的参数是否符合规格
if (typeof type !== string || typeof listener !== function)
// 缓存符合条件的事件列表
var list = this._events[type];
// 判断是否已经有该类型事件,若没有则添加一个新数组
if (typeof list === undefined) list = (this._events[type] = []);
/* 判断插入函数的位置 */
if (!!capture) list.push(listener);
else list.insert(0, listener);
CursomObject.prototype.removeEventListener = function (type, listener, capture) {
/// 移除事件侦听器
///事件名称
///触发的函数
///是否在捕获阶段触发
// 判断一下传入的参数是否符合规格
if (typeof type !== string || typeof listener !== function)
// 缓存符合条件的事件列表
var list = this._events[type];
// 若没有绑定过此类事件则不需要做处理
if (typeof list === undefined)
for (var i = 0, len = list. i & i++) {
// 通过循环判断来确定事件列表中存在要移除的事件侦听函数
if (list[i] == listener) {
// 找到后将此侦听函数从事件列表中移除
list.remove(i);
CursomObject.prototype.fireEvent = function (type, e) {
/// 触发事件
///事件名称
///附加参数对象
// 若存在DOM0用法的函数,则触发
this[on + type.toLowerCase()] && this[on + type.toLowerCase()].call(this, e);
// 缓存符合条件的事件列表
var list = this._events[type];
// 若事件列表中没有内容则不需要做处理
if (!list || list.length &= 0)
// 阻止事件冒泡开关
var isStop =
// 模拟事件对象
window.event = { stopPropagation: function () { isStop = } };
e.stopPropagation = window.event.stopP
for (var i = 0, len = list. i & i++) {
// 通过循环触发符条件的事件列表中存在的所有事件侦听函数
// 若函数内返回false或事件内调用了event.stopPropagation函数则阻止接下来的所有调用
if (list[i].call(this, e) === false || isStop)
Array.prototype.insert = function (index, value) {
/// 插入项
if (index & this.length) index = this.
if (index & -this.length) index = 0;
if (index & 0) index = this.length +
for (var i = this. i & i--) {
this[i] = this[i - 1];
this[index] =
Array.prototype.remove = function (index) {
/// 移除项
if (isNaN(index) || index & this.length)
this.splice(index, 1);
上面已经详述了自定义事件的具体实现。
接下来我们就可以使用了,那么怎么使用呢?
function Test() {
/// 这是一个自定义类型
// 继承CursomObject中的属性
CursomObject.apply(this);
// 继承CursomObject中的函数
Test.prototype = new CursomObject();
// 定义一个从Test类型中派生出来的对象
var a = new Test();
// 绑定一个message事件的侦听器
a.addEventListener(message, function (e) {
}, false);
// 再绑定一个message事件的侦听器
a.addEventListener(message, function (e) {
alert(内容: + e);
}, false);
// 触发message事件
a.fireEvent(message, 这是参数&&);
至此结束。js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScript使用push方法添加一个元素到数组末 JavaScript数组函数unshift、shift、pop、push使用
时间: 12:50:08
&&&& 阅读:1083
&&&& 评论:
&&&& 收藏:0
标签:&&&&&&&&&&&&&&&&&&&&&&&&&&&push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度。新的元素将会依次添加到数组的末尾。
该函数属于Array对象,所有主流浏览器均支持该函数。
array.push( item1 [,items... ] )参数
参数 描述item1 任意类型添加到当前数组末尾处的元素。items 可选参数/任意类型要添加到当前数组末尾处的其他项,可以有多个。注意:如果添加的元素类型为数组类型(Array),仍然会被当作一个元素看待,只是这个元素是数组类型而已。如果要合并两个数组,请使用concat()函数。返回值
push()函数的返回值为返回添加元素后的数组长度。
当向数组中添加新的元素时,数组的length属性也会随之改变。一般而言,数组的length属性将会加N(N为添加的元素个数)。
// 定义一个数组对象var array = ["CodePlayer", true];document.writeln(array.length); // 2
// 向数组中添加一个元素var newLength = array.push("");document.writeln(array); // CodePlayer,true,document.writeln(newLength); // 3
// 一次性添加多个元素newLength = array.push(2, 3, "Hello");document.writeln(array); // CodePlayer,true,,2,3,Hellodocument.writeln(newLength); // 6
// 数组也会被当作其中的一个元素进行添加newLength = array.push(false, [15, 12]);// 输出内容最后面的"15,12"是一个元素的输出,只不过该元素是数组document.writeln(array); // CodePlayer,true,,2,3,Hello,false,15,12document.writeln(newLength); // 8运行代码
js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧。不过不会针对每个方法进行讲解,我只是选择其中的一些来讲,感兴趣的朋友可以研究一下
js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧。不过不会针对每个方法进行讲解,我只是选择其中的一些来讲。
首先来讲一下push和pop方法,这两个方法只会对数组从尾部进行压入或弹出,而且是在原数组进行操作,任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素,并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素,并返回弹出的元素,如果是对空组数调用pop()则返回undefined。 如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的“拆分现象”,下面看例子
例1: var oldArr=[1,2,3]; alert(oldArr.push(4,[5,6]))–&5(这里只会将[5,6]当做一个元素来计算,返回更新后的数组长度5) 此时oldArr–&[1,2,3,4,[5,6]] alert(oldArr.pop())–&[5,6](这里弹出最后一个元素[5,6],而不是6) 此时oldArr–&[1,2,3,4] oldArr.pop()–&4 oldArr.pop()–&3 oldArr.pop()–&2 oldArr.pop()–&1 oldArr.pop()–&undefined(空数组弹出) 现在讲完push和pop再来看一下unshift和shift 这两个方法都是通过对数组的头部进行的操作,其他基本跟push和pop类似,但是在IE中unshift方法返回的是undefined
例2: var oldArr2=[1,2]; oldArr2.unshift(3)–&undefined 此时oldArr2为–&[3,1,2] oldArr2.shift()–&3 此时oldArr2为[1,2] 接下来看一下功能强大一点的splice,利用其可以进行数组随意位置的元素添加,删除 ,其操作也是在原有
数组上修改 splice(start,deleteCnt,args) 中的start表示开始操作下标,deleteCnt表示从开始下标开始(包括该元素)要删除的元素个数,删除操作返回删除的元素。args表示用来替换删除掉的那些元素(可以有多个参数),start和deleteCnt必须为数字,如果不是数字尝试转换,转换失败当做0来处理。splice必须至少有一个start元素,否则不做任何操作。deleteCnt不存在表示删除start及后面的全部元素(IE下,取0不做删除)。start可以为负数,表示从数组右边结尾处开始计算。deleteCnt如果为负数不做删除,因为不可能删除负个元素。 好了解释就到这边现在看一下例子,通过例子或许可以更好的理解
例3: var oldArr3=[1,2]; oldArr3.splice()–&”"(返回空的字符串,不做任何操作,操作后oldArr3–&[1,2]) oldArr3.splice(“”)–&[1,2](“”尝试转换为数字失败返回0,所以删除1,2,操作后oldArr3–&[],但是IE下有点恶心,不做任何操作) oldArr3.splice(“1a”)–&同上 odlArr3.splice(0,2)–&[1,2](“从下标0的元素开始,删除两个元素1,2因此删除后oldArr3–&[]) oldArr3.splice(0,-1)–&”"(从0下标开始删除-1个元素,故等于没做任何操作,操作后oldArr3–&[1,2]) oldArr3.splice(1,1)–&2(从下标1 开始删除1个元素,即删除2,所以删除后oldArr3–&[1]) oldArr3.splice(1,4)–&2(从下标1 开始删除4个元素,1开始只有1个元素,故删除2,所以删除后oldArr3–&[1]) oldArr3.splice(-1,0,3)–&”"(从下标-1即2元素开始删除0个元素,然后添加元素3,所以操作后oldArr3–&[1,3,2]) oldArr3.splice(-1,1,3)–&2(从小标-1即2元素开始删除1个元素,然后添加元素3,操作后为oldArr3–&[1,3]) OK接下来开始讲concat,这个方法用来连接两个或多个数组,该数组不会改变原来的数组只会返回新的一个数组。连接的时候参数如果为数组,则连接的是数组中的元素。因为比较简单直接开始例子
例4: var oldArr4=[1,2]; oldArr4.concat(3,4)–&[1,2,3,4] oldArr4.concat(3,4,[5,6])–&[1,2,3,4,5,6](这边添加的是[5,6]中的元素5和元素6) oldArr4.concat(3,[4,[5,6]])–&[1,2,3,4,[5,6]](这边最里层的元素[5,6]整个用来添加,而不是拆开) 下面来讲数组中的排序方法sort sort(function)是针对原数组进行的排序,不会生成新的数组。默认sort()不带参数时按照数组中的元素转换成字符串进行比较,比较的时候按照字符在字符编码中的顺序进行排序,每个字符都有一个唯一的编码与其对应。
且看下面例子 var oldArr5=[3,1,5,7,17] 看这个一般观念上以为对oldArr5排序时oldArr5.sort()会按照数字从小到大排序即返回[1,3,5,7,17],但是看一下结果其实不然返回的是[1,17,3,5,7] 因为比较的时候都被转成字符串。然后对字符串进行一个个的比较如果第一个字符相同则比较第二个,否则直接返回比较结果,因为”17″&”3″所以可想而知排序的结果就不是一般印象中的那个结果了。
sort(function)方法除了默认的无参外还可以传入自定义的排序方法,这样排序的结果完全可以由自己来控制了,想怎么排就怎么排,是不是很爽啊,呵呵。 一般自定义的function比较函数,包含两个参数分别代表用来比较的左元素和右元素。然后通过一定方式返回一个结果,如果返回值大于0表示交换左右元素,如果返回值小于0或等于0则表示不不会交换左右元素。现在来看一下例子
例5: 按照数字从大到小排列原有数组 复制代码代码如下:
var oldArr5=[3,1,5,7,17]; //初始数组 function mySort(left,right){ if(left&right){ return 1;}//如果左边元素小于右边元素则交换两数 else{ return -1;}//如果左边元素大于等于右边元素不做交换 }
当然上面的方法可以简化为funaction mySort(left,right){ return right-} 复制代码代码如下:
//按照偶数在前奇数在后排序 var oldArr6=[3,6,7,18];//初始数组 function mySort2(left,right){ if(left%2==0)return -1;//如果左边元素为偶数则不交换 if(right%2==0)return 1; //如果右边元素为偶数则交换 return 0; //不交换 }
最后的slice不多讲,只是用来截取原数组中的部分元素,返回一个新的数组,原数组不会改变,其操作方式跟string的slice类似 复制代码代码如下:
var oldArr7=[1,2,3,4]; oldArr7.slice(0)–&[1,2,3,4] oldArr7.slice(0,2)–&[1,2] oldArr7.slice(0,0)–&[] oldArr7.slice(0,-1)–&[1,2,3] oldArr7.slice(-3,-1)–&[2,3] oldArr4.slice(-1,-3)–[]
Js数组的操作push,pop,shift,unshift等方法详细介绍
JavaScript Array 对象Array 对象Array 对象用于在单个的变量中存储多个值。创建 Array 对象的语法:new Array();new Array(size);new Array(element0, element1, ..., elementn);参数参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。返回值返回新创建并被初始化了的数组。如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。Array 对象属性属性 描述constructor 返回对创建此对象的数组函数的引用。length 设置或返回数组中元素的数目。prototype 使您有能力向对象添加属性和方法。Array 对象方法方法 描述concat() 连接两个或更多的数组,并返回结果。join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop() 删除并返回数组的最后一个元素push() 向数组的末尾添加一个或更多元素,并返回新的长度。reverse() 颠倒数组中元素的顺序。shift() 删除并返回数组的第一个元素slice() 从某个已有的数组返回选定的元素sort() 对数组的元素进行排序splice() 删除元素,并向数组添加新元素。toSource() 返回该对象的源代码。toString() 把数组转换为字符串,并返回结果。toLocaleString() 把数组转换为本地数组,并返回结果。unshift() 向数组的开头添加一个或更多元素,并返回新的长度。valueOf() 返回数组对象的原始值
JavaScript数组函数unshift、shift、pop、push使用实例
投稿:junjie 字体:[增加 减小] 类型:转载 时间: 我要评论这篇文章主要介绍了JavaScript数组函数unshift、shift、pop、push使用实例,本文先是讲解了声明数组的方法,然后对4个函数使用给出了一些例子,需要的朋友可以参考下如何声明数组s中数组的声明可以有几种方式声明复制代码 代码如下:
var tmp = [];
// 简写模式var tmp = new Array(); // 直接new一个var tmp = Array();
// 或者new也可以
在new数组的时候可以传入一个参数,表示数组的初始化长度复制代码 代码如下:
// new的时候传入一个参数表示初始化数组长度var tmp = new Array(3);
alert(tmp.length);
但如果你想创建一个只有一个元素3的数组,那么使用 new 方法是不能实现的,因为系统会把你传入的3当作数组的长度,除非你使用引号引起来当作字符串,如复制代码 代码如下:
var tmp = new Array(‘3‘); alert(tmp);
我们可以使用简写模式创建数组,这样就可以创建只有一个数字元素3的数组复制代码 代码如下:
var tmp = [3]alert(typeof tmp[0]);
也可以初始多个元素,并且元素的值可以是任意类型复制代码 代码如下:
// 简约模式创建数组// 数组的元素可以是任意一种数据类型var tmp = [3,true,8.5,{‘name‘:‘lizhong‘},[‘a‘,‘b‘]];alert(tmp.length); // 5一、unshift 在数组第一个元素前插入元素复制代码 代码如下:
// 使用unshift在数组第一个元素前插入元素// 返回数组长度var tmp = [‘a‘,‘b‘];var len = tmp.unshift(‘c‘);alert(len); // 3alert(tmp); // c,a,b
也可以一次插入多个元素,顺序依次从左边排起复制代码 代码如下:
// 使用unshift在数组第一个元素前插入元素// 返回数组长度var tmp = [‘a‘,‘b‘];var len = tmp.unshift(‘c‘,‘d‘);alert(len); // 4alert(tmp); // c,d,a,b二、shift弹出数组第一个元素,返回被弹出的元素值小实例:复制代码 代码如下:
// 使用shift弹出数组第一个元素// 返回被弹出的元素值var tmp = [‘a‘,‘b‘,‘c‘];var val = tmp.shift();alert(val); // aalert(tmp); // b,c
如果是一个空数组:复制代码 代码如下:
// 使用shift弹出数组第一个元素// 返回被弹出的元素值var tmp = [];var val = tmp.shift();alert(val); // undefinedalert(tmp); // 空三、push在数组末尾添加元素跟unshift相反,push在数组末尾添加元素,返回添加元素以后的数组长度复制代码 代码如下:
// 使用push在数组末尾添加多个元素// 返回数组最新长度var tmp = [‘a‘,‘b‘,‘c‘];var len = tmp.push(‘d‘);alert(len); // 4alert(tmp); // a,b,c,d
也可以一次添加多个元素复制代码 代码如下:
// 使用push在数组末尾添加多个元素// 返回数组最新长度var tmp = [‘a‘,‘b‘,‘c‘];var len = tmp.push(‘d‘,‘e‘,‘f‘);alert(len); // 6alert(tmp); // a,b,c,d,e,f四、pop函数删除数组末尾元素跟shift相反,pop弹出的是数组末尾元素,返回被弹出的元素值复制代码 代码如下:
// 使用pop弹出数组末尾元素// 返回被弹出的元素值var tmp = [‘a‘,‘b‘,‘c‘];var val = tmp.pop();alert(val); // calert(tmp); // a,b
如果数组为空,返回undefined复制代码 代码如下:
// 使用pop弹出数组末尾元素// 返回被弹出的元素值var tmp = [];var val = tmp.pop();alert(val); // undefinedalert(tmp); // 空
利用以上四个函数,我们可以做一些队列处理,具体案例就不写代码了。push功能其实也可以这么实现 复制代码 代码如下:
var tmp = [‘a‘,‘b‘,‘c‘];tmp[tmp.length] = ‘d‘;alert(tmp); // a,b,c,d
注意:以上四个函数unshift、shift、pop、push函数操作都会在数组本身上修改。标签:&&&&&&&&&&&&&&&&&&&&&&&&&&&原文:/icelab/p/6500901.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣,分享程序人生!

我要回帖

更多关于 js对象中定义函数 的文章

 

随机推荐