ES6学习总结

1.let 和 cons t命令

let 命令

ES6新增了let命令用来声明变量，其作用类似于var，所声明的变量只在let命令所在的代码块内有效。

var命令存在“变量提升”现象，即变量可以在声明之前使用，值为undefined，而let不存在变量提升，在

声明之前使用该变量就会报错ReferenceError。

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”在这个区域，不收外部影响。如：

var temp=123；

if(true){

      temp=345;//ReferenceError

      let temp;

}

上面代码存在全局变量temp，但在块级作用域内使用let声明了一个局部变量temp，导致后者绑定

这个块级作用域，所以在let变量声明前，对temp赋值会报错。

const命令

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

const i = 123；

i=4；//TypeError:Assignment to constant variable

上面代码就会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须初始化，不能留到以后赋值。

2字符串模板

将表达式嵌入字符串中进行拼接。使用S{}来进行界定。

//es5

var name='123';

console.log('hello'+name);

//es6

const name='123'

console.log(`hello${name}`);

3函数

默认参数

在ES5中给函数定义默认参数

function action (num){

        num = num || 100

        return num

}

当num传入0的时候就是false，num=100。

在ES5中

function action(num=100){

     return num+100

}

action()  //200

action(200) //300

箭头函数

ES很有意思的一部分就是函数的快捷写法，也就是箭头函数。

箭头函数最直观的三个特点。

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

例如：

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

等同于：

[1,2,3].map(function(x){

      return x+1

}).bind(this)

当函数仅有一个参数的时候可以省略括号，当函数返回有且仅有一个表达式的时候可以省略{}:例如：

var  people = name => 'hello'+name

4对象扩展

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

function people (name, age){

     return {

        name:name,

        age:age

   }

}

ES6中,键值对重名的情况下，可以简写如下：

function people(name, age){

   return {

       name,

       age

  }

}

ES6通过省略冒号与function关键字，将这个语法变得更加简洁

const people = {

    name:'hello',

    getName (){

      console.log(this.name)

  }

}

ES6对象提供了Object.assign()这个方法来实现对象复制，第一个参数为目标对象，在实际项目中，为了不改变

源对象，一般把目标对象传为{}

const obj = Object.assign({}, objA, objB);

在ES6中回去对象信息能使用解构的方法

const people = {

      name:'hello',

      age:20

}

const { name, age } = people

console.log(`${name}----${age}`)

5 import 和export

import导入模块、export导出模块

//全部导入

import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入

//该模块的所有导出都会作为对象的属性存在

import * as example from "./example.js"

console.log(example.name)

console.log(example.age)

console.log(example.getName())

//导入部分

import {name, age} from './example'

// 导出默认, 有且只有一个默认

export default App

// 部分导出

export class App extend Component {};

导入时有没有大括号的区别。

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

当用export name时，就用 import { name } （带上大括号）

6.模板字符串