三、解构赋值、函数默认值、数组解构、对象解构

本文详细介绍了ES6中的解构赋值,包括函数默认值、数组解构和对象解构。解构赋值允许我们从数组和对象中方便地提取值,函数默认值提供了在参数未传递时赋予默认值的功能。文章还讨论了参数作用域、解构失败时的处理以及对象和数组解构的不同之处。
摘要由CSDN通过智能技术生成

三、解构赋值、函数默认值、数组解构、对象解构

函数传参为undefined/不传值,解构赋值时值为undefined/不传值时,都可以去取自己定义的默认值。

一、函数默认值

1.1 函数默认值

ES5语法函数参数赋默认值

function foo(a, b){
    var a = typeof(arguments[0]) !== 'undefined' ? arguments[0]
    											 : 1;
    ...
}

ES6语法函数参数赋默认值,相当于let声明了一个变量,在声明之前会出现暂时性死区。

function foo(x = 1, y =2){
    ...
}

默认值的形式:

  • 表达式

举个函数参数为表达式的例子:

let a = 99;
function foo(b = a + 1){
    console.log(b);
}
foo(); // 100
a = 100;
foo(); // 101

当函数参数为表达式时,会有惰性求值现象:每次调用函数时,都会重新计算表达式。

1.2 参数作用域

关于作用域:

参数有自己单独的作用域:并没有访问函数内部的作用域;相当于是一个父子作用域嵌套的关系,父:参数作用域。

let y = 1;
function test1(x = y){
    let y = 3;
    console.log(x, y);
}
test1(); // 1 3

但在函数内部重复用let 定义的同名变量会报错:重复声明

function foo(x = 1){
    let x = 2;
    console.log(x);
}
// Uncaught SyntaxError: Identifier 'x' has already been declared
foo();

布尔值转换时,被认定为假的值叫虚值——>falsy。判断时六大虚值:

false 0 undefined null 空字符串 NaN

二、解构赋值

2.1解构赋值,es6对象拓展

解构赋值语法是一种 Javascript 表达式。

功能:通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。

工作原理:模式匹配/结构化赋值,赋值时变量和值结构完全相同。

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

解构赋值情况:

  • 解构成功,取到了值。
  • 解构失败,变量多了,值少了,以undefined填充。
  • 不完全解构:值多了。

解构默认值分类:

  • 函数/函数执行

2.2 数组解构

解构赋值,没有值,才取默认值

let [x = 1, y = x] = [2];
console.log(x, y); // 2 2

2.3 ES6对象拓展

三种定义对象的方式:

let obj = {}; //字面量形式
let obj1 = new Object(); //构造函数
let obj2 = Object.create(原型); //Object.creat形式

ES6对象拓展:

  • 当属性名和变量名一致时,可以简写为一个
  • 方法名后之间可以加()
  • 属性拼接
var name = 'white';
var age = 23;
var person = {
    name,
    age,
    eat(){
        console.log(this.name);
    }
}
person.eat()
console.log(person);

let firstName = 'ai';
let secondName = 'xiaoye1';
let name = 'white'
let person = {
    [firstName + secondName]: name
}
console.log(person); //{aixiaoye1: 'white'}

在这里插入图片描述

2.4 对象解构

通过解构赋值,可以将属性从对象中取出,赋值给其他 变量

let {a: a, b: b, c: c} = {a : 1, b : 2, c : 3};
// 对象属性简写:属性名与变量名一致
let {x, y, z} = {x : 4, y : 5, z :6};
console.log(a,b,c); // 1 2 3
console.log(x,y,z); // 4 5 6

对象和数组解构都存在解构失败和解构不完全的情况,有值取值,没有取默认值,默认值也没有取undefined

对象解构不存在顺序,模式匹配对象中的属性。

let {x = 1, y, z, p} = {y : 5, x : 4, z :6};
console.log(x,y,z,p); //4 5 6 undefined

解构举例:

  1. 通过对象解构拿到JSON字符串中的具体值,这里的JSON字符串是少量的

在这里插入图片描述

  1. 利用对象解构拿到对象嵌套中的某个属性:例如孙子的属性
var person = {
    name: 'zhangsan',
    age: 50,
    son: {
        name: 'zhanghui',
        son: {
            name: 'zhangwei'
        }
    }
}
let {son:{son:mySonSon}} = person;
console.log(mySonSon); 
let {son:{son}} = person;
console.log(son); 

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值