ECMAscript 6 基本语法
1.变量
var
(1)可以重复声明
(2)无法限制修改
(3)没有块级作用域
let(变量)
(1)不能重复声明
(2)变量-可以重复修改
(3)有块级作用域
const(常量)
(1)不能重复声明
(2)常量-不能重复修改
(3)有块级作用域
解释一下块级作用域:使用var和function定义的变量a和方法test可以在大括号外边被访问,而使用let和const定义的变量和常量无法在大括号外面被访问。
{
var a = 1;
let b = 2;
const c = 3;
function test(){
console.log('123');
}
}
console.log(a); // 1;
console.log(b); // Uncaught ReferenceError: b is not defined
console.log(c); // Uncaught ReferenceError: c is not defined
test(); // test方法可以正常执行
参考链接:https://blog.csdn.net/mocha_wang/article/details/81539227
2.函数
箭头函数(简单来说就是去掉function加上箭头)
(1) 如果只有一个参数,()可以省略。
(2)如果只有一个return,{}可以省略。
例子:
<script>
let show=function(){
alert("abc");
}
show();
</script>
等效于:
<script>
let show=()=>{
alert("abc");
}
show();
</script>
箭头函数实际上就是function函数的简写。
3.函数的参数与扩展
函数的参数
(1)参数扩展/数组展开
(2)默认参数
参数扩展
(1)收集剩余的参数参数
<script>
function show(a,b,...args){
alert(a);
alert(b);
alert(...args);
}
show(1,2,3,4,5,6);
</script>
…args叫做Rest Parameter,必须是最后一个。
(2) 展开参数
…arr => 1,2,3
*展开后的效果,跟直接把数组的内容写在这儿一样。
<script>
let arr=[1,2,3];
function show(a,b,c){
alert(a);
alert(b);
alert(c);
}
show(...arr);
</script>
完全可以像上面一样写。
let arr1=[1,2,3];
let arr2=[4,5,6];
alert([...arr1,...arr2]);
<script>
function show(...args){
fun(...args);
}
function fun(a,b){
alert(a+b);
}
show(12,45);
</script>
4.解构赋值
(1)左右结构必须一样
let [a,b,c]=[1,2,3]; //赋值采用解构赋值
let {a,b,c}={a:12,b:5,c:10};//json采用解构赋值
console.log(a,b,c);
还能这样写:
let [json,arr,num,str] = [{a:12,b:5},[1,2,3],8,"hello world"];
console.log(json,arr,num,str);
let [a,b]={a:12,b:5};//注意一:左右结构不一样,编译不通过
(2)右边必须是个合法的类型
let {a,b}={12,5};//注意二:右边不是个合法的东西,编译不通过
(3)声明和赋值不能分开,必须在一句话完成。
let [a,b];//这不是一个合法的声明方式
[a,b]=[12,5];
let [a,b]=[12,5];//解构赋值:声明和赋值必须一起用。合法。
5.数组
map,即映射。一个对一个,进多少出来多少
例子:
[12,58,99,86,45,91]
[不及格,不及格,及格,及格,不及格,及格]
成绩的映射。
<script>
let score=[57,45,14,22,69,98,100,10];
let result=score.map(item=>item>=60?'及格':'不及格');//箭头函数
alert(score);
alert(result);
</script>
reduce,即汇总。一堆出来一个。
比如:算个总数、算个平均数。
// 求和
let arr = [12,69,180,8763];
let result = arr.reduce(function(tmp,item,index){
// index代表下标,item代表数组里面的数,tmp类似于中间结果。
return tmp+item;
});
alert(result);
用图说明:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EpIQkfS7-1599661354427)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200909003642463.png)]
// 求平均
let arr = [12,69,180,8763];
let result = arr.reduce(function(tmp,item,index){
if(index!=arr.length-1){
return tmp+item;
}else{
return (tmp+item)/arr.length;
}
});
alert(result);
filter,过滤器。
<script>
// 筛选出3的倍数
let arr = [12,5,8,99,27,36,75,11];
let result = arr.filter(item=>{
if(item%3==0){
return true;
}else{
return false;
}
});
alert(result);
</script>
可以简化代码:
<script>
// 筛选出3的倍数
let arr = [12,5,8,99,27,36,75,11];
let result = arr.filter(item=>item%3==0);
alert(result);
</script>
实例2:
<script>
let arr = [
{title:'男士衬衫',price:150},
{title:'男士鞋',price:888},
{title:'女士包包',price:3288},
{title:'女士鞋',price:688}
];
let result = arr.filter(json=>json.price>=600);
console.log(result);
</script>
forEach,循环(迭代)遍历数组。
<script>
let arr = [12,5,7,8,4]
arr.forEach((item,index)=>{
alert(index + ":" + item);
})
</script>
6.字符串
多了两个新方法:starsWith()、endsWith()
startsWith 返回布尔值 可用于判断一种类型。
<script>
let str = 'https://www.baidu.com';
if(str.startsWith('http://')){
alert('普通网址');
}else if(str.startsWith('https://')){
alert('加密网址');
}else if(str.startsWith('git://')){
alert('git地址');
}else{
alert('其他');
}
</script>
endsWith 返回布尔值 常见可用于后缀名判断文件类型。
<script>
let str = '1.jpg';
if(str.endsWith('.jpg')){
alert('JPG文件');
}else if(str.endsWith('.txt')){
alert('文本文件');
}else if(str.endsWith('.rar')){
alert('压缩文件');
}else{
alert('其他文件类型');
}
</script>
字符串模板
以往都是做字符串连接,有了字符串模板后,可以直接把东西塞到里面去。用`反引号代表字符串模板,用$引用内容。可以折行,在拼凑大段的html代码尤其好用。
<script>
let title = '标题';
let content = '内容';
let str = `<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;
</script>
7.ES6面向对象
class关键字,将构造器、类分开。
class里面直接加方法
原生JavaScript关于面向对象的写法:
<script>
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 u1 = new User("张三",'123456')
u1.showName();
u1.showPass();
</script>
ES6中面向对象的写法:类似java的写法。
<script>
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
var u1 = new User('张三','123456');
u1.showName();
u1.showPass();
</script>
继承:继承一个已有的类,扩展其功能。
原生JavaScript中的继承:
<script>
function User(name,pass){
this.name = name;
this.pass = pass;
}
User.prototype.showName = function(){
alert(this.name);
}
User.prototype.showPass = function(){
alert(this.pass);
}
// 原生JavaScript写的继承
function VipUser(name,pass,level){
User.call(this,name,pass);// 调用call()方法进行继承
this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
// 加上自己该有的东西
VipUser.prototype.showLevel = function(){
alert(this.level);
}
var v1 = new VipUser('李四','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();
</script>
ES6中写继承类:
<script>
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
// 直接用extends继承
class VipUser extends User{
constructor(name,pass,level){
super(name,pass);// super执行超类的构造方法。
this.level = level;
}
showLevel(){
alert(this.level);
}
}
var v1 = new VipUser('李四','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();
</script>
8.JSON
Json对象
JSON.stringify
JSON.parse
json的标准写法:名称要双引号,所有引号为双引号。
<script>
let json = {a:12,b:5};
alert(JSON.stringify(json));
let str = '{"a":5,"b":12,"c":"hello javascript"}';
console.log(JSON.parse(str));
</script>
json简写
名字跟值一样可以简写,方法一样也可以简写,:function可以删除。
<script>
let a=12;
let b=5;
// 原始写法
// let json = {a:a,b:b};
// 名字和值一样可以简写
let json = {a,b};
// 原始写法
// let json2={
// a:15,
// show:function(){
// alert(this.a);
// }
// }
// 方法可以简写,效果一样
let json2={
a:15,
show(){
alert(this.a);
}
}
</script>
9.Promise——用同步的方式写异步代码。
异步:操作与操作之间没关系。可以同时进行多个操作。如Ajax异步请求。
代码更复杂。
同步:同时只能做一件事。
代码简单。
实例代码:
<script src="jquery.js" charset="utf-8"></script>
<script>
let p1 = new Promise(function(resolve,reject){
// 异步代码
// resolve--成功了
// reject--失败了
$.ajax({
url:'arr.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(error){
reject(error);
}
})
});
let p2 = new Promise(function(resolve,reject){
// 异步代码
// resolve--成功了
// reject--失败了
$.ajax({
url:'json.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(error){
reject(error);
}
})
});
Promise.all([ // Promise的用处体现。
p1,p2
]).then(function(arr){
let [result1,result2] = arr;
alert('全都成功了');
alert(result1);
alert(result2);
},function(){
alert('至少一个失败了');
});
</script>
可以优化如下:
<script src="jquery.js" charset="utf-8"></script>
<script>
function creatPromise(url){
return new Promise(function(resolve,reject){
// 异步代码
// resolve--成功了
// reject--失败了
$.ajax({
url,
dataType:'json',
success(arr){
resolve(arr);
},
error(error){
reject(error);
}
})
});
}
Promise.all([ // Promise的用处体现。
creatPromise('arr.txt'),
creatPromise('json.txt')
]).then(function(arr){
let [result1,result2] = arr;
alert('全都成功了');
alert(result1);
alert(result2);
},function(){
alert('至少一个失败了');
});
</script>
对于高版本的JQuery,已经有自带封装好的Promise。所以可以像下面一样来写:
<script src="jquery.js" charset="utf-8"></script>
<script>
Promise.all([
$.ajax({url:'arr.txt',dataType:'json'}),
$.ajax({url:'json.txt',dataType:'json'})
]).then(function(results){
let [arr,json] = results;
alert('成功了');
console.log(arr,json);
},function(){
alert('失败了');
});
</script>
总结:promise的写法。Promise适合一次读一堆数据。
Promise.all([$.ajax(),$.ajax()]).then(results=>{
// 对了,成功了。
},err=>{
// 错了,失败了。
});
10.generator 生成器
普通函数----一路到底,只返回一个值。
generator----中间可以停,返回多个值。
<script>
function *show(){//*代表generator函数
alert('a');
yield;//配合generator函数
alert('b')
}
let genObj = show();//show()创建了generator对象
genObj.next();// 弹出a
genObj.next();//弹出b
</script>
generator实际上将原函数分成几个小的函数,然后依次执行。所以能做到走走停停。
generator中的yield既可以传参,也可以返回。
yield传参
<script>
function *show(){//*代表generator函数
alert('a');
let a = yield;//配合generator函数
alert(a);// a=5
alert('b')
}
let genObj = show();//show()创建了generator对象
genObj.next(12);// 第一个没法给yield传参
genObj.next(5);// 将5传给a
</script>
yield也可以返回相关东西。
<script>
function *show(){
alert('a');
yield 12;
alert('b');
return 55;
}
let genObj = show();
let res1 = genObj.next();//yield后面的数将返回给res1
console.log(res1);//done: false,value: 12
let res2 = genObj.next();//最后一步靠return返回数值
console.log(res2);//done: true,value: 55
</script>
用一张图来理解:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwGumFGH-1599661354431)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200909142914112.png)]
<script>
function *炒菜(从市场买回来的菜){
洗菜->洗好的菜;
let 干净的菜 = yield 洗好的菜;
洗好的菜->切->丝;
let 切好的菜 = yield 丝;
切好的菜->炒->熟的菜;
return 熟的菜;
}
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOLYNlSo-1599661354433)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200909142939094.png)]
generator适合读有逻辑性的数据,有次序。
全部总结一下
- 变量
var 重复声明、函数级
let 不可重复声明、块级、变量
const 不可重复声明、块级、常量
- 箭头函数
(1) 方便;
(2) 如果只有一个参数,圆括号可以省去;
(3) 如果只有一个return,{}也可以省去。
(4) 修正this,this相对正常一点。
- 参数扩展
(1) 能收集
(2) 能扩展
- 数组方法
(1) map 映射
(2) reduce 汇总:一堆->一个
(3) filter 过滤,用于筛选
(4) forEach 遍历数组
- 字符串
(1) startsWith
(2) endsWith
(3) 字符串模板
- Promise
(1) 封装异步操作
- generator
(1) 执行到一半可以暂停的函数,标志是*
(2) yield
- JSON
(1) JSON.stringify 返回JSON字符串
(2) JSON.parse 返回JSON对象
- 面向对象
(1) 一个类
(2) 继承super();
- 解构赋值
(1) 左右结构一样
(2) 右边是个合法的东西
(3) 声明、赋值一次完成