js给对象添加变量属性 & js 更改对象中的属性名 & 数组对象中每个对象添加一个字段-map用法和forEarch用法

最新推荐文章于 2024-07-24 16:25:35 发布

viceen

最新推荐文章于 2024-07-24 16:25:35 发布

阅读量9.8k

点赞数 5

分类专栏： js知识文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117077520

版权

js知识专栏收录该内容

152 篇文章 13 订阅

订阅专栏

js给对象添加变量属性 & js 更改对象中的属性名 & 数组对象中每个对象添加一个字段-map用法和forEarch用法

1、js给对象添加变量属性

1、js创建一个对象或者在原有对象上添加一个已知属性，并给这个属性赋值，写法如下：

let obj = {'a1':'a1'};
obj['a2'] = 'a2';
console.log(obj);//输出{'a1':'a1','a2':'a2'};

2、添加一个变量属性，并赋值变量，写法如下：

function add(name,value){
    let obj = {"a1":"a1"};
    obj[name] = value;//返回参数
    console.log(obj);//{"a1":"a1","b1":"b1"}
}
add("b1","b1");

3、js 更改对象中的属性名

const json = JSON.parse(JSON.stringify(options).replace(/name/g,"label"));

注：

1、options是需要更改属性的对象

2、replace(/name/g,“label”) ，将对象里所有属性为name的都修改成label

2、js把数组里面的所有对象合并成一个对象

let obj = [{
         name1: '张三',
         age1: "12"
    },
    {
         name2: '李四',
         age2: "14"
    },
    {
         name3: '王五',
         age3: "30"
    }
]

let newObj = {} // 新建一个对象

obj.forEach((item) => {
    newObj = {
         ...newObj,
          ...item
    } // 要把自己放进去
})
console.log(newObj) // { name1: "张三", age1: "12", name2: "李四", age2: "14", name3: "王五", age3: "30" }

3、数组对象中每个对象添加一个字段

小案例

let arr = [{
     'name': 'aa',
     'age': 10
   },
   {
      'name': 'bb',
      'age': 12
   }
]
let newArr = []
    arr.map((item, index) => {
    newArr.push(
        Object.assign({}, item, {
             id: index
        })
    )
})


console.log(arr) // [ {'name': 'aa', 'age': 10},{'name': 'bb', 'age': 12}]
console.log(newArr)
        // [ {name: "aa", age: 10, id: 0},{name: "bb", age: 12, id: 1}]

详解

将数组对象中每一个对象添加一个字段

let arr = [
    {name: 'lilei',age: '25'},
    {name: 'nike',age: '23'},
    {name: 'alisa',age: '23'}
]

使用Array map()方法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值，有三个参数
1、currentValue 必须。当前元素的值
2、index 可选。当前元素的索引值
3、index 可选。当前元素属于的数组对象

let _arr = []
arr.map((item, index) => {
	_arr.push(Object.assign({},item,{sex: 'men'}))
}))
//  _arr返回结果
[
   {name: 'lilei',age: '25',sex: 'men'},
   {name: 'nike',age: '23',sex: 'men'},
   {name: 'alisa',age: '23',sex: 'men'}
]

小案例

 let arr = [23, 31, 60, 88, 90, 108, 260]
        /* 1. 需求：数组中的每一个元素+1 */
        let arr1 = arr.map((value, index) => {
            return value + 1 //让每个元素的值+1
        })
        console.log(arr1); //) [24, 32, 61, 89, 91, 109, 261]

        /* 2.需求：超过100的商品打八折 */
        let arr2 = arr.map((value, index) => {
            if (value > 100) {
                return value * 0.8

            } else {
                return value;
            }
        })
        console.log('arr2', arr2); // [23, 31, 60, 88, 90, 86.4, 208]

使用Array forEach()方法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
1、currentValue 必须。当前元素的值
2、index 可选。当前元素的索引值
3、index 可选。当前元素属于的数组

arr.forEach((value , index) => {
	value['sex'] = 'men'
})
//  返回原数组arr
[
   {name: 'lilei',age: '25',sex: 'men'},
   {name: 'nike',age: '23',sex: 'men'},
   {name: 'alisa',age: '23',sex: 'men'}
]

综合实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script>
        let arr = [{
                'name': 'aa',
                'age': 10
            },
            {
                'name': 'bb',
                'age': 12
            }
        ]
        let newArr = []
        arr.map((item, index) => {
            newArr.push(
                Object.assign({}, item, {
                    id: index
                })
            )
        })



        console.log(arr) // [ {'name': 'aa', 'age': 10},{'name': 'bb', 'age': 12}]

        console.log(newArr)
        // [ {name: "aa", age: 10, id: 0},{name: "bb", age: 12, id: 1}]

        let ary = [{
                name: 'lilei',
                age: '25'
            },
            {
                name: 'nike',
                age: '23'
            },
            {
                name: 'alisa',
                age: '23'
            }
        ]
        ary.forEach((value, index) => {
            value['sex'] = 'men'
        })
        console.log(ary)
    </script>
</body>

</html>