ES6 - 基本语法 [ lesson 1-3 ]

之前一篇中讲到项目构建 但是一般浏览器都支持es6了 可以直接测试 所以久不用什么项目构建 先把语法学完再说

20190228 18:03

今天基本上把活都干完了 所以才会有一天时间学习 抽空开始学习es6 在后端把接口写好之前 准备把es6在搞搞清楚
写java的同学对es一定不陌生 看起来根本就是一个东西

这里放个连接线上测试ES6代码

Lesson 01 let const

var log = function(a){
    document.write(a)
}

function test(){
    let a = 2
    let a = 2 //报错
    for(let i =0;i<3;i++){
        console.log(i)
    }
    console.log(i) //报错 因为块级作用域
}

test()

function test_const(){
    // const PI;
    // PI = Math.PI  //报错

    const k = {
        a:1
    }
    k.b = 2
    console.log(k)
}
test_const()

Lesson 02 解构赋值

数组 对象 字符串 函数参数 数值 解构赋值 **类似python的 args
20:30 到家没饭吃 继续写吧 我看看我能学多久 反正也没事儿干

//数组解构赋值
{
  let a ,b ,rest;
  [a,b,c] = [1,2,3]
  console.log(a,b,c)
}

{
  let a,b,c;
  [a,b,...c] = [1,2,3,4,5,6,7,8,9,0]
  console.log(a,b,c)
}

{
  let a,b;
  ({a,b} = {a:'first',b:2})
  console.log(a,b)
}

{
  let a ,b,rest;
  [a,b,c="default"] = [1,2]  // 如果没有配对的值 就是undefined
  console.log(a,b,c)
}


//使用场景
// 1.变量交换

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

{
  function f(){
    return [1,2]
  }
  let a ,b
  [a,b] = f()
  console.log(a,b)
}


// 这个方法很有用啊 好神奇 选择性的接受某两个变量
{
  function f(){
    return [1,2,3,4,5,6]
  }

  let a,b,c
  [a,b,,,,c]=f()
  console.log(a,b,c) // 1 2 6
}
// 这两个场景可以混合使用
{
  function f(){
    return [1,2,3,4,5,6]
  }

  let a,b,c
  [a,b,...c]=f()
  console.log(a,b,c) // 1 2 [3, 4, 5, 6]
}


{
  let a = {
    p:22,
    q:true
  }

  let {p,q} = a
  console.log(p,q) //变量名跟key名必须一致
}

{
  let {a=10,b=5} = {a:3}
  console.log(a,b) //被更改 let
}
 
//json对象 这是最常使用到的场景 嵌套 理解好数据结构

{
  let data = {
    title:'aili',
    test:[{
      title:'test_aili',
      desc:'this is a description'
    }]
  }

  let {title:estitle,test:[{title:cntitle}]} = data

  console.log(estitle,cntitle) //aili test_aili
}

//剩下的就是函数里参数的解构赋值

Lesson 03 字符串拓展

21:55
安装babel-polyfill

{
  let str = "string"
  console.log("includes",str.includes("c"))
  console.log("start",str.startsWith("str"))
  console.log("end",str.endsWith("ing"))
}

// 重复
{
  let str = "aili"
  console.log(str.repeat(2))
} 

// 模板字符串 这个比较重要
{
  let name="list"
  let info = "hello world"

  let m = `i am ${name},${info}`
  console.log(m)
}

{
    console.log('是个大帅哥'.padStart(9,'aili'))   // aili是个大帅哥 就是讲后续字符串拼接到前面 并且可重复
    console.log('是个大帅哥'.padStart(13,'aili'))  //ailiaili是个大帅哥
    console.log('大帅哥是'.padEnd(8,'aili'))     //  大帅哥是aili 变相的插入头尾部 注意位数
}

//这个也有点酷炫了
{
    let user = {
        name:'aili',
        info:'hello world!!!!'
    }

    a`i am ${user.name},${user.info}`
    function a(s,v1,v2){
        console.log(s,v1,v2)   //i am ,,, |  aili |  hello world!!!!

        //这个s是个数组 好惊奇 ["i am ", ",", ""]
    }
}

{
    console.log(String.raw`Hi\n${1+1}`)
    console.log(`Hi\n${1+1}`)
}

今日分割线 明天继续