王世茹的博客 主页存档标签
es6基础(1)

es6标准入门

let const

解构

字符串模板

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

1
2
3
4
5
6
7
8
const a = 'hello'
const b = 'world'
const c = `foo ${a} ${b} bar`
console.log(c)
// foo hello world bar
console.log(c.startsWith("foo"))
// true
// startsWith,endsWith,includes

…values的运用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const a = 'hello'
const b = 'world'
const c = test `foo ${a} ${b} bar`
function test(strs, ...values){
    console.log(strs,values)
}

// 0: "foo "
// 1: " "                                                     
// 2: " bar"
// length: 3
// raw: (3) ["foo ", " ", " bar"] 
// 0: "hello"
// 1: "world"
// length: 2

下面代码中，所有模板字符串的空格和换行，都是被保留的，比如

    标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

    1
    2
    3
    4
    5
    6
    $('#list').html(`
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    `.trim());

    大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
    模板字符串之中还能调用函数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    let x = 1;
    let y = 2;

    `${x} + ${y} = ${x + y}`
    // "1 + 2 = 3"

    `${x} + ${y * 2} = ${x + y * 2}`
    // "1 + 4 = 5"

    let obj = {x: 1, y: 2};
    `${obj.x + obj.y}`
    // "3"

    function fn() {
      return "Hello World";
    }

    `foo ${fn()} bar`
    // foo Hello World bar

    对象和数组

    数组

    1
    2
    3
    4
    const s = "😺😄🙄👌"
    const r = Array.from(s)
    console.log(r)
    // ["😺", "😄", "🙄", "👌"]

    字符串拼接, …拓展运算符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const s = "😺😄🙄👌"
    const t = ["🌺","🍊",...s]
    console.log(t)

    // 0: "🌺"
    // 1: "🍊"
    // 2: "😺"
    // 3: "😄"
    // 4: "🙄"
    // 5: "👌"
    // length: 6

    对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const s = "😺😄🙄👌"
    const t = ["🌺","🍊",...s]
    const k = 'arr'
    const r = {
        [k+1]:'1',
        s,
        t
    }
    console.log(r)

    // arr1: "1"
    // s: "😺😄🙄👌"
    // t: (6) ["🌺", "🍊", "😺", "😄", "🙄", "👌"]
    // __proto__: Object
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const eat = {
        getEat(){
            return "🍗"
        }
    }
    const drink = {
        getDrink(){
            return "🍺"
        }
    }
    let sunday = Object.create(eat)
    console.log(sunday.getEat())
    console.log(Object.getPrototypeOf(sunday))
    console.log(Object.setPrototypeOf(sunday, drink))
    console.log(sunday.getDrink())

    // {getEat: ƒ}
    // {}
    //     __proto__:
    //     getDrink: ƒ getDrink()
    //     __proto__: Object
    // 🍺
    1. 对象有proto属性，函数有prototype属性；
    2. 对象由函数生成;
    3. 生成对象时，对象的proto属性指向函数的prototype属性。
      在没有手动修改proto属性的指向时，以上三条便是JavaScript默认原型链指向逻辑。

    参考

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    const eat = {
        getEat(){
            return "🍗"
        }
    }
    const drink = {
        getDrink(){
            return "🍺"
        }
    }
    let sunday = {
        __proto__: eat
    }
    console.log(sunday.getEat())
    sunday.__proto__ = drink
    console.log(sunday.getDrink())

    // 🍗
    // 🍺
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const eat = {
        getEat(){
            return "🍗"
        }
    }
    let sunday = {
        __proto__: eat,
        getEat(){
            return super.getEat() + "🍔"
        }
    }
    console.log(sunday.getEat())
    // 🍗🍔

    函数

    1
    2
    3
    4
    5
    const fn = function p(){

    }
    console.log(fn.name)
    // p

    箭头函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    (()=>{
        console.log('hello')
    })()
    // hello

    const r = [1,2,3].map(function(i){
        return i*3
    })
    console.log(r)
    // (3) [3, 6, 9]

    const r = [1,2,3].map((i)=>i*3)
    console.log(r)
    // (3) [3, 6, 9]

    在调用的一瞬间，this就被绑定到s上了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const s = {
        a: 40,
        p: function(){
            const q = {
                a: 50,
                test: ()=>{
                    console.log(this.a)
                }
            }
            q.test()
        }
    }
    s.p()
    // 40

    函数是唯一可以影响this指向的因素，而箭头函数不影响this的指向。this在箭头函数中已经按照词法作用域绑定了，用call()或者apply()调用箭头函数时，无法对this进行绑定。
    参考

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    window.a = 50
    const s = {
        a: 40,
        p: function(){
            console.log(this.a)
        }
    }
    s.p()
    // 40

    window.a = 50
    const s = {
        a: 40,
        p: ()=>{
            console.log(this.a)
        }
    }
    s.p()
    // 50

    传参

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function test({options=true}={}){
        console.log(options)
    }
    test({options:{a:1,b:2}})
    // {a: 1, b: 2}

    function test(...options){
        console.log(options)
    }
    test(30,{options:{a:1,b:2}})

    // (2) [30, {…}]
    // 0: 30
    // 1:options: {a: 1, b: 2}
    // __proto__: Object
    // length: 2
JavaScript