ES6数据解构

news/2024/7/10 23:00:46 标签: es6, 前端, ecmascript

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。

1.数组解构
等号左边的变量放到中括号内部,匹配右侧数组中的元素。

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

    2.let [a,b,c,d,e]=[1,2,3,[4,5],6];
    console.log(a,b,c,d,e);

    3.不完全解构
    let [a,b,c,[d],e]=[1,2,3,[4,5,6],7];
    console.log(a,b,c,d,e);

    4.集合解构 ...扩展运算符
    let [a,...b]=[1,2,3,4,5];
    console.log(a,b);

    5.默认值解构(当匹配值严格等于undefined时,默认值生效)
    let [a=1,b=2,c=3]=[4,5,6];
    console.log(a,b,c);
    let [a=1,b=2,c=3]=[];
    console.log(a,b,c);

    6.默认值也可以是函数
    function test(){console.log('hello')}
    let [a=test()]=[1];
    console.log(a);
    let [a=test()]=[];
    console.log(a);
    
    7.let arr=[1,2,3,4];
     let [...a]=arr;
     console.log(a===arr);//false

2.对象解构
    等号左边的变量放到大括号内部,匹配右侧对象中的元素。对象的属性没有次序,变量必须与属性同名,才能取到正确的值
    1.let {foo,bar}={foo:'hello',bar:"world"};
    console.log(foo,bar);

    2.如果变量名和属性名不一致,需要重命名
    let {foo:baz}={foo:"hello",bar:"world"};   baz:hello
    
    3.对象的解构赋值是下面形式的简写 前面属性名后边变量名
    let {foo:foo,bar:bar}={foo:'hello',bar:"world"};

    4.嵌套结构
    let obj={p:['hello',{y:"world"}]};
    let {p:[a,{y:b}]}=obj;
    console.log(a,b);hello world
    
    5.默认值结构
    let {x:y=3}={};
    console.log(y);3

    经典面试题:
    const [a, b, c, ...d] = [1, 2, 3, 11, 999];
    const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
    console.log(a, b, c, d, e, f1, g, h);
3.字符串解构
    1.可以使用对象解构或者是数组解构,使用数组结构可以获取指定字符;使用对象结构可以获取实例属性方法;
    let [a,b,c]='hello';
    console.log(a,b,c);h e l
    
    2.也可以将string字符串转换为数组
    let [...arr]='hello';
    console.log(arr);
    
    3.使用对象解构
      let {toString,valueOf,length}='hello';//相当于把‘hello’当成String基本包装器类型
        console.log(toString,valueOf,length)

4.数值解构  可以获取到数值包装器构造函数原型中指定的方法。
     let {toString,valueOf}=10;
    console.log(toString,valueOf)
5.布尔值解构
    let {toString,valueOf}=true;
     console.log(toString,valueOf);


http://www.niftyadmin.cn/n/5230079.html

相关文章

java后端redis缓存缓存预热

java后端&redis缓存&缓存预热 缓存概述 缓存:从数据库(磁盘)中取数据到前端展示,速度很慢。为了提高速度可以使用缓存,即把数据预先查出来,放到一个更快读取的介质,比如内存&#xff…

koa2项目中封装log4js日志输出

1.日志输出到控制台 npm i log4js -D 封装log4js文件: 注意:每次都要重新获取log4js.getLogger(debug)级别才能生效 const log4js require("log4js");const levels {trace: log4js.levels.TRACE,debug: log4js.levels.DEBUG,info: log4js.…

刷题笔记12.01 贪心策略

P1090 [NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 说最大不超过.不用高精度,好说 #include <bits/stdc.h> using namespace std; int n,n2,a; long long a1[10004],a2[10004],sum; int main() {ios::sync_…

如何写外贸老客户开发信?维护客户的邮件?

外贸老客户开发信怎么写&#xff1f;对于老客户如何写营销邮件&#xff1f; 在外贸业务中&#xff0c;与老客户保持联系并开发更多商机至关重要。外贸老客户开发信是一种有效的沟通工具&#xff0c;能够巩固与客户的关系&#xff0c;拓展合作范围。蜂邮 EDM将分享一些建议&…

HALCON图像坐标与控件坐标相互转换

HALCON图像坐标与控件坐标相互转换 1.控件坐标转换到图像坐标 代码示例&#xff1a; public Point ControlPointToHImagePoint(this HSmartWindowControlWPF Halcon, double x, double y){// Halcon 控件宽高double cHeight Halcon.ActualHeight;double cWidth Halcon.Actu…

MedicalTransformer论文解读

论文是一个分割任务&#xff0c;但这里的方法不局限于分割&#xff0c;运用到检测、分类都可以。 论文下载 https://www.yuque.com/yuqueyonghupjh9oc/ovceh4/onilw42ux6e9n1ne?singleDoc# 《轴注意力机制》 一个问题 为什么transformer一开始都有CNN&#xff1a;降低H、W…

将linux服务器 设置成 proxy.SOCKS5 服务器

gpt: 如果你想在 Linux 服务器上设置一个 SOCKS5 代理服务器&#xff0c;你可以使用一些现有的工具&#xff0c;比如 Shadowsocks、Dante、或者其他支持 SOCKS5 协议的软件。下面是一个使用 Dante 的简单示例&#xff1a; 1. **安装 Dante&#xff1a;** bash sudo apt-g…

人群计数CSRNet的pytorch实现

本文中对CSRNet: Dilated Convolutional Neural Networks for Understanding the Highly Congested Scenes&#xff08;CVPR 2018&#xff09;中的模型进行pytorch实现 import torch;import torch.nn as nn from torchvision.models import vgg16 vggvgg16(pretrained1)import…