js用解构来定义变量并赋值

解构数组

var [a,b]=[1,2];

a //1

b //2

-------------

var [a,b]=[1,2,3,4];

a //1

b //2

----------------

var [a,,b]=[1,2,3,4];

a //1

b //3

-----------------

var a,b;

[a=3,b=2]=[1]; //默认值

a //1

b //2

-----------------

var [a, ...b] = [1,2,3,4]

a //1

b // [2,3,4]

----------------

应用

function parseProtocol(url) {
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL); // ["https://test/page", "https", "test", "page"]

  var [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(parseProtocol(‘https://test/page‘)); // "https"

  

解构对象

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;// 将o的p值赋给变量foo,将o的q值赋值给变量bar。var {p: foo, q: bar} = o;等价于({p: foo, q: bar} = o);

let {t=4, m=true} = {t:5};//这样就定义了两个变量t和m,并各自带有默认值。
let {t:val1=4, m: val2=true} = {t:5};

  

给函数的参数赋默认值:

function render({position ={x:0,y:0},color="red",display=true}){
console.log(position,color,display);
}

render({position:{x:20,y:30}, color:"green"});


解构数组内的对象:

const props = [
  { id: 1, name: ‘Fizz‘},
  { id: 2, name: ‘Buzz‘},
  { id: 3, name: ‘FizzBuzz‘}
];
const [,, { name }] = props;
console.log(name); // "FizzBuzz"

  

解构结构复杂的对象:

const metadata = {
  title: ‘Scratchpad‘,
  translations: [
    {
      locale: ‘de‘,
      localization_tags: [],
      last_edit: ‘2014-04-14T08:43:37‘,
      url: ‘/de/docs/Tools/Scratchpad‘,
      title: ‘JavaScript-Umgebung‘
    }
  ],
  url: ‘/en-US/docs/Tools/Scratchpad‘
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

  

refer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

原文地址:https://www.cnblogs.com/Gift/p/10682413.html

时间: 2024-11-01 01:50:50

js用解构来定义变量并赋值的相关文章

JS对象解构

什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量.这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰. 通常来说,你很可能这样访问数组中的前三个元素: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; 如果使用解构赋值的特性,将会使等效的代码变得更加简洁并且可读性更高: var [first, second, third] = someAr

js es6 解构赋值

解构赋值:es6允许按照一定的模式,从数组或对象中提取值 let [a,b,c] = [1,2,3]; let {a,b}= {a:1,b:2}; 对象 let {a,b}= {b:1,a:2} //输出2,1,即找属性名,不管什么位置 数组例子1:(完全解构) let [a,b,c] = [1,2,3]; console.log(a)//1 console.log(b)//2 console.log(c)//3 例子2:(不完全解构) let [a,[b],c] = [1,[2,3],func

ES6学习笔记二 新的声明方式和变量的解构赋值!

新的声明方式 在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式: var:它是variable的简写,可以理解成变量的意思 let:它在英文中是让的意思,也可以理解成一种申明方式 const:它在英文中是常量的意思,在ES6中用来声明常量,常量可以理解成不变的量=>这里的不变不是值得不变,是内存地址的指针不变!!! var 声明: var在ES中是用来升级成全局变量的,我们可以做一个简单实例,声明一个变量,用co

ES6解构赋值

前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 引入 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 let options = { repeat: true, save: false }; // 从对象中提取数据 let repeat = options.repeat, save = option

解构赋值的用法。

按照一定模式,从数组和对象中提取,对变量进行赋值,称为解构 通过解构我们可以让赋值更优雅便捷 // 一般赋值 var a = 1, b = 2, c = 3; //解构赋值 var [a, b, c] = [1, 2, 3]; 当然不仅仅是var,let和const也可以 let arr = [1, 2, 3] const [a, b, c] = arr; 语法本质 实质上这个语法就是一种模式匹配 如果等号两边模式相同 左边变量就会被赋予相应值 所以下面的形式也可以正常赋值 var [a, [b

【ES6】对象的新功能与解构赋值

ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始值可以简写,并可以使用可计算的属性名称.对象方法的定义消除了冒号和 function 关键字,示例如下: // Demo1 var value = "name", age = 18 var person = { age, // age: age ['my' + value]: 'Jenny

解构赋值,你不能不懂!

解构赋值 很多人可能和我一样,第一次看到这个词的时候摸不着头脑.但是冷静再看一遍好像明白了,"把数据结构分解开分别进行赋值". 我们先看几个小例子 let [a,b,c] = [1,2,3];console.log(a,b,c);//1 2 3 let {name,age} = {name:"jack",age:"18"};console.log(name,age);//jack 18 let {toString,length} = "

ES6之解构赋值

何为解构赋值? 解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中. 如果理解起来感觉抽象,直接看下面例子: 数组解构: 我们在以前要给变量赋值需要像下面这样写: var arr=[1,2.3]; var a = arr[0]; var b = arr[1]; var c = arr[2]; 是不是感觉略繁琐了点?而如果我们用解构赋值的话,可以怎么写呢?看下面代码: let [a,b,c] = [1,2,3]; console.log(a,b,c

妙用ES6解构和扩展运算符让你的代码更优雅

Javascript ES6/ES2015尘埃落定,其中许多特性其实是为了简化代码.解构运算符,扩展运算符,和rest运算符就是其中很好的特性,它们可以通过减少赋值语句的使用,或者减少通过下标访问数组或对象的方式,使代码更加简洁优雅,可读性更佳.现在各浏览器及node.js都加快了部署ES6的步伐.ES6的学习正当其时. 解构 解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 数组解构赋值: var arr = ['this is