let和const声明变量
const 表示声明常量 值不可以变化的量
const声明的变量 值为常量 不能修改
const修饰基本数据类型:
值不能被更改
const 修饰引用数据类型:
地址不能被更改
但是对象里面的属性跟方法可以被修改
var num=10;
num=99;
const a=99;
a=88; //报错 不能为常量重新分配值
const per={
name:"小砌墙",
age:16
}
per.name="小白";
console.log(per.name);//可以 const地址不可以修改 对象中的属性和方法都可以修改
let: 块级作用域变量
在js中没有块级作用域
这样会导致什么后果?
for(var i=0;i<10;i++){
}
if(true){
var num=10;
}
通过以上代码 我们发现 i和num都是全局变量
因为js本身没有块级作用域 所以尽管i和num是在
一个代码块里面声明的变量
但也是全局变量
这样的代码结构是有问题的
所以es6推出了 let变量
用let声明的变量 只会在当前代码块的大括号里面生效
大括号之外 再也无法找到这个变量
大大解决了 原来没有块级作用域的弊端
let声明的变量 只会在当前大括号里面的代码开始运行时创建
这个大括号(块级作用域) 运行完毕后销毁
可以实现 用的时候创建 不用的时候销毁
大大节省了内存空间
{
var num=10;
let a=99;
console.log(a);//99
}
console.log(num);//10
console.log(a);// a is not defined 报错 这个变量不存在
let变量 没有变量提升
{
console.log(a);// Cannot access 'a' before initialization 不能提前调用
let a=10;
}
let变量不能重名
let a=10;
let a=20;//Identifier 'a' has already been declared
//a变量已经被定义过 所以不能重复定义 let变量不能重名
暂时性死区
var num=10;
function show() {
num=99;//报错 不会找到外部的num 而是找到内部的num
//但是num又是let声明 不存在提升 所以报错
let num;
}
用let解决异步函数数据变量 丢失问题
for(let i=0;i<10;i++){
setTimeout(function () {
console.log(i);
},0)
}
class创建类
绑定实例属性 绑定实力方法 绑定静态方法 绑定静态属性
class Person{
//绑定实例属性
constructor(name,age) {
this.name=name;
this.age=age;
}
//绑定实力方法
eat(){
console.log("es6绑定方法吃吃吃！")
}
show(){
console.log("来吧展示！")
}
// 绑定静态方法
static study(){
console.log("好好学习，天天向上")
}
}
// 绑定静态属性
Person.countru="China";
var per=new Person("果冻",1);
console.log(per.name);//果冻
console.log(per.age);//1
per.show();//来吧展示！
console.log(Person.countru);//China
console.log(Person.name);//自带的 Person
class继承
extends关键字
* es5中 构造函数之间 不能实现真正的继承
* 所以也就无法调用 父类构造函数里面的实例方法
*
* 但是es6的extends继承 子类对象却能调用父类里面的方法
*
* 所以class语法更高级
*
* 但是 再高级也是语法糖
//继承上边的笔记的代码
class Student extends Person{
constructor(name,age,hobby) {
super(name,age);
this.hobby=hobby;
}
work(){
console.log("好好！听课！")
}
}
var stu=new Student("茄子",2,"溜溜~");
//子类继承父类 就能调用父类里面的 实例属性跟实例方法
console.log(stu.name);
console.log(stu.age);
stu.show();
//除了能够拥有父类的功能以外 还可以推出自己更强大的功能
//所以 子类往往比父类更加强大
stu.work();
//父类的静态方法 也被继承
Student.study();
//父类的静态属性 也被继承
console.log(Student.countru);
console.log(Student.name);
Promise
Promise对象的格式写法:
在异步函数里面 通过return 返回一个 newPromise对象
Promise的构造函数里面 传入一个回调
回调的参数是两个: resolve 和reject
格式:
function 异步函数(){
return new Promise(function(resolve,reject){
这里面写原来异步函数的异步代码
如果计算正确 调用 resolve方法 传入计算结果
如果计算错误 调用reject方法 传入错误信息参数
})
}
外部 调用异步函数 接收到Promise对象
使用Promise对象 调用then方法 匹配正确结果
调用catch方法 匹配错误结果
then和catch都是参数是回调函数
var promise=异步函数();
promise.then(function(data){
一旦内部的promise对象调用了 resolve方法
那么then就会被触发
data就是resolve传入的正确结果
})
promise.catch(function(err){
一旦内部的promise对象调用了 reject方法
那么catch就会被触发
err 就是reject方法传入的错误结果
})
function async(a,b) {
return new Promise(function (resolve,reject) {
setTimeout(function () {
if(typeof a!="number"){
reject("你传入的a参数不是数值型!!!");
return;
}
var result=a+b;
// 计算结果正确 调用 resolve
resolve(result);
},0)
})
}
接收Promise对象
/*var promise=async(1,2);
//获取正确的结果
promise.then(function (data) {
console.log(data);
})
then方法和catch方法 都会返回当前promise对象
所以可以链式编程
catch只能有一个 then可以有好多个
var pro1=async("xx",6);
pro1.then(function (data) {
alert("匹配到了then")
console.log(data);
})
.catch(function (err) {
console.log(err);
})
在promise语法中,
then可以出现好多个 但是catch只能有一个
有两个也只会触发第一个
因为 在不停的then then then过程中
如果都没有计算 错误 那么就会then执行下去 一直到最后一个
如果中间只要出现错误 直接匹配catch 剩下的then不执行了
在then这个链式编程中 catch写到链的前边和后边效果一样
但是一般 潜规则都是写在最后
function asy(a,b) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if(typeof a!="number"||typeof b!="number"){
reject("传入的参数不是数值！");
return;
}
resolve(a+b);
},0)
})
}
var promise=asy(1,2);
promise.then(function (data) {
console.log(data); // 3
if(data>0){
return asy(data,3);
}
}).then(function (data) {
console.log(data); // 6
if(data>0){
return asy("xx",4);//匹配错误的位置
}
}).then(function (data) {
console.log(data); //匹配到错误 传入的参数不是数值！
if(data>0){
return asy(data,5);
}
}).then(function (data) {
console.log(data); //上边错误 运行不到这一个
}).catch(function (err) {
console.log("匹配到错误",err)
})
验证表单案例
const user={
username:"",
password:"",
checkName:()=>new Promise((resolve, reject) => setTimeout(()=>{
if(/^\w{6,15}$/.test(user.username)){
resolve("用户名格式正确")
}else{
reject("用户名格式错误")
}
},0)),
checkPwd:()=>new Promise((resolve, reject) => setTimeout(()=>{
if(/^\w{6,15}$/.test(user.password)){
resolve("密码格式正确")
}else{
reject("密码格式错误")
}
},0)),
/* checkGender:function (success,error) {
// return new Promise()
},
checkAge:function (success,error) {
// return new Promise()
},
checkVip:function (success,error) {
// return new Promise()
}*/
}
user.username="xiaoqiang";
user.password="123456";
user.checkName()
.then((data)=>user.checkPwd())
.then((data)=>{
console.log("可以注册了！",data)
}).catch((err)=>{
console.log("不能注册",err);
})