JavaScrip入门指南之“ES6简介”（笔记七）

ES6语法的简介

浏览器：javascript 三个部分： ECMAScript + BOM + DOM 服务器：javascript = ECMAScript + 系统内置的核心模块(fs http)

ECMAScript 是什么？ 是一个 规范。 ECMA 是一个组织协会，协会专门负责制定各类规则。他们制定了一个 ECMAscript 规范，规定脚本语言实现。变量声明 var function fnName 有哪些语言实现这个规范： 1. JavaScript 2. actionScript（flash 动画 flash小游戏）

发展过程当中 js 有不少的版本的迭代 咱们前面学习的版本 ECMAscript5 版本

如今学习 ECMAScript6版本，也叫作es6版本。引入了不少新的语法特性。例如使用 let 声明变量 const 声明常量。

1、var的弊端及let关键字

使用var关键字声明变量的弊端：

一、var声明的变量有预解析，形成 逻辑混乱，能够先使用，后声明

二、var能够重复定义同一个变量，逻辑错误，第二次应该是修改变量，而不是定义

三、var用在for循环条件中，形成for 循环的污染的问题

四、var 声明的变量没有块级做用域（ES5中的做用域：全局和局部）

// 一、var声明的变量有解析，形成 逻辑混乱，能够先使用，后声明
// var a = 10;
// console.log(a);
​
// 二、var能够重复定义同一个变量，逻辑错误，第二次应该是修改变量，而不是定义
// var a = 10;
// var a = 30;
// console.log(a);
​
// 三、var用在for循环条件中，形成for 循环的污染的问题
// for(var i=0; i<10; i++){
//     console.log(i);
// }
// console.log("=====================");
// console.log(i);
​
// 四、var 声明的变量没有块级做用域（ES5中的做用域：全局和局部）
// {
//     var b = 200;
// }
// console.log(b);
复制代码

上面这些弊端，都在 ES6中的let关键字中获得解决： 上面这些弊端，都在 ES6中的let关键字中获得解决：

​
// console.log(a);   //报错
// let a = 10;
​
// let a = 10;
// let a = 30; //报错
​
​
// for(let i=0; i<10; i++){
//     console.log(i);
// }
// console.log("=====================");
// console.log(i);    //报错
​
​
{
    let b = 200;
}
console.log(b);   //报错
​
复制代码

因此，let的特色：

一、let声明的变量没有预解析，不会有变量提高

二、let不能够重复定义同一个变量

三、let用在for循环条件中，不会形成for 循环的污染的问题

四、let声明的变量有块级做用域（ES6中的做用域：全局和局部还有块级做用域）

2、用const定义常量

一、这种定义出来的量不容许被修改。修改就报错。

二、通常的，大多数状况下，会把const定义的量用大写来书写。

三、引入某个模块的某个对象，也能够用const，能够进行小写命名。

四、对象型的常量，它的属性能够修改

五、数组型常量中的每一项数据能够修改 五、数组型常量中的每一项数据能够修改

var PI = 3.141592653;

 console.log(PI);

 PI = 3.5;   //不符合咱们认知，由于π是个定值
 console.log(PI);
//----------------------------------------------------
 const PI = 3.141592653;   //定义PI常量
 PI = 3.5;    //报错
​
//----------------------------------------------------
 const OBJ = {
     name: "nodejs",
     age:11,
     email:"nodejs@163.com"
 };

 OBJ = {};  //报错

 OBJ.job = "nodejs@qq.com";  //能够修改为功
 console.log(OBJ);   //{ name: 'nodejs', age: 11, email: 'nodejs@qq.com' }
//----------------------------------------------------
​
const ARR = [10, 0, 30];
ARR[1] = 20;
console.log(ARR);   //[ 10, 20, 30 ]
复制代码

3、解构语法

3.一、对象解构

// 对象解构
let obj = {
    name:"nodejs",
    age:11,
    email:"nodejs@163.com"
}
​
let name = "zhangsan"
​
 获取obj的属性有哪些方法：
 方法1：
 let name = obj.name;
 let age = obj.age;
 let email = obj.eamil;
​
// 方法2：
 let name = obj["name"];
 let age = obj["age"];
 let email = obj["email"];
​
// 方法3：(解构)
 let {name, email, age} = obj;  //彻底解构    解构的写法等效于上面的方法1
 console.log(name, age, email);
​
​
let {name} = obj;   // 部分解构  等效于： let name = obj.name
console.log(name);
​
​
 let {name:myName} = obj;   // 部分解构起别名  等效于： let name = obj.name
console.log(myName);
​
// 注意点： 
 一、大括号里面的变量名，都只能是obj里面的属性名。
 二、大括号里面的变量名顺序能够任意
 三、若是只想获取部分属性，能够只写这部分属性名
 四、let {name} = obj;  等效于： let name = obj.name
 五、let {name:myName} = obj; 给name起了一个别名叫myName，取obj的name属性赋值给myName这个新变量
​
复制代码

3.二、数组解构

let arr1 = [10, 20, 30];
​
let [a, b, c] = arr1;
​
console.log(a);  //10
console.log(b);  //20
console.log(c);  //30
​
// 部分解构
let [d] = arr1;
console.log(d);  //10
​
let [ , ,f] = arr1;
console.log(f);  //30
​
​
// 复合解构
let arr2 = [1, 2, [10, 20, 30]];
let [ j, k, [x, y, z]] = arr2;
console.log(j);  //1
console.log(k);  //2
console.log(x);  //10
console.log(y);  //20
console.log(z);  //30
复制代码

3.三、字符串解构

let string1 = "xyz";
​
let [a,b,c] = string1;
console.log(a);  //x
console.log(b);  //y
console.log(c);  //z
​
​
string1[1] = "Y";
console.log(string1);  // xyz    没法修改
console.log(string1[1]);  // y
复制代码

4、模板字符串

var userInfo = {
    id: 1,
    name: 'andy',
    email: 'gogery@163.com'
}
​
// 需求：但愿把对象拼接为字符串： the userId is xxx, my name is xxx, my email is xxx;
​
/*var tmpl = 'the userId is '
    + userInfo.id + ', my name is '
    + userInfo.name + ', my email is '
    + userInfo.email;
​
console.log(tmpl);*/
​
​
var es5tpl = 'the userId is xxx, my name is xxx, my email is xxx';
​
​
// es6 提供一个语法表示一个字符串，使用的标识符是 反引号；
// 之前定义字符串使用的： '' ""
// 1. 容许换行 2. 容许在模板字符串里面直接使用变量
var infos = 'lorem';
​
var tmpl = `the userId is ${userInfo.id}, 
​
my name is ${userInfo.name},
​
string is ${infos}
 
 my email is ${userInfo.email}`;
// `` 反引号 数字键 1旁边的键，须要是 shift  + `
console.log(tmpl);
复制代码

5、es6对象的简化写法

/*var name = 'andy';
var age = 12;
​
var userInfo = {
    id: 1,
    name: name,
    age: age
}
​
console.log(userInfo);*/
​
let id = 12;
let name = 'andy';
let age = 12;
​
let fn = function(){
    console.log(`my name is ${this.name}` );
}
​
// es6 写法
let userInfo = {
    id,
    // 若是咱们的变量的名称和属性的名称一致，则能够直接只写变量名
    name, // name: name
    age,
    fn // 若是咱们的函数的名称和属性的名称一致，直接写函数名便可
}
​
console.log(userInfo);
userInfo.fn();
复制代码

6、ES6其余注意事项

注意： es6 语法特性若是是在nodejs的高版本执行没啥问题，高版本支持 es6；

若是是nodejs 低版本 4 5 不支持 es6（ECMAScript6 ECMAScript2015） 除了能够在nodejs 也能够在浏览器执行 注意：浏览器高版本才能够执行， 若是是 IE 678 确定不认识，直接报错。