ES6标准
JavaScript主要由ECMAScript,BOM,DOM组成。
ECMAScript:语法规则
BOM:浏览器对象模型(使用js去操作浏览器)
DOM:文档对象模型(使用js去操作html)
ES为标准,JS为代码实现
ES6是js的第六个版本,相对于ES5来说,更简单也更严谨
var、let和const
- var和let都用于定义变量,但对于域的看法不同,
- var只存在两种作用域:全局和局部(函数内),
var a = 1;
function foo(){
var a = 1;
}//两个a不一样,因为作用域不一样
- let只要遇到代码块就算一个作用域
if(true){
var a = 1;
let b = 2;
}
console.log("a:",a);//可以打印
console.log("b:",b);//b is not defined,只作用域if内
- 用var命名有一个坏处
for(var i = 1;i<5;i++){
console.log("i:",i)//1234
}
console.log("i:",i)//5,外头的i仍存在,但我们不需要了
用let只要出了代码块变量就被销毁,也更安全。
3.
console.log("a:",a);
var a;//undefined
let a;//报错
const用来定义常量
- 在程序跑的过程中不可修改
const LOVE_YOU = true;
LOVE_YOU = false;//报错
- 声明和赋值需要同时完成
const LOVE_YOU;//报错
- const不但可以指定简单值,也可指定为对象
let user = {
name:'黄哈哈',
age:'20'
}
const LOVE_YOU = user;
console.log("user:",user);
user.age = 12;
console.log("user:",user)//不报错
LOVE_YOU = {};//报错
即const指向的是对象的指针,指向内容的位置,而不是指向内容
其他const和let一样,作用域都为块级作用域
正则表达式
什么是正则表达式
正则表达式是用于匹配字符串中字符组合的模式。
正则表达式的用法
<input type="password" name="" id="pwd" placeholder="请输入6位数字密码">
<button onclick="usernameCheck()">确认</button>
function usernameCheck(){
let reg = /[0-9]{6}/;
let pwd = document.getElementById("pwd").value;
console.log(pwd)
if(!/^\d{6}$/g.test(pwd)){
console.log(pwd)
console.log("密码格式不正确")
}
}
创建正则表达式
- 使用正则表达式字面量,有包含在两个斜杠之间的模式组成,
该方法在JS加载后编译该字面量,当正则表达式不改变时,可以获得更好的性能。
let reg = /ab+c/;
- 调用RegExp对象的构造函数,
该方法在JS运行过程中编译该构造函数创建的正则表达式,当表达式将会改变时(比如根据用户输入来源动态产生不同的模式),需要用到该方法。
let reg = new RegExp("ab+c");
编写一个正则表达式
- 使用简单模式
let reg = /abc/;//匹配字符串abc
- 使用特殊字符
let reg = /ab*c/;//*表示出现0次或多次,比如abc,ac,abbc等字符串会被匹配
一些常用的特殊字符
符号 | 含义 | 举例 | 会匹配 | 不匹配 |
---|---|---|---|---|
^ | 匹配输入的开始 | /^A/ | ABC | CBC |
$ | 匹配输入的结束 | /B$ | AB | ABC |
* | 该字符出现0次或多次(有或没有) | /ab*c/ | abc,ac,abbbbbc | abcp |
+ | 该字符出现1次或多次(至少1次) | ab+c | abc,abbbc | ac |
? | 该字符出现0或1次 | ab?c | ab,abc | abbbbc |
. | 除断行外的任意字符 | |||
[ ] | 字符集合,出现的任意一个字符 | [a-z] | ||
{ a,b } | 指定重复次数为a~b次 | {a}重复a次,{a,}至少a次 | ||
() | 分组匹配 | |||
\w | 数字、大小写字母和下划线 | |||
\W | 除数字、大小写字母和下划线的所有字符 | |||
\d | 数字 | |||
\D | 除\d的其他字符 | |||
\s | 空白字符:空格、制表符、断行 | |||
\S | 除空白字符 |
使用一个正则表达式
JS异步
什么是异步
同步模式的简单例子
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('You clicked me!');
let pElem = document.createElement('p');
pElem.textContent = 'This is a newly-added paragraph.';
document.body.appendChild(pElem);
});
在这个块中,这些行被一个接一个地执行:
- 我们获取对 DOM 中已经可用的元素的引用。
- 我们向其添加一个click事件侦听器,以便在单击按钮时:
- alert()出现一条消息。
- 一旦警报解除,我们就创建一个
元素。
- 然后我们给它一些文本内容。
- 最后,我们将段落附加到文档正文中。
异步模式前一个任务结束后不等待后一个任务,而是执行回调函数,程序执行顺序和任务的排列顺序不一致。即从主线程发射一个子线程来完成任务。
js异步编程主要有4中方法:回调函数,事件监听,发布/订阅,Promise对象
JS异步的4种实现方法
Promise对象
Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
一个 Promise 必然处于以下几种状态之一:
- 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。
- 已兑现(fulfilled): 意味着操作成功完成。
- 已拒绝(rejected): 意味着操作失败。
let myFirstPromise = new Promise(function(resolve, reject){
//当异步代码执行成功时,我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
//在本例中,我们使用setTimeout(...)来模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.
setTimeout(function(){
resolve("成功!"); //代码正常执行!
}, 250);
});
myFirstPromise.then(function(successMessage){
//successMessage的值是上面调用resolve(...)方法传入的值.
//successMessage参数不一定非要是字符串类型,这里只是举个例子
console.log("Yay! " + successMessage);
});