首先需设定"use strict"
一,变量
1, let
let: let a = 12;
与var的区别:
a,区别1:
let是块级作用域。若在代码块中定义,其他地方则不能使用。
var是函数作用域。若在函数中定义,其他地方则不能使用。
*什么叫做代码块:
代码块:被{}包起来的代码,比如if for while
b,区别2:
let不允许重复声明 let a=12; let a=5;
出现在同一代码快中会报错
应用:
-
es5中 i的问题:
for(var i=0;i<aBtn.length;i++){ aBtn[i].onclick=function(){ alert(i) } } >> 3 >> 3 >> 3 解决办法1: for(var i=0;i<aBtn.length;i++){ (function(i){ aBtn[i].onclick=function(){ alert(i) } })(i) } >> 0 >> 1 >> 2 解决办法2: for(let i=0;i<aBtn.length;i++){ aBtn[i].onclick=function(){ alert(i) } } >> 0 >> 1 >> 2 注意:1,在es6中{}相当于匿名函数自调用。 2,不能重复定义
2,const:用来定义常量,一旦复制,再不能修改。
const a = 12; a = 5; >> 报错
注意:1,const声明时一次性赋值。(必须给初始值)2,不能重复定义
用途:为了防止意外修改变量。比如:组件名,库名
二,字符串模版:
>> 以前: var str="";
现在:var str=``;
>> 字符串连接
以前:'a' +变量名+'c';
现在:`a${变量名}c`;
三,解构复制:
1,var [a,b,c]=[1,2,3];//模式匹配 左边跟右边必须一样。
2,var {a,b,c}={1,2,3}; //无所谓顺序。
四,复制数组
1,循环
2,Array.form(arr)
3, var arr2=[...arr]
...的用法:
a>: var arr2=[...arr]
b>: function show(...agus){console.log(typeof agus)//array };show(1,2,3,5)
五,循环
1,for of:循环,主要用来循环map对象。
>>可以循环数组,但不能循环json
map对象: 和json相似,也是一种key-value(键值对)形式。
var map=new Map();
设置:
map.set(name,value);
获取:
map.get(name);
删除:
map.delate("name");
>>用法:
1,for(var name of map.entries()){console.log(name)//key,value};循环全部.包括 key、value.
或者
for(var [key,value] of map){console.log(key)//key console.log(value)//value};
2,for(var name of map.keys()){} //只循环key
3,for(var name of map.values()){} //只循环value
循环数组:
var arr=['三国演义','水浒传','红楼梦','西游记'];
1,for(var name of arr){console.log(name)//三国演义 水浒传 红楼梦 西游记} 默认循环value
2,for(var name of arr.keys()){} 循环key
3,for(var name of arr.entries()){} 循环key,value
六,箭头函数
var show = ()=>{ }
>>注意:
1,函数中this的指向变为window;
2,arguments,不能用了
七,对象
1,单体模式 //用来解决this指向
var name="abb"
var age="19"
var json={
name,
age,
showName(){
alert(this.name)//abb
},
showAge(){
alert(this.age)//19
}
}
2,面向对象
>> 以前的写法:
function person(name,age){ //既是构造函数也是类
this.name=name;
this.age=age;
}
person.prototype.showName=function(){
alert(this.name)
}
person.prototype.showAge=function(){
alert(this.age)
}
var p1=new person('aaa',12);
p1.showName(); // aaa
p1.shoeAge(); // 12
>> es6中的写法:(类和构造函数区分开了)
class person{ //类
constructor(name,age){ //构造函数
this.name=name;
this.age=age
}
showAge(){
alert(this.age)
}
showName(){
alert(this.name)
}
}
var p1=new person('abc',102);
p1.showName();//abc
p1.showAge(); //102
3,面向对象继承:
以前的继承:
function person(name,age){ //既是构造函数也是类
this.name=name;
this.age=age;
}
person.prototype.showName=function(){
alert(this.name)
}
person.prototype.showAge=function(){
alert(this.age)
}
function Worker(name,age){
person.apply(this,arguments)
}
Worker.prototype=new person();
var p1=new person('aaa',12);
var w1=new Worker('ddd',123);
w1.showName(); // ddd
w1.shoeAge(); // 123
p1.showName(); // aaa
p1.shoeAge(); // 12
es6的继承:
>> class worker extends person{//此时worker身上就具有了person身上的属性和方法。
constructor(name,age){
super(name,age); //调用父级的构造
}
};
用法:
class worker extends person{
constructor(name,age,jop){
super(name,age); //若没有这句 则会覆盖掉父级的构造函数 报错
this.jop=jop
}
showJop(){
alert(this.jop)
}
}
var p2=new worker('bbb',5,'扫地的');
p2.showName(); //bbb
p2.showAge(); //5
p2.showJop(); //扫地的
八,面向对象的应用:
class Queue{
constructor(content=[]){
this._queue=[...content]
}
shift(){
this._queue.shift();
return this._queue
}
push(n){
this._queue.push(n)
return this._queue
}
}
var q=new Queue([1,2,3,4]);
q.shift();
q.push(n);
console.log(q._queue)
九,模块化:----必须引入traceur.js和bootstrap.js,type属性必须为module。
1,如何定义(导出)模块?
2,如何使用?
定义: >>a.js
const a=12;
export default a;
使用:
import 'modA' from './a.js';
十,promise:就是一个对象,用来传递异步操作的数据(消息)
pending(等待、处理中)、Resolve(成功)、Rejected(失败)
用法:
var p1=new Promise(function (resolve,rejected) {
resolve(1);
rejected(2);
});
p1.then(function (value) {
console.log('成功了')
},function () {
console.log('失败了')
})
1,then
2,catch:捕获错误的
3,all:用于将多个promise对象,组合,包装成一个全新的promise实例。返回的promise对象
var p1=new Promise(fun);
var p2=new Promise(fun);
var p3=new Promise(fun);
用法: Promise.all([p1,p2,p3,...]).then(sucFun,failFun);
注意: 都正确走成功,一个失败就会走失败。
4,race: 返回的也是promise对象,最先能执行的promise结果。
用法:
var p1=new Promise(function(resolve,reject){
setTimeout(resolve(),500,'one');
})
var p2=new Promise(function(resolve,reject){
setTimeout(resolve(),100,'two');
})
Promise.race([p1,p2]).then(function(value){
console.log(value) //two
})
---end.