第一章:ES6详解(变量,函数-箭头函数-参数,解构赋值....)

程序员也可以有艺术人生,大家好我是超人不会飞.

先看下基本的版本
ES历史版本

image.png

兼容性
http://kangax.github.io/compat-tablees5/
http://kangax.github.io/compat-tablees6/

ES6(ES2015) : 不用编译就可以运行ES66语法的浏览器 IE10+ Chrom FF 移动端 NodeJS

因此为了兼容老版本的浏览器,我们可以使用babel去提前编译.

编译,转换

在线转换(麻烦,用户每次点击就会去编译一次)
提前编译

babel==browser.js 是同义词.

简单的小demo(在线编译,效率慢)

image.png

ES6
1.变量
2.函数
3.数组
4.字符串
5.面向对象
6.Promise
7.generator 将同步操作拆成异步操作事实上generator是对Promise的封装
8.模块化

变量
var 问题
1.可以重复声明
2.无法限制修改
3.没有块级作用域 {} if(){}else{}

解决var的问题.
因此在ES6

image.png

块级作用域有什么用?
1.典型问题

image.png

优化

image.png

ES6

image.png

把项目写出来是容易,最难的是管理这个项目.

函数
箭头函数

()=>{

}

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)

image.png

特别注意:下面这个会报错,因为要符合右边是个东西

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(应用场所)

image.png

字符串模板
使用的是'' ` '' 返单引号

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总结.
谢谢您的支持.

第一章:ES6详解(变量,函数-箭头函数-参数,解构赋值....)

推荐阅读更多精彩内容