解构赋值使用场景

最新推荐文章于 2022-10-27 23:26:17 发布
最新推荐文章于 2022-10-27 23:26:17 发布
阅读量605 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41900808/article/details/88539270
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6</title>
</head>
<body>
<script>
// 变量交换
{
    let a = 1;
    let b = 2;
    [a, b] = [b, a];
}

// 多个返回值
{
    function f() {
        return [1, 2];
    }
    let a, b;
    [a, b] = f();
}

//返回多个值，只关心想要的
{
    function f() {
        return [1, 2, 3, 4, 5];
    }
    let a, b;
    [a,,,b] = f();
}

//返回多个值，不知道返回的长度
{
    function f() {
        return [1, 2, 3, 4, 5];
    }
    let a, b;
    [a,...b] = f();
}

//对象的解构赋值(key值要一样)
{
    let o = {p: 2, q: true};
    let {p, q} = o;
    console.log(p, q);
    //2 true
}

//对象的默认值
{
    let {a = 3, b = 5} = {a: 3};
    console.log(a, b);
    //3 5
}

//json解构,key值必须一样，value可以自己取名
{
    let metaData = {
        title: 'abc',
        test: [{
            title: 'test',
            desc: 'description'
        }]
    }
    let {title: esTitle, test: [{title: cnTitel}]} = metaData;
    console.log(esTitle, cnTitel);
    //abc test
}
</script>
</body>
</html>

 

oiaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解构赋值的使用
weixin_69761220的博客
07-13 506
解构赋值
解构赋值及使用
Y_zzh202的博客
09-06 465
解构赋值及使用
ES6解构赋值（各种情形详解）
weixin_43342105的博客
09-15 1539
什么是解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。所谓的解构就是解析解构的意思 数组的结构赋值 注意点: 赋值等号的左右侧的数组结构需要一直,这个叫做”模式匹配” 如果左右两侧的变量数与数值数的数量不匹配, 那么就直接跳过缺失部分(谨记, 左边的跳过了, 右侧相应位置的也要跳过) 如果左侧某个变量前有三个小点, 那么意味着右侧对应位置及以后的所有数值将组合成一个数组,赋值给左侧的该变量,且左侧必须是最后一个变量才可以在前面加三个
ES6 --- 解构赋值（数组，对象，函数）使用详解
热门推荐
秋天，黄叶坠地，凉风有信。
02-23 2万+
解构赋值 JavaScript 中最常用的两种数据结构是 Object 和 Array。 对象让我们能够创建通过键来存储数据项的单个实体。 数组则让我们能够将数据收集到一个有序的集合中。 但是，当我们把它们传递给函数时，函数可能不需要整个对象/数组。它可能只需要对象/数组的一部分。 解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中，因为有时这样更方便。 解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例子。 数组解构 下面是一个将数组解构到变量中的例子：
ES6之解构赋值
01-08
解构赋值在很多场景下都很有用，比如： 1. **处理JSON数据**：可以直接从返回的JSON对象中提取所需属性，例如： ```javascript let jsonObj = { page: 1, total: 20 }; let { page, total } = jsonObj; ``` 2...
ES6基础之解构赋值(destructuring assignment)
10-17
本文将深入探讨解构赋值的各个方面，包括数组和对象的解构，以及它们在不同场景下的应用。 首先，解构赋值允许我们将数组的值直接赋给一组变量。例如，以前我们需要通过索引来逐个赋值： ```javascript let ...
ES6知识点整理之对象解构赋值应用示例
10-17
在ES6中，对象解构赋值是一种强大...在实际开发中，尤其是在处理配置对象、函数参数等场景时，对象解构赋值能显著提升代码的可读性和效率。然而，使用时也需要注意避免上述提到的异常情况，确保代码的稳定性和正确性。
ES6解构赋值的功能与用途实例分析
10-19
使用解构赋值可以轻松遍历Map对象，同时获取键名和键值： ```javascript var map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key ...
es6基础学习之解构赋值
01-19
但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势，让大家从根本上了解es6语法的优势 下面话不多说了，来...
ES6解构赋值的一些应用场景
Army-海军的博客
06-03 1万+
解构赋值使用场景： 第一种：变量互换 例子： { let a=1; let b=2; [a,b]=[b,a]; console.log(a,b); } 输出2,1 以前想交换变量必须要一个中间变量做存贮 场景2： { function f(){ return [1,2] } let a,b; [a,b]...
es6~解构赋值
ddh3110的博客
02-14 747
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构 以前，为变量赋值，只能直接指定值。 let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样。 let [a, b, c] = [1, 2, 3]; 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。 本质上，这种写法属于“模...
解构赋值的各种使用情况
longlonglaobiao
05-29 383
解构赋值 解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。 let a, b; [a, b] = [10, 20]; console.log(a); //10 console.log(b); //20 交换两个变量的值 let a = 10, b = 20; [a, b] = [20, 10]; console.log(a, b); // 20 10 对象解构 // 需要注意按照对象格式进行解构 let obj =
ES6变量的解构赋值
weixin_33901641的博客
05-16 137
含义 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。 在解构没出现前，我们只能直接为变量赋值 let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样 let [a, b, c] = [1, 2, 3]; 分析：从数组中提取值，并按照对应位置为变量赋值。 本质上，这种写法属...
学会解构赋值的这些用法，我每天又多了一个小时摸鱼时间
Salange1的博客
10-27 239
ES6引入了一个新的语法特性，名为解构，专用于数组解构和对象解构，这个语法用起来比较方便，代码也比较简洁，但是你敢保证你真的全部都弄明白了，今天就带大家来复习一下解构的用法。以上就是今天解构的内容，学会这些，每天又可以多花一个小时来摸鱼。
ES6 解构赋值用途
qq_32445689的博客
09-25 466
（1）交换变量的值[x, y] = [y, x];上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。（2）从函数返回多个值函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。// 返回一个数组function example() { return [1, 2, 3]; } var [a, b, c] = example(
es6解构的使用场景
周家大小姐
09-16 908
// 使用场景为将数组转化成对象 const point =[ [4,5], [10,1], [0,40] ]; /** * 期望数据格式 * [ * {x:4,y:5}, * {x:10,y:1}, * {x:0,y:40}, * ] */ let newPoints = point.map(([x,y]) =&gt;{ // 方式一 ...
ES6解构赋值的应用场景
独步的博客
03-18 1105
解构赋值，即对某种结构进行解析，然后将解析出来的值赋值给相关的变量，常见的有数组、对象、字符串的解构赋值等一、变量交换1.ES6的方式{ let a=1; let b=2; [a,b]=[b,a]; console.log(a,b); }输出为2 12.ES5的方式采用中间变量的方式进行存储二、获取函数返回值是数组的情况1.ES6{ function f(){ ret...
ES6---关于变量解构赋值一些巧妙的用法
qq_39111062的博客
06-03 255
&lt;script&gt; //获取一个字符串的长度 console.log("获取一个字符串的长度"); let {length} = "mochaDemo"; console.log(length); //拆分字符串 let [a,b,c,d,e] = "12345"; conso...
简述箭头函数的起因、应用场景、使用方法
最新发布
06-08
箭头函数是ES6新增的一种函数定义方式，它的起因是为了简化函数定义语法，使代码更加简洁和易读。 箭头函数的应用场景： - 适合用于定义匿名函数，如回调函数、事件处理函数等。 - 适合用于简单的函数逻辑，如返回一个简单的表达式、返回对象字面量等。 - 不适合用于定义构造函数和原型方法，因为箭头函数没有自己的this和prototype。 箭头函数的使用方法： 箭头函数的语法格式如下： ``` (param1, param2, …, paramN) => { statements } ``` 其中，`param1, param2, …, paramN` 是函数的参数列表，`statements` 是函数体。如果函数体只有一条语句，则可以省略花括号和 `return` 关键字，如： ``` // 传统函数 function add(a, b) { return a + b; } // 箭头函数 let add = (a, b) => a + b; ``` 如果函数只有一个参数，则可以省略小括号，如： ``` // 传统函数 function square(x) { return x * x; } // 箭头函数 let square = x => x * x; ``` 如果函数体为空，则需要使用空的花括号表示空函数体，如： ``` let sayHello = () => { console.log('Hello world'); } ``` 箭头函数还可以与解构赋值一起使用，如： ``` let person = {name: 'Tom', age: 20}; let sayHi = ({name, age}) => { console.log(`Hi, my name is ${name}, I'm ${age} years old`); } sayHi(person); // Hi, my name is Tom, I'm 20 years old ``` 总的来说，箭头函数是一种简洁、快捷、易读的函数定义方式，适用于简单的函数逻辑和匿名函数的定义。但是需要注意的是，箭头函数没有自己的this和prototype，不能作为构造函数和原型方法使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值