ES6快速入门（一）

目录

1: ES6

1.1：ECMAScript 6.0 简介

1.2：为什么要学ES6？ES6的用处是什么？

2：基本语法：

2.1：新特性 let与const的详细介绍，以及区别

2.2. let：声明变量以及与var声明变量的区别。

 2.3：const声明常量（只读变量）

2.4：let声明的变量不能重复使用

2.5：let声明的变量不能变量提升

2.6：块状作用域(ES6)

2.7：使用let声明的变量不属于顶层对象

2.8：let和var的区别：

3：变量的结构赋值

3.1：代码实例

4：for...of的基础介绍

4.1：代码实例

​编辑

---

1：ES6

1.1：ECMAScript 6.0 简介
ECMAScript 6.0 (以下简称ES6, ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)，通过ECMA-262标准化的脚本程序设计语言) 一种脚本语言的 标准 ,已经在2015年6月正式发布了,并且从ECMAScript6开始,开始采用年号来做版本。即ECMAScript2015,就是ECMAScript6它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言(JavaScript下一代语言标准)。

1.2：为什么要学ES6？ES6的用处是什么？
ES5不能满足目前前端越来越复杂，庞大的现状，可以说已经过时了，ES6是对ES5的增强和升级。

ES6的主要目的是为了解决 ES5 的先天不足。
1.主流的浏览器都已经全面支持ES6
2.行业内较新的前端框架都已经全面使用ES6的语法
3.微信小程序,uni-app等都是基于ES6的语法
4.从就业出发，中小型公司，全栈，简历上多一个技能，试用期也能更快的上手。

2：基本语法：

ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性。本部分只学习项目开发中涉及到ES6的最少必要知识，方便项目开发中对代码的理解。

2.1：新特性 let与const的详细介绍，以及区别（重点）

let	const
用于声明变量	用于声明常量
let声明的变量不能重复使用	声明常量用大写，不是规则，是一种默契（程序员）
let声明的变量不能变量提升	常量不能修改
块状作用域	块状作用域
使用let声明的变量不属于顶层对象	使用const声明的变量不属于顶层对象

2.2. let：声明变量以及与var声明变量的区别。
在此之前js定义变量只有一个关键字：var，但var定义的变量有作用域混乱的问题

例如下代码

for (var i=0; i<10; i++) {
    console.log('循环内： ' + i);
}
console.log('循环外： ' + i);
结果：

从运行结果来看，变量i是全局变量

使用let就可以避免这样的问题

for (let i=0; i<10; i++) {
    console.log('循环内： ' + i);
}
console.log('循环外： ' + i);

 2.3：const声明常量（只读变量）

 //定义常量const 
 PI = 3.14
 // PI = 3;
 //定义之后不能改变 

2.4：let声明的变量不能重复使用

    // 1：let
     let week="第一";
     let week="第二";
     console.log(week);
     //2：const
    const weekTwo="第一";
    const weekTwo="第二";
    console.log(weekTwo);

1，2报错：---不能重复使用

2.5：let声明的变量不能变量提升

2.6：块状作用域(ES6)

.概念：一个块级作用域也就是一对{}，花括号在ES5和ES6中还是有些区别的。

           在ES5中，花括号起到的作用是分类和分组的作用。

ES6的块级作用域与let和const搭配才能形成块级作用域。

{
    var a = 1
    }

{
    const b = 2
    }
console.log(a) // 1
console.log(b) // b is not defined

a没有在函数体中，所以不是函数作用域，而是在全局作用域中
const、let会会直接以花括号为界限形成一个封闭的区域。

2.7：使用let声明的变量不属于顶层对象

2.8：let和var的区别：

• 作用域：var声明的是全局作用域或函数作用域；而let和const是块作用域(let只在自己声明的作用域有效，var是在全局作用域有效 ，尽量少用var，尽量可能的用let，因为var没有封装，容易污染别人的代码。)。
• 声明初始化：var和let在声明的时候可以不进行初始化；而const在声明的时候必须初始化。
• 修改与重复声明：var在可以修改和重复声明；而let只能修改，不能在同一作用域下重复声明；const声明常量不可修改也不可重复声明。
• 变量提升：var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined；let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则会报错(let严格遵守代码的顺序，不存在变量提升。而var声明的变量，会忽略声明的顺序，可以变量提升。)。
• 暂存性死区：var不存在暂时性死区；let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

3：变量的结构赋值

3.1：代码实例练习：

<script>
    // 1:数组的解构
    let [a,b,c,d]=[1,2,3,4];
    console.log(c);

    // 2；对象的结构
let {name,age}={//name:name  简写了，拿的是后面的值
    name:'cege',
    age:18
}
console.log(name,age);

// 3:复杂对象
let obj={
    code:200,
    result:["三国","水浒","红楼"]
}
let {result:[book1,,book3]} =obj;
console.log(book1,book3)

// 4:交换两个变量的值
let num1=3;
let num2=5;
// 4.1
// let temp=num1;
// num1=num2;
// num2=temp;
// 4.2 不使用第三个变量
[num1,num2]=[num2,num1];
console.log(num1,num2)


// 输出
// jiegoufuzhi.html:59 cege 18
// jiegoufuzhi.html:67 三国 红楼
// jiegoufuzhi.html:78 5 3

4：for...of

4.1：实例介绍：

// let obj={
    //     a:1,
    //     b:2,
    //     c:3
    // }
    // for in 主要遍历对象，也可以遍历数组（的下标）
    // for(x in obj){
    //     console.log(x);//a,b,c
    //     console.log(obj[x]);//1,2,3
    // }  
    let arr=["A","B","c"];
    for(x in arr){
        console.log(x);
    }
    // forEach 用于纯属组
    // for of纯数组与类数组
    var ps=document.getElementsByTagName("p");
    ps.forEach(function(item,index){
        console.log(item)
    })

    for(item of ps){
        console.log(item);
    }