ES6语法入门

1、ES6语法补充

（1）let / var

事实上 var 的设计可以看做JavaScript 语言设计上的错误，但这种错误多半不能修复和移除，以为需要向后兼容；

• 十年前 Brenda Eich大神 就决定了 修复了这个问题，于是添加了一个新的关键字：let
• 我们可以把 let 看做 var 的替代品，更完美的var。

块级作用域

作用域：变量可用的范围。相当于java中的局部变量。

过去的 var 相当于是java中的全局变量

ES5之前因为没有 if 和 for 都没有块级作用域的概念，所以在很多的时候，我们都必须借助于function （匿名的function）的作用域来解决应用外面变量的问题 ==> 闭包

ES6 中加入了 let ，let 它是有 块级作用域的，如 if 和 for

<script>
			// 第一种，没有块级作用域引起的问题
			var btns = document.getElementsByTagName('input')
			for(var i = 0; i<btns.length; i++){
				btns[i].onclick = function(){
					console.log('第'+ i +'个按钮被点击')
				}
			}
		</script> -->
		<script>
			//闭包解决
			var btns = document.getElementsByTagName('input')
			for(var i = 0; i<btns.length; i++){
				((num)=>{btns[num].onclick = function(){
					console.log('第'+ num +'个按钮被点击')
				}})(i)
				
			}
		</script>
		
		 <script>
			//块级作用域解决
			const btns = document.getElementsByTagName('input')
			for(let i=0 ; i< btns.length; i++){
				btns[i].onclick = function(){
					console.log('第'+ i +'个按钮被点击')
				}
			}
		</script>

（2）const

const关键字

• 在很多语言中已经存在，比如c/c++ 主要的作用是将某个变量修饰为常量
• JavaScript也是如此，使用const 修饰的标识符为常量，不可以再次赋值

在什么时候使用const

• 当我们修饰的标识符不会再次被赋值时，就可以使用const来保证数据的安全性
• 建议在我们ES6的开发中优先使用 const 只有需要改变某一个标识符的时候才使用 let

注意

• const 修饰的标识符不可以再修改。
• const 定义的标识符必须赋值。
• 常量的含义是：指向的对象不能修改，但可以修改内部的属性。

（3）对象字面量的增强写法

const obj = {
    //这就是对象的字面量写法
}

		<script>
		//1、属性的增强写法
				const name = '维护'
				const age = 18
				const height = 175
				//ES5 写法
				const obj = {
					name: name,
					age: age,
					height: height
				}
				console.log(obj)
				//ES6 写法
				const obj2 = {
					name,
					age,
					height
				}
				console.log(obj2)
		//2、函数的增强写法
				//ES5 写法
				const obj = {
					run: function(){},
					eat: function(){}
					}
				//ES6 写法
				const obj2 = {
					run(){	
					},
					eat(){	
					}
				}	
		</script>

（4）for循环

for（let i in Array）遍历得到的只是索引值

for（let i of Array）遍历得到的是真实值

		<script>
			arr = ['a', 'b', 'c', 'd']
			for(let i in arr){
				console.log(i)
			}
			for(let i of arr){
				console.log(i)
			}
		</script>

（5）js高阶函数

编程范式：

• 命令式编程 / 声明式编程
• 面向对象编程（第一公民：对象） / 函数式编程（第一公民：函数）

filter（）函数

//filter中的回调函数有一个要求：必须返回Boolean值
//当返回true时，函数内部会自动将这次回调的n加入到新数组中
//false是，函数会自动过滤掉这次的n
const nums = [10,5,23,11,500,45,32]
let newNums = []
newNums = nums.filter(function(n){
	return n>20
})
console.log(newNums)

map（）函数

//map（）函数对数组中的每个元素进行操作，并返回
let newNum2 = nums.map(function(n){
	return n*2
})
console.log(newNum2)

reduce（）函数

//reduce作用对数组中的所有内容进行汇总
// 10 5 23 11 500 45 32
let newNum3 = nums.reduce(function(preValue, n){
	return preValue + n
},0)//默认值0 对preValue的初始化
//第一次 preValue 0  n 10
//第二次 preValue 10 n 5
//第三次 preValue 15 n 23
//第四次 prevalue 38 n 11
//……

函数式编程

const nums = [10,5,20,15,500]

let total = nums.filter(x=>x<100).map(x=>x*2).reduce((preValue, n)=>preValue+n)

console.log(total)

2、数组中的响应式方法

因为Vue是响应式的，所以当数据变化的时候，Vue会自动检测数据的变化，视图也会发生相应的更新

Vue中包含了一组观察数组编译的方法，使用他们会改变数组，同时出发视图的更新

• push()——尾部添加元素
• pop()——尾部删除元素
• shift()——头部删除元素
• unshift()——头部添加
• splice()——删除/替换元素
• sort()——排序
• reverse()——逆序