一.ES6新增语法-let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 声明变量
console.log(num); // undefined
var num = 10;
// let 声明的变量不存在变量提升
// console.log(num2); // Cannot access 'num2' before initialization
// let num2 = 20;
// 块级作用域
if (true) {
// var num3 = 30;
let num4 = 40;
}
// console.log(num3);
// console.log(num4); // num4 is not defined
// 暂时性死区
if (true) {
// console.log(num5); // Cannot access 'num2' before initialization
let num5 = 50;
}
// num5 = 100;
// 案例
// function fun(num) {
// console.log(num);
// }
for (let i = 0; i < 5; i++) {
// console.log(i); // 0 1 2 3 4
setTimeout(function () {
console.log(i); // 0 1 2 3 4
}, 0)
}
// - let关键字就是用来声明变量的
// - 使用let关键字声明的变量具有块级作用域
// - 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
// - 防止循环变量变成全局变量
// - 使用let关键字声明的变量没有变量提升
// - 使用let关键字声明的变量具有暂时性死区特性
</script>
</body>
</html>
二.ES6新增语法-const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// const 声明常量 不能变化的量
const num = 10;
// num = 20; // Assignment to constant variable.
console.log(num);
// 声明常量的同时进行赋值
// const num2;
// num2 = 20;
// - const声明的是一个常量
// - 既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值
// - 声明 const时候必须要给定值
const obj = {
name: "zhangsan",
age: 18
}
// 如果是复杂数据类型，不能更改地址值
// obj = {} // Assignment to constant variable.
obj.name = "lisi";
console.log(obj);
// - 使用 var 声明的变量，其作用域为全局作用域或者为所在的函数内局部作用域，且存在变量提升现象
// - 使用 let 声明的变量，其作用域为该语句所在的代码块内{}，不存在变量提升
// - 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
</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>Document</title>
<style>
.tab {
width: 1000px;
height: 30px;
display: flex;
position: relative;
margin: 0 auto;
}
.nav {
box-sizing: border-box;
border: 1px solid #ccc;
flex: 1;
text-align: center;
line-height: 30px;
}
.content {
width: 1000px;
height: 300px;
position: absolute;
top: 30px;
left: 0;
border: 1px solid #ccc;
box-sizing: border-box;
display: none;
}
.active {
display: block;
}
.navact {
background-color: pink;
}
</style>
</head>
<body>
<div class="tab">
<div class="nav navact">1</div>
<div class="nav">2</div>
<div class="nav">3</div>
<div class="nav">4</div>
<div class="nav">5</div>
<div class="content active">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
<script>
var nav = document.querySelectorAll(".nav");
var content = document.querySelectorAll(".content");
function sibling(ele, clazz) {
for (var i = 0; i < ele.length; i++) {
ele[i].className = clazz;
}
}
for (let i = 0; i < nav.length; i++) {
// nav[i].index = i;
nav[i].onclick = function () {
sibling(nav, "nav");
this.className = "nav navact"
sibling(content, "content");
content[i].className = "content active";
}
}
</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>Document</title>
</head>
<body>
<script>
// [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]
// var a = 1, b = 2, c = 3;
// {
// // 解构的目标 解构的源
// let [a, , c] = [1, , 3];
// console.log(a);
// // console.log(b);
// console.log(c);
// }
// {
// let [a, [[b], c]] = [1, [[2], 3]];
// console.log(a);
// console.log(b);
// console.log(c);
// }
// // 剩余运算符
// {
// let [a, ...b] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// console.log(a);
// console.log(b);
// }
// // 字符串型
// {
// let [a,b,c,d,e] = "hello";
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// console.log(e);
// }
// 对象的解构
{
let { a, b } = { a: "aaa", b: "bbb" }
console.log(a);
console.log(b);
}
{
let { a, ...b } = { a: "aaa", b: "bbb", c: "ccc", d: "ddd" }
console.log(a);
console.log(b);
}
// - 解构赋值就是把数据结构分解，然后给变量进行赋值
// - 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
// - 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
// - 利用解构赋值能够让我们方便的去取对象中的属性跟方法
</script>
</body>
</html>
五.symbol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Symbol
let str = Symbol("唯一");
console.log(str);
console.log(typeof str);
let str2 = Symbol("唯一");
console.log(str2);
console.log(str === str2); // false
</script>
</body>
</html>
六.Map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// - 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
// - Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
// - Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
// - Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
let map = new Map();
// 键是字符串
map.set("name","zhangsan");
console.log(map.get("name"));
// 键是对象
let obj = {};
map.set(obj,"键是对象");
console.log(map.get(obj));
// 键是函数
let fun = function(){};
map.set(fun,"键是函数");
console.log(map.get(fun));
console.log(map);
console.log(map.size);
</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>Document</title>
</head>
<body>
<script>
var obj = {
name: "张三",
age: 18
}
for (var key in obj) {
console.log(key);
}
let map = new Map();
map.set("name", "xiaohao");
map.set("age", 20);
map.set("gender", "男");
// forEach遍历 Map 对象
map.forEach(function (v, i) {
console.log(v);
console.log(i);
})
// for...of... 遍历对象
for (var key of map) {
console.log(key);
}
for(let [key,value] of map){
console.log(key,value);
}
// obj.forEach(function(v,i){
// console.log(v);
// console.log(i);
// })
// obj.forEach is not a function
// obj is not iterable
// for (var key of obj) {
// console.log(key);
// }
console.log(Object.keys(obj));
for(let key of Object.keys(obj)){
console.log(key);
}
let res = Object.entries(obj);
console.log(res);
</script>
</body>
</html>
八.Set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = new Set([1, 2, 3, 4, 5, 6, 6, 2, 3, 4, 5, 6, 7]);
console.log(arr);
// 数组去重
let arr2 = [10, 11, 11, 15, 13, 15, 25, 22, 22, 69, 10];
let newArr = new Set(arr2);
console.log([...newArr]);
</script>
</body>
</html>