美文网首页
JavaScript----变量的解构赋值

JavaScript----变量的解构赋值

作者: AuglyXu | 来源:发表于2018-11-15 19:00 被阅读0次
  • ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
var arr = [1, 3, 5];
//会依次将数组中的内容赋值给等号左边[]中的变量
let [a, b, c] = arr;
//a = 1,b = 3,c = 5
  • 解构不成功,变量的值为undefined
var arr = [1, 3, 5];
let [a,b,c,d] = arr;
// d = undefined
  • 如果变量右边不是数组和对象(不具备Iterator接口) 会报错

解构的默认值

  • 解构时可以给变量指定默认值
  • ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
  • 默认值可以是其他变量, 但必须其他变量已经定义
let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

解构对象

  • 变量名与属性一样的解构, 会将对象中和属性名称和解构中变量名称一致的赋值给解构的变量
let obj = {
    name: "xxz",
    age: 13
};
let {name, age} = obj;
name //"xxz"
age //13
  • 变量名与属性不一样的解构, 必须写成如下格式
let obj = {
    name: "xxz",
    age: 13
};
let {name : name2, age3 : age} = obj;
name2 //"xxz"
age3 //13
  • 和数组解构类似, 也可以指定默认值
  • 数值和bool值解构会先转换成对象
let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

解构作为函数参数

let obj = {
    name: "lnj",
    age: 13
};
// 大大的提升了开发效率, 简化了代码
function say({name, age}) {
    console.log(name, age);
}
say(obj);

函数的默认值

  • 应用场景:
    • 某一个函数的某些参数永远都是一些固定的值,
    • 获取用于都是通过其它函数获得的, 那么就可以使用默认参数
 function Car(id) {
        this.id = id;
    }
    function createCar(id = getRandom()) {
        return new Car(id);
    }
    function getRandom() {
        return Math.random() * 10000;
    }
    // var c1 = createCar(getRandom());
    var c1 = createCar();
    console.log(c1);

相关文章

  • JavaScript----变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 解构不成功,变量的值为undefine...

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 变量的解构赋值

    数组的解构赋值: 解构,就是从数组和对象中提取值,然后对变量进行赋值 解构赋值: 解构不成功,变量的值就等于und...

  • ES6系列之变量的解构赋值

    本篇目录: 数组的解构赋值变量声明并赋值时的解构变量先声明后赋值时的解构不完全解构默认值交换变量解析一个从函数返回...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • ES6的解构赋值

    一、前言 什么是“解构赋值”呢?就是从数组或者对象中取值,对变量进行赋值,这就是变量的解构赋值。 二、数组的解构赋...

  • 名词

    1 解构: 从数组或对象中提取值,给变量赋值这被称为解构解构赋值的变量都会重新声明解构赋值的规则是,只要等号右边的...

  • 变量的解构赋值 - 字符串、数值、布尔值、函数参数

    一、字符串的解构赋值 二、数值和布尔值的解构赋值 三、函数参数的解构赋值 变量的解构赋值 - 数组篇[https:...

网友评论

      本文标题:JavaScript----变量的解构赋值

      本文链接:https://www.haomeiwen.com/subject/cpvyfqtx.html