ES6学习:
尚硅谷Web前端ES6教程,涵盖ES6-ES11
ES6 入门教程 阮一峰
let 关键字
【特性】
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
- 不允许重复声明;
- 块儿级作用域(局部变量);
- 不存在变量提升;
- 不影响作用域链;
【let 创建变量代码示例】
// let关键字使用示例:
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋
【不允许重复声明】
let name = "张三";
let name = "李四";
【块儿级作用域】
包括 if else while for
{
let age = 11;
//console.log(age);
}
console.log(age);
【不存在变量提升】
var 如果你先使用的变量,再声明并初始化它,变量的值将是 undefined。如下代码会在控制台输出 undefined
{
console.log(age);
var age = 18
}
而 let 这样做会报错:
{
console.log(age);
let age = 18
}
【不影响作用域链】
代码块内有代码块,上级代码块中的局部变量下级可用
let age = 18;
function fn(){
console.log(age); // 虽说是块儿作用域,但这里可以使用
}
fn();
【let 案例:点击div更改颜色】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
width: 100px;
height: 50px;
border: solid 1px rgb(42, 156, 156);
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">let案例:点击div更改颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 获取div元素对象
let items = document.getElementsByClassName('item');
// 遍历并绑定事件
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
//修改当前元素的背景颜色
//this.style.background = 'pink'; // 写法一:常规写法一般无异常
items[i].style.background = 'pink'; // 写法二
}
}
</script>
</body>
</html>
const 关键字
【特性】
const 关键字用来声明常量,const 声明有以下特点:
- 一定要赋初始值;
- 一般常量使用大写(习惯);
- 不允许重复声明;
- 值不允许修改;
- 块儿级作用域(局部变量);
- 对数组或对象元素修改,不算对常量的修改,不会报错
【const 代码示例】
<script>
const SCHOOL = "三里屯小学"
console.log(SCHOOL);
</script>
【声明必须赋初始值】
const SCHOOL;
【不允许重复声明】
const SCHOOL = "三里屯小学";
const SCHOOL = "三里屯中学";
【值不允许修改】
const SCHOOL = "三里屯小学";
SCHOOL = "三里屯中学";
【块儿级作用域(局部变量)】
{
const SCHOOL = "三里屯小学";
}
console.log(SCHOOL);
【对数组或对象元素修改,不算对常量的修改】
const PERSON = ['张三','李四','王五']
PERSON.push['赵六']
console.log(PERSON)
解构赋值
【定义】
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值
【示例代码】
<script>
// 1、数组的解构赋值
const F4 = ["言承旭", "朱孝天", "周渝民", "吴建豪"];
let [a, b, c, d] = F4;
// 这就相当于我们声明4个变量a,b,c,d,其值分别对应 "言承旭","朱孝天","周渝民","吴建豪"
console.log(a + " " + b + " " + c + " " + d);
// 2、对象的解构赋值
const person = {
name: "张三",
age: 18,
talk: function () {
console.log("你好,很高兴见到你");
}
}
let {name, age, talk} = person;
console.log("姓名:" + name + " 年龄:" + age);
talk()
</script>
当然也可以把 talk 方法结构出来:
let {talk} = person;
talk()
模板字符串
【特性】
模板字符串(template string)是增强版的字符串,用反引号(`)标识
- 字符串中可以出现换行符
- 可以使用
${xxx}
形式引用变量
【示例代码】
// 声明字符串的方法:单引号('')、双引号("")、反引号(``)
// 声明
let string = `我也一个字符串`;
console.log(string);
// 特性
// 1、字符串中可以出现换行符
let str =
`<ul>
<li>言承旭</li>
<li>朱孝天</li>
<li>周渝民</li>
<li>吴建豪</li>
</ul>`;
console.log(str);
// 2、可以使用 ${xxx} 形式引用变量
let actor = "言承旭";
let output = `${actor}扮演了道明寺`;
console.log(output);