js处理数组 ，对象 ，格式问题汇总（持续更新）

这里做下平时用到组件时 产生的问题记录

①. js从数组中的对象取出特定字段并生成新的数组及为改变原数组字段值

②. Object.keys() 获得对象属性名数组，以及属性对应的

③.向一个对象数组里面添加新的属性

④.将一个对象数组数据拿出来变成另一个对象

⑤.js 从一个数组中取出几个特定的字段组成新的数组

⑥.JS如何从一个数组中随机取出一个元素或者几个元素

⑦.js 将多个对象合并成一个对象 assign方法

⑧.js对象赋值给另一个含有相同key的的对象

⑨.js对象取值的两种方式（点和中括号）

⑩.从 URL 获取查询参数

①. js从数组中的对象取出特定字段并生成新的数组及为改变原数组字段值

let arr = [
  {
    'id': '1',
    'name': '小红',
  },
  {
    'id': '2',
    'name: '小白',
  },
  {
    'id': '3',
    'name': '小黄',
  }
];
// 使用map()生成数组
let new_arr = arr.map(obj => {return obj.name})
// 输出 ['小红','小白','小黄']

var  filters = arr.filter(item => {
    return item.id =  `${item.id}s`
})

console.log(filters)
// 输出 [
  {
    'id': '1s',
    'name': '小红',
  },
  {
    'id': '2s',
    'name: '小白',
  },
  {
    'id': '3s',
    'name': '小黄',
  }
];

②. Object.keys() 获得对象属性名数组，以及属性对应的值

• 该方法可获得对象的属性名，返回一个数组

Object.keys(arg)：

Object 是固定格式；

arg 是需要检测的对象；

var fruits = { first: "apple", second:"banana ",last: "banana",  },
 
Object.keys(fruits) // 返回数组： first,second, last

• 用Object.keys()方法获取属性对应的值

obj[Object.keys(arg)[i]]:

obj 是对象；

i 是属性的索引值

var fruits = { first: "apple", second:"banana ",last: "banana",  },
 
fruits[Object.keys(fruits)[0]] // 返回first 对应的属性值： apple

这里获取的是 fruits 这个对象第一个属性first 的值 :apple

③.向一个对象数组里面添加新的属性

---

var arry = [
        { a: 11, b: 22, c: 33, d: 44 },
        { a: 11, b: 0, c: 0, d: 44 },
        { a: 11, b: 22, c: 99, d: 99 },
      ];
      var arry2 = [];
      arry.map((item, index) => {
        arry2.push(Object.assign({}, item, { mess1: item.c, mess2: item.d }));
      });
      console.log(arry2);

④.将一个对象数组数据拿出来变成另一个对象

var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];
var arry2=[];
arry.map(((item, index)=> {
arry2.push(Object.assign({},{mess1:item.c,mess2:item.d}))
}))
console.log(arry2);

⑤.js 从一个数组中取出几个特定的字段组成新的数组

var productJson = [];
    res.forEach(function(item){
    productJson.push(
    	{ goodsId: item.goodsId, 
    	  productId: item.productId, 
    	  goodsNum: item.goodsNum
    	})
	})
console.log(productJson)

⑥.JS如何从一个数组中随机取出一个元素或者几个元素

⑦.js 将多个对象合并成一个对象 assign方法

接下来介绍一下ES6在Object新加的方法 assign()

• 作用：将多个对象{} 合并成一个独立对象。
• 使用方式: Object.assign(合并的对象，传入合并中的对象…)

 let user = {name:'无敌人',age:19};
 let page = {pageSize:10,currentPage:1};
 let newObj = {};
 
 Object.assign(newObj,user,page);

⑧.js对象赋值给另一个含有相同key的的对象

        let n = {
            a: '',
            b: '',
            c: ''
        }
        let m = {
            a: 'aaa',
            b: 'bbb',
            c: 'ccc',
            d: 'ddd'
        }
        Object.keys(n).forEach(key => {
            n[key] = m[key] || n[key]
        })
        console.log(n);

⑨.js对象取值的两种方式（点和中括号)

// 通过.的方式获取属性值 ，key是静态的
var obj = {name:"小太阳",age:18};
var name1 = obj.name;//使用点的方式

// 通过[]的方式获取属性值，key是动态的，可以是字符串，也可以是数字，还可以是变量
var obj1 = {"name":"小太阳","age":18};
var obj2 = {1: "使用", 2: "为使用"}
var attr1 = obj1["name"];//使用中括号的方式
var attr2 = obj1[1]; 

[]也可以通常用来匹配字典表  变量形式
   var statusData = {
      '0': {
        label: '未处理'
      },
      '1': {
        label: '已处理'
      },
      '2': {
        label: '已过期'
      }
    },
        <el-table-column
          prop="dealFlag"
          min-width="15%"
          label="状态">
          <template slot-scope="scope">
            <span >{{ scope.row.dealFlag ? statusData[(scope.row.dealFlag)].label : '' }}</span>
          </template>
        </el-table-column>

总结： 点和中括号方式的区别
1.点方法后面跟的必须是一个指定的属性名称，中括号里面可以是变量
2.中括号里面的属性可以是数字，点方法后面的属性名不能是数字
3.动态为对象添加属性是，只能用中括号

⑩.从 URL 获取查询参数

可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 轻松地从 url 检索查询参数

const getParameters = (URL) => {
  URL = JSON.parse(
    '{"' +
      decodeURI(URL.split("?")[1])
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  );
  return JSON.stringify(URL);
};

getParameters(window.location.href);
// Result: { search : "easy", page : 3 }