本次ES6入门教程可以帮助大家快速认识学习ES6，但涉及的深度还需要挖掘，一些代码的底层原理还需要剖析出来，但仅凭一门编程语言，很不容易涵盖全部要点，我也会随着不断的学习，进行思考辩证，回溯更新文章的内容。
目录
ES6介绍
ES全称ECMAScript，是脚本语言的规范，而平时经常编写的javaScript是ECMAScript的一种实现，所以ES新特性其实指的就是javaScript的新特性。
ES6是其中的一个重要版本，变动内容最多，具有里程碑意义，加入许多新的语法特性，就业必备。
let变量声明以及声明特性
let a;//声明变量//1、变量不能重复声明
let star="123";
let star="345";//由于变量已经存在，则再声明的话会报错//2、块级作用域
{
let let_test=123;
}
console.log(let_test);//因为let是块级作用域，所以或报错
/*-----------------------------------------------------*/
{
var var_test=123;
}
console.log(var_test);//var是函数作用域，所以在整个函数内都是有效的//3、声明变量不会提升到代码块顶部，即不存在变量提升
console.log(song);
var song="恋爱达人";//输出undefined 但如果是 let song="恋爱达人"；则会报错//4、不影响作用域链
{
let school="望子成龙小学"；
function fn(){
console.log(school);//会先在该作用域下寻找变量school,若没有找到，则到它的上层作用域寻找
}
fn();
}let实践案例练习
问题很简单，点击其中一个的方格，方格颜色变为粉红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>let案例实战</title>
<style type="text/css">
.item {
height: 30px;
width: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
<script>
//方法一:用var方法
//获取div元素对象
let items = document.getElementsByClassName("item");
//遍历并绑定事件
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//items[i].style.background="pink";这样的写法是错误的，因为我们说过当遍历绑定完事件后，发生点击事件这里面的i是会变为3的
//因为这里的i是循环结束的i，因为监听事件是异步的
this.style.background="pink";//这里的this指的是所发生点击事件的那个元素
}
}
//方法二：用let方法
let items = document.getElementsByClassName("item");
//遍历并绑定事件
for(let i=0;i<items.length;i++){
items[i].onclick=function(){
items[i].style.background="pink";
}
//用let是可以的，因为let是块作用域，类似于
//{
// let i=0;
// items[i].onclick=function(){
// items[i].style.background="pink";
//}
//{
// let i=1;
// items[i].onclick=function(){
// items[i].style.background="pink";
//}
</script>这里对注释中的部分进行一个解释：因为let是块作用域，所以for循环中使用let也就等价于在代码块中先使用let进行变量的声明，然后再赋予点击事件，那对应的i肯定是块作用域的i。
const声明常量以及特点
const常量：值不能修改的量
const SCHOOL='望子成龙小学';
//1、一定要赋初始值
//2、一般常量使用大写
//3、常量的值不能修改
//4、块级作用域
//5、对于数组和对象的元素修改，不算作对常量的修改，不会报错
const TEAM=['UZI','MXLG','Ming','Letme'];
TEAM.push('Meiko');
//常量地址没有改变
//TEAM=100;这样就会报错变量的解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值
<script>
// 数组解构
const F4=['小沈阳','刘能'];
let [xiao,liu]=F4;
console.log(xiao);
console.log(liu);
// 对象解构
const zhao={
name:'赵本山',
age:'不详',
xiaopin:function(){
console.log("我可以演小品");
}
};
let {name,age,xiaopin}=zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
// 平常的读取方法是这样的，可见简化了重复的对象名
// zhao.name;zhao.age;zhao.xiaopin
</script>模板字符串
ES6引入新的声明字符串的方式 ` `
<script>
// 1、声明
let str=`我是一个字符串！`;
console.log(str);
// 2、内容中可以直接出现换行符
let str_s=`<ul>
<li>沈腾</li>
<li>马丽</li>
<li>魏翔</li>
</ul>`;
// 3、变量拼接
let lovest='魏翔';
let out=`${lovest}是我心目中最搞笑的演员`;
console.log(out);
</script> 对象的简化写法
<script>
// ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
// 这样的书写更加简洁
let name='望子成龙小学';
let change=function(){
console.log("我们可以改变你！")
}
const school={
name,
change,
improve(){
console.log("我们可以提高你的技能！");
}
};
school.change();
</script>箭头函数以及声明特点
//声明函数
let fn=function(a,b){
return a+b;
}
//箭头函数
let fn_row=(a,b)=>{
return a+b;
}
// 调用函数
let result=fn_row(1,2);
console.log(result);
// 1、箭头函数this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName(){
console.log(this.name);
}
let getName2=()=>{
console.log(this.name);
}
window.name='望子成龙小学';
// 直接调用(上面两个例子this指的都是window)
getName();// 望子成龙小学
getName2();//望子成龙小学
const school={
name:"SCHOOL"
}
// call方法调用 使用 call() 方法，可以编写能够在不同对象上使用的方法。
getName.call(school);//SCHOOL
getName2.call(school);//望子成龙小学
// 2、不能作为构造实例化对象
let Person=(name,age)=>{
this.name=name;
this.age=age;
}
// 3、不能使用arguments变量
let fn_a=()=>{
console.log(arguments);
}
fn_a(1,2,3);
// 4、(1)省略小括号：当形参有且只有一个的时候
let add=n=>{
return n+n;
};
console.log(add(9));
// (2)省略花括号，当代码体只有一条语句的时候,此时return必须省略
最低0.47元/天 解锁文章
3847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
