目录
1.环境准备
1.1 初始化项目
安装较高版本的node之后，输出下面命令安装项目，初始化项目，
npx es10-cli create es6-10-project
npm start //启动项目
1.2 visual studio code安装插件
beautify 和eslint插件
2.ES2015
2.1 let 和const
2.1.1 全局作用域
直接定义了html文件，文件引入demo.js和demo1.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6 入门导学</title>
</head>
<body>
<h1>h33</h1>
<script src="./static/demo.js" charset="utf-8"></script>
<script src="./static/demo.1.js" charset="utf-8"></script>
</body>
</html>
demo.js文件内容如下，定义了一个变量a
a="aa";
var b="bbb"
demo.1.js文件内容如下，输出变量a的内容
console.log(a);
//aa
console.log(b);
//bbb
在浏览器中运行发现，变量a和变量b的内容被输出。在控制台中打印window.a发现也是可以访问到a变量的，说明a是个全局变量，直接打印a也是可以访问到的。
>a
"aa"
>b
"bbb"
>window.a
"aa"
>window.b
"bbb"
>delete a
true
//没有被var定义的对象，作为全局对象window的一个属性，可以被删除
>delete window.a
true
//没有被var定义的对象，作为全局对象window的一个属性，可以被全局访问，可以被删除
>delete b
false
//被var定义的对象，作为全局变量（对象），不能被删除，
全局变量具有全局作用域，在函数内部或者代码块中没有被var定义的变量都具有全局作用域，但不是全局变量。。
这2个看上去一样，其实不一样。其实第1个不能被称为全局变量，根据delete的结果来判断（没有被var定义的变量不支持，不叫全局变量），delete可以删除对象的属性。
window对象的属性，可以不加window.，也可以被访问到。
扫描二维码关注公众号，回复：
10791352 查看本文章
全局变量是不可以被删除的，对象中的属性是可以被删除的。
window对象是一个全局对象，var声明的变量其实和window对象一样，没有被var声明的对象被当成全局对象的属性在用。
接下来看一个在函数作用域内中定义的变量的区别，修改demo.js文件，文件内容如下：
a="aa";
var b="bbb"
function test() {
var abc="abc"
ab=45
}
test()
修改demo.1.js文件，文件内容如下：
console.log(a);
console.log(b);
console.log(ab);
//45
console.log(abc);
//demo.1.js:5 Uncaught ReferenceError: abc is not defined
在函数内部或者代码块中没有被var定义的变量都是全局变量的属性，具有全局作用域。**
2.1.2 let 和const
比较let和var的区别，分析下面代码；
var b=3
let c=4
console.log(b,c)
//3 4
console.log(window.b,window.c)
//3 undefined
let 不能重复定义，不能进行变量提升，不能作为全局变量的属性，具有块级作用域。
let有的特性，const 都有，而且const定义的变量不能被修改，const一定要在初始化的时候被赋值。
2.2 Array
数组中主要包含遍历 、转换、生成、查找操作，下面介绍ES5和ES6主要包含的数组中关于这些操作的方法
2.2.1 数组的遍历
ES5中数组遍历有哪些方法？有什么优势和缺点
//ES5数组遍历
const arr=[1,2,3,4,5]
//for循环,比较麻烦
for(let i=0;i<arr.length;i++) {
if(arr[i]==22) {
continue
}
console.log(arr[i])
}
//1 2 3 4 5
//forEach,比较简单;但是不支持continue和break
arr.forEach(function(item){
console.log(item)
if(item===2) {
// continue //不支持，会报错
// break //不支持，会报错
}
})
// 1 2 3 4 5
//every
arr.every(function(item){
console.log(item)
})
//1
//默认返回未false,不往后遍历
arr.every(function(item){
console.log(item)
if(item===2) {
return false
}
return true
})
// 1 2 3 4 5
arr.every(function(item){
if(item===2) {
return false
}
console.log(item)
return true
})
//1
//every实现continue
arr.every(function(item){
if(item===2) {
}else {
console.log(item)
}
return true
})
//1 3 4 5
//forin 为object遍历设计，不是为数组设计的，数组也是对象
for (let index in arr) {
console.log(index,arr[index])
}
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
//forin实现continue效果
for (let index in arr) {
if(index==2) {
continue
}
console.log(index,arr[index])
}
// 0 1
// 1 2
// 3 4
// 4 5
//forin不能实现continue效果,index是字符串，(===)就不会相等了，
//因为会检查类型，在控制台是黑色的，黑色代表字符串，蓝色代表数字
for (let index in arr) {
if(index===2) {
continue
}
console.log(index,arr[index])
}
// 0 1
// 1 2
// 1 2
// 3 4
// 4 5
//forin里面的index，这个字符串可以转换为数组，通过index*1
for (let index in arr) {
if(index*1===2) {
continue
}
console.log(index,arr[index])
}
// 0 1
// 1 2
// 3 4
// 4 5
//forin会把数组的属性值也会遍历出来
arr.a=8
for (let index in arr) {
console.log(index,arr[index])
}
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
// a 8
ES6中数组的遍历-forof
//ES6数组遍历
//for of，ES6允许自定义数据结构，出现不是数组，不是object的对象，除了数组和object其他的遍历用forof
for (let item of arr) {
console.log(item)
}
const price={
A:[1.5,2.3,4.5],
B:[3,4,5],
C:[0.5,0.8,1.2]
}
for (let key in price) {
console.log(key,price[key])
}
// A(3) [1.5, 2.3, 4.5]
// B (3) [3, 4, 5]
// C (3) [0.5, 0.8, 1.2]
2.2.2 Array(伪数组转换成数组)
在特性上像数组，但是不能直接调用数组的方法
//伪数组按照索引存储数据，有length属性
//ES5伪数组转换成数组
let args=[].slice.call(arguments)
console.log(args)
let img=[].slice.call(document.querySelectorAll('img')) //nodelist
//伪数组按照索引存储数据，有length属性
//ES6伪数组转换成数组
let args=Array.from(arguments)
let img=Array.from(document.querySelectorAll('img'))ES5
声明一个长度为5的数组，把数组中的元素初始化为1，ES5和ES6的做法如下，Array.from的方法代码要简洁很多
//把数组中的元素初始化为1
//ES5的做法
let array=Array(5)
for(let i=0;i<5;i++) {
array[i]=1
}
console.log(array)
//(5) [1, 1, 1, 1, 1]
//ES6的做法，把数组中的元素初始化为1
let array2=Array.from({length:5},function() {
return 1
})
console.log(array2)
// (5) [1, 1, 1, 1, 1]
2.2.3 创建一个新数组
ES5和ES6创建数组的方法有哪些呢？
//生成新数组
//ES5
let array=Array(5)
let arry2=["",""]
arry2.push('a')
//ES6,允许把多个元素放到一个数组,ES5可以使用push的方法
//Array.of可以生成有一个或者多个元素的数组
let array3=Array.of(1,2,3,4,5)
console.log(array3)
//(5) [1, 2, 3, 4, 5]
//生成一个数组，把数组中的元素初始化为1，更简单的方法是用fill
let arrayFill=Array(5).fill(1)
console.log(arrayFill)
//(5) [1, 1, 1, 1, 1]
//如何替换数组的某一段的值呢？这里可以用fill函数指定要替换的位置范围
arrayFill.fill(8,2,4)
console.log(arrayFill)
//(5) [1, 1, 8, 8, 1]
2.2.4 数组里查找元素
ES5和ES6如何查找元素
//ES5如何查找一个元素呢，通过filter返回一个新数组，通过判断返回的数组长度是否为0 来判断是否存在该元素
let array=[1,2,3,4,5]
let find=array.filter(function(item){
return item=== 3
})
console.log(find)
//[3]
find=array.filter(function(item){
return item%2===0
})
//(2) [2, 4]
console.log(find)
//fiter会返回满足条件的所有值
//ES6中使用find和findIndex来查找元素，find只返回满足条件的第1个值
//findIndex会返回满足条件的索引值
find=array.find(function(item){
return item===3
})
console.log(find)
//3
find=array.find(function(item){
return item===6
})
console.log(find)
//undefined
find=array.find(function(item){
return item%2===0
})
console.log(find)
//2
//findIndex会返回满足条件的索引值
let findIndex=array.findIndex(function(item){
return item===3
})
console.log(findIndex)
总结：数组中主要包含遍历 、转换、生成、查找操作，ES5和ES6主要包含，下次自己写代码时候，要注意使用数组提供的这些方法。
2.3 类声明
2.4 函数和数据结构
2.4.1 如何处理函数的默认值
//参数默认值,可选参数和必选参数，x是必选，y和z是可选参数
//ES5的函数参数缺省默认值
function f(x,y,z) {
if(y===undefined) {
y=7
}
if(z==undefined) {
z=42
}
return x+y+z
}
console.log(f(1))
// 50
console.log(f(1,8))
//51
//ES6的函数参数缺省默认值
function f2(x,y=7,z=42){
return x+y+z
}
console.log(f2(1))
// 50
console.log(f2(1,8))
//51
//如果不想传递y，传递z呢，通过undefined来跳过
console.log(f2(1,undefined,43))
//51
//参数默认值还可以其他参数的表达式（z=x+y)
function f3(x,y=7,z=x+y){
//arguments是一个伪数组
console.log(Array.from(arguments))
// [1, undefined, 2]
//E5中arguments表示当前函数的参数情况,ES6不让使用arguments
return x*10+z
}
console.log(f3(1,undefined,2))
//ES6如何判断函数参数的个数，用函数体的length属性可以获取没有 默认值参数的个数
function f4(x,y=7,z=x+y){
console.log(f4.length)
//1
return x*10+z
}
console.log(f4(1,undefined,2))
2.4.2 如何处理不确定参数的问题
//ES6
function sum2(...nums) {
//rest 参数不确定时，放到nums里面
let num=0
nums.forEach(function(item){
num+=item*1
})
return num
}
console.log(sum2(1,2,3))
//6
//base可以取第1个参数，nums取后面的参数
function sum3(base,...nums) {
//rest
let num=0
nums.forEach(function(item){
num+=item*1
})
return base*2+num
}
console.log(sum3(1,2,3))
//7