先看下基本的版本
ES历史版本
兼容性
http://kangax.github.io/compat-tablees5/
http://kangax.github.io/compat-tablees6/
ES6(ES2015) : 不用编译就可以运行ES66语法的浏览器 IE10+ Chrom FF 移动端 NodeJS
因此为了兼容老版本的浏览器,我们可以使用babel去提前编译.
编译,转换
- 在线转换(麻烦,用户每次点击就会去编译一次)
- 提前编译
babel==browser.js 是同义词.
简单的小demo(在线编译,效率慢)
ES6
1.变量
2.函数
3.数组
4.字符串
5.面向对象
6.Promise
7.generator 将同步操作拆成异步操作 事实上generator是对Promise的封装
8.模块化
变量
var 问题
1.可以重复声明
2.无法限制修改
3.没有块级作用域 {} if(){}else{}
解决var的问题.
因此在ES6
块级作用域有什么用?
1.典型问题
优化
ES6
把项目写出来是容易,最难的是管理这个项目.
函数
箭头函数
()=>{
}
1如果只有一个参数, ()可以省略
2.如果只有一个return语句,没有其他语句的情况下,{}可以省略
函数
参数
1.参数的 扩展/展开 大白话就是,我可以将 数组收一起,也可以将数组摊开.
2.默认参数
参数的扩展:
1.收集剩余的参数
function(a,b,...args){}
*Rest Parameter必须是最后一个
2.展开数组
function bin(a,b,c){
console.log(a,b,c);
}
var arr = [1,2,3];
bin(...arr);
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1,...arr2];
console.log(arr);
这一种展开是不支持的
let a;
let arr = [1,2,3];
a = ...arr;
这样是不支持的.
扩展与展开的结合
function arr(...args){
fn(...args);
}
function fn(a,b){
console.log(a,b);
}
arr(1,2);
默认参数
function arr(a,b=77,c=99){
console.log(a,b,c);
}
arr(1);
arr(1,2);
arr(1,2,3);
结果:
> 1 77 99
> 1 2 99
> 1 2 3
解构赋值
解构就是把东西拆开
1.左右两边结构必须一样.
2.右边必须是个东西
3.声明和赋值不能分开(必须在一句话里面)
let arr = [1,2,3]
let[a,b,c] = [...arr] //左边是数组,右边是数组
console.log(a,b,c)
let arr = {a:1,b:2,c:3};
let {a,b,c} = {...arr} //左边是json 右边是json
console.log(a,b,c)
特别注意:下面这个会报错,因为要符合右边是个东西
let [a,b] = {1,2};
console.log(a,b);
上面的代码, {1,2} 上面都不是,不是数组也不是json,也不是对象............
另外要符合声明和赋值不能分开,如代码就不对
let [a,b];
[a,b] = [1,2];
数组
主要是多了4个方法,这4分方法是非常好用的.
map --映射 一个对一个 我给你10个东西你给我返回10个东西
reduce --汇总
filter --过滤
forEach -- 循环
map
let arr = [1,2,3];
let result = arr.map(item=>item*2);
console.log(result);
结果
> Array [2, 4, 6]
let arr = [60,45,99];
let result = arr.map(item=>item>=50?'及格':'不及格');
console.log(result);
结果
> Array ["及格", "不及格", "及格"]
reduce
汇总 一堆出来一个
求和
let arr = [60,45,99];
let result = arr.reduce(function(temp,item,index){
return temp + item;
});
console.log(result);
结果
204
求平均
let arr = [60,45,99];
let result = arr.reduce(function(temp,item,index){
if(arr.length-1==index){
return (temp+item)/arr.length;
}
return temp + item;
});
console.log(result);
结果
68
filter
let arr = [60,45,99];
let result = arr.filter(item=>item>50?true:false);
console.log(result);
结果
> Array [60, 99]
let arr = [{name:'a',price:1000},{name:'b',price:20000},{name:'c',price:50}];
let result = arr.filter(item=>item.price<60);
console.log(result);
结果
> Array [Object { name: "c", price: 50 }]
forEach 和for循环是一样的.就是写法简单了一点.
let arr = [60,45,99];
arr.forEach((item,index)=>{
console.log(index+ ':' + item)
})
字符串
1.有2的新的方法 startsWith endsWith
2.字符串模板
startsWith(应用场所)
function withWho(str) {
if(str.startsWith('http://')){
console.log('开始为http')
}else if(str.startsWith('https://')){
console.log('开始为https');
}else {
console.log('其他类型');
}
}
withWho('http://a.com');
withWho('ht//a.com');
结果
> "开始为http"
> "其他类型"
endsWith(应用场所)
字符串模板
使用的是'' ` '' 返单引号
i: 直接将东西塞到字符串里面
ii:可以折行
let a = 99;
let str = `这是字符串模板${a}`;
console.log(str)
结果
> "这是字符串模板99"
ES6面向对象-基础
1.class关键字
2.class里面直接加方法
ES6之前面向对象的写法
function User(name,age){
this.name = name;
this.age = age;
}
User.prototype.sayName = function(){
console.log(this.name);
}
User.prototype.sayAge = function() {
console.log(this.age);
}
u1 = new User('bin',23);
u1.sayName();
u1.sayAge();
结果
> "bin"
> 23
新版ES6的出来使对象更像java,因为出现了class
class User{
constructor(name,age){
this.name = name;
this.age = age;
}
sayName(){
console.log(this.name);
}
sayAge(){
console.log(this.age);
}
}
u1 = new User('bin',23);
u1.sayName();
u1.sayAge();
结果
> "bin"
> 23
旧的继承的写法
function User(name,age) {
this.name = name;
this.age = age;
}
User.prototype.sayName = function(){
console.log(this.name);
}
User.prototype.sayAge = function(){
console.log(this.age);
}
function VIPUser(name,age,level) {
User.call(this,name,age);
this.level = level;
}
VIPUser.prototype = new User();
VIPUser.prototype.constructor = VIPUser;
VIPUser.prototype.sayLevel = function(){
console.log(this.level);
}
u1 = new VIPUser('bin',23,3);
u1.sayName();
u1.sayAge();
u1.sayLevel();
结果
> "bin"
> 23
> 3
新的ES6的继承的写法
super 叫做 超类(父类)
super() 就是在执行超类(父类)的构造函数;
class User{
constructor(name,age){
this.name = name;
this.age = age;
}
sayName(){
console.log(this.name);
}
sayAge () {
console.log(this.age);
}
}
class VIPUser extends User {
constructor(name,age,level){
super(name,age);//执行超类的构造函数.
this.level = level;
}
sayLevel(){
console.log(this.level);
}
}
var u1 = new VIPUser('superman',23,3);
u1.sayName();
u1.sayAge();
u1.sayLevel();
结果
> "superman"
> 23
> 3
面向对象-实例
即应用
面向对象应用-React
React是强依赖ES6的面向对象的.
React
1.组件化
2.JSX
JSX==babel==browser.js
可以去看看我的React基础开发.
下一篇是ES6 json Promise generator ES6总结.
谢谢您的支持.
