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 player = {
nickname: '感情的戏∫我没演技∆',
master: '东海龙王',
skill: [{
skillName: '龙吟',
mp: '100',
time: 6000
},{
skillName: '龙卷雨击',
mp: '400',
time: 3000
},{
skillName: '龙腾',
mp: '900',
time: 60000
}]
}; const { nickname } = player;
const { master } = player;
const { skill: [ skill1, { skillName }, { skillName: sklName } ] } = player;
const { skill } = player;
const [ skill1 ] = skill;

结合扩展运算符

    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);
    function Computer({
cpu,
memory,
software = ['ie6'],
OS = 'windows 3.5'
}) { console.log(cpu);
console.log(memory);
console.log(software);
console.log(OS); }; new Computer({
memory: '128G',
cpu: '80286',
OS: 'windows 10'
});

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

按照国际惯例先放图

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:;
}

msg.js

    (function (window, document) {

      /**
* 暴露出去的构造函数
* @param {*} options
*/
let Msg = function (options) {
this._init(options);
} /**
* 初始化传入的配置后创建元素 并显示
* @param {*} param0
*/
Msg.prototype._init = function ({
content = '',
type = 'info',
useHTML = false,
showIcon = true,
confirm = null,
cancel = null,
footer = true,
header = true,
title = '提示',
contentStyle = {},
contentFontSize = '1.5em',
btnName = ['确定', '取消']
}) {
this.content = content;
this.type = type;
this.useHTML = useHTML;
this.showIcon = showIcon;
this.confirm = confirm;
this.cancel = cancel;
this.footer = footer;
this.contentStyle = contentStyle;
this.contentFontSize = contentFontSize;
this.title = title;
this.btnName = btnName;
this.header = header; this._createElement();
// 给dom上的按钮们和遮罩层绑定事件
this._bind({ el: this._el, overlay: this._overlay });
this._show({ el: this._el, overlay: this._overlay });
} /**
* 创建弹出框
*/
Msg.prototype._createElement = function () { let wrap = document.createElement('div');
wrap.className = 'msg__wrap'; const [ confirmBtnName, cancelBtnName ] = this.btnName; // 判断是否显示图标
const iconHTML = this.showIcon
? '<div class="msg-body-icon">\
<div class="msg-body-icon-' + this.type + '"></div>\
</div>'
: ''; // 判断是否显示弹出框底部按钮
const footerHTML = this.footer
? '<div class="msg-footer">\
<button class="msg-footer-btn msg-footer-cancel-button">' + cancelBtnName + '</button>\
<button class="msg-footer-btn msg-footer-confirm-button">' + confirmBtnName + '</button>\
</div>' : ''; const headerHTML = this.header
? '<div class="msg-header">\
<span>' + this.title + '</span>\
<span class="msg-header-close-button">×</span>\
</div>'
: ''; // 拼成完整html
const innerHTML = headerHTML +
'<div class="msg-body">'
+ iconHTML +
'<div class="msg-body-content"></div>\
</div>'
+ footerHTML; // 将容器内的html替换成弹出框内容
wrap.innerHTML = innerHTML; // 生成合并自定义的内容样式
const contentStyle = {
fontSize: this.contentFontSize,
...this.contentStyle
} // 获取内容dom
let content = wrap.querySelector('.msg-body .msg-body-content'); // 给内容容器加上自定义样式
for (let key in contentStyle) {
content.style[key] = contentStyle[key];
} // 给弹出框内容赋值
if (this.useHTML) {
content.innerHTML = this.content;
} else {
content.innerText = this.content;
} // 创建遮罩层
let overlay = document.createElement('div');
overlay.className = 'msg__overlay'; // 把dom挂到当前实例上
this._overlay = overlay;
this._el = wrap;
} /**
* 显示弹出框
* @param {*} param0
*/
Msg.prototype._show = function ({ el, overlay }) { // 把遮罩和弹出框插到页面中
document.body.appendChild(el);
document.body.appendChild(overlay); // 显示
setTimeout(function () {
el.style.transform = 'translate(-50%, -50%) scale(1, 1)';
overlay.style.opacity = '1';
console.log(1);
});
console.log(2);
} /**
* 绑定事件
* @param {*} param0
*/
Msg.prototype._bind = function ({ el, overlay }) {
// 保留this
const _this = this; // 隐藏弹出框
const hideMsg = function () {
_this._el.style.transform = 'translate(-50%, -50%) scale(0, 0)';
_this._overlay.style.opacity = '0'; setTimeout(function () {
document.body.removeChild(_this._el);
document.body.removeChild(_this._overlay);
}, 300);
} // 取消事件
const close = function (e) {
_this.cancel && _this.cancel.call(_this, e);
hideMsg();
} // 确定事件
const confirm = function (e) {
_this.confirm && _this.confirm.call(_this, e);
hideMsg();
} overlay.addEventListener('click', close); if (this.header) {
el.querySelector('.msg-header .msg-header-close-button').addEventListener('click', close);
} if (this.footer) {
el.querySelector('.msg-footer .msg-footer-cancel-button').addEventListener('click', close);
el.querySelector('.msg-footer .msg-footer-confirm-button').addEventListener('click', confirm);
}
} // 注册到全局对象
window.$Msg = Msg; })(window, document);

ES6基础与解构赋值(高颜值弹框小案例!)的更多相关文章

  1. es6基础(2)--解构赋值

    //解构赋值 { let a,b,rest; [a,b]=[1,2]; console.log(a,b); } //数组解构赋值 { let a,b,rest; [a,b,...rest]=[1,2, ...

  2. es6学习笔记--解构赋值

    昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.   数组的解构 ...

  3. ES6 - Note2:解构赋值

    ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...

  4. ES6 变量的解构赋值

    数组的解构赋值     var [a,b,c] = [1,2,3];    左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...

  5. ES6 - 变量的解构赋值学习笔记

    变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...

  6. ES6的变量解构赋值

      前  言 ES6 解构赋值: ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构. 1.1 数组的结构赋值 1.1.1基本用法 JS中,为变量赋值直接指定.例如下面代码: ...

  7. 关于ES6 的对象解构赋值

    之 前写了关于ES6数组的解构 现在 go on ; 解构不仅可以用于数组,还可以用于对象: 对象的解构和数组有一个重要的不同.数组的元素是按次序排列的,变量的取值是由他的位置决定的:而对象的属性没有 ...

  8. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  9. ES6学习之 解构赋值

    最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...

随机推荐

  1. ELK同步kafka带有key的Message

    需求 kafka中的message带有key,带有相同key值的message后入kafka的意味着更新message,message值为null则意味着删除message. 用logstash来同步 ...

  2. C# 接口和继承

    转:https://www.cnblogs.com/songhe123/p/9558545.html 接口是方法的抽象,如果不同的类有同样的方法,那么就应该考虑使用接口. 例1: using Syst ...

  3. php基础编程-php连接mysql数据库-mysqli的简单使用

    很多php小白在学习完php基础后,或多或少要接触到数据库的使用.而mysql数据库是你最好的选择,本文就mysql来为大家介绍php如何连接到数据库. PHP MySQLi = PHP MySQL ...

  4. Language Model

    在某次会上的语言模型的ppt.

  5. kakfa+zookeeper集群搭建

    1:下载对应安装包 zookeeper-3.4.14.tar.gz:链接:https://pan.baidu.com/s/19_eYsv5r9bg0AKv3TzjpZQ    提取码:ik8a kaf ...

  6. hive on spark 编译时遇到的问题

    1.官方网站下载spark 1.5.0的源码 2.根据官方编译即可. export MAVEN_OPTS="-Xmx2g -XX:MaxPermSize=512M -XX:ReservedC ...

  7. Keepalived 配置文件

    keepalived的配置文件: keepalived只有一个配置文件keepalived.conf,里面主要包括以下几个配置区域,分别是global_defs.              全局定义及 ...

  8. golang-练习ATM

    package main import "fmt" var ( action int loop bool = true save_money int money int draw_ ...

  9. [RHEL8]关闭SELinux(同CentOS7)

    修改配置文件(永久修改) # vi /etc/selinux/config SELINUX=disabled # 关闭 SELINUX=enforcing # 开启 命令方式(临时修改重启失效) # ...

  10. C语言快速排序函数------qsort();

    #include<stdio.h> #include<stdlib.h> #include<string.h> #include<conio.h> ty ...