兼容性

ES6(ES2015)——IE10+
Chrome
FireFox
移动端
Node.js

如何兼容老版本？(编译、转译)

1、在线转换(用户每次打开页面需重新转换，费时)
在线转换有很多工具，在这里以babel为例，在线转换只需要在加上browser.js就行，如下：
1
2
3
4
5
<head>
...省略
<script src="browser.js" charset="utf-8"></script>
<script type="type/babel">
</head>
2、提前编译(babel/browser.js)

ES6变化内容

1、变量
2、箭头函数
3、函数的参数
4、数组方法
5、字符串
6、Promise(串行化的数据请求、异步交互)
7、generator(将同步操作拆为异步操作)
8、JSON
9、面向对象
10、解构赋值

1、变量

var存在的问题

可重复声明

1
2
3

int a = 12;
int a = 5;
console.log(a);	 //5

无法限制修改
也可以说无常量，会导致数据变动，出现问题但程序无报错。
无块级作用域
var是函数作用域，导致块外面也可访问块内的数据。
1
2
3
4
{
var a = 3;
}
console.log(a); //3

let、const性质

不可重复声明

1
2
3

let a = 5;
let a = 3;
//报错，不可重复声明

1
2
3

const a = 5;
const a = 3;
//报错，不可重复声明

1
2
3

let a = 5;
const a = 3;
//报错，不可重复声明

let-变量，const-常量
1
2
3
let a = 5;
a =3;
console.log(a); //3

块级作用域有什么用？

经典问题：

1
2
3

for(var i = 0; i < 5; i++){
	console.log(i);  //5,5,5,5,5
}

原始解决方法
用函数包起来——闭包

for (var i = 0; i< 5; i++){
  (function (i){
    console.log(i);
  })(i);  //0,1,2,3,4
}

let解决

1
2
3

for(let i = 0; i < 5; i++){
	console.log(i);  //0,1,2,3,4
}

2、箭头函数(方便)

区别

//ES5
function show(){
  //...
}

//ES6
() => {}

1
2
3
4
5
6
7
//ES5
let show = function show(a,b){
  //...
}

//ES6
let show = (a,b) => {}

要点

如果只有一个参数，可省略()

如果只有一个return，可省略{}

以下例子，可说明两要点

       //ES5
       let show = function(a){
         return a*2; 
       }
       
       //简写
       let show = a => {
         retuen a*2;
       }
       
       //进一步简写
       let show = a => a*2; 
       ``` 
       

# 

# 7、generator(生成器)

### 概念

* 普通函数——一路到底

function show(){
alert(‘a’);
alert(‘b’);
}

show()

1 2	* generator——中间能暂停(踹一脚走一步)

function *show(){
alert(‘a’);

yield;    //放弃

alert('b');

}

let genObj = show();

genObj.next(); // a
genObj.next(); // b

1 2	* generator原理

//以上一段代码为例
function show_1(){
alert(‘a’);
}

function show_2(){
alert(‘b’);
}

genObj.next(); // show_1
genObj.next(); // show_2


* yield


* 应用场景
  请求数据


# 8、Json

* 1、JSON对象
   + JSON.stringify
   + Json.parse
   
* 2、简写
   + 名字一样
   
   ```javascript
   let a = 2;
   let b = 5;
   let json = {a, b, c: 6};	//{2,5,6}

方法
1
2
3
4
5
6
7
show function(){
//
}

show (){
//
}

3、json的标准写法
- 1.只能用双引号
- 2.所有名字都必须用引号包起来
  - {a: 12, b: 15} ×
  - {‘a’: 12, ‘b’: 15} ×
  - {“a”: 12, “b”: 15} √

9、面向对象应用——React

React特点

1、组件化
2、强依赖于JSX=babel=browser.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习react-组件</title>
    <script src="react.js" charset="utf-8"></script>
    <script src="react-dom.js" charset="utf-8"></script>
    <script src="browser.js" charset="utf-8"></script>
    <script type="text/babel">
        class Item extends React.Component(
            constructor(...args){
                super(...args);
            }

            render(){
                return <li>{this.props.str}</li>;
            }
        )

        class List extends React.Component(
            constructor(params) {
                super(params);
            }

            render(){
                // let aItems=[];
                // for(let i = 0; i < this.props.arr.length; i++){
                //     aItems.push(<Item str = {this.props.arr[i]</Item>}>);
                // }

                return <ul>
                        {this.props.arr.map(a => <Item str = {a}></Item>)}
                    </ul>;
            }
        )

        window.onload = function(){
            let oDiv = docum
            ent.getElementById('div1');

            ReactDom.render(
                <List arr={['123','abc','bxsa']}></List>,
                oDiv
            );
        };
    </script>
</head>
<body>
    <div id="div1">

    </div>
</body>
</html>