ES6基础与解构赋值（高颜值弹框小案例！）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

let只作用在当前块级作用域内
使用let或者const声明的变量，不能再被重新声明
let不存在`变量提升`

console.log(dad);
var dad = '我是爸爸!';//预定义undefined console.log(dad);
let dad = '我是爸爸!';//报错

生成十个按钮每个按点击的时候弹出1 - 10
var 方法：

var i = 0;
for (i = 1; i <= 10; i ++) {
(function(i) {
var btn = document.createElement('button');
btn.innerText = i;
btn.onclick = function() {
alert(i)
};
document.body.appendChild(btn);
})(i);
}

let方法：

for (let i = 1; i <= 10; i ++) {
var btn = document.createElement('button');
btn.innerText = i;
btn.onclick = function() {
alert(i)
};
document.body.appendChild(btn);
}

ES6之前的作用域：全局作用域、函数作用域、eval作用域、ES6块级作用域

常量声明后不能被修改

const NAME = '小明';
NAME = '小红';//报错

q: 怎么防止常量为引用类型的时候能被修改的情况
Object.freeze()

const xiaoming = {
age: 14,
name: '小明'
};
Object.freeze(xiaoming);
console.log(xiaoming);
xiaoming.age = 22;
xiaoming.dd = 11;
console.log(xiaoming); const ARR = [];
Object.freeze(ARR);
ARR.push(1);
console.log(ARR);

Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性

var obj1 = {
a: 1,
b: 2
} var obj2 = Object.create(obj1); obj2.c = 3;
obj2.d = 4; for (let i in obj2) {
if (obj2.hasOwnProperty(i)) {
document.body.innerHTML += (i + ': ' + obj2[i] + '<br>');
}
}

数组的解构赋值

const arr = [1, 2, 3, 4];
let [a, b, c, d] = arr;
console.log(a);

更复杂的匹配规则

const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];
const [ , b] = arr;
const [ , , g] = ['e', 'f', 'g']
const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
const [ , , [ , , [ , , g]]] = arr;

扩展运算符 ...

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b'];
const arr3 = ['zz', 1];
const arr4 = [...arr1, ...arr2, ...arr3];
const arr = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr;

默认值

const arr = [1, null, undefined];
const [a, b = 2, c, d = 'aaa'] = arr;

交换变量

[a, b] = [b, a];

接收多个函数返回值

function getUserInfo(id) {
// .. ajax
return [
true,
{
name: '小明',
gender: '女',
id: id
},
'请求成功'
];
};
const [status, data, msg] = getUserInfo(123);

对象的解构赋值

const obj = {
saber: '阿尔托利亚',
archer: '卫宫'
};
const { saber, archer1 } = obj;

稍微复杂的解构条件

结合扩展运算符

const obj = {
saber: '阿尔托利亚',
archer: '卫宫',
lancer: '瑟坦达'
};
const { saber, ...oth } = obj;

对已经申明了的变量进行对象的解构赋值

let age;
const obj = {
name: '小明',
age: 22
};
({ age } = obj);

默认值

let girlfriend = {
name: '小红',
age: undefined,
};
let { name, age = 24, hobby = ['学习'] } = girlfriend;

字符串的结构赋值

const str = 'I am the bone of my sword'; // 我是剑骨头
const [ a, b ,c, ...oth ] = str;
const [ ...spStr1 ] = str;

提取属性

const { length, split } = str;

数值与布尔值的解构赋值

const { valueOf: vo } = 1;
const { toString: ts } = false;

函数参数的解构赋值

function swap([x, y]) {
return [y, x];
}; let arr = [1, 2];
arr = swap(arr);

最后来一个高颜值弹框小案例~

按照国际惯例先放图

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./msg.css">
</head>
<body>
<button>弹个框</button>
<div id="t"></div>
<script src="./msg.js"></script>
<script>
document.querySelector('button').addEventListener('click', function() {
new $Msg({
content: '真的要删除吗...',
title: '确认删除',
type: 'wrong',
btnName: ['好的', '算了吧'],
confirm: function(e) {
console.log(this);
console.log(e);
new $Msg({
content: '删除成功<span style="color: red">～</span>',
type: 'success',
footer: false,
useHTML: true,
header: false
})
},
cancel: function(e) {
document.querySelector('#t').innerHTML += '取消了，';
}
});
});
</script>
</body>
</html>

msg.css

/* 弹出框最外层 */
.msg__wrap {
position: fixed;
top: 50%;
left: 50%;
z-index:;
transition: all .3s;
transform: translate(-50%, -50%) scale(0, 0);
max-width: 50%; background: #fff;
box-shadow: 0 0 10px #eee;
font-size: 10px;
} /* 弹出框头部 */
.msg__wrap .msg-header {
padding: 10px 10px 0 10px;
font-size: 1.8em;
} .msg__wrap .msg-header .msg-header-close-button {
float: right;
cursor: pointer;
} /* 弹出框中部 */
.msg__wrap .msg-body {
padding: 10px 10px 10px 10px;
display: flex;
} /* 图标 */
.msg__wrap .msg-body .msg-body-icon{
width: 80px;
} .msg__wrap .msg-body .msg-body-icon div{
width: 45px;
height: 45px;
margin: 0 auto;
line-height: 45px;
color: #fff;
border-radius: 50% 50%;
font-size: 2em;
} .msg__wrap .msg-body .msg-body-icon .msg-body-icon-success{
background: #32a323;
text-align: center;
} .msg__wrap .msg-body .msg-body-icon .msg-body-icon-success::after{
content: "成";
} .msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong{
background: #ff8080;
text-align: center;
} .msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong::after{
content: "误";
} .msg__wrap .msg-body .msg-body-icon .msg-body-icon-info{
background: #80b7ff;
text-align: center;
} .msg__wrap .msg-body .msg-body-icon .msg-body-icon-info::after{
content: "注";
} /* 内容 */
.msg__wrap .msg-body .msg-body-content{
min-width: 200px;
font-size: 1.5em;
word-break: break-all;
display: flex;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
} /* 弹出框底部 */
.msg__wrap .msg-footer {
padding: 0 10px 10px 10px;
display: flex;
flex-direction: row-reverse;
} .msg__wrap .msg-footer .msg-footer-btn {
width: 50px;
height: 30px;
border: 0 none;
color: #fff;
outline: none;
font-size: 1em;
border-radius: 2px;
margin-left: 5px;
cursor: pointer;
} .msg__wrap .msg-footer .msg-footer-cancel-button{
background-color: #ff3b3b;
} .msg__wrap .msg-footer .msg-footer-cancel-button:active{
background-color: #ff6f6f;
} .msg__wrap .msg-footer .msg-footer-confirm-button{
background-color: #4896f0;
} .msg__wrap .msg-footer .msg-footer-confirm-button:active{
background-color: #1d5fac;
} /* 遮罩层 */
.msg__overlay {
position: fixed;
top:;
right:;
bottom:;
left:;
z-index:;
background-color: rgba(0, 0, 0, .4);
transition: all .3s;
opacity:;
}