美文网首页
es6基本用法-1

es6基本用法-1

作者: 花霏花 | 来源:发表于2019-03-16 17:21 被阅读0次

let命令

  • let声明的变量,只在let命令所在的代码块内有效

  • 不存在变量提升

  • 不允许重复声明

    {
    let a = 10;
    var b = 1;
    }
    

const命令

  • const声明一个只读的常量。一旦声明,常量的值就不能改变

  • const一旦声明变量,就必须立即初始化,不能留到以后赋值。

  • 只在声明所在的块级作用域内有效

     const PI = 3.1415;
     PI // 3.1415
    

    解构赋值

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

    • 可以从数组中提取值,按照对应位置,对变量赋值,如果解构不成功,变量的值就等于undefined

        var [a, b, c] = [1, 2, 3];        
      
    • 另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

          let [x, y] = [1, 2, 3];
          x // 1
          y // 2
      
    • 解构赋值允许指定默认值。

      [x, y = 'b'] = ['a']; // x='a', y='b'
      [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
      
    • 对象的解构赋值

      var { foo, bar } = { foo: "aaa", bar: "bbb" };
      foo // "aaa"  对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定
      bar // "bbb"  对象的属性没有次序,变量必须与属性同名,才能取到正确的值
      
    • 字符串的解构赋值

      const [a, b, c, d, e] = 'hello';
      a // "h"
      b // "e"
      c // "l"
      d // "l"
      e // "o"
      
    • 函数参数的解构赋值

      function add([x, y]){
          return x + y;
      }
      add([1, 2]); // 3
      

    ES6 字符串的扩展

    • 字符串的遍历器接口

    • ES6为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历

      for (let codePoint of 'foo') {
          console.log(codePoint)
      }
      // "f"
      // "o"
      // "o"
      
    • at()

      'abc'.at(0) // "a"
      '𠮷'.at(0) // "𠮷"
      
    • includes(), startsWith(), endsWith()

    • includes():返回布尔值,表示是否找到了参数字符串。

    • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。

    • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

      var s = 'Hello world!';
      
      s.startsWith('Hello')  // true
      s.endsWith('!')       // true
      s.includes('o')      // true
      
    • 这三个方法都支持第二个参数,表示开始搜索的位置。

      var s = 'Hello world!';
      
      s.startsWith('world', 6) // true
      s.endsWith('Hello', 5) // true
      s.includes('Hello', 6) // false
      
    • repeat()

      repeat方法返回一个新字符串,表示将原字符串重复n次。

      'x'.repeat(3) // "xxx"
      'hello'.repeat(2) // "hellohello"
      'na'.repeat(0) // ""
      
    • padStart()padEnd()

      ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。

      'x'.padStart(5, 'ab') // 'ababx'
      'x'.padStart(4, 'ab') // 'abax'
      
      'x'.padEnd(5, 'ab') // 'xabab'
      'x'.padEnd(4, 'ab') // 'xaba'
      
      //如果省略第二个参数,则会用空格补全长度。
      'x'.padStart(4) // '   x'
      'x'.padEnd(4) // 'x   '
      
    • 模板字符串

      $('#result').append(`
          There are <b>${basket.count}</b> items
          in your basket, <em>${basket.onSale}</em>
          are on sale!
                          `);
          //上面代码中的模板字符串,用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
          var greeting = `\`Yo\` World!`;
      
          //模板字符串中嵌入变量,需要将变量名写在${}之中。
          var x = 1;
          var y = 2;
          `${x} + ${y} = ${x + y}`
          // "1 + 2 = 3"
          `${x} + ${y * 2} = ${x + y * 2}`
          // "1 + 4 = 5"
      
    • 标签模板

      alert`123`
      // 等同于
      alert(123)
      

相关文章

  • ES6入门基础

    ES6入门基础 一.let & const 1.基本用法 es6新增 let命令,用来申明变量,用法类似于var,...

  • Set 和 Map 数据结构

    本文介绍 Set、WeakSet、Map、WeakMap 的基本用法 一、Set 1.1、基本用法 ES6 提供了...

  • ES6之 let 和 const 命令

    ES6 之 let 和 const 命令 1、let 命令 1.1、基本用法 ES6 新增了let命令,用来声明变...

  • es6基本用法-1

    let命令 let声明的变量,只在let命令所在的代码块内有效 不存在变量提升 不允许重复声明{let a = 1...

  • ES6的let和const命令的基本用法

    1. let 的命令 基本用法 ES6 新增了let命令,用来声明变量。它的用法类似于var,但是...

  • 变量的赋值

    1、基本用法 var a=1; var b=2; es6: var [a,b]=[1,2]; 可从数组中提取值,按...

  • ES6 笔记(未完)

    一. let 和 const 1 let 基本用法 ES6新增let命令,与var用法类似,但所声明的变量只在声明...

  • ES6 学习笔记-let

    let 和 const 命令 1. let命令 基本用法 ES6 新增了let命令,用来声明变量。它的用法类似于v...

  • let和const命令

    ES6学习 let和const命令 1. let命令 基本用法let命令,用来声明变量。他的用法类似于var,只在...

  • ES6 let、const 总结

    let的基本用法 const ES6有六种声明方法

网友评论

      本文标题:es6基本用法-1

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