js数组添加对象(js 数组添加数组)
js中如何以最简单的方式将数组元素添加到对象中
这个只能用集合来实现。
在JavaScript中,常用Array来存储和操作对象:
Array:
新建:var ary = new Array(); 或 var ary = [];
增加:ary.push(value);
删除:delete ary[n];
遍历:for ( var i=0 ; i ary.length ; ++i ) ary[i];
js数组对象常用的方法
数组转换字符串
array.join()? ? // 将数组的值拼接成字符串。
var arr = [1,2,3,4,5]
arr.join()?? // 不传参数,默认按【,】进行拼接
arr.join("-")? // 参数是字符串类型 按【-】进行拼接
数组的增删操作
array.push(value,[value[,...]])?? //将一个或多个元素添加到数组的结尾,并返回新的长度。
array.pop()?? //从数组中删除最后一个元素,并返回该元素的值,改变了数组的长度
array.unshift(value,[value[,...]])?? //将一个或多个元素添加到数组的开头,并返回新的长度。
array.shift()? ? //从数组中删除第一个元素,并返回该元素的值,改变了数组的长度
数组的翻转与排序
array.reverse()? ? // 翻转数组,返回翻转过的数组
array.sort()? ? // 默认排序顺序是根据字符串Unicode码点,比如如果是数字的话,排序结果是10小于2,因为比较的是第一位
var arr = [1,3,10,2,4,40,5]
arr.sort()? ? // [1, 10, 2, 3, 4, 40, 5]
// sort方法可以传递一个函数作为参数,这个参数用来控制数组如何进行排序
var arr = [1,2,10,4,40,5]
arr.sort(function(a,b)
? ? return a-b;? //按照正序
? ? return b-a //按照倒序
})
数组的拼接与截取
concat:数组合并,不会影响原来的数组,会返回一个新数组。
var arr = [1,2,3]
var arr1 = ["a","b","c"]
var newArray = arr.concat(arr1)? ? //[1,2,3,"a","b","c"];
slice:复制数组的一部分到一个新数组,并返回这个新数组,原来的数组不受影响,包含头,不包含尾
var newArray = array.slice(begin, end)
var arr = [1,2,3,4,5]
arr.slice(0,3) //[1,2,3]
arr.slice(-3,-1) //[3,4]
splice: 以新元素来替换旧元素,以此来修改数组的内容,返回被替换的内容,原数组被改变
start:开始位置? deleteCount:删除的个数? items:替换的内容
array.splice(start, deleteCount, [items[,items...])
var arr = [1,2,3,4,5]
var newArray = arr.splice(0,3,"a","b","c","d")
console.log(newArray)? ? //[1, 2, 3]
console.log(arr)? ? // ["a", "b", "c", "d", 4, 5]
数组查找元素
indexOf方法用来查找数组中某个元素第一次出现的位置,如果找不到,返回-1
array.indexOf(search, [fromIndex])
lastIndexOf()从后面开始查找数组中元素第一次出现位置,如果找不到,返回-1?
array.lastIndexOf(search, [fromIndex])
链接:
js创建数组对象的过程有几种?特点是什么?
js编程中创建对象的几种方式,如原始方法、工厂方法等创建对象。
1、原始方法
复制代码代码示例:
script type="text/javascript"
var obj = new Object();
obj.name = "Koji"; //为对象添加属性
obj.age = 21;
obj.showName = function(){ //为对象添加方法
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
obj.showName(); //Koji
obj.showAge(); //21
/script
上面的方式通过new关键字生成一个对象,然后根据JS是动态语言的特性添加属性和方法,构造一个对象。其中的this是表示调用该方法的对象。
这种方式的问题是如果需要多次创建对象,则需要重复代码多次,不利于代码的复用。
2、工厂方法 :
复制代码代码示例:
script type="text/javascript"
function createObj(){
var obj = new Object(); //创建对象
obj.name = "Koji";
obj.age = 21;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
return obj; //返回对象
}
var obj1 = createObj();
var obj2 = createObj();
obj1.showName(); //Koji
obj2.showAge(); //21
/script
这种方式提高了代码重用率,还可以改变工厂方法,传入参数赋值。
复制代码代码示例:
script type="text/javascript"
function createObj(name, age){ //构造对象时可以传入初始化参数
var obj = new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
return obj; //返回对象
}
var obj1 = createObj("Koji", 22);
var obj2 = createObj("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
/script
上面的方式虽然可以提高代码的复用率,但和面向对象中类的概念相比有一个很大的缺陷。面向对象强调对象的属性私有,而对象的方法是共享的。而上面的工厂方法创建对象的时候要为每个对象创建各自私有的方法。同时由于为每个对象都创建逻辑相同的方法,浪费内存。
改进如下:
复制代码代码示例:
script type="text/javascript"
function createObj(name, age){
var obj = new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj; //返回对象
}
function showName(){ //函数也是一个对象
alert(this.name);
}
function showAge(){
alert(this.age);
}
var obj1 = createObj("Koji", 22);
var obj2 = createObj("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
/script
上面通过定义连个函数对象,解决了不同对象持有函数对象的私有问题。现在所有对象的方法都持有上面两个函数的引用。但这么一来的话,对象的函数又和对象成了相互独立,不相干的了。这和面向对象中特定方法属于特定类的思想不符合。
3、构造函数方式
复制代码代码示例:
script type="text/javascript"
//定义一个构造函数,用来生成对应的对象,可以类比Java中的构造函数
function Person(name, age){
//当调用new Person的时候,在执行第一行代码前,先生成一个Person对象,并将对象在内存中的
//索引赋值给this关键字,此时可以通过this关键字操作新生成的对象,如下面的添加属性或方法
this.name = name; //this关键字不能少。为当前对象,即this关键字引用的对象的name属性赋值
//,实际相当于为当前对象添加name属性后,再为其name属性赋值。
this.age = age;
this.showName = function(){ //为当前对象添加方法
alert(this.name);
}
this.showAge = function(){
alert(this.age);
}
//将当前对象返回给赋值符号左边的变量(不必明确使用return)
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
/script
构造函数的方式和工厂方式一样,会为每个对象创建独享的函数对象。当然也可以将这些函数
对象定义在构造函数外面,这样又有了对象和方法相互独立的问题。
原型方法:
该方法利用的对象的prototype属性
复制代码代码示例:
script type="text/javascript"
function Person(){} //定义一个空构造函数,且不能传递参数
//将所有的属性的方法都赋予prototype属性
Person.prototype.name = "Koji"; //添加属性
Person.prototype.age = 22;
Person.prototype.showName = function(){ //添加方法
alert(this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
var obj1 = new Person(); //生成一个Person对象
var obj2 = new Person();
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Koji
obj2.showAge(); //22
/script
当生成Person对象的时候prototype的属性都赋值给了新的对象。那么属性和方法是共享的。
该方法的问题首先是构造函数不能传参,每个新生成的对象都有默认值。其次,方法共享没有任何问题,但是属性共享就有问题,当属性是可改变状态的对象的时候。
例子:
复制代码代码示例:
script type="text/javascript"
function Person(){} //定义一个空构造函数,且不能传递参数
Person.prototype.age = 22;
Person.prototype.array = new Array("Koji", "Luo");
Person.prototype.showAge = function(){
alert(this.age);
}
Person.prototype.showArray = function(){
alert(this.array);
}
var obj1 = new Person(); //生成一个Person对象
var obj2 = new Person();
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj2.showArray(); //Koji,Luo,Kyo
/script
以上代码通过obj1向obj1的属性array添加元素的时候,obj2的arra属性的元素也跟着受到影响,原因就在于obj1和obj2对象的array属性引用的是同一个Array对象,那么改变这个Array 对象,另一引用该Array对象的属性自然也会受到影响混合的构造函数/原型方式。
使用构造函数定义对象的属性,使用原型(prototype)定义对象的方法,这样就可以做到属性私有,而方法共享。
例子:
复制代码代码示例:
script type="text/javascript"
function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array("Koji", "Luo");
}
Person.prototype.showName = function() {
alert(this.name);
}
Person.prototype.showArray = function() {
alert(this.array);
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
/script
属性私有后,改变各自的属性不会影响别的对象。同时,方法也是由各个对象共享。在语义上,
这符合了面相对象编程的要求。
4、动态原型方法
复制代码代码示例:
script type="text/javascript"
function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array("Koji", "Luo");
//如果Person对象中的_initialized为undefined,表明还没有为Person的原型添加方法
if (typeof Person._initialized == "undefined")
{
Person.prototype.showName = function() {
alert(this.name);
}
Person.prototype.showArray = function() {
alert(this.array);
}
Person._initialized = true; //设置为true,不必再为prototype添加方法
}
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
/script
这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中,同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次。
在实际应用中采用最广泛的是构造函数/原型方法。动态原型方法也很流行,它在功能上和构造函数/原型方法是等价的,不要单独使用构造函数或原型方法。
JS将对象中的数据存入一个数组
为了后端更好的处理数据,前端统一把数据放在一个数组里。那该如何存放在一个数组中呢?经过一方查找,测试得出如下:主要有两种方式:
通过合并(连接)现有数组来创建一个新数组
示例如下:
(在数组结尾处)向数组添加一个新的元素
示例如下:
打印结果如下:
如有其他需求可查询官方文档进行学习,对你有帮助的话 点个赞 在走吧
js怎么将数组拼接成对象,并且添加到另一个数组中去?
举个简单例子,希望你能明白,
1、下面输出结果是"jim",而不是"tom",
是因为数组中保存的都是指向json对象a的地址,
dd[0],dd[1],dd[2],dd[3]对象指向的内存地址相同,
当修改其中一个dd[0]的属性值的时候,数组所有元素指向的对象属性值都改变了。
var
dd
=
[];var
a
=
{
"cname":
"tom"
};for
(var
i
=
0;
i
4;
i++)
{
dd[i]
=a;}dd[0].cname
=
"jim";alert(dd[2].cname);2、下面输出结果是0,而不是1,
是因为数组元素dd[0],dd[1],dd[2],dd[3]对应的内存地址都不同,互不干扰。
var
dd
=
[];var
a
=
0;for
(var
i
=
0;
i
4;
i++)
{
dd[i]
=a;}dd[0]=1;alert(dd[2]);
希望对你有帮助!