对象的基础用法和解构赋值

简介: 对象的基础用法和解构赋值

属性简写


let a = 1;
let obj = { a }
console.log(obj) //{a:1}


可计算的属性值


let count = 0
    function addcount(key) {
      return `${key}_${count++}`
    }
    const nameKey = 'name';
    const agekey = "age";
    const jobKey = "job";
    let person = {
      [addcount(nameKey)]: 'Matt',
      [addcount(agekey)]: 27,
      [addcount(jobKey)]: '小明'
    }
    console.log(person)   //{name_0:'Matt',age_1,27,job_2:'小明'}
    console.log(nameKey) //name、


简写的方法名


let obj2 = {
      // sayName: function (name) {
      //   console.log(name)
      // }
      // 简写
      sayName(name) {
        console.log(name)
      }
    }
    obj2.sayName('执行了')


解构赋值


可以设置默认值,对象中属性值为undefined或为空时,默认值生效


【注意】:直接解构null或undefined会抛出错误


数组解构赋值

let [a,b]=[1,2]
//交换两个变量的值
let[a,b]=[b,a]
//扩展运算符的运用
let[a,...b]=[1,2,3] 
//有默认值  右侧的参数等于undefined,默认值生效
let[a=3,b]=[1,2]

对象解构赋值

let {a,b}={a:1,b:2} 
//等价于
let {a:a,b:b}={a:1,b:2};
let{a,...b}={a:1,b:2,c:3}

嵌套解构

可以通过嵌套解构复制对象数组


let person = {
      name: '小红',
      age: 12,
      say: {
        talk: '脱口秀'
      }
    };
    let personCopy = {};
    ({ name: personCopy.name, age: personCopy.age, say: personCopy.say } = person)
    console.log(personCopy)
    let { say: { talk } } = person;
    console.log(talk)   // "脱口秀"

参考上下文匹配

//在参数列表中进行解构赋值
    let person = {
      name: '小红',
      age: 12
    };
    function woman(color, { name, age }, sex) {
       //对参数解构赋值不会影响arguments对象
      console.log(arguments)
      console.log(name, age)
    }
    woman('red', person, '女')
相关文章
|
7月前
|
JavaScript 前端开发
变量和对象的解构赋值
变量和对象的解构赋值
41 0
|
29天前
|
JavaScript 前端开发
如何使用解构赋值来处理具有默认值的函数?
使用解构赋值来处理具有默认值的函数,可以使函数的参数和返回值更加灵活和易于使用,提高代码的可读性和可维护性,同时也减少了因参数缺失或返回值不完整而导致的错误。
54 7
|
1月前
解构赋值时如果数组元素的值是对象,如何进行解构赋值?
【10月更文挑战第30天】当数组元素的值是对象时,解构赋值提供了一种方便灵活的方式来提取和使用对象的属性值,通过不同的组合和嵌套方式,可以满足各种复杂的数据结构处理需求,使代码更加简洁和易读。
|
1月前
|
JavaScript 前端开发 网络架构
数组解构赋值时,对变量的命名有什么要求?
【10月更文挑战第30天】数组解构赋值对变量命名的要求主要是遵循JavaScript标识符的命名规则,以及与数组元素位置的对应关系。合理的变量命名可以使代码更加清晰易懂,提高代码的可读性和可维护性。
|
1月前
多层嵌套对象的解构赋值时,如果对象的属性名相同怎么办?
在多层嵌套对象的解构赋值中遇到属性名相同时,使用别名是一种有效的解决方法,它能够帮助我们准确地提取和使用对象中的数据,避免变量名冲突,提高代码的质量和可维护性。
52 7
|
1月前
解构赋值时如果数组元素的值是嵌套对象,如何进行解构赋值?
【10月更文挑战第30天】可以灵活地对数组中包含嵌套对象的元素进行解构赋值,根据具体的需求提取出所需的值,从而使代码更加简洁、清晰,提高代码的可读性和可维护性。
|
2月前
|
JavaScript 前端开发
解构赋值及其原理
解构赋值及其原理
49 0
|
7月前
|
移动开发 前端开发 JavaScript
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
77 1
对象定义-解构-枚举属性遍历以及对象内函数
对象定义-解构-枚举属性遍历以及对象内函数
77 0