ES6
---
* JavaScript语言随着使用的人越来越多,ECMA语法规范:if/else
* 为了让js语言更适应大型应用的开发、旨在消除一些怪异的行为
### 包含内容(strict严格模式)
---
* 使用严格模式的方式:
- 在全局中或者文件中直接使用
+ `use strict`;
+ 以下的代码就按照严格模式来执行
- 在函数中开启严格模式
+ `function xx(){ "use strict"; }`
+ 以上函数内的代码就执行严格模式,非该函数内的代码正常模式
* 全局变量显式声明
```javascript
'use strict';
// function aa(){
// 'use strict'
// }
personName = 'jack'; //personName is not defined
console.log(personName);
```
* 禁止使用with语句
```javascript
'use strict';
var person = {
name: 'jack'
};
//下面一行报错:Strict mode code may not include a with statement
with(person) { //针对参数对象做一些操作
name = 'rose';
}
console.log(person);
```
* 禁止this关键字指向全局对象
```javascript
function aaa() {
return this; //开启严格模式的时候,返回的this是undefined,以前是window
}
aaa();//在ES5中没有开启严格模式返回值是window,而开启以后进制this指向全局对象,所以是undefend
```
* 保留字
- implements, interface, package, private, protected, public, static, yield
LET关键字
* LET是块级作用域,块级就代表着{},如果没有在{}内,就是全局的作用域
* 不存在变量类型提升
- 不会出现:不管在哪里使用,最终都变成了全局对象
* 注意事项:
- 1:变量查找机制:和以前一样,就近原则,如果当前作用域{}内没有该变量的声明,就往上级作用域查找
- 2:每个块内使用的是自己各自的let声明变量
- 3:不允许同一个作用域下,还同一个名称的声明
* let就是为了解决变量会自动提升成全局变量的一个问题
严格模式和关键字的区别
* 严格模式的开启,影响着代码的限制(我们使用上的不同)
* 关键字对代码的功能的增强(效果上的不同)
* 通常使用ES6,就建议开启严格模式,避免有依赖报错
const关键字
* 也是块级作用域
* 注意点:
- 1:必须一次性完成初始化,声明+赋值
- 2: 不能够二次赋值:`const p = {}; p='abc';//不能`
+ 可以给对象挂载属性,不会改变对象的指向
* `const p = {}; p.name= 'abc';//可以`
小总结
* 严格模式
- 约束以前代码的方式的一些限制
+ 必须显示声明全局变量(先声明后使用,否则报错)
- 禁止this指向全局对象,如果全局函数中return this;返回的是undefined
- with在ES5中是根据传入的对象才做相关操作,ES6严格模式下是禁止的
* Let:块级作用域,如果不再{} 下就是全局的变量,在{}下就属于自己块的声明
- 查找机制: 就近原则,当前块内没有声明就向上级作用域查找
- 不存在变量类型提升(不会自动提升成全局变量)
- 使用细节:
- 同一个块内不允许同名变量的声明
* const
- 块级作用域,不存在变量类型提升
- 必须一次性完成初始化,声明+赋值
- 不允许二次赋值,可以挂载属性
模板字符串(字符串扩展)
* 使用方式:
- tab键的上方,反引号包括起来`字符串扩展`
* 模板字符串支持换行符的输出
* 可以嵌入对象或者变量`${对象.属性名}`
* 了解:可以支持原生字符串的输出 `String.raw`hello\r\nworld``
扩展ES6函数
* 字符串操作
- 字符串对象.includes(参数);
+ 判断调用的字符串对象是否包含参数字符串,返回值Boolean
- 字符串对象.startsWith(参数);
+ 判断调用的字符串对象是否以参数字符串开头,返回bool
- 字符串对象.endsWith(参数);
+ 判断调用的字符串对象是否以参数字符串结尾,返回bool
- 字符串对象.repeat(num);//了解
+ 返回调用字符串对象的num次字符串内容
* 数学操作
- Math.trunc(float); //返回截取掉小数位的整数部分
+ Math.trunc(3.1415926);// 3
* 数组操作
- 在数组中查找指定元素
+ 数组对象.find(callback);
+ callback:参数列表: ele元素,index下标,arr原数组
+ 注意:该函数的返回值同过回调函数内部的return来做控制
+ 返回值:返回元素的值,如果没有查找到返回undefined
* 获取数组
+ 获取数组Array.of(3,3,5); //了解就可以,返回一个数组[3,3,5]
+ 通过对象参数获取数组` Array.from({length:3,1:'abc','2':'def'});`
+ length是必须的属性,其他的属性可以是1或者'1' -->
```javascript
let citys = ['北京', '上海', '广州'];
//找到上海元素
let city = citys.find(function(ele, index, arr) {
console.log('ele', ele);
return '上海' === ele; //结束遍历并返回元素
});
console.log(city);
// 在数组中查找元素的下标
// 返回的是指定元素的下标,如果没有查找到元素返回-1
let citys = ['北京', '上海', '广州'];
// //找到上海元素
let index = citys.findIndex(function(ele, index, arr) {
console.log('ele', ele);
return '上海' === ele; //结束遍历并返回元素
});
console.log(index);
```
箭头函数
* 让this不再多变
- 箭头函数本身是没有this的,在声明时箭头函数会根据上层函数的this进行绑定,不再是根据调用时的this去改变了
* 没有参数
- `()=>1;` //没有参数返回1
* 一个参数
- `num => num;` //这种情况可以省略参数的括号
* 多个参数
- `(n1,n2) => n1+n2;` //返回n1+n2
* 多行代码
- `(n1,n2) => {//code.....} `
* 箭头函数本没有arguments,会根据声明绑定上一次function拿到其中的arguments
* 箭头函数不可以用作构造函数
#### ESpromise
* 承诺,异步操作
* readyState状态
```
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status
200: "OK"
404: 未找到页面
参考资料
* ES6参考资料:http://es6.ruanyifeng.com/
* babel参考资料: http://www.ruanyifeng.com/blog/2016/01/babel.html
* node学习 http://cnodejs.org/getstart 《Node.js 包教不包会》
#### ES6转换ES5