es6
学习地址：https://www.bilibili.com/video/BV1uK411H7on
变量
学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 声明变量
let a;
let b, c, d;
let e = 1;
let f = 2, g = '9zhe', h = [];
//1、变量不能重复声明(控制台：Uncaught SyntaxError: Identifier 'star' has already been declared)
// let star = '123';
// let star = '456';
//2、块级作用域(控制台：Uncaught ReferenceError: girl is not defined)
// {
// let girl= 'xiaowu';
// }
// console.log(girl)
//3、不存在变量提升(控制台：Uncaught ReferenceError: Cannot access 'song' before initialization)
// console.log(song)
// let song = '恋爱达人';
//3.1、 区别（控制台：undefined）
// console.log(song)
// var song = '恋爱达人';
// 相当于↓
// var song;
// console.log(song);
// song = '恋爱达人';
//4、不影响作用域链(控制台：中国)
// {
// let guojia = '中国';
// function fn() {
// console.log(guojia);
// }
// fn();
// }
</script>
</body>
</html>
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击 DIV 换色</title>
<style>
.item {
width: 100px;
height: 50px;
border: solid 1px rgb(42, 156, 156);
float: left;
margin-right: 10px;
}
</style>
</head>
</head>
<body>
<h2>点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<script>
let items = document.getElementsByClassName('item')
//1、箭头函数（let）
// for (let i = 0; i < items.length; i++) {
// items[i].onclick = () => {
// // this.style.background='pink' //会异常（箭头函数的this是window）
// items[i].style.background = 'pink'//正常使用
// }
// }
//1、 匿名函数（let）
// for (let i = 0; i < items.length; i++) {
// items[i].onclick = function () {
// // this.style.background='pink' //正常使用
// items[i].style.background = 'pink'//正常使用
// }
// }
//3、匿名函数（var）
// for (var i = 0; i < items.length; i++) {
// items[i].onclick = function () {
// this.style.background='pink' //正常使用
// // items[i].style.background = 'pink'//会异常（var的作用域的关系）
// }
// }
</script>
</body>
</html>
var的作用域和let作用域比较 ：
1、不管在哪里定义var变量，该变量都会出现在window对象里面。
2、let定义的变量只会存在该变量存在的作用域里
//输出没有定义的变量会直接异常
// console.log(cc)
//输出aa不会因为var定义的变量已经声明
console.log("1、", window)//可见该对象
console.log(aa)
// debugger//请勿去除。 没有断点：log1、会有 aa:9zhe; 有断点：log1、会有 aa: undefined
var aa = '9zhe';
console.log("aa:", aa)
console.log("2、", window)
let bb = '9zhe';
console.log("bb:", bb)
console.log("3、", window)
常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</head>
<body>
<script>
const SCHOOL = '小尚';
console.log(SCHOOL);
//1、必须有初始值（ Missing initializer in const declaration）
// const A;
// A = '10';
//2、通常常量用大写声明（无异常）
// const a = '';
//3、常量的值不能修改(Assignment to constant variable.)
// SCHOOL = '9zhe';
//4、块级作用域(PLAYER is not defined)
// {
// const PLAYER = 'UZI';
// }
// console.log(PLAYER);
//5、对于数组和对象的元素修改，不算对常量的修改（可以正常使用）
const DUIXIANG = {
wu: "无"
}
DUIXIANG.wu = '呜呜呜'
DUIXIANG.wuwuwu = '呜呜呜'
console.log(DUIXIANG)
//这样使不可以的（这样改变了对象的地址）
// DUIXIANG = {
// wu: "无"
// }
//5、1证明
let zm = {
aa: 'aa'
}
let bb = zm;
console.log(zm);
console.log(bb);
console.log(zm === bb);
zm = {
aa: 'aa'
}
console.log(zm);
console.log(bb);
console.log(zm === bb);
</script>
</body>
</html>
解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</head>
<body>
<script>
//1、数组的解构赋值
let arr = ['aa', 'bb', 'cc'];
let [aa, bb, cc] = arr;
console.log(aa, bb, cc);
let [a, b, c] = arr;
console.log(a, b, c);
//2、对象的解构赋值
let obj = {
name: '9zhe',
age: '27',
note: '谨言慎行，谋定而动'
}
console.log(obj)
//2.1、9zhe 27 谨言慎行，谋定而动
let {
name, age, note
} = obj;
console.log(name, age, note)
//2.2、undefined undefined undefined
let {
name1, age2, note3
} = obj;
console.log(name1, age2, note3)
</script>
</body>
</html>
模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</head>
<body>
<script>
//1、声明
let str = `aaccdd`;
console.log(str);
//2、声明字符串的方式 '', "", ``
let t1 = 't1';
let t2 = "t2";
let t3 = `t3`;
console.log(t1);
console.log(t2);
console.log(t3);
//2.1、 '' 和 `` 的区别('':无法换行，``:可以换行)
let t11 = 't\n' +
'11';
let t33 = `t
33`;
console.log(t11);
console.log(t33);
//3、字符串拼接
let name1 = '9zhe';
let introduce1 = '我的名字是：' + name1;
console.log(introduce1)
let introduce2 = `我的名字是：${name1}`+'\t （+号）拼也没问题';
console.log(introduce2)
</script>
</body>
</html>
简化对象写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</head>
<body>
<script>
//ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
let name = '尚硅谷';
let change = function () {
console.log('我们可以改变你!!');
}
const school1 = {
name: name,
change: change,
improve: function () {
console.log("我们可以提高你的技能");
}
}
//相当于↓
//这样的书写更加简洁
const school2 = {
name,
change,
improve() {
console.log("我们可以提高你的技能");
}
}
</script>
</body>
</html>
箭头函数
学习
箭头函数和普通函数的区别:
1.箭头函数不能作为构造方法；普通函数可以。
2.箭头函数this 是静态的，this始终指向函数声明时所在作用域下的this的值；普通函数谁调用this就指向谁。
3.箭头函数不能使用arguments变量。
call()和apply()的区别：
call 的形参直接 , 拼接就可以。apply的形参得放入数组中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<script>
// ES6 允许使用「箭头」（=>）定义函数。
//声明一个函数
// let fn = function(){
// }
// let fn = (a,b) => {
// return a + b;
// }
//调用函数
// let result = fn(1, 2);
// console.log(result);
//1. 普通方法和箭头函数的区别
// 谁调用谁就是this
function getName() {
console.log(this.name);
}
//this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
let getName2 = () => {
console.log(this.name);
}
//设置 window 对象的 name 属性
window.name = '尚硅谷';
const school = {
name: "ATGUIGU"
}
//直接调用
// getName();
// getName2();
//call 方法调用
// getName.call(school);
// getName2.call(school);
//2. 不能作为构造方法
// let Person = (name, age) => {
// this.name = name;
// this.age = age;
// }
// let me = new Person('xiao',30);
// console.log(me);
//3. 不能使用 arguments 变量
// let fn = () => {
// console.log(arguments);
// }
// fn(1,2,3);
//4. 箭头函数的简写
//1) 省略小括号, 当形参有且只有一个的时候
// let add = n => {
// return n + n;
// }
// console.log(add(9));
//2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
// 而且语句的执行结果就是函数的返回值
let pow = n => n * n;
console.log(pow(8));
</script>
</body>
</html>
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数实践</title>
<style>
div {
width: 200px;
height: 200px;
background: #58a;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
//需求-1 点击 div 2s 后颜色变成『粉色』
//获取元素
let ad = document.getElementById('ad');
//绑定事件
//1.1、普通方法
// ad.addEventListener("click", function () {
// //保存 this 的值
// let _this = this;
// setTimeout(function () {
// console.log(this);//this是Window
// _this.style.background = 'pink';
// }, 2000);
// });
//1.2、箭头函数
ad.addEventListener("click", function () {
setTimeout(() => {
//修改背景颜色 this
this.style.background = 'pink';
}, 500);
});
//1.3 箭头函数不适合与 this 有关的回调(事件回调、 对象的方法)
// ad.addEventListener("click", () => {
// console.log(this);//this是Window
// setTimeout(() => {
// //修改背景颜色 this
// console.log(this);//this是Window
// this.style.background = 'pink';
// }, 2000);
// });
// 需求-2 从数组中返回偶数的元素
const arr = [1, 6, 9, 10, 100, 25];
// const result = arr.filter(function(item){
// return item % 2 === 0;
// });
// console.log(result);
// 箭头函数适合与 this 无关的回调(定时器、 数组的方法回调)
const result = arr.filter(item => item % 2 === 0);
console.log(result);
</script>
</body>
</html>
浙公网安备 33010602011771号