es6新增——解构赋值

news/2024/7/10 22:43:26 标签: 前端, javascript, es6

解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,成为解构(Destructuring)。
赋值运算符右侧是要解构的数组或对象,左侧是对应的模式和声明变量,表现形式为[]、{}

var arr = [1,2,3];
var obj = {name : '李翠花'};
let [a] = arr;
let{name:b} = obj;
console.log(a,b);//1,李翠花
let [a,b,c] = [1,2,3];  ==> let a = 1;
							let b = 2;
							let c = 3;
							
let [ , , c] = [1,2,3];//c:3

解构赋值默认值

解构赋值默认值生效的前提是:解构的内容严格等于undefined(===);
undefined:声明未赋值,类型undefined

let [a = 1,y = 0] = [];
var [x = f()] = [1] //x =1       这里等于1是因为默认值并没有生效,所以解构出来的仍然是等号右侧结果
function f(){
console.log('测试')
}
var [x = f()] = [] ;
console.log(x);//undefined(函数没有返回值)    这里没有等于1是因为默认值生效,x等于了函数的结果,但函数并没有返回值,所以是undefined

对象解构赋值

对象中键值一样时,可以简写

var obj = {
title:'标题',
brand = 'haha'
};
let {title:a,brand:b} = obj;
console.log(a,b);//标题,haha

简化:

let {title,brand} = obj;  => let {title:title,brand:brand} = obj;
console.log(title,brand);//标题,haha

(这里obj的值就相当于传到了后面的title和brand中,所以输出打印时可以获取到原本对象中的值),也就是说title和brand既充当模式匹配

字符串解构赋值

const [a,b,c,d,e] = 'hello';//     a//h  b//e  c//l  d//l  e//o

函数形参的解构赋值

标准:

function fn({a,b = 0,c} = {}){
	console.log(a,b,c);
}
fn();//undefined 0 undefined

(因为函数调用时没有传实参,走的是函数的默认值(形参),而此时形参={},undefined(解构赋值默认值生效),再次走默认值,所以最终输出决定权在{a,b = 0,c},未赋值的都为undefined,a = undefined ,b = 0,c = undefined)

函数形参的解构赋值优势
与传统形参列表相比较
1.可以有默认值;
2.可以有缺省参数;
3.可以打乱次序


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

相关文章

前端算法:顺序查找之二分法查找

顺序查找之二分法查找: 二分法查找算法思想:1.二分法查找算法:数据是需要有序排列的:比如升序排列/降序排列的数据;2.主要思想:1.设置查找的数据区间array[start,end];2.确定该区间的中间位置index&#xf…

es6函数的扩展—箭头函数

箭头函数 1.普通函数: function fn(){console.log("我是一个函数"); } fn();函数表达式: var fn function(){console.log("我是函数表达式"); } fn();2.箭头函数: ① var fn_arr…

设计模式—模版模式

前言 记得刚开始工作的时候看老鸟的代码很多看不懂,随着工作经验的增加发现当初看不懂人家的代码是因为自己没有深刻理解设计模式。今天我打算写一个设计模式系列博客,就是把开发中常用的设计模式总结下。 模版模式 定义: 把做一件事情的过程…

es6新增类型——Symbol

Symbol js数据类型: String Number Null Undefined Object Boolean Symbol Symbol: Symbol是一种全新的数据类型,作用:产生一个独一无二的值 用法: console.log(Symbol());//Symbol()可以传参:这个参数&…

mongodb数据库里能够查到数据,接口获取的返回值却是0

mongodb数据库里能够查到数据,接口获取的返回值却是0 嗨,我终于又来了,又是头秃的一段时间 今天在写项目的时候发现了一个问题,百思不得其解, 问题描述 我的后台**mongodb数据库里能够查到集合里的数据&#xff0c…

自整理html面试题

html面试题 整理了一些html面试题,希望大家都能找到心仪的工作 1.描述一下http和https **http:**超文本传输协议,无状态,无连接,基于请求和响应,不能保证数据完整性,用户离开网站后在访问需要重新发送请…

css面试题整理

css面试题整理 1.垂直居中的方法 1. 父元素:display:flex; 子元素:align-items:center2. 父元素添加伪元素: 父元素::before{content:””;height: 100%;display:inline-block;vertical-align:middle; } 子元素::before{display:inline-blo…

js、jQuery面试题整理

js、jQuery面试题整理 1.数据类型 基本类型:String、Number、boolean、null、undefined、Symbol、BigInt。 引用类型:object。里面包含的 function、Array、Date。 2.数组方法 join():数组转为字符串,可带中间符号 push()&…