ES6 解构赋值详解

简介: ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。

ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。

jgfz.jpg

数组解构赋值

数组解构赋值允许我们通过类似模式匹配的方式,从数组中提取值并赋给变量,即只要等会两边的变量模式相同,左边的变量就会被赋予对应的值。

// 基本赋值
let [x,j] = [1,2]
console.log(x)  //1
console.log(j)  //2

// 基本赋值
let [a,b,c] = [1,[2,3],4]
console.log(a)  //1
console.log(b)  //[2,3]
console.log(c)  //4

//结构不成功,值为undefined
let [d] = []
console.log(d)  //undefined

//不完全解构,等会左边的值只能匹配一部分右边的数组
let [e,f,g] = [5,6]
console.log(e)  //5
console.log(f)  //6
console.log(g)  //undefined

//默认值
let [k=8,l=8] = [1]
console.log(k)  //1 解构成功则值为解构的值
console.log(l)  //8 解构不成功则值默认的值

//等号右边的数据不具有可迭代的能力
let [h] = true  //报错 TypeError: true is not iterable

通过数组结构等号右边的数据结构必须具有iterator接口,否则报错TypeError: true is not iterable,如果变量未能结构成功,则变量的值为设置的默认值,若未设置默认值,则为undefined

对象解构赋值

对象解构赋值允许我们从对象中提取属性,并将它们赋给对应的变量。

// 基本赋值
let {
   
    name, age } = {
   
    name: 'XJ', age: 30 };
console.log(name); //  XJ
console.log(age);  //  30
//变量重命名
let {
   
    name:userName, age:userAge } = {
   
    name: 'XJ', age: 30 };
console.log(userName); //  XJ
console.log(userAge);  //  30
console.log(age); //  此时name和age是模式,并非变量,报错:ReferenceError: age is not defined
//默认值
let {
   
    name, age,desc='handsome' } = {
   
    name: 'XJ', age: 30 };
console.log(name); //  XJ
console.log(age);  //  30
console.log(desc); //  handsome
//对数组进行对象属性的解构
let{
   
   0:first,2:third} = [7,8,9];
console.log(first); // 7 0的属性对应的值为数组下标为0的值
console.log(third); // 9 2的属性对应的值为数组下标为2的值

在函数参数中使用解构赋值

解构赋值也可以用于函数的参数中,方便地获取传入对象的属性值。

printUser({
   
    name, age }) {
   
   
  console.log(`${
     
     name} is ${
     
     age} years old.`);
}

let user = {
   
    name: 'XJ', age: 30 };
this.printUser(user); // XJ is 30 years old.

解构赋值的应用场景

  • 交换变量的值
let [a, b] = [1,2];
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
  • 从函数返回多个值
userInfo(){
   
   
    return {
   
    name: 'XJ', age: 30 };
}

let {
   
    name, age } = this.userInfo();
console.log(name); // XJ
console.log(age);  // 30
  • 提取JSON数据
let user = {
   
   
  name: 'XJ',
  age: 30
};
let {
   
    name, age } = user;
console.log(name); // XJ
console.log(age);  // 30

总结

ES6的解构赋值为JavaScript带来了更多的灵活性和可读性,使得我们能够更优雅地处理数据。无论是处理数组、对象,还是在函数参数中使用,解构赋值都能让我们的代码更加简洁和易于维护。掌握好这一特性,对于提升JavaScript编程能力是非常重要的一步。

目录
相关文章
|
2月前
|
JavaScript
ES6之变量的解构赋值
ES6之变量的解构赋值
|
2月前
|
JSON JavaScript 前端开发
ES6 变量的解构赋值
ES6 变量的解构赋值
|
14天前
ES6 解构赋值【详解】
ES6 解构赋值【详解】
6 0
|
2月前
|
小程序
es6学习笔记(二)解构赋值
es6学习笔记(二)解构赋值
|
11月前
|
JavaScript 前端开发 网络架构
ES6 解构赋值
ES6 解构赋值
70 0
|
7月前
ES6学习(二)—变量的解构赋值
ES6学习(二)—变量的解构赋值
|
10月前
ES6语法: 解构赋值
ES6语法: 解构赋值
34 0
|
11月前
|
存储
Es6解构赋值
例如现在有一个本地存储里面存的是用户信息,然后需要拿到里面的id,名称等等非常麻烦
|
11月前
|
JSON JavaScript 前端开发
ES6(变量的解构赋值)
ES6(变量的解构赋值)
57 0
ES6-变量的解构赋值
前言 大家好,今天和大家分享一下ES6中变量的解构赋值。 一、解构赋值是什么? ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值

热门文章

最新文章