1.高级语法

1.1变量声明

//1 var 声明的变量，可以提升
{
    var a = 10;
}
console.info(a);    //10
//2 允许重复声明
var b = 20;
var b = 30;
console.info(b);   //30
//3 允许重新赋值
b = 40;
console.info(b);   //40
//4 允许只声明不赋值
var c;
console.info(c);    //undefined

//1 let声明的变量，不允许变量提升
/*
{
    let a = 10;
}
console.info(a);    //异常， a is not defined
*/
//2 存在暂时性死区 : 在块代码中，所有的变量都是局部变量 (必须先声明，再使用)
/*
var b = 10;
{
    console.info(b);        //b is not defined
    let b = 20;
}
*/
//3 不允许重复声明
/*
var c = 10;
let c = 20;     //Identifier 'c' has already been declared  (变量c已经声明了)
*/
/**/
//4 允许重新赋值
let d = 10;
d = 20;
console.info(d);    //20
//5 允许只声明不赋值
let e;
console.info(e);    //undefined

const

const a = 10;
//1. 不允许提升
/*
{
    const b = 10;
}
console.info(b)     //b is not defined
*/
//2. 存在暂时性死区
/*
var c = 10;
{
    console.info(c)     //c is not defined
    const c = 20;
}
*/
//3. 不允许重复声明
/*
const a = 20;           //Identifier 'a' has already been declared
*/
//4. 不允许重新赋值
/*
a = 20;             //Assignment to constant variable.
*/
//5. 不允许只声明不赋值
//const d;            // Missing initializer in const declaration

1.2解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
ES5获得对象数据的语法，如下：

1.const people = {
    name: 'lux',
    age: 20
}
const name = people.name;       //ES5写法
const age = people.age;
console.log(name + ' ‐‐‐ ' + age)

对象解构：从一个对象一次性解析出多个属性给不同变量

解构的变量名，必须与属性名保持一致。

var person = {
    username : "jack",
    password : "1234",
    "show" : function(){
        console.info("show执行了");
    },
    course : {
        en : 100,
        math : 99
    }
}
//es5获得数据
console.info( person.username )
console.info( person.password )
person.show()
//对象解构
let {username,password,show, age } = person;
console.info(username)      //jack
console.info(password)      //1234
console.info( show )        //[Function: show]
console.info( age )         //undefined
show();                     //show执行了
//结构对象中的对象
let {course} = person;
console.info(course)    //{ en: 100, math: 99 }
let {course : {en, math}} = person;
console.info(en)        //100

数组解构：按照数组排序依次赋值

// 声明数组
var arr = ['江苏','宿迁'];
// 从数组中解构成员
let [province, city] = arr;
console.info(province)
console.info(city)
//交换2个变量
let x = 10;
let y = 20;
console.info(`x = ${x} , y = ${y}`);
[y,x] = [x,y];
console.info(`x = ${x} , y = ${y}`);

常见应用：遍历Map （稍后讲解）

1.var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

常见应用：模块内容的提取（稍后讲解）

const { SourceMapConsumer, SourceNode } = require("source-map");

1.3函数参数名默认值

在声明函数参数时，给参数设置默认值

function log(x, y = 'World') {        //y参数设置默认值
    console.log(x, y);
}
log('Hello')                // Hello World
log('Hello', 'China')             // Hello China
log('Hello', '')              // Hello

默认值和解构

function fun1({x = "x1" , y } = {y : "y2"}){
    return [x , y] ;
}
console.info( fun1() );        //[ 'x1', 'y2' ]
console.info( fun1({}) );   //[ 'x1', undefined ] ，
              //{} 覆盖 {y:"y2"} ,解构默认值，x=x1,y=undefined

默认值应用：参数必填

function fun2(args = new Error("参数必须填写")){
    console.info(args);
}
fun2();
fun2("abc");

1.4箭头函数的this

this对象：
function函数中this表示当前对象
箭头函数没有自己的this，箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，在浏览器环境下this是window；在node.js环境下为指定环境（例如：vue）
创建 demo03_2.js 文件

var name="外部";
var user = {
    name : '内部',
    show : function(){
        console.info(this.name)
    },
    show2 : () => {
        console.info(this.name) 
        console.info(user.name)
    }
}
user.show()         //内部
user.show2()        //undefined、内部

创建 demo03_3.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>
<script>
    var name="外部";
    var user = {
        name : '内部',
        show : function(){
            console.info(this.name)
        },
        show2 : () => {
            console.info(this.name)
            console.info(user.name)
        }
    }
    user.show()         //内部
    user.show2()        //外部、内部（在浏览器端，this表示window）
</script>

1.5Map数据结构(Map集合)

JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串。

1.6Set数据结构(Set集合)

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

//Set集合：存储唯一数据
var set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(2);
set.add(1);
console.info( set );        //Set { 1, 2, 3 }

过滤数组中重复的数据

var arr = [2, 3, 5, 4, 5, 2, 2];
//方式1
var set2 = new Set();
// 1) 遍历数组，将数据添加到set
arr.map( s => set2.add(s) );
// 2) 遍历set集合，添加到新数组
var arr2 = [];
set2.forEach( v => arr2.push(v) );
console.info( arr2 );       //[ 2, 3, 5, 4 ]
//方式2
var arr3 = [ ... new Set(arr) ]
console.info( arr3 );       //[ 2, 3, 5, 4 ]

1.7for...of遍历

在JavaScript中，数据的遍历存在多种，在ES6中提供了for…of ，用于统一所有数据结构的遍历。

//准备数据
var arr4 = ['x','y','z'];
var map4 = new Map();
map4.set("a","1111");
map4.set("b","2222");
map4.set("c","3333");
var set4 = new Set();
set4.add("m");
set4.add("n");
set4.add("L");
var obj4 = {
    name : "jack",
    password : "1234"
}

for…of遍历

// for ... of 
for(let a of arr4){           //遍历数组
    console.info(a);
}
for(let [k,v] of map4){      //遍历Map，for…of与解构结合遍历Map
    console.info(`输出的数据键是${k}值是${v}`);
}
for(let s of set4){          //遍历Set
    console.info(s);
}
for(let key of Object.keys(obj4)){    //自定义对象不能遍历,需要借助keys转换成“键数组”
    console.info(`对象的键是${key},值是${obj4[key]}`);
}
for(let [k,v] of Object.entries(obj4)){//也可以借助entries转换成“键值对”
    console.info(`entries : 对象的键是${k},值是${v}`);
}
//补充：自定义对象通过特殊处理（[Symbol.iterator]）也可以遍历，但存在bug，不完善，参考如下：
let obj = {
  //原有内容
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
}

JS中已有的遍历

遍历方式	描述	实例
for循环遍历	普通循环，常用于处理数组	for (let i = 0;i < array.length;i++){
map()	数组链式操作函数	array.map( fn ).xxx()
forEach()	简化数组、Map、Set的遍历	xxx.forEach( fn )
for…in	任意顺序遍历一个对象的可枚举属性	for(let xx in obj) {}
for…of	不同的数据结构提供统一的访问机制	for(let xx of obj) {}

map函数的使用

//map函数 , 将数组转换一个新数组  
//var 新数组 = 旧数组.map( 处理函数 );    //旧数组中的每一个元素，都将通过“处理函数”进行处理
//实例：将数组 ['a','b','c'] 转换成字符串 'cba'
var m = arr4.map( s => {
    return s.toUpperCase();
}).reverse().join(",");
console.info(m);

forEach函数的使用

//forEach遍历
arr4.forEach(s => {         //遍历数组
    console.info(s);
});
map4.forEach( (k,v)=> {     //遍历Map
    console.info(`${k} ${v}`);
});
set4.forEach( k => {        //遍历Set
    console.info( k ) ;
});
//obj4.forEach();           //不支持

for…in遍历对象

1.for(let prop in obj4){
    console.info( prop  + "," + obj4[prop]);
}

1.8rest参数(形参...)

rest参数，就是JS的可变参数。在形参列表的最后一位变量前，使用“...”

函数名(参数1, 参数2, …可变)

function add(...num){                 //可变参数num，就是一个数组，运行时存放了所有的实参
    var sum = 0 ;
    num.forEach( i => sum += i);
    return sum;
}
console.info( add(1,2,3) );
function count(args,...other){
    console.info(arguments.length);     //虽有参数的个数，伪数组，不能使用forEach进行遍历
    console.info(other.length);         //可变参数的个数，真数组，可以使用forEach进行遍历
}
count(1,2,3);

1.9扩展运算符(实参...)

扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，

操作数据是数组，将一个数组转为用逗号分隔的参数序列。
操作数据是对象，取出参数对象的所有可遍历属性，拷贝到当前对象之中

var arr = ['a','b','c'];
function fun3(x,y,z){
    console.info( [x,y,z] );
}
fun3( arr );        //[ [ 'a', 'b', 'c' ], undefined, undefined ]
fun3( ...arr );     //[ 'a', 'b', 'c' ]
let z = { a: 3, b: 4 };
let n = { ...z };       // { a: 3, b: 4 }

2.模块化

在ES6之前，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

在ES6之前，社区提供了一些解决方案，最主要两种：CommonJS和AMD

2.1ES5 CommonJS解决方案

CommonJS一个服务器端的解决方案（commonsJs可以在node.js运行）
CommonJS 需要一个兼容的脚本加载器，来支持require 和 module.exports 函数，用于模块导入导出。
Node.js支持此种思想
模块导出

module.exports = (a,b)=> a+b;

模块导入

let add = require("./demo07_1");
console.info( add(1,2) );

2.2ES6 module 隐式要求

ES6的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制。
变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

2.3ES6 module

一个模块，就是一个对其他模块暴露自己的属性或者方法的文件。
ES6 模块主要由两个命令构成：export和import。
export命令：规定模块的对外接口。一条export语句声明一次，一个文件中可有多条。
import命令：导入其他模块。

2.4默认导出 export default

使用import命令加载模块，必须知道模块中的的变量名或函数名，否则无法加载。
为了方便使用模块，模块允许使用export default 定义默认输出。一个模块只允许一个默认输出。
默认导出变量

ESMAScript 6.0高级

1.高级语法

1.1变量声明

1.2解构赋值

1.3函数参数名默认值

1.4箭头函数的this

1.5Map数据结构(Map集合)

1.6Set数据结构(Set集合)

1.7for...of遍历

1.8rest参数(形参...)

1.9扩展运算符(实参...)

2.模块化

2.1ES5 CommonJS解决方案

2.2ES6 module 隐式要求

2.3ES6 module

2.4默认导出 export default

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

ESMAScript 6.0高级

1.高级语法

1.1变量声明

1.2解构赋值

1.3函数参数名默认值

1.4箭头函数的this

1.5Map数据结构(Map集合)

1.6Set数据结构(Set集合)

1.7for...of遍历

1.8rest参数(形参...)

1.9扩展运算符(实参...)

2.模块化

2.1ES5 CommonJS解决方案

2.2ES6 module 隐式要求

2.3ES6 module

2.4默认导出 export default

热门文章

最新文章

相关课程

相关电子书