Object.keys、concat(Array)、assign(form,obj)、map()、forEach(fun)

一、在实际开发中,我们有时需要知道对象的所有属性,原生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)必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue必须。当前元素的值
index可选。当期元素的索引值
arr可选。当期元素属于的数组对象
thisValue可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"


    map()方法将调用的数组的每个元素传递给指定的函数,并返回一个数组,它包含该函数的返回值。

       传递给map()的函数的调用方式和传递给forEach()的函数的调用方式一样。但传递给map()的函数应该有返回值。注意:map()返回的是新数组:它不修改调用的数组。如果是稀疏数组,返回的也是相同方式的稀疏数组:它具有相同的长度,相同的缺失元素。

      举个例子:

      要求:为数组 arr 中的每个元素求二次方。不要直接修改数组 arr,结果返回新的数组 

      实现:

  1. function square(arr){  
  2.     return arr.map(function(item){  
  3.         return item*item;});  
  4. }  
  5. var arr=[1, 2, 3, 4];  
  6. console.log(square(arr));  
      结果:[1,4,9,16]

五、[].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



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页