简单的对ES6新增常用的知识总结。
一、变量
1.var
- 可以重复声明
- 无法限制修改
- 没有块级作用域 (是函数级作用域)
例如:
<script>
window.onload=function(){
var oBtn=document.getElementsByTagName('input')
for(var i=0;i<oBtn.length;i++){
//实现此功能,var声明没有块级作用域,所以老方法就是用闭包
(function(i){
oBtn[i].onclick=function(){
alert(i)
}
})(i);
}
}
</script>
<body>
<input type="button" value="按钮1">按钮1</input>
<input type="button" value="按钮1">按钮1</input>
<input type="button" value="按钮1">按钮1</input>
</body>
2.let
- 不能重复声明
- 它是 变量 ----- 可以修改
- 块级作用域
例如:
//它是变量可以修改
let a = 5;
a = 10;
//它有块级作用域
<script>
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
//let有块级作用域,let声明变量,也就不用所谓的闭包了
for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i);
};
}
}
</script>
<body>
<input type="button" value="按钮1">按钮1</input>
<input type="button" value="按钮1">按钮1</input>
<input type="button" value="按钮1">按钮1</input>
</body>
3.const
- 不能重复声明
- 它是 常量 -----不能修改
- 块级作用域
例如:
const a = 10;
a = 20; //报错,注意:上边第2点
二、箭头函数
- 可以省去
function
和函数名,()
与{}
中间添加=>
- 如果只有一个参数,
()
圆括号也可以省略 - 如果只有一行
return
语句,{}
和return
花括号也可以省略 - 修正了
this
的指向问题
例1:
//原
function show(){
}
//箭头函数
()=>{}
例2:
window.onload=function(){
alert('111');
}
//箭头函数
window.onload=()=>{
alert('111')
}
例3:
//带参数的
let show=function(a,b){
alert(a+b);
}
show(1,2);
//箭头函数
let show=(a,b)=>{
alert(a+b);
}
show(1,2);
例4(排序):
//排序例子
let arr=[10,52,20,30,60,15];
arr.sort(function(n1,n2){
return n1-n2;
});
alert(arr);
//箭头函数
arr.sort((n1,n2)=>{
return n1-n2;
});
alert(arr);
例5(一个参数):
let show=function(a){
return a*2;
}
show(5);
//箭头函数( 只有一个参数,可以省去圆括号 "()" )
let show=a=>{
return a*2;
}
alert(show(5));
例6(一个return语句):
let show=function(a){
return a*3;
}
show(10);
//箭头函数( 函数体中只有 一行 return 语句,可以省去花括号 "{}" )
let show=a=>a*3;
alert(show(10))
三、函数-参数
利用三个点
...
1.参数扩展(收集参数)
//这个作为形参,必须放在最后一个
function show(a,b,...args){
alert(a);
alert(b);
alert(args);//最后所剩余的实参,都放在 args 中
}
show(10,11,12,13,15,20);
注:作为形参,必须放到最后位置,如果不是最后,会报错*Rest Parameter
2.数组展开
- 展开后的效果,就是跟直接把数组内容直接写在哪里一样(通俗理解2333)
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr=[...arr1,...arr2];
alert(arr);//结果是 1,2,3,4,5,6
- 赋值的不行
let a;
let arr=[1,2,3];
a=...arr;
alert(a); //报错,赋值的不行
注:赋值的不行
- 默认参数
function show(a,b=5){
return a+b;
}
//默认参数,就是实参传的话,就用你传的,如果不传就用形参里默认给定的
console.log(show(1)); //结果为 6
四、数组方法
注:每个方法有一个参数为函数!
1.map — 映射 — 一个对应一个
注:参数是一个函数
注:有可能一堆数据 映射出去 一堆元素
//例子1
//成绩数组
[60,70,30,90]
//映射成
[及各,及各,不及格,及各]
//例子2
//用户ID
[1,2,3]
//映射出来
[{name:'xm',age:18},{name:'xl',age:20},{name:'xw',age:19}]
//例子
<script>
let score=[50,60,70,40];
let result=score.map(function(item){
return item>=60?"及各":"不及格"
})
console.log(score);
cosnole.log(result);
</script>
2.reduce — 汇总 — 一堆出来一个
注:reduce 内部有它自己的算法,看注释!!
//例子:算总和
let arr=[10,50,100];
//item表示数组中的每一个数,数组汇总两两相加,然后给tmp(中间临时赋值),index表示数组下标
let result =arr.reduce(function(tmp,item,index){
//第一次运算:第一次没有相加,直接把10赋值给tmp,tmp=10;
//第二次运算:tmp + item(50) = tmp(新值60)
//第三次运算:tmp(60) + item(100) = tmp = result(最终结果)
return tmp + item;
})
alert(result);
//例子:算平均数
let arr=[10,50,100];
let result = arr.reduce(function(tmp,item,index){
if(index != arr.length-1){//判断说明不是最后一次,继续相加
return tmp+item;
}else{
return "我是平均值:" + (tmp+item)/arr.length;
}
})
alert(result);
3.filter — 过滤器 — 过滤一部分,留一部分
let arr = [{
title: "男士衬衫",
price: 75
},
{
title: "女式包",
price: 7500
},
{
title: "女士鞋",
price: 1000
},
{
title: "男士鞋",
price: 500
}
]
let result = arr.filter(function(item){
return item.price > 500;
})
console.log(result)
4.forEach — 循环(迭代)
<script>
let arr = [10,20,30];
arr.forEach(function(item,index){
alert("第" + index + "个是:" + item)
})
</script>
五、字符串
1.startsWith 和 endsWith
Boolean值,判断是不是以什么开头,以什么结尾:true & false
- startsWith
<script>
let str = "abckgds";
//这个字符串是否以a开头,返回bool值
alert(str.startsWith('a'));
</script>
<script>
let str = "http://it.baidu.com";
if (str.startsWith('http://')) {
alert('普通网址')
} else if (str.startsWith("https://")) {
alert('加密网址')
} else if (str.startsWith('git://')) {
alert('git地址')
} else if (str.startsWith('svn://')) {
alert('svn地址')
} else {
alert('其他')
}
</script>
- endsWith
<script>
let str = '1.txt';
if (str.endsWith('.txt')) {
alert('文本文件')
} else if (str.endsWith('.jpg')) {
alert('JPG图片')
} else {
alert('其他')
}
</script>
2.字符串模板
利用 ` 加 ${}
<script>
let a = 12;
let str = `${a}bc`;
alert(str);
</script>
<script>
let title = "哈哈";
let content = "我是模板字符串"
let str = `<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`
alert(str)
</script>
六、解构赋值
- 左右两边结构
必须
一样- 右边必须是个合法的东西 (也就是说数组就必须是数组格式,json就是json格式);例如
数组:[] && json:{"a":1,"b":0}
- 声明和复制不能分开 (必须在一句话里完成)
//数组
let [a,b,c] = [1,2,3];
console.log(a,b,c);
//json
let {a,b,c} = {"a":12,"b":10,"c":15}
//复杂型
let [{a,b},[n1,n2,n3],num,str] = [{"a":1,"b":2},[10,11,12],20,"sxs"]
console.log(a,b,n1,n2,n3,num,str);
//不想拆开json,不想拆开数组
let [json,arr,num,str]=[{"a":1,"b":2},[10,11,12],10,"sxs"]
console.log(json,arr,num,str)
复杂型结果:
七、Promise
异步:操作之间没啥关系,同时进行多个操作
同步:操作之间有关系,同时只能做一件事
- 封装异步操作
- Promise有一个参数,是一个函数,这个函数有两个参数,resolve(解决–成功),reject(拒绝–失败)
注:ajax要用jQuery包
0.底层Promise写法
注:自己写模拟的数据文件
//最基础的用Promise 发送请求
let p = new Promsie(function(resolve,reject){
//异步代码
//resolve --- 成功
//reject --- 失败
$.ajax({
//注:这里不能用文件路径,用 localhost
URL:"xxx",
dataType:"json",
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
});
// p 有结果了然后执行then,这里边说白了,第一个function就是resolve,第二个function就是reject
p.then(fucntion(res){
alert('成功了' + res)
},function(err){
alert('失败了' + err)
})
升级版:
//升级版
let p1 = new Promise(function (resolve, reject) {
// 异步代码
// resolve ----- 成功
// reject ------ 失败
$.ajax({
// 不能再用文件路径,必须开server
url: "data/arr.txt",
dataType: "json",
success(arr) {
resolve(arr)
},
error(err) {
reject(err)
}
})
});
let p2 = new Promise(function (resolve, reject) {
// 异步代码
// resolve ----- 成功
// reject ------ 失败
$.ajax({
// 不能再文件路径,必须开server
url: "data/json.txt",
dataType: "json",
success(arr) {
resolve(arr)
},
error(err) {
reject(err)
}
})
});
//promise身上有一个方法all,表示全都执行完以后,然后再执行then
Promise.all([p1,p2]).then(fucntion(arr){
//解构赋值(arr里边是一个数组,包括两条数据结果,利用结构赋值,分别把他们分开)
let [res1,res2] = arr;
alert('全部成功了!!!')
// 参数得出的结果其实是一个数组(两个结果)
console.log(res1)
console.log(res2)
},function(){
alert('至少有一个失败了')
})
加强版:
//函数封装
// 封装一个函数
function createPromise(url) {
// 把创建好的Promise对象返回出去
return new Promise(function (resolve, reject) {
// 异步代码
// resolve ----- 成功
// reject ------ 失败
$.ajax({
// 不能再文件路径,必须开server
url,
dataType: "json",
success(arr) {
resolve(arr)
},
error(err) {
reject(err)
}
})
});
}
Promise.all([createPromise('arr.text'),createPromise('json.txt')]).then(function(arr){
let [res,res2] = arr;
alert('全部成功!');
console.log(res1);
console.log(res2)
},function(){
alert('至少有一个失败')
})
最完美的在下边↓↓↓
1.Promise.all([]).then()
一个一个请求都得成功
最完美:
Promsie.all([$.ajax({
url:"arr.txt",
dataType:"json"
}),$.ajax({
url:"json.txt",
dataType:"json"
})]).then(function(){result}{
let [arr,json] = [result]
alert('成功了')
console.log(arr,json)
},function(){
alert('失败了')
})
2.Promsie.race([]).then()
这个是那条请求先来,先读哪个,就是看谁快
//随便举个例子(其他的都一样,就是读取顺序看谁网速快):
Promise.race([
$.ajax({url:"http://baidu.com/data/user1"}),
$.ajax({url:"http://baidu.com/data/user2"}),
$.ajax({url:"http://baidu.com/data/user3"}),
])
八、generator — 生成器函数
普通函数: 一路执行到底
generator: 中间能停
注:*
号必须紧贴着,要不function,要么函数名
- 它是一个对象,有一个next() 方法,next() 一下执行一步
//generator写法 function *show(){ alert('a'); //yield 暂时放弃执行 yield; alert('1') } let genObj = show(); genObj.next();//出现a genObj.next();//出现1 //他在这个过程中相当于,生成了两个小函数,生成第一个alert,生成第二个alert
- 简单用法 — 获取请求,先等一会,获取到再执行下一步代码
function *函数(){ 代码... yield; 代码... }
yield — 放弃执行
-
yield传参
yield执行过程图解(圈住的是一区域)
<script> function* show(num1, num2) { alert(`${num1},${num2}`) alert('0'); let a = yield; alert('1') alert(a); //结果是5,看下边注释 } // 它是一个生成器对象 let gen = show(10, 11); //这个传参是给里边形参对应 gen.next(12); //实际上它是没法给yield传参的,它是废的 gen.next(5); //它执行的是yield后边的 </script>
-
yield可以返回
<script> function* show() { alert('a'); yield 12; alert('b'); return 55; } let gen = show(); let res1 = gen.next(); //执行的是yield console.log(res1) ;//结果是12 let res2 = gen.next(); //最后一步靠 return 给 console.log(res2); //结果是55 </script>
2.1 利用图解,理解yield执行过程
yield相当于每一步的中间产物或者输入传参的东西
利用炒菜例子讲解整个流程<script> function* 炒菜(菜市场买回来的菜) { 洗菜 - > 洗好的菜 let 干净的菜 = yield 洗好的菜;//中间的产物或者传入的参数 干净的菜 - > 切 - > 丝 let 切好的菜 = yield 丝 切好的菜 - > 炒 - > 熟的菜 return 熟的菜 } </script>
九、JSON
1.JSON对象
- JSON.stringify() 转成字符串(串符化) —
JSON.stringify({a:12,b:10}) => '{"a":12,"b":10}'
<script> let json = { a: 10, b: 20 } alert(JSON.stringify(json)) </script>
- JSON.parse() 转换成json对象 —
JSON.parse('{"a":12,"b":10}') => {a:12,b:10}
<script> let str = '{"a":10,"b":20,"c":"abc"}' let json = JSON.parse(str) console.log(json) </script>
2.简写
-
名字一样
//名字和值一样的时候(key:value),可以简写成一个 let a=10; let b=20; let json={ //a:a a, b } console.log(json);
-
方法简写
//方法简写,省去function <script> let json = { a:10; //show:fucntion(){},简写如下 show(){ alert(this.a); } } json.show(); </script>
3.json的标准写法
- 只能用双引号
- 所有的名字(key)都必须用双引号包起来
{"a":10,"b":20}
十、面向对象
- class 关键字、构造器和类分出来了
- class 里直接加方法
- 继承
1.面向对象
- 原生 — 老方法
function User(name,pass){ this.name=name; this.pass=pass; } User.prototype.showName=function(){ alert(this.name); } User.prototype.showPass=function(){ alert(this.pass); } var ul = new User('sxs','123456'); ul.showName(); ul.showPass();
- class 类
class User{ constructor(name,pass){ this.name=name; this.pass=pass; } showName(){ alert(this.name); } showPass(){ alert(this.pass); } } var ul = new User('sxs','123456') ul.showName(); ul.showPass();
2.继承
- 原生 — 老方法
function User(name,pass){ this.name=name; this.pass=pass; } User.prototype.showName=function(){ alert(this.name); } User.prototype.showPass=function(){ alert(this.pass); } function VipUser(name,pass,level){ //.call 继承一下父级的属性 User.call(this,name,pass); this.level = level; } VipUser.prototype = new User(); VipUser.prototype.constructor = VipUser; VipUser.prototype.showLevel = function(){ alert(this.level); } var v1 = new VipUser('sxs','0000',3) v1.showName(); v1.showPass(); v1.showLevel();
- ES6中的继承
class User{ constructor(name,pass){ this.name=name; this.pass=pass; } showName(){ alert(this.name); } showPass(){ alert(this.pass); } } //VipUser 扩展自 User,extends 继承父类 class VipUser extends User{ //子类,也是类,页需要 constructor constructor(name,pass,level){ //super --- 超类===父类 //这相当于在执行父类,执行super super(name,pass); //再加上 VipUser 自己的东西 this.level = level; } showLevel(){ alert(this.level) } } var v1 = new VipUser('sxs','111',5) v1.showName(); v1.showPass(); v1.showLevel();