一、在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组
- 传入对象,返回属性名
var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj)); //['a','b']
var obj1 = { 100: "a", 2: "b", 7: "c"};
console.log(Object.keys(obj1)); // console: ["2", "7", "100"]
var obj2 = Object.create({}, { getFoo : { value : function () { return this.foo } } });
obj2.foo = 1;
console.log(Object.keys(obj2)); // console: ["foo"]
- 传入字符串,返回索引
var str = 'ab1234';
console.log(Object.keys(obj)); //[0,1,2,3,4,5]
- 构造函数 返回空数组或者属性名
function Pasta(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.toString = function () {
return (this.name + ", " + this.age + ", " + this.gender);
}
}
console.log(Object.keys(Pasta)); //console: []
var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]
- 数组 返回索引
- var arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // console: ["0", "1", "2"]
二、concat(Array)方法
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
array1.concat([item1[, item2[, . . . [, itemN]]]])
说明
concat 方法返回一个 Array 对象,其中包含了 array1 和提供的任意其他项目的连接。
要加的项目(item1 … itemN)会按照从左到右的顺序添加到数组。如果某一项为数组,那么添加其内容到 array1 的末尾。如果该项目不是数组,就将其作为单个的数组元素添加到数组的末尾。
以下为从源数组复制元素到结果数组:
对于从正被连接到新数组的数组中复制的对象参数,复制后仍然指向相同的对象。不论新数组和源数组中哪一个有改变,都将引起另一个的改变。
对于连接到新数组的数值或字符串,只复制其值。一个数组中值有改变并不影响另一个数组中的值。
//concat()把两个或者多个数组链接在一起,但是不改变已经存在的数组 //而是返回一个链接之后的新数组 var a = [1,2,3]; a.concat([4,5]); console.log(a); //此处输出为 [1, 2, 3] var a = [1,2,3]; a = a.concat([4,5]); console.log(a); //此处输出为 [1, 2, 3 ,4 ,5]
三、assign(form,obj)
问题情况:将2个或2个以上对象(object{....})中的属性进行合并,即最后合并为一个object{.....}传递给后端。
问题场景:多页表单数据的一同提交
解决办法:Object.assign 方法
Object.assign(form, obj)----->Object.assign(目标对象, 被合并的对象)
<script>
let form = {name: 'liming', sex: '男'};
let obj = {class: '一班', age: 15};
console.log('before', form);
Object.assign(form, obj);
console.log('after', form);
</script>
四、map()
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
array.map(function(currentValue,index,arr), thisValue)
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
|
||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
map()方法将调用的数组的每个元素传递给指定的函数,并返回一个数组,它包含该函数的返回值。
传递给map()的函数的调用方式和传递给forEach()的函数的调用方式一样。但传递给map()的函数应该有返回值。注意:map()返回的是新数组:它不修改调用的数组。如果是稀疏数组,返回的也是相同方式的稀疏数组:它具有相同的长度,相同的缺失元素。
举个例子:
要求:为数组 arr 中的每个元素求二次方。不要直接修改数组 arr,结果返回新的数组
实现:
- function square(arr){
- return arr.map(function(item){
- return item*item;});
- }
- var arr=[1, 2, 3, 4];
- console.log(square(arr));
五、[].forEach(function(value,index,array){})
forEach是ES5中操作数组的一种方法,主要功能是遍历数组,例如:
1
2
|
var
arr = [1,2,3,4];
arr.forEach(alert);
|
等价于:
1
2
3
4
|
var
arr = [1, 2, 3, 4];
for
(
var
k = 0, length = arr.length; k < length; k++) {
alert(array[k]);
}
|
forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身
因此:
1
2
3
4
5
|
[].forEach(function(value,index,array){
//
code
something
});
|
等价于:
1
2
3
4
5
|
$.each([],function(index,value,array){
//
code
something
})
|
写一个例子;
1
2
3
4
5
6
|
var
arr = [1,2,3,4];
arr.forEach(
function
(value,index,array){
array[index] == value;
//结果为true
sum+=value;
});
console.log(sum);
//结果为 10
|