ES6新特性

ES6新特性

一、ES6 简介

ECMAScript 6 简称 ES6，是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript 和 JavaScript 的关系：前者是后者的语法规格，后者是前者的一种实现
Babel：将ES6代码转为ES5代码

二、变量

1.var
1.可以重复声明
2.无法限制修改
3.没有块级作用域 (是函数级作用域)
2.let
1.不能重复声明
2.它是 常量 -----不能修改
3.块级作用域
例如：//它是变量可以修改
let a = 5;
a = 10;
3.const
不能重复声明
它是 常量 -----不能修改
块级作用域
例如：const a = 10;
a = 20; //报错，注意：上边第2点

三、箭头函数

1.可以省去 function 和函数名，() 与 {} 中间添加 =>
2.如果只有一个参数，() 圆括号也可以省略
3.如果只有一行 return 语句，{} 和 return 花括号也可以省略
4.修正了 this 的指向问题
例1：//原
function show(){
}
//箭头函数
()=>{}
例2：window.οnlοad=function(){
alert(‘111’);
}
//箭头函数
window.οnlοad=()=>{
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 a2;
}
show(5);
//箭头函数( 只有一个参数，可以省去圆括号 “()” )
let show=a=>{
return a2;
}
alert(show(5));
例6(一个return语句)：let show=function(a){
return a3;
}
show(10);
//箭头函数( 函数体中只有 一行 return 语句，可以省去花括号 “{}” )
let show=a=>a3;
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.数组展开
1.展开后的效果，就是跟直接把数组内容直接写在哪里一样(通俗理解2333)
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr=[…arr1,…arr2];
alert(arr);//结果是 1,2,3,4,5,6
2.赋值的不行
let a;
let arr=[1,2,3];
a=…arr;
alert(a); //报错，赋值的不行
4.默认参数
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}]
2.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 — 循环(迭代)
let arr = [10,20,30];
arr.forEach(function(item,index){
alert(“第” + index + “个是：” + item)
})

六、字符串

1.startsWith 和 endsWith

1.startsWith
let str = “abckgds”;
//这个字符串是否以a开头，返回bool值
alert(str.startsWith(‘a’));
2.endsWith
let str = ‘1.txt’;
if (str.endsWith(’.txt’)) {
alert(‘文本文件’)
} else if (str.endsWith(’.jpg’)) {
alert(‘JPG图片’)
} else {
alert(‘其他’)
}

2.字符串模板

let a = 12;
let str = ${a}bc;
alert(str);

let title = “哈哈”;
let content = “我是模板字符串”
let str = <div> <h1>${title}</h1> <p>${content}</p> </div>
alert(str)

七、解构赋值

1.左右两边结构必须 一样
2.右边必须是个合法的东西 (也就是说数组就必须是数组格式，json就是json格式)；例如 数组：[] && json:{“a”:1,“b”:0}
3.声明和复制不能分开 (必须在一句话里完成)
//数组
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

异步：操作之间没啥关系，同时进行多个操作
同步：操作之间有关系，同时只能做一件事
1.封装异步操作
2.Promise有一个参数，是一个函数，这个函数有两个参数，resolve(解决–成功)，reject(拒绝–失败)
注：ajax要用jQuery包

九、generator — 生成器函数

普通函数： 一路执行到底
generator： 中间能停
1.它是一个对象，有一个next() 方法，next() 一下执行一步
//generator写法
function *show(){
alert(‘a’);
//yield 暂时放弃执行
yield;
alert(‘1’)
}
let genObj = show();
genObj.next();//出现a
genObj.next();//出现1
//他在这个过程中相当于，生成了两个小函数，生成第一个alert,生成第二个alert
2.简单用法 — 获取请求，先等一会，获取到再执行下一步代码
function *函数(){
代码…
yield;
代码…
}

十、JSON

1.JSON对象

1.JSON.stringify() 转成字符串(串符化) —JSON.stringify({a:12,b:10}) => ‘{“a”:12,“b”:10}’
2.JSON.parse() 转换成json对象 — JSON.parse(’{“a”:12,“b”:10}’) => {a:12,b:10}

2.简写

1.名字一样
2.方法简写

3.json的标准写法

1.只能用双引号
2.所有的名字(key)都必须用双引号包起来
{“a”:10,“b”:20}

十、面向对象

1.class 关键字、构造器和类分出来了
2.class 里直接加方法
3.继承

1.面向对象

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();

2.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.继承

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);
}
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();

2.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();