站内搜索:
首页 >> 前端 >> 内容
块作用域构造Let and Const、模板文本、多行字符串

时间:2017/11/9 9:25:54

目录 块作用域构造Let and Const 模板文本多行字符串 增强的对象文本 解构赋值 数组的解构赋值 对象的解构赋值 函数的解构赋值默认参数 箭头函数 Classes Promises Modules

目录

块作用域构造Let and Const

Block-Scoped Constructs Let and Const(块作用域构造Let and Const)

1、块级作用域:{ },用大括号定义块级作用域。
2、let是一种新的变量申明方式,它允许你把变量作用域控制在块级里面。因此没有变量提升,变量需声明后使用。
3、const声明一个只读的常量,声明后值不能更改;当声明常量的值为对象时,常量存储的为空间地址,对象可以添加属性。

模板文本、多行字符串

Template Literals (模板文本)in ES6
Multi-line Strings (多行字符串)in ES6

1、多行字符串(模板字符串):(—“—这里是两个反点)用两个反点将所需编写的字符包起来即可。
2、模板文本:${ },在多行字符串中用;模板文本不会被当做文本,模板文本中可以放变量。
例:

    for(let i=0;i
  •  
  • ${ary[i].attrOne}
  •  
  • ${ary[i].attrTwo}
  •  
  • ${ary[i].attrThree}
  •  
` }

注:上面示例中,反引号代替所有的拼接字符串中的引号,并用模板文本将ary中的每项的三个属性值插到编写的字符串中。

增强的对象文本

Enhanced Object Literals (增强的对象文本)in ES6

解构赋值

Destructuring Assignment (解构赋值)in ES6
解构赋值:允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。

数组的解构赋值:

语法:let [variable1,variable2,…variableN]=array;

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

1、左边还可以用连续逗号的方式跳过右侧对应的值。

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

2、嵌套赋值

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

3、与剩余运算符连用

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

4、当解构赋值为空,或过界时,返回undefined

    例:let [a] = [];
    console.log(a);       // undefined
       let [a,b]=[1];
    console.log(a,b);     // 1 undefined

5、解构赋值时,可以设置默认值,但默认值只有在undefined时起作用

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

注:数组解构赋值时,注意顺序问题。

对象的解构赋值:

语法:let [variable1,variable2,…variableN]=array;

    例:let {name:xxx}={name:'yan'};
    console.log(xxx);          // yan

1、可以通过声明与对象属性值相同名称的变量来获取对象的属性值

    例:let {a}={a:4};
    console.log(a);             // 4

2、可嵌套(可与数组嵌套)

    例:let {a,b}={a:1,b:{c:2}};
    console.log(a,b)            // 1 { c: 2 }
       let {a,b:{c}}={a:1,b:{c:2}};
    console.log(a,c);           //  1,2
       let [a,{b}]=[1,{b:2}];
    console.log(a,b);           //  1,2

3、当解构赋值为空,或过界时,返回undefined

    例:let {a} = { };
    console.log(a);             // undefined

4、解构赋值时,可以设置默认值,但默认值只有在undefined时起作用

    例:let {a=1} = { };
    console.log(a);             // 1

函数的解构赋值(默认参数):

Default Parameters(默认参数) in ES6

1、传参(jQuery为例)

   jQuery.ajax = function ({
      url : "/getList",
      async : true,
      cache : true,
      dataType : 'json',
      success(result){console.log(result)}
     })

2、返回值

箭头函数

Arrow Functions (箭头函数)in ES6

去掉function关键字, 参数有一个可以省略小括号,小括号和大括号之间有一个箭头
如果没有大括号则直接是返回值,有大括号必须写return;

Classes

Classes(类) in ES6

Promises

Promises in ES6

Modules

Modules(模块) in ES6

  • 上一篇:html仿百度搜索页面效果
  • 下一篇:mint-ui在手机页面的样式不正常问题解决办法
  • 返回顶部