关于ES6那些事儿

一：ES6的简介

1.1996年javascript的创造者决定将javascript提交给标准化组织ECMA希望这种语言可以成为国际标准。

2.之后ECMA把这一标准称之为ECMAscript。可以说javascript是ECMAscript的实现。es6则是js的规格。

****重要重要****

ES6新增了一种独一无二的数据类型:Symbol。详情会在后面解释。

即现在javascript的数据类型共有以下7种。

String    Number    Boolean    null    undefined    Object    Symbol

二：let和const命令

关于let命令：

1.不存在变量提升。

2.从变量的使用到变量的声明属于暂时性死区。

3.不允许重复声明。

块级作用域

1.js只存在函数作用域以及全局作用域，es6为es5生成了块级作用域。

2.js的全局作用域相当于顶层作用域。

eg:var a=0;window.a=0;

es6新增的块级作用域会将全局作用域与顶层作用域区分。

eg:let b=1;window.b==>undefined;

2.块级作用域中声明函数只允许在{}中声明。

const命令

1.不允许重复声明；

2.声明之后变不可改变；当声明一个对象时需注意

eg:const a=0;a=3;==>报错

eg:const obj={};obj.a=a;不报错 obj={};==>报错；

解释：const声明的变量存储的是指向内存地址的指针，故不可赋值给其他，当声明的变量为对象时，可扩展此对象。

3.ES6新增了let、const、import、class四种声明变量的方法

三：变量的结构赋值

数组的结构赋值

1.ES6允许按照一定模式从数组或对象中提取值对变量进行赋值。

eg:let [a,b,c]=[1,2,3];

eg:let [a,[[bar],baz]]=[1,[[2],3]];

不完全解构

eg:let [a,[b],d]=[1,[2,3],[4]];==a=1;b=2;d=4

解构赋值可设置默认值(只有在数组成员中严格等于undefined时，才可以使用默认值)

eg:let [x=1]=[null];===>x=null

eg:let [x=2,y=2]=[]===>x=2;y=2;

对象的结构赋值

1.对象的结构赋值,变量名必须与属性名同名才可以赋值

eg:let { foo, bar } = { foo: "aaa", bar: "bbb" };

foo // "aaa"

bar // "bbb"

eg:let {baz} = {foo:"aaa",bar:"bbb"};

baz // undefined

2.嵌套对象的解构

let obj={p:["hello",{y:"world"}]};

let {p:[x,{y}]}=obj;

x //hello

y //world

p //报错（p is not defined）

解释：对象解构赋值的是值，而不是模式，此时P就是模式，则不会进行赋值；

下面将对p进行赋值

let obj={p:["hello",{y:"world"}]};

let { p, p: [x, { y }] } = obj;

x // "Hello"

y // "World"

p // ["Hello", {y: "World"}]

3.解构不成功的变量为undefined;

let {foo}={bar:"baz"};

foo //undefined

4.如果解构对象为嵌套的对象，而且子对象的父级属性不存在，则会报错

eg:let {foo:{bar}} = {bar:"baz"};

相当于执行的为 foo.bar 因此时foo为undefined-所以报错

字符串的结构赋值

1.const [a,b,c]="boy";

a //b

b //o

c //y

1.let {length : len} = 'hello';

len // 5

数值和布尔值的结构赋值

1.结构赋值的规则，只要等号右边不是数组或对象，就先将其转化为对象

eg:let {toString:s}=123;

s===Number.prototype.toString //true

eg:let {toString:s}=true;

s===Boolean.prototype.toString //true

函数参数的结构赋值

1.函数的参数也可以使用解构赋值

eg:function move([x,y])={return x+y};move([1,2]) //3

2.函数的参数也可以使用默认值

eg:function move({x=0;y=0}={}){return [x,y]};

move({1,2}) //[1,2]

move({})==move() //[0,0]

上面的函数的参数是一个对象，通过这个对象进行解构，得到变量x/y的值，若解构失败，则等于undefined

eg:function move({x,y}={x:0,y:0}){return [x,y]}

move({1，2}) //[1,2]

move({}) //[undefined,undefined]

move() //[0,0]

字符串的扩展

1.字符串的遍历器接口

eg:for(key of 'foo'){console.log(key)};  //f o o

这个遍历器最大的优点是可以识别大于0xFFFF的码点

2.js只有通过indexof来判断是否包含某个字符串，ES6新增了三个方法来判断一个字符串是否包含另一个字符串

eg:let s="hello world!";

eg:s.includes("o",1) //true  //判断是否包含

eg:s.startsWith("hello",1) //true  //判断是否在原字符串的开头

eg:s.endsWith("!",1)； //true  //判断是否在字符串的结尾

第二个参数表示开始搜索的位置

endsWith较与其他两个方法的区别为：

endsWith:是针对于前N个字符

startsWith-includes:是指从第n个字符到结尾位置

3.字符串的repeat的方法

eg:"x".repeat(3) //'xxx';

若是小数则取整处理

eg:"x".repeat(2.9) //"xx"

若参数为不是数值，则会转换为数值

eg:"x".repeat("3") //"xxx"

若参数为小于-1的负数 则会报错

若参数为-1-0的数，则为空字符串

"x".repeat(-0.7) //""

4.padStart(),padEnd()方法

ES2017引入了补全字符串的方法，

eg:"x".padStart(4,"ab")  //abax

eg:"x".padEnd(4,"ab")  //xabab

若设置补全字符串长度小于原字符串的长度时-则保持不变

eg:"xxx".padStart(2,"ab") //xxx

若省略第二个参数，默认使用空格补全

eg:'x'.padStart(4) //"  x"

字符串补全的用途

提示字符串格式

eg:'09-12'.padStart(10,"YYYY-MM-DD") //YYYY-09-12

模板字符串

eg：let color="red";$("result").append("this is a"+a+'apple');

使用字符串模板之后：`` 反单引号

eg:$(result).append(`this is a ${color} apple`);

若变量表示用到``则使用\进行转义

eg:console.log(`\`09\`123`);

  //`09`123

正则的扩展

1.关于RegExp构造函数

es5中构造函数的参数如下

eg:var reg=new RegExp("xyz","i");

或者 var reg=new RegExp(/xyz/);此时不能有第二个参数出现，否则会报错

ES6中允许在这种情况下允许第二个参数的设置

eg:var reg=new RegExp(/xyz/ig,'i').flags = 'i'

并且此正则对象的flags以第二个参数为准

2.u修饰符

ES6新增了u修饰符来识别码点大于0XFFFF的unicode字符

3.ES6中新增了判断是否含有u修饰符的方法

eg:let reg=/hello/;let reg1=/hello/u;

reg.unicode //false

reg1.unicode  //true

3.正则的扩展稍后跟进。。。

数值的扩展

1.二进制与八进制的表示法

ES6提供了二进制和八进制新的表示法。分别用前缀0b/0B 0o/0O表示

ES5的严格模式声明八进制不允许使用前缀0表示，ES6进一步明确使用0o表示

八进制转换为十进制

Number('0o111')  //7

2.ES6在Nuber对象上新增了Number.isFinite()与Number.isNaN()方法

Number.isFinite()判断数值是否为有限的

eg:Number.isFinite(15) true

eg:Number.isFinite(Infinity) false

Number.isNaN()判断数值是否为NaN

Number.isNaN(5)  false

Number.isNaN(NaN) true

3.ES6将全局的parseInt()和parseFloat()方法转移到Number对象上

ES5的写法：

parseInt("12.12")  //12

parseFloat("12.122323%"); //12.122323

ES6的写法

Number.parseInt("12.12")  //12

4.Number的isInteger()用来判断数值是否为整数

Number.isInteger(23) //true

Number.isInteger(20.1) //false

需要注意的是23.0==23

Number.isInteger(23.0) //true

5.ES6在Number对象上新增了常量Number.EPSILON

表示了1与大于1的最小浮点数的差

6.安全整数和Number.isSafeInteger()

Number.isSafeInteget(15)  //true

Number.isSafeInteger(1.3) //false

7.ES6为Math对象新增了17个方法

Math.trunc()去除小数部分，返回整数

eg:Math.trunc(5.4) //5

eg:Math.trunc(-0.9) //-0

对于无法取整的参数，等于NaN

eg:Math.trunc(NaN) //NaN

判断数值为整数或者负数或者0--Math.sign()

返回五种结果如下：若参数为非数值则先转换为数值再进行判断

Math.sign(5)  //+1表示整数

Math.sign(-5) //-1表示负数

Math.sign(0)  //+0

Math.sign(-0) //-0

Math.sign(NaN) //NaN

Math.sign("9") //+1

其他方法稍后更新。。。