相关咨询

FULLY MATCH ENTE

最新文章

推荐文章

web前端技术分享:常用的js语法!

1、提取数组对象中的某个属性值,并返回一个新数组


//实例一:单纯的提取数组对象中的某个属性值,返回一个数组var detailList = [

        {          id:1,          name:'张三'

        },

        {          id:2,          name:'李四'

        },

        {          id:3,          name:'王五'

        },

      ]var result = detailList.map(function(item) {               return item.name;

  });console.log(result, '新数组');//['张三','李四','王五']//实例二:提取数组对象中的某个属性值,并返回一个带有属性名的新数组var detailList = [

        {          id:1,          name:'张三'

        },

        {          id:2,          name:'李四'

        },

        {          id:3,          name:'王五'

        },

      ]var result = detailList.map(item =>({    bossName:item.name,    bossId:item.id

}))console.log(result, '新数组');//[{bossName:'张三',bossId:1},{bossName:'李四',bossId:2},{bossName:'王五',bossId:3}]1234567891011121314151617181920212223242526272829303132333435363738394041


2、判断数组对象中是否存在某个属性值


var list = [

    {

          id:1,

          name:'张三'

        },

        {

          id:2,

          name:'李四'

        },

        {

          id:3,

          name:'王五'

        },

]var result = list.some(function (item) {                if(item.name==='李四'){                    return true

                }

              })


  console.log(result) //true/false123456789101112131415161718192021


3、根据数组对象中的某个属性值,取它整个对象


var list = [

    {          id:1,          name:'张三'

        },

        {          id:2,          name:'李四'

        },

        {          id:3,          name:'王五'

        },

]  var result = list.find(item=>item.name==='李四')  var id = result && result.id  console.log(id) //2123456789101112131415161718


4、替换数组对象中的某个属性值


data:[

{name: 'xxx', status: 0},

{name: 'xxx', status: 1},

{name: 'xxx', status: 0},

{name: 'xxx', status: 1},

]


data.forEach(item => { if (item.status === 0) {

// 'status'为属性名,'非活动'为修改后的内容 

item.status = '非活动'

} else if (item.status === 1) {

item.status = '活动'

}

})12345678910111213141516


5、向数组对象中添加属性


//实例:适合做购物车勾选商品的勾选状态//接口返回的商品列表数据listlet arr = this.listlet curData = []

arr.forEach((item, index) => {

    curData.push(Object.assign({}, item, { 'selected': true }))

  })this.list = []this.list = curData// console.log(this.list, '新增属性')12345678910


下面说说理论知识:


find():返回通过测试的数组的第一个元素的值


在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。


语法:


array.find(function(value, index, arr),thisValue)

1


value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值


返回值:返回符合测试条件的第一个数组元素的值,如果没有符合条件的则返回undefined。


 var arr = [1,2,3,4,5,6,7]; 

var ar = arr.find(function(elem){     

  return elem>5;

 }); 

  console.log(ar);//6

  console.log(arr);//[1,2,3,4,5,6,7]

  123456


find()方法为数组中的每个元素都调用一次函数执行,当数组中的元素在测试条件时返回true,find()返回符合条件的元素,之后的值不会再执行函数。如果没有符合条件的元素则返回undefined。


filter():创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素


filter遍历的元素范围在第一次调用 callback之前就已经确定了。在调用filter之后被添加到数组中的元素不会被filter遍历到。如果已经存在的元素被改变了,则他们传入callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。


语法:


array.filter(function(value, index, arr),thisValue)

1


value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值


返回值:返回数组,包含了符合条件的所有元素,如果没有符合条件的则返回空数组


 var arr = [1,2,3,4,5,6,7]; 

 var ar = arr.filter(function(elem){     

    return elem>5;

 }); 

    console.log(ar);//[6,7]

    console.log(arr);//[1,2,3,4,5,6,7]

    123456


map():返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,map()方法按照原始数组元素顺序依次处理元素


map方法会给原数组中的每个元素都按顺序调用一次callback函数,callback每次执行后的返回值(包括undefined)组合起来形成一个新数组。callback函数只会在有值的索引上被调用,那些从来没被赋过值或者使用delete删除的索引则不会被调用。


使用map方法处理数组时,数组元素的范围是在callback方法第一次调用之前就已经确定了。在map方法执行的过程中,原数组中新增加的元素将不会被callback访问到,若已经存在的元素被改变或删除了,则他们传递到callback的值是map方法遍历到他们的那一刻的值,而被删除的元素将不会被访问到。


语法:


array.map(function(value, index, arr),thisValue)

1


value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值


返回值:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值


 var arr = [1,2,3,4,5,6,7]; 

 var ar = arr.map(function(elem){    

     return elem*4;

 }); 

     console.log(ar);//[4, 8, 12, 16, 20, 24, 28]

     console.log(arr);//[1,2,3,4,5,6,7]

     123456


forEach():用于调用数组每个元素,并将元素传递给回调函数(注意没有办法跳出或终止forEach语句,除非抛出异常)


forEach 遍历的范围在第一次调用 callback前就会确定。调用forEach 后添加到数组中的项不会被callback访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach遍历到他们那一刻的值。已删除的项不会被遍历到


语法:


array.forEach(function(value, index, arr),thisValue)

1


value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值


返回值:undefined


 var arr = [1,2,3,4,5,6,7]; 

 var sum = 0; 

 var ar = arr.forEach(function(elem){

    sum+=elem*4;

 }); 

 console.log(ar);//undefined

 console.log(arr);//[1,2,3,4,5,6,7]

 console.log(sum);//112

 12345678


forEach()返回值为undefined,里面即便有return语句,返回值依然是undefined


总结:


从上面的内容我们可以看出,上面的四个语法以及参数的意义是一样的,而且都不会对空数组进行检测,也不会改变原始数组


现在说说各自的意义:


find()方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined)


filter()方法主要用来筛选数组中符合条件的所有元素,并且放在一个新数组中,如果没有,返回一个空数组


map()方法主要用来对数组中的元素调用函数进行处理,并且把处理结果放在一个新数组中返回(如果没有返回值,新数组中的每一个元素都为undefined)


forEach()方法也是用于对数组中的每一个元素执行一次回调函数,但它没有返回值(或者说它的返回值为undefined,即便我们在回调函数中写了return语句,返回值依然为undefined)