js map遍历 修改对象里面的值_js中那些方法不改变原来的数组对象

本文介绍了JavaScript中map、concat、slice以及filter、forEach、some、every等方法在遍历和修改数组时如何保持原数组不变。举例说明了这些方法的工作原理,强调了它们不会直接修改原数组,而是创建新的数组副本。同时,文章探讨了引用对象在这些方法中的行为,特别是当修改引用对象时,会影响到所有指向该对象的引用。

一、map方法

[javascript] view plain copy

function fuzzyPlural(single) {

var result = single.replace(/o/g, 'e');

//replace也不会修改原来数组的值,这里打印[foot,goose,moose,kangaroo]

//alert(single);

//下面为新的数组添加了一个元素,但是我们看到在map的时候没有对添加的元素进行处理,所以map调用的结果还是没有变化:["feet", "geese", "meese", "kangareese"]

//但是可以知道words结果已经变化了!

//words[4]="metoo";

//虽然下面通过修改length为3将数组截断了,从而相当于删除了第四个元素,但是map方法并不会检测到这种变化,所以在map方法调用的结果数组长度还是为4,只是最后一个元素变成了空了!但是这种删除会影响外层的words,使得他的长度变成了3!

//但是在具体的fuzzyPlural只会调用三次!(通过alert(single)就可以知道,因为这里已经把数组截断了,但是返回的数组长度还是4,一个为空!)

words.length=3;

if( single === 'kangaroo'){

result += 'se';

}

return result;

}

var words = ["foot", "goose", "moose", "kangaroo"];

alert(words.map(fuzzyPlural));

//map方法不修改原数组的值,words经过map调用以后,还是没有发生变化!

alert(words);

// ["feet", "geese", "meese", "kangareese"]

note:map方法的调用不会修改原来的数组,同时从上面分析来说replace方法也不会改变原来调用的字符串!同时我们上面用到了把length减少来删除数组元素的方法,但是这种方法比较笨拙,只能从数组尾部删除数据,同时数组也有delete删除方法,但是这种方法的不当之处在于他会在原来的数组中留下空洞,也就是原来的对象只是变成了undefined,而不是真正的删除。于是我们建议用splice方法,第一个参数是开始删除的下标,第二个参数是要删除的个数!同时要注意parseInt方法parseInt("1",0);会变成1!

二、concat方法

[javascript] view plain copy

var num1 = [1, 2, 3];

var num2 = [4, 5, 6];

var num3 = [7, 8, 9,"c"];

var nums = num1.concat(num2, num3);

//为老数组添加一个元素,看新数组是否会发生变化

//打印[1,2,3,4,5,6,7,8,9,c]

alert(nums);

num3[4]="xxxx";

//发现新数组没有发生变化

alert(nums);

//为num1添加一个元素

num1[3]="cccc"

//新数组也没有发生变化!

alert(nums);

note:对新数组的任何操作不会影响老数组,反之亦然!因为这个方法会创建当前数组的一个副本,然后将接受的参数添加到这个副本的末尾!所以互不影响!

三、slice方法

[javascript] view plain copy

// 使用slice方法从myCar中创建一个newCar.

var myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 } };

var myCar = [myHonda, 2, "cherry condition", "purchased 1997"];

var newCar = myCar.slice(0, 2);

// 输出myCar, newCar,以及各自的myHonda对象引用的color属性.

print("myCar = " + myCar.toSource());

print("newCar = " + newCar.toSource());

print("myCar[0].color = " + myCar[0].color);

print("newCar[0].color = " + newCar[0].color);

// 改变myHonda对象的color属性.

myHonda.color = "purple";

print("The new color of my Honda is " + myHonda.color);

//输出myCar, newCar中各自的myHonda对象引用的color属性.

print("myCar[0].color = " + myCar[0].color);

print("newCar[0].color = " + newCar[0].color);

note:slice不会修改原来的数组,但是如果slice得到的结果数组包含了引用对象,那么如果修改原来的引用对象,那么除了原来的对象被修改以外,通过slice获取的结果的数组也会发生变化,这就是引用对象在slice中的表现!同时在上面的这篇博客里面我们要学到可以把类数组对象转化为数组对象有三种方法,Array.prototype.slice.call和[].slice.call,以及slice=Function.prototype.call.bind(Array.prototype.slice)然后通过slice(arguments)来完成!第三种用法还有一种去除两端空格的方法,a.map(Function.prototype.call,String.prototype.trim)

四、filter,forEach,some,every(只要有一个元素不满足就会终止循环)等

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值