ES6 入门第一章（let、const 、变量的解构赋值、模板字符串、简化对象写法 ）

什么是ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名诶Ecma国际。

什么是ECMAScript

ECMAScript 是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。

为什么要学习ES6

• ES6的版本变动内容最多，具有里程碑意义
• ES6加入许多新的语法特性，编程实现更简单、高效
• ES6是前端发展趋势，就业必备技能

let

声明变量

//声明变量
let a;
let b,c,d;
let e = 99;
let f = 888, g = 'Hello ES6 let',h = [];
			

声明特性

1. 变量不能重复声明

//1.变量不能重复声明
let food = '食物';
let food = '蔬菜';

2. 块级作用域 全局，函数，eval

   //2.块级作用域 全局，函数，eval
   //在if else while for里面 用let定义变量，为块级作用域，在代码块里有效
   {
     let water = '水';
   }
   console.log(water);
   

如果是 var，结果就不一样了

{
var water = '水';
}
console.log(water);

3. 不存在变量提升

   //3.不存在变量提升
   console.log(song)
   let song = '声声慢'
   

如果是 var 则不会报错

console.log(song)
var song = '声声慢'

4. 不影响作用域链

//4.不影响作用域链
{
	let school = 'jd';
	function fn(){
		console.log(school); //因为函数作用域下，没有school变量，则向上一级作用域内找school变量
	}
	fn();
}

let 实践案例

点击小块，则背景颜色变成金色

<style type="text/css">
	.item{
		width: 100px;
		height: 80px;
		border: 1px solid darkgoldenrod;
		float: left;
		margin: 0 0 0 20px;
	}
</style>
<div class="container">
		<h2 class="page-header">点击切换颜色</h2>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
</div>
<script type="text/javascript">
	//获取div元素对象
	let items =document.getElementsByClassName('item');
	//遍历并绑定事件
	for(var i = 0; i<items.length;i++){
		items[i].onclick = function(){
		//修改当前元素的背景颜色
		this.style.background = 'gold';
		}
	}
</script>

点击小块之后的效果：

如果不使用this，改为items[i].style.background = ‘gold’，则效果：

<script type="text/javascript">
	//获取div元素对象
	let items =document.getElementsByClassName('item');
	//遍历并绑定事件
	for(var i = 0; i<items.length;i++){
		items[i].onclick = function(){
		//修改当前元素的背景颜色
		items[i].style.background = 'gold';
		}
		console.log(window.i);
	}
</script>

此时输出的i为3

如果将for(var i = 0; i<items.length;i++)改为for(let i = 0; i<items.length;i++),效果则：

<script type="text/javascript">
	//获取div元素对象
	let items =document.getElementsByClassName('item');
	//遍历并绑定事件
	for(let i = 0; i<items.length;i++){
		items[i].onclick = function(){
		//修改当前元素的背景颜色
		items[i].style.background = 'gold';
		}
	}
</script>

const 定义常量

常量：值不能被修改的量称为常量

声明格式：

//声明常量
const FOOD = '米饭';
console.log(FOOD)

注意事项：

1. 一定要赋初始值

//1.一定要赋初始值
const PI;

2. 一般常量使用大写（潜规则）

3. 常量的值不能修改

//3.常量的值不能修改
const FOOD = '米饭';
FOOD = 'rice';

4. 块级作用域

//4.块级作用域
{
 const PI = 3.14;
}
console.log(PI);

5. 对于数组和对象的元素修改，不算做对常量的修改，不会报错

//5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
const NAME = ['XH','XC','XH','XL','XQ','XL'];
NAME.push('XZ');
console.log(NAME);

变量的解构赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

1. 数组的解构

//1.数组的解构
const Book = ['红楼梦','水浒传','西游记','三国演义'];
let [hong,shui,xi,san] = Book;
console.log(hong);
console.log(shui);
console.log(xi);
console.log(san);

2. 对象的解构

//2.对象的解构
const hong = {
	name:'红楼梦',
	author:'曹雪芹',
	book:function(){
		console.log("中国四大名著之一");
	}
};
let {name,author,book} = hong;
console.log(name);
console.log(author);
console.log(book);
book();

模板字符串

ES6 引入新的声明字符串的方式 [``] ‘’ “”

1. 声明

//1.声明
let str = `我也是一个字符串喔！`;
console.log(str, typeof str)

2. 特性 ：内容中可以直接出现换行符

//2.内容中可以直接出现换行符
let str = `<ul>
			<li>红楼梦</li>
			<li>西游记</li>
			<li>水浒传</li>
			<li>三国演义</li>
		   </ul>`;
console.log(str);

3. 特性：变量拼接

//3.变量的拼接
let author = '曹雪芹';
let book = `${author}是《红楼梦》的作者。`;
console.log(book);

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

let name = '西游记';
let content = function(){
	console.log('中国四大名著之一！！！')
}
const book = {
	name,  //name:name
	content,  //content:content
//	person:function(){
//		console.log("唐僧")
//	}
	person(){
		console.log("唐僧")
	}
}
console.log(book);