精华内容
下载资源
问答
  • js对象解构赋值
    2022-02-25 15:09:34
    // 简单地说,对象的解构赋值就是使用与对象匹配的结构来实现对象属性的赋值
    // (实际就是用对象中的属性为变量赋值)。
    
    // 不使用对象解构
    let person = {name: 'Jack', age: 22}
    let personName, personAge
    personName = person.name
    personAge = person.age
    console.log(personName) // 'Jack'
    console.log(personAge) // 22
    
    // 使用对象解构
    let person = {name: 'Jack', age: 22}
    let {name: personName, age: personAge} = person
    console.log(personName)
    console.log(personAge)
    
    // 如果想让变量直接使用属性的名称,可以使用简写语法
    let person = {name: 'Jack', age: 22}
    let {name, age} = person
    console.log(name) // 'Jack'
    console.log(age) // 22
    
    // 当解构出的属性在对象中不存在时,则对应变量的值就是undefined
    let person = {name: 'Jack', age: 22}
    let {name, age, job} = person
    console.log(name) // 'Jack'
    console.log(job) // undefined
    
    // 在解构的同时定义默认值,适用于解构出的属性不存在于源对象中的情况
    let person = {name: 'Jack', age: 22}
    let {name, age, job='software engineer'} = person
    console.log(name)
    console.log(job)
    
    // 在函数参数列表中也可以进行解构赋值,对参数的解构赋值不会影响arguments对象
    let person = {name: 'Jack', age: 22}
    function printPerson(foo, {name, age}, bar) {
        console.log(arguments)
        console.log(name, age)
    }
    printPerson('1st', person, '2nd') // {"0":"1st","1":{"name":"Jack","age":22},"2":"2nd"}  'Jack' 22
    
    

    更多相关内容
  • JS 对象解构赋值

    2021-07-29 10:32:29
    结构赋值:顾名思义,就是先把对象结构拆开,然后再获取到属性值,把值赋值给变量使用,例子如下: <... <head> <meta charset="UTF-8" />...js对象结构赋值</title> </head> <body&g

    结构赋值:顾名思义,就是先把对象结构拆开,然后再获取到属性值,把值赋值给变量使用,减少代码编写量,例子如下:

    <html>
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>js对象结构赋值</title>
    </head>
    
    <body>
    
    </body>
    <script>
        var obj = {
            name: "李四",
            age: "20",
        }
        var { name: a, age: b } = obj
        console.log(a, b); //李四 20
        //含义是从obj对象中找到name,age属性,分别赋值给a,b;
    
        //以上写法也可以简写如下:
        var { name, age } = obj; //等价于var { name:name, age:age } = obj;
        console.log(name, age); //李四 20
    
    
        //嵌套对象结构赋值如下:
        var obj = {
            name: "张三",
            age: "18",
            newObj: {
                sex: "男",
                hobby: "shopping"
            }
        }
        var { newObj } = obj;
        var { sex, hobby } = newObj;
        console.log(sex, hobby); //男 shopping
    
        //以上写法也可以简写如下:
        var { newObj: { sex, hobby } } = obj
        console.log(sex, hobby); //男 shopping
    </script>
    
    </html>
    
    展开全文
  • js笔记-对象解构赋值

    2022-02-15 10:56:27
    然后,是使用对象解构的: // 使用对象解构 let person = { name: 'Matt', age: 27 }; let { name: personName, age: personAge } = person; console.log(personName); // Matt console.lo.
     personAge = person.age; 
    console.log(personName); // Matt 
    console.log(personAge); // 27 
    然后,是使用对象解构的:
    // 使用对象解构
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    let { name: personName, age: personAge } = person; 
    console.log(personName); // Matt 
    console.log(personAge); // 27
    
     name: 'Matt', 
     age: 27 
    }; 
    let { name, age } = person; 
    console.log(name); // Matt 
    console.log(age); // 27
    
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    let { name, job } = person; 
    console.log(name); // Matt 
    console.log(job); // undefined
    
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    let { name, job='Software engineer' } = person; 
    console.log(name); // Matt 
    console.log(job); // Software engineer
    
    解构并不要求变量必须在解构表达式中声明。不过,如果是给事先声明的变量赋值,则赋值表达式
    必须包含在一对括号中:
    let personName, personAge; 
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    ({name: personName, age: personAge} = person); 
    console.log(personName, personAge); // Matt, 27
    
     name: 'Matt', 
     age: 27, 
     job: { 
     title: 'Software engineer' 
     } 
    }; 
    // 声明 title 变量并将 person.job.title 的值赋给它
    let { job: { title } } = person; 
    console.log(title); // Software engineer
    
    展开全文
  • JavaScript解构赋值

    2022-01-16 21:11:25
    JavaScript解构赋值 数组解构赋值 对象解构赋值 字符串解构赋值


    1. 什么是解构赋值 ?

    将属性/值从对象/数组中取出,赋值给其他变量

    通俗来说,即解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量。

    让我们通过一个例子看看:

    const [a, b, c] = [1, 2, 3];
    console.log(a, b, c);
    

    在这里插入图片描述
    将数组的值获取出来,赋值给a, b, c


    2. 数组的解构赋值

    • 模式(结构)匹配
      即左边与右边的结构相同 (如左边是数组,右边也要是数组)

    • 索引值相同的完成赋值
      即左边与右边的索引值相同的完成赋值

    通过例子来理解一下:

    • 对于第一个:
    let [e, [ , , f], g] = [1, [2, 4, 5], 3]; // 可以正确输出
    console.log(e, f, g);  
    

    在这里插入图片描述

    但是如果写成这样,则会报错。

    let [e, [ , , f], [g]] = [1, [2, 4, 5], 3];
    console.log(e, f, g);
    

    在这里插入图片描述
    因为左边与右边的结构不匹配,右边索引为 2 的地方是个 3,而左边是个数组,无法完成匹配。

    • 对于第二个
    let [, a, ] = [1, 2, 3];
    console.log(a);
    

    索引值相同的完成赋值,a的索引值是 1,对应右边索引值为 1 的值是 2,所以a = 2


    2.1) 数组解构赋值的默认值

    const [a, b] = [];
    console.log(a, b);
    

    在这里插入图片描述
    当左边对应的索引在右边为undefined时(如右边不存在这个值的情况),此时赋值的是undefined

    • 那我们如何修改这个赋值呢 ?
      通过在左边给变量写个 = 想要的值,即默认值。

    所以,当左边的值=== undefined时,如果有默认值,左边的值会等于默认值

    const [a = 1, b = 2] = [];
    console.log(a, b);
    

    在这里插入图片描述

    2.2) 数组解构赋值的应用

    类数组中的应用

    • 比如arguments中的应用

    arguments中的值提取出来

    function fun() {
        const [a, b, c] = arguments;
        console.log(a, b);
    }
    
    fun(1, 2, 3, 4);
    

    在这里插入图片描述

    • 比如NodeList中的应用

    在这里,将p元素提取出来

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>解构赋值的应用</title>
    </head>
    <body>
        <p>one</p>
        <p>two</p>
        <p>three</p>
        <script>
        	// 利用数组解构赋值将 p 元素获取的同时解构出来
        	const [p1, p2, p3] = document.querySelectorAll('p');
        	console.log(p1, p2, p3);
    	</script>
    </body>
    </html>
    

    在这里插入图片描述

    交换变量的值

    let a = 1, b = 2;
    [a, b] = [b, a]; // 相当于 [a, b] = [2, 1];
    console.log(a, b);
    

    在这里插入图片描述


    3. 对象的解构赋值

    • 模式(结构)匹配
      即左边与右边的结构相同 (如左边是对象,右边也要是对象)

    • 属性名相同的完成赋值
      即左边与右边的属性名相同的完成赋值

    通过例子来理解一下:

    const {val, objName} = {objName: "object", val: 1};
    console.log(objName, val);
    

    在这里插入图片描述
    属性名相同的完成赋值,不用管左边属性名出现的顺序是否与右边出现的顺序一致。

    • 这里还可以这么写,给新的变量名赋值:
    const {val: vvv, objName: objnnn} = {objName: "object", val: 1};
    console.log(objnnn, vvv);
    

    在这里插入图片描述

    3.1) 对象解构赋值的默认值

    与数组解构赋值类似

    • 对象的属性值=== undefined时,如果有默认值,等于对应的默认值
    const {age: val = 18} = {};
    console.log(val);
    

    在这里插入图片描述

    3.2)对一个已声明的变量解构赋值

    在数组中,我们可以直接这么写:

    let a, b;
    [a, b] = [1, 2];
    console.log(a, b);
    

    在这里插入图片描述
    但是,在对象中,直接这么写则会报错

    let a, b;
    {a, b} = {a: 1, b: 2};
    console.log(a, b);
    

    在这里插入图片描述
    因为在这里,左边的花括号,浏览器会把它当成是一个代码块。

    • 那么,我们如何解决这个问题呢 ?
      在外面加个圆括号
    let a, b;
    ({a, b} = {a: 1, b: 2});
    console.log(a, b);
    

    在这里插入图片描述

    • 除此之外,对象的解构赋值可以取到继承的属性!

    4. 字符串的解构赋值

    可以用数组和对象的形式进行结构赋值

    const [a, b] = "Hello";
    // 左边对象的属性名对应右边字符串的字符下标序号
    const {2: c, 4: e} = "Hello";
    console.log(a, b, c, e);
    

    在这里插入图片描述

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Do.
  • JavaScript 解构赋值

    2022-03-02 19:11:25
    解构赋值解构赋值解构数组解构对象总结 解构赋值 解构赋值就是把数据结构分解,然后给变量进行赋值 在ES6中 允许从数组和对象中提取值 按照对应位置 对变量赋值 利用解构赋值 我们可以更加方便的取用对象或者数组中...
  • js常用对象解构赋值

    千次阅读 2019-10-30 10:29:53
    基本类型的包装对象 “包装对象”对于每种基本类型调用都是不同的,如String, Number, Boolean 和 Symbol。...数字类型–JavaScript中所有的数字都以64位格式IEEE-754存储 <script> let n...
  • ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程。 一、字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始值可以...
  • Es6对象解构赋值

    2022-03-26 16:45:32
    对象解构与简单写法
  • 1解构赋值 ①定义.解析某一数据结构,将我们想要的东西提取出来,赋值给变量或者常量 ②应用场景:交换变量的值;从函数返回多个值,可以返回一个数组,也可以返回一个对象;函数参数的定义,方便将一组参数与变量...
  • js ES6之解构赋值

    2020-07-15 08:06:18
    目录 解构赋值 1、数组的解构赋值 (1)、基本的数组解构赋值 (2)、 嵌套的数组解构赋值 (3)、带默认值的数组解构赋值 ...(4)、数组的剩余运算解构赋值 ...(5)、Set 结构使用数组的...(7)、对象解构赋值独..
  • ES6 数组对象解构赋值 其他类型的解构赋值
  • 对象解构 let {a1,b2} = {a1:.., b2:...} let Menu ={title:'番茄炒蛋',price:12,} let {title , price} = Menu console.log(title);//番茄炒蛋 console.log(price);//12 若把一个属性赋值给另一个名字的变量,...
  • ES6 语法中,可以对对象进行解构赋值。 例如从对象obj上拿到c的值,一般地,我们习惯于这样写: const obj = { a: { b: { c: 1 } } }; const { c } = obj.a.b; 还可以这样写,连续解构: const obj = { a: { b: { c...
  • 对象解构赋值详解

    2020-09-12 22:43:18
    */ // 注意点: 在对象解构赋值中, 左边的变量名称必须和对象的属性名称一致, 才能解构出数据 //let {a, b} = {name: "lnj",age: 34}; //console.log(a, b); // undefined undefined let {age} = {name: "lnj",age: ...
  • 数组、对象解构赋值

    千次阅读 2021-01-30 13:49:31
    对象解构是获取对象并将对象内部属性提取到对象外部变量的一种方法 const obj = { x: 1, y: 2 } // 不使用解构语法 const x = obj.x const y = obj.y // 使用解构语法 const { x,y } = obj x // 1 y // 2 // ...
  • ES6入门:对象解构赋值原理及应用 一、对象解构赋值的原理 1、模式(结构)匹配 {}={} 2、属性名相同的完成赋值 const { age, username } = { username: 'Alex', age: 18 }; //18 "Alex" //完整形式为: const { ...
  • ES6之结构赋值-变量赋值——数组的解构赋值对象解构赋值、字符串解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1、数组的解构赋值 1、如果目标对象的结构不符合/不具备...
  • JavaScript ES6 解构赋值

    2022-03-13 17:26:33
    解构赋值:ES6 允许我们,按照一一对应的方式,从数组或者对象中提取值,再将提取出来的值赋值给变量。 解构:分解数据结构;赋值:给变量赋值。 解构赋值在实际开发中可以大量减少我们的代码量,并且让程序结构更...
  • 解构赋值javascript 语法,作用是将值从数组、或属性从对象,提取到不同的变量中。 1. 数组解构 1.1 声明变量并赋值: let hi = ['hello', 'world']; let [hello, world] = hi console.log(hello) =&...
  • js解构赋值

    2022-03-17 12:00:56
    解构的作用:简单来说就是简化信息... 解构赋值规则:只要等号右边的值不是对象或数组,就先将其转为对象 解构默认值生效条件:属性值严格等于undefined 解构不成功时变量的值等于undefined undefined和null无法转为
  • 对象解构赋值的多次解构,之前项目中用到的并不多,今天在项目中看到了一次,特此记录一下,详情见阮一峰老师的es6专业博客 对象的解构赋值这块。
  • JS中的解构赋值的详解与具体用途

    千次阅读 2021-03-16 13:21:40
    解构赋值:ES6允许按照一定的模式从数组和对象中取值,然后进行对变量进行赋值,这被称为解构赋值解构赋值的分类: 一、数组解构赋值 简单的数组的解构 //例1: { let a,b; [a,b]=[1,2]; console.log(a,b) //...
  • ES6中的对象解构赋值

    万次阅读 2018-11-07 13:50:54
    解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值...注意:对象解构赋值的键名对应很重要,不然会找不到。因为对象是无序的,必须通过...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,312
精华内容 8,524
关键字:

js对象解构赋值