ES6 第一课 let以及它的声明特性：
1：代码总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let关键字</title>
</head>
<body>
<script>
// <!--todo vs6 声明我们的变量 -->
let a;
let b, c, d;
let e = 100;
let f = 512, g = "jhjd", h = [];
// 在我们的es6中我们的变量不能重复的声明,但是使用我们的var 关键字的话是可以的
var star = "罗志祥";
var star = "小猪";
// todo --------> 在我们的se6中的块级作用域
{
let girl = "你的名字";
}
// todo if else else if ....的话只要是在我们的块级作用域中使用我们的let 也是我们的块级作用域
// console.log(girl);
// 3: todo ------> 在我们的let 中不存在变量提升
// todo 4: 我们的块级作用域是不影响我们的作用域链的
{
let school = "黄涛";
function fun(){
console.log(school);
}
fun(); // todo -----------> 函数的调用
}
</script>
</body>
</html>
效果：
let的颜色切换练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let的实践练习</title>
</head>
<body>
<!--todo 在我们的这个body标签中添加我们的div标签 -->
<div class="container">
<h2 class="page-header">点击切换我们的颜色</h2>
<div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px" ></div>
<div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px"></div>
<div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px"></div>
</div>
</body>
<script>
// todo 第一步的话就是获取我们的div的元素对象
let items = document.getElementsByClassName('item');
// todo ------> 便利并绑定我们的事件
for(let i = 0; i<items.length; i++) {
// todo ---------> 添加我们的事件绑定器
items[i].onclick = function () {
//todo -----> 修改当前元素的背景颜色
// this.style.background = "pink";
items[i].style.background = "pink";
}
}
</script>
</html>
效果：
ES6 解构赋值：在遇到我们的方法频繁的被调用的时候就是使用我们的解构赋值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的赋值解构</title>
</head>
<body>
<script>
/*
* todo -----> 在我们的es6中允许按照一定的模式从数组中和对象中提取值，对变量进行赋值
* todo 被称为解构赋值，
*
* */
// 数组的结构
const F4 = ["影响力","韭菜的自我修养","稀缺"];
let [xhao , liou , zhao] = F4;
console.log(xhao);
console.log(liou);
console.log(zhao);
// 对象的解构
const zha = {
name :'你的名字',
age : '不详',
xiaopin:function (){
console.log("我可以演品");
}
};
// todo 在我们的这个位置的话就是设置我们的解构式
let {name,age,xiaopin} = zha;
console.log(name);
console.log(age);
console.log(xiaopin);
// 在我们的这个位置调用我们的函数
xiaopin();
</script>
</body>
</html>
在我们的结果展示：
es6的模板字符串：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES中的摸版字符串</title>
</head>
<body>
<script>
let str = "我是一个模板字符串";
console.log(str,typeof str);
// todo ---------> 以上是我们的模板字符串的声明格式
/*
* 1： todo ----> 在我们的内容中可以直接有换行符
* */
let string = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`
//todo 我们的es6的话还可以进行我们的模板的拼接
let lovest = '你的名字';
let out =`${lovest}abcdefg`;
console.log(out);
</script>
</body>
</html>
结果展示：
ES6对象的简化写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6对象的简化写法</title>
</head>
<body>
<script>
// ES6 中允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
// 这样些更加的简便
let name = "huangtao";
// 创建我们的这个东西
let change = function (){
console.log("我可以改变你");
}
const school = {
name,
change,
// todo 的话还有一个简化就是我们的方法声明的简化
//在我们的es6中可以将我们的:function都省略掉
// improve:function (){
// console.log("我们可以提高你的技能");
// }
improve(){
console.log("我们可以提高你的技能");
}
}
console.log(school);
</script>
</body>
</html>
结果的展示：
ES6 的箭头函数及其声明的特点：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Es6Z中的箭头函数</title>
</head>
<body>
<script>
// todo 在我们的es6中允许我们使用箭头来定义函数
// todo -----> 以前声明一个函数
let fun = function (){
}
// 使用我们的es6来声明我们的函数
let fn = (a,b) =>{
// 这就是我们使用es6定义出来的函数
return a + b;
}
let result = fn(1,2);
console.log(result);
/*
* 箭头函数的特点
* 1： this 是静态的, this 在声明时始终指向所在作用域下的this的值
* 2： 设置我们的window对我们的对象的操作
* */
function getName(){
console.log(this.name);
}
let getName2 = ()=>{
console.log(this.name);
}
window.name = "他的名字";
const scholl = {
name:"action"
}
getName();
getName2();
// 使用我们的call方法调用,我们的call方法可以指向函数内部的值的
getName.call(scholl);
// 箭头函数的话始终指向我们的初始定义的值
getName2.call(scholl);
// todo -------------》 在我们的这个位置的话就是实例化我们的对象
// let Person = (name,age) =>{
// // todo----------> 在我们的这个位置的话就是
// this.name = name;
// this.age = age;
// }
// let me = new Person("xiao",30);
// console.log(me);
// todo 在我们的箭头函数里面的话不能使用argument变量
// 如下所示：
// let fu = () =>{
// console.log(argument);
// }
// fu(1,2,3);
// todo 箭头函数的简写，党我们的形参有且只有一个的时候可以将我们的（） 省略
let add = n =>{
return n + n ;
}
console.log(add(9)); // 赋值为9
// 当我们的代码提只能有一条语句的时候可以将我们的{}省略
let pow = (n) => n*n;
console.log(pow(9));
</script>
</body>
</html>