35.ES6语法介绍——2019年12月24日

2019年12月24日16:22:24

2019年10月09日12:04:44

1. ES6介绍

1.1 新的 Javascript 语法标准

——2015年6月正式发布

——使用babel语法转换器，支持低端浏览器

——流行的库基本都基于ES6构建，React默认使用ES6新语法开发

1.2 ES6包含内容

块级作用域、字符串、函数

对象扩展、解构

类、模块化等

2. 作用域

2.1 let

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

定义变量使用let替代var

{
  let a = 0;
  a   // 0
}
a   // 报错 ReferenceError: a is not defined

{
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

2.1.1 let与var的区别

let 只能声明一次 var 可以声明多次:

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

let 不存在变量提升，var 会变量提升:

console.log(a);  //ReferenceError: a is not defined
let a = "apple";

console.log(b);  //undefined
var b = "banana";

变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。

变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

2.2 const

Const 定义不可修改的变量

const PI = "3.1415926";
PI  // 3.1415926

const MY_AGE;  // SyntaxError: Missing initializer in const declaration

2.3 注意要点

const 如何做到变量在声明初始化之后不允许改变的？

其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。

此时，你可能已经想到，简单类型和复合类型保存值的方式是不同的。

是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。

而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

3. 字符串

3.1 使用反引号，直接写变量

let str1="xiaoye"
let str2="12"
console.log(`hello my name is ${str1},and my age is ${str2}`)
//hello my name is xiaoye,and my age is 12

3.2 多行字符串

console.log(`
hello
world
12
`)
//hello
//world
//12

4. 函数扩展

参数默认值

箭头函数

展开运算符

4.1 一般形式

const hello1=()=>{
    console.log("hello world")
}
hello1()

4.2 return语句省略

const hell2=x=>x*2
console.log(hell2(12))

4.3 传参，有默认值

const hello3=(name="xioaye")=>{
    console.log(`hello my name is ${name}`)
}

hello3();
hello3("xiaowang1");
//hello my name is xioaye
//hello my name is xiaowang1

4.4 展开符...

function hello4(name1,name2){
    console.log(name1,name2)

}

let arr=['hello','world']

hello4(...arr)

5. 对象扩展

Object.keys、values、entries

对象方法简写，计算属性

开运算符（不是ES6标准，但是babel也支持）

5.1 Object.keys(),Object.values(),entries()

let obj={
    "name":"xiaoye",
    "age":"12"
}
console.log(obj)
console.log(Object.keys(obj))
console.log(Object.values(obj))
//{ name: 'xiaoye', age: '12' }
//[ 'name', 'age' ]
//[ 'xiaoye', '12' ]

5.2 字段放进对象key中【name】

let name="imooc"

let obj={
    [name]:"hello imooc"
}
console.log(obj)
//{ imooc: 'hello imooc' }

6.解构赋值

6.1 数组解构

let arr=['hello','world']
let [arr1,arr2]=arr
console.log(arr1,arr2)
//hello world

6.2 对象解构

const obj={"name":'xiaoye','age':"12"}
const {name,age}=obj
console.log(name,age)
//xiaoye 12

7.类

class MyApp{
    constructor(){
        this.name='imooc'
    }
    sayHello(){
        console.log(`hello,${this.name}`)
    }
}
const app=new MyApp()
app.sayHello()

8.新的数据结构

8.1 Set，元素不可重复

8.2 Map

8.3 Symbol

9.模块化

export

import

10.常见代码片段

10.1 遍历数组 map

let arr=[1,2,3]

console.log(arr.map(function(v){
    console.log(v*2)
}))

console.log(arr.map(v=>v*2))
2
4
6
[ undefined, undefined, undefined ]
[ 2, 4, 6 ]

10.2 数组去重

 let arr=[1,2,3,3]
 console.log([...new Set(arr)])
 //[ 1, 2, 3 ]

10.3 连接数组

let arr=[1,2,3,3]
let arr1=[5,6]
console.log([...arr,...arr1])
//[ 1, 2, 3, 3, 5, 6 ]

11.箭头函数

参数 => 函数体

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

12.如何直接运行es6语法的js文件

查了好多教程，都是清一色的要装什么babel，我想说的是，在nodejs8以上已经原生支持es6语法书写代码了。

需要做如下两步：

1. 把原来的 *.js改为*.mjs

start-point.js
      ↓
start-point.mjs

1. 需要增加node运行参数

--experimental-modules

//举个栗子
node --experimental-modules start-point.mjs