react-------JS对象、数组方法实际应用集合

目录

1、向空对象里添加键值对

 2、js在数组对象中添加和删除键值对（对象属性）的方法

 3、对已有的数据更换键值对的属性名

 4、js字符串拼接、数组转字符串

 5、从数组中提取元素

  6、js数组方法: JS数组方法(详细)

7、js 数组对象互转

7.1 数组转为对象

7.2  对象转数组

---

1、向空对象里添加键值对

对象的属性可以使用[ ] 或者 .      而数组只能使用 [index]

const value = {}
value['a'] = 1
value['b'] = 2
console.log(value) //  { a:1, b:2 }


const obj = {}
obj['user']='admin'
obj['password']='123456'
console.log(obj) //  { user:'admin', password:'123456' }


const result = {
    index: 20,
    person:[
      {
        id: '1',
        name: 'xx',
      },
      {
        id: '2',
        name: 'vv',
      }
    ]
}
// 取出第二个name的值
resule.person[1].name  或者  result['person'][1]['name']


const v = {}
v.a = '123'
v.b = '你好'
console.log(v) //  { a:'123', b:'你好' }

 2、js在数组对象中添加和删除键值对（对象属性）的方法

2.1  添加

1.Object.assign()：用法-Object.assign(源对象, {要添加的键值对})

        Object.assign的用法

2.拓展运算符（...）：用于取出参数对象所有可遍历属性然后拷贝到当前对象

1、// 注意：
    // 1、源对象属性与目标对象属性不同，则会被拷贝到目标对象中；
    // 2、如果目标对象和源对象有相同的属性，目标对象的属性值会被源对象的属性值覆盖掉；
    // 3、如果有多个源对象有相同的属性，那么目标对象的属性将会被最后一个源对象属性覆盖。
    
    const target = { a: 1, b: 2 };
    const source1 = { b: 4, c: 5 };
    const source2 = { b: 6, c: 7 };
    const obj = Object.assign(target,source1);
    const object = Object.assign(target,source1,source2);
    
    console.log(obj );    // { a: 1, b: 4, c: 5 }
    console.log(object ); // { a: 1, b: 6, c: 7 }
    

2、// 拓展运算符：
    
    let obj = {a: '1', b:'2'}
    let obj1 = {...obj, c: '3'}

2.2  删除

1. 将属性设置为 undefined: 属性本身仍将存在于对象中，它还会改变原始对象。
2. 使用 delete 操作符: delete 将完全从对象中删除属性，会导致原始对象的发生改变，但速度很慢。
        delete操作符移除对象指定属性，删除成功返回true，否则返回false。
        删除的属性不存在，delete不会起任何作用 ，但是仍会返回true。
        如果原型链有同名属性，只会删除自身的属性。
        delete不能删除全局作用域函数以及作用域中用let或const声明的属性。
        delete可以删除对象的函数。
        不可设置属性不能被删除。比如Math、Array、Object内置对象属性以及使用Object.defineProperty()方法设置的属性。
3. 使用对象解构：通过用展开运算符(…)可以将需要省略特定属性的对象解构到新对象。这个技巧在需要删除多个属性时特别有用，并且不会更改原始对象。

const { gender, ...newPet } = pet; //newPet为删除后的
4.使用Reflect：ES6新增的方法，Reflect.deleteProperty(对象，属性名)，返回一个布尔值。

Reflect.deleteProperty(pet, 'gender')

1、 const a = {b: '1'}
    a.b = undefined
    console.log(a)  // { b: undefined }
    
    delete a.b
    console.log(a)  // {}


    const c = {b: '1'}
    Reflect.deleteProperty(c, 'b')
    console.log(c)  // {}

 3、对已有的数据更换键值对的属性名

const obj = {}
// selectValues 是个非空数组 
// selectValues = [{ deptName: 'ni', deptId: '123' }, { deptName: 'hao', deptId: '01256987' } ]
// 要求更换键值对 中 键的名字，值不变（给键值对啊更换属性名）
selectValues && selectValues .map((item) => {
    obj .push({
        name: item.deptName,
        id: item.deptId,
    })
}
console.log(selectValues ) // [{ name: 'ni', id: '123' }, { name: 'nihao', id: '01256987'}]

 4、js字符串拼接、数组转字符串

const a = [{name: 'xx', age: '15'}, {name: 'nn', age: '7'}, {name: 'vv', age: '14'}, {name: 'tt', age: '15'}]

let str = ''
if(a && a.length > 0){
    a.map(item => {
        str += item.name + '、'
    }
    str = str.substring(0, str.length - 1)

}
console.log(str)  // 'xx'、'nn'、 'vv'、'tt'

// 应用： 如果后端返回一个数组，我们回显到输入框上只显示名字
-----------------------------------------------------------------------------------------


const formArr = ["科比", "麦迪", "卡特", "艾弗森"]
let str = "";
    for (let i = 0; i < formArr.length; i++) {
      str += formArr[i] + ",";
    }
    a= str.substring(0, str.length - 1);
    console.log(a,'a') // 科比,麦迪,卡特,艾弗森

-----------------------------------------------------------------------------------------
const a = formArr.toString()
console.log(a,'a') // 科比,麦迪,卡特,艾弗森

-----------------------------------------------------------------------------------------
const a = formArr.toLocaleString()
console.log(a,'a') // 科比,麦迪,卡特,艾弗森

-----------------------------------------------------------------------------------------
const a = formArr.join('&')
console.log(a,'a') // 科比&麦迪&卡特&艾弗森

 5、从数组中提取元素

        5.1  基于数组下标提取元素

const value= ['a', 'b', 'c']
const s = value[0]
console.log(s) // 'a'

        5.2   基于ES6 新语法(const) 提起数组元素

const value= ['a', 'b', 'c']
const[one] = value
console.log(one) // 'a'

        5.3  从数组中提取连续多个元素

const value= ['a', 'b', 'c']
const[one, two] = value
console.log(one) // 'a'
console.log(two) // 'b'

        5.4  向数组中添加新元素

const value= ['a', 'b', 'c']
const[one, two, three, four='d'] = value
console.log(one) // 'a'

console.log(value) // ['a', 'b', 'c', 'd']

        5.5  跳过数组中的元素

const value = ['a', 'b', 'c', 'd']
const[first, , third] = value
console.log(first)  // 'a'
console.log(third)  // 'c'

        5.6  分配数组中剩下的元素给某元素

const value = ['a', 'b', 'c', 'd']
const[first, ...res] = value
console.log(first)  // 'a'
console.log(res)  // ['b', 'c','d']

        5.7  数组中嵌套对象

const person = {
    'name': 'xx',
    'age': 20,
    'facts':{
        'hobby': '读书、运动',
        'worker': 'vv'
    }
}
const{facts:{address='中国'}} = person
console.log(address) // 中国
console.log(person ) // {'name': 'xx','age': 20,'facts':{'hobby': '读书、运动','worker': 'vv','address': '中国' }}

 6、js数组方法: JS数组方法(详细)

reduce()方法

7、js 数组对象互转

7.1 数组转为对象

1、Object.assign()

// 转为对象
let array = [1,2,3,4,5];
let  obj ={};  // 声明一个空对象

Object.assign()
obj = Object.assign({}, array)
console.log(obj);   // {1,2,3,4,5}

2、Object.fromEntries方法

const newArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
]
Object.fromEntries(newArray)
{key 1: 'value 1', key 2: 'value 2'}

3、Map方法

const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
])
Object.fromEntries(map) // { key 1: "value 1", key 2: "value 2"}




// 或者我们可以使用实例方法 set
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

Object.fromEntries(map) // { key 1: "value 1", key 2: "value 2"}

4、Reduce方法

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

//这个方法好用！
function toObject(a) {
  return Array.from(a).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value }),
    {}
  )
}

toObject(array) // { key1: 'value1', key2: 'value2' }
toObject(map) // { key1: 'value1', key2: 'value2' }




//或者
const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
])

 // reduce: 用于计算数组每一项求和， 1. 接受两个参数：第一个参数：每次遍历都会调用的函数，而这个函数有接收四个参数，分别是：前一个值、当前项、项目的索引和数组对象，而这个函数的返回值，回传给下一次遍历时，执行的这个方法的第一个参数。

// 第二个参数：归并基础的初始值

let arr = [1,2,3,4,5]
 arr.reduce((prev,cur)=>{
      return prev+cur
 })

// reduce（）方法中，只传了第一个参数，也就是只传了一个函数，但第二个参数、初始值没有传，第一次循环，prev的值，默认为第一项=1，而cur为第二项=2，会return 1+2
// 这个时候，第一次循环返回的结果=3,会传给下一次循环中方法的第一个参数，也就是说，第二次循环方法中prev的值=3，是第一次循环方法返回的结果

7.2  对象转数组

5、Object.entries方法

const object = { key1: 'value1', key2: 'value2' }
const array = Object.entries(object) // [ ["key1", "value1"], ["key2", "value2"] ]