美文网首页
es6-- let const 解构赋值

es6-- let const 解构赋值

作者: 唐卡豆子 | 来源:发表于2018-05-20 17:31 被阅读0次

let

1.块级作用域中有效
2.不能重复定义
3.es6强制开启"use strict"

const

  1. 声明时候必须赋值
  2. 常量,不能修改值
  3. 声明对象,可以修改, 不能修改的是栈内存在地址

var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;
let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;

function test(){
  const PI = 3.1415926;
  // PI = 123; //不能修改值
  const k = { a:1}
  //对象本身是可以变的
  k.b = 3;
  console.log(k); // {a:1, b:3}
}

解构赋值

数组解构赋值, 对象解构赋值, 字符串解构赋值, 布尔值解构赋值, 数值解构赋值
函数参数解构赋值

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。

 // 数组解构赋值
{
  let a, b, c, reset;
  [a, b] = [2, 3];// 2, 3
  [a, b, ...rest] = [2, 3, 4, 5, 6, 7];// 2, 3, [4,5,6,7]
  ({a, b} = {a:1, b:2});// 1,2
  [a, b, c=4] = [2, 3];//2,3,4
  [a, b, c] = [2, 3];//2,3, undefined
 }

//应用场景
    {
        let a = 1;
        let b = 2;
        [a, b] = [b, a];// 变量交换--传统,需要使用中间变量存储
        console.log(a, b);
      }
     {
        function f(){
          return [1, 2, 3];
        }
        let a, b, c;
        [a, b, c] = f();// 传统需要:先接收,用索引解析
        [a, ...b] = f();//不确定函数返回个数,只关心第一个,后面的用数组存储
      }
// 对象解构赋值
      {
        let o={p:42, q:true};
        let {p, q} = o;// 左右得是对象格式
        console.log(p,q);
      }
      {
        let {a=10, b=5} = {a:3};
        console.log(a, b);// 3, 5
      }
      {
        let metaData = {
          title: 'hello',
          test:[{
            title:'test',
            desc:'kiwi'
          }]
        }// 嵌套
        let {title:esTitls, test:[{title:cnTitle}]} = metaData;
        console.log(esTitls, cnTitle);// hello, test
      }
// 字符串结构赋值
      {
        let [a,b,c,d,e] = 'hello';// 将字符串作为一个类似于数组的值进行解构赋
        console.log(a,b,c,d,e);
        let {length} = 'hello';// 对于属性解构赋值,字符串类似于数组的对象,都有一个length属性
        console.log(length);
      }
// 数值,布尔值先转化为对象
      {
        let {toString:a} = 123;// Number对象
        console.log(a);
        console.log(a === Number.prototype.toString);
        let {toString:b} = true;// Boolean对象
        console.log(b);
        console.log(b === Boolean.prototype.toString);
      }
// 函数参数解构赋值
      {
        function f(x, y){
          return [x,y];
        }
        let  x, y;
        [x, y] = f(x=10, y=12);
        console.log(x, y);// 10, 12
      }
// undefined和null无法转为对象,所以对它们进行解构赋值,都会报错
      {
        let {a} = undefined;
        let {b} = null;
        console.log(a, b); //Cannot destructure property `a` of 'undefined' or 'null'.
      }

相关文章

  • es6-- let const 解构赋值

    let 1.块级作用域中有效2.不能重复定义3.es6强制开启"use strict" const 声明时候必须赋...

  • es6

    let && const 解构赋值&剩余运算符&展开 解构赋值 对象的解构赋值 剩余运算符 展开 Object.d...

  • 解构赋值内容整理

    解构赋值 使用let const生明过的变量在解构赋值时不能再次声明。 解构赋值分3种结果:1、解构成功。2、不完...

  • ES6学习-1

    声明变量使用 let , const 解构赋值: let [a,b,c] = [1,2,3]; let [a,[b...

  • ES6

    let const 数组的解构赋值 ---扩展 for - of循环 Promise对象 Generator函数

  • ES6常用语法糖(附Babel配置使用方法)

    获取数据: 解构赋值 解构赋值 填充数据: 模板语法 (多行字符串) 模板语法 规范数据域 :let/const,...

  • ES6新特性有哪些?快来看看吧(二)

    昨天讲到ES6中新增的let 和 const 今天来看看别的吧; 今天讲一下解构赋值: 什么解构赋值? 解构赋值就...

  • ECMA6学习-变量声明 和 数组对象解构赋值

    变量声明 和 数组对象解构赋值,本编主要学习 let const 使用语法,注意事项。以及数组和对象的解构赋值。 ...

  • ES6知识点详解

    主要会贴上代码,这样容易理解些持续更新中...1.let const 2.解构赋值主要讲解了数组解构赋值和对象解构...

  • ECMAScript6偷懒版

    let const 变量的解构赋值 解构:按照一定模式,从数组和对象中提取值,对变量进行赋值。 数组 对象 数组和...

网友评论

      本文标题:es6-- let const 解构赋值

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