ES6语法

1.变量和声明

• let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
• const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了。(如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行。)

2.模板字符串

• 用``来包含字符串,里面插入js用${}包裹
• ${表达式} hello${name}

3.函数

• 1.函数定义参数默认值

  • es5

      function action(num) {
          num = num || 200
          //当传入num时，num为传入的值
          //当没传入参数时，num即有了默认值200
          //num传入为0的时候就是false(bug)
          return num
      }
    

  • es6

      function action(num = 200) {
          console.log(num)
      }
      action(0) // 0
      action() //200
      action(300) //300
    

• 2. 箭头函数

  • 特点

    • 不需要 function 关键字来创建函数
    • 省略 return 关键字
    • 继承当前上下文的 this 关键字

    //例如：

          [1,2,3].map(x => x + 1)
    

    //等同于：

          [1,2,3].map((function(x){
              return x + 1
          }).bind(this))
          //参数name就没有括号
          var people = name => 'hello' + name
          //如果缺少()或者{}就会报错
          var people = (name, age) => {
              const fullName = 'hello' + name
              return fullName
          }
    

4.拓展的对象功能

• ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

    function people(name, age) {
        return {
            name: name,
            age: age
        };
    }
    <!-- 键值对重名，ES6可以简写如下： -->
    function people(name, age) {
        return {
            name,
            age
        };
    }
  

• ES6 同样改进了为对象字面量方法赋值的语法。

    const people = {
        name: 'lux',
        <!-- es5 -->
        getName: function() {
            console.log(this.name)
        }
        <!-- es6 -->
         getName () {
            console.log(this.name)
        }
    }
  

• ES6 对象提供了 Object.assign()这个方法来实现浅复制。

    const objA = { name: 'cc', age: 18 }
    const objB = { address: 'beijing' }
    const objC = {} // 这个为目标对象
    const obj = Object.assign(objC, objA, objB)
    // 我们将 objA objB objC obj 分别输出看看
    console.log(objA)   // { name: 'cc', age: 18 }
    console.log(objB) // { address: 'beijing' }
    console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
    console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }
    // 是的，目标对象ObjC的值被改变了。
    // so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
    Object.assign({}, objC, objA, objB)
  

5.更方便的数据访问--解构

    <!-- es5 -->
    const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)
    <!-- es6 -->
    //对象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

6.Spread Operator 展开运算符

    <!-- 组装对象或者数组 -->
    //数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"}
    <!-- 有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项 -->
    //数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}
    <!-- 对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边 -->
    const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second}
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }，任何形式的转载都请联系作者获得授权并注明出处。

7.import 和 export

• import导入模块、export导出模块

    import people from './example'
    //导入部分
    import {name, age} from './example'
    // 导出默认, 有且只有一个默认
    export default App
    // 部分导出
    export class App extend Component {}; 
  

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

8.常见方法

<!-- 字符串查找 -->
console.log(blog.indexOf(cc)); //ES5的方法是 返回的是6
console.log(blog.includes(cc)) //直接返回true
<!-- 判断开头是否存在： -->
blog.startsWith(cc);
<!-- 判断结尾是否存在： -->
blog.endsWith(cc);
<!-- 复制字符串 -->
'cc,'.repeat(3);
<!-- json字符串转换为数组 -->
Array.from(json);
<!-- 数组转换为字符串 -->
arr.toString()
<!-- 改变数组或者字符串的分隔符 -->
arr.join('|') 
<!-- 字符串转数组 -->
Array.of(3, 4, 5, 6)
<!-- 查找字符串里面的值，满足条件就在找到的第一个地方停止 -->
var arr =[1,2,3,4,5,6]
console.log(arr.find(function(value, index, arr) {
    console.log(`${value}---${index}---${arr}`);
    return value > 2;
})) 
<!-- 数组填充 它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置 -->
var arr4 = [0, 1, 2, 3, 4, 5, 6];
arr4.fill('cc', 1, 2);
document.write(arr4) //输出 [0, "cc", 2, 3, 4, 5, 6]
<!-- entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。进行手动遍历 -->
let arr=['jspang','技术胖','逼逼叨']
let list=arr.entries();
console.log(list.next().value);
console.log('执行完这个，再继续遍历')
console.log(list.next().value);
console.log('执行完这个，再继续遍历')
console.log(list.next().value);
<!-- in的方法 -->
let arr=[,,,,,];
console.log(arr.length); 
//上边的代码输出了5，但是数组中其实全是空值，这就是一个坑 ES6的in就可以解决这个问题   
console.log(0 in arr); //这里的0指的是数组下标位置是否为空。