JavaScript中的解构赋值(详细)

解构赋值，就是快速的从对象或者数组中取出成员的一个语法方式
1.解构:将对象或者数组中的某个成员取出来
2.赋值:取出来的成员赋值给某一个变量

1.数组的解构
使用 [ ] 来进行解构数组
解构数组,变量名可以随便定义,变量名在[ ]的位置是和数组一一对应

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title></head><body><ul><li>1</li><li>2</li><li>3</li></ul></body>
</html>
<script type="text/javascript">//将数组中的某个元素从数组中解构出来let arr = [1,2,'黎明','黑暗']let [c,d,e] =arr //[]里面的变量名是可以随便起的，此处表示解构arr中的前三个元素console.log(e)//因为解构的第三个变量对应的是黎明，所以此时打印的结果为黎明//给解构出的元素赋一个新的值d='黄昏' //表示将解构出的元素2，重新赋值为黄昏console.log(d) //黄昏//解构伪数组let lis = document.querySelectorAll('li')console.log(lis) //获取到的是一个伪数组let [li1,li2]=lis //解构伪数组中的前面的两个元素console.log(li2) //打印的结果是第二个li标签//交换ab的值let a = 10,b=20;[a,b]=[b,a]console.log(a) //此时a打印的而结果为20console.log(b) //此时b打印的结果为10</script>

2.对象的解构（常用）
使用{ }来解构对象

<script type="text/javascript">//对象的解构（常用）// 使用[]来解构对象function createGirlFriend(){ let name = '小红';let age = 18;let hobby = '写代码';return { //返回这个对象,name:name,age:age,hobby:hobby,}//当属性和属性值相同时，可以只写一个，上面的返回格式的写法可以直接写name、age、hobby、}//es5,获取对象属性值的方法let obj = createGirlFriend()console.log(obj.name) //小红console.log(obj['name']) //小红//解构的方法获取对象属性值的方法let {name}=createGirlFriend()console.log(name) //小红
</script>

JavaScript中的解构赋值(详细)相关推荐

javascript编写_如何在JavaScript中使用解构来编写更简洁，功能更强大的代码
javascript编写 by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? 如何在JavaScript中使用解构来编写更简洁,功能更强大的代码 (How to ...
如何在 JavaScript 中使用对象解构
对象解构是一个有用的 JavaScript 功能,用于从对象中提取属性并将其绑定到变量. 更好的是,对象解构可以在一个语句中提取多个属性,可以从嵌套对象访问属性,并且可以在属性不存在时设置默认值. 在 ...
JavaScript系列之解构赋值
文章の目录一.解构赋值概述二.解构赋值语法三.描述四.示例[解构数组] 1.变量声明并赋值时的解构 2.如果解构不成功,变量的值为undefined. 3.变量先声明后赋值时的解构 4.默认值 ...
javascript语法_了解JavaScript中的解构，剩余参数和传播语法
javascript语法 The author selected the COVID-19 Relief Fund to receive a donation as part of the Write ...
【javascript】js解构赋值中使用别名
let person = {name:"沉默小管",age:18 } //js的解构,把name别名成myName,之后就可以使用myName替换name let {name:my ...
【JavaScript 笔记】— 函数高级（变量作用域、解构赋值、方法、高阶函数、闭包、箭头函数、generator）
JavaScript个人笔记变量作用域变量提升全局对象 windows 命名空间局部作用域常量解构赋值使用场景方法 apply 装饰器高阶函数(Array) map reduce m ...
ES6中的对象解构赋值
解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上). 说白 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
es6 - 解构赋值
一我们为什么要使用解构在学习ES6新的特性解构赋值之前,我们先来看看为什么要使用解构,以前如果我们需要获取对象或者数组里面的数据,并且把它们存入数组,需要写很多代码.如下 const person ...

JavaScript中的解构赋值(详细)

JavaScript中的解构赋值(详细)相关推荐

最新文章

热门文章