ES6从入门到放弃

发表于   |   分类于 ，   |  

数组的解构赋值。

新的赋值方式

还记得以前的时候,对于一些元素的赋值.一般常用方法就是：

1
2
3
var a="zone",
    b="acorn",
    c="赵日天";

而现在 我们在Es6中可以使用一种新的赋值方式：

1
2
3
4
var [a,b,c]=[1,2,3];
console.log(a)//1;
console.log(b)//2;
console.log(c)//3;

感觉写法还是听酷炫的。

新增的默认值

1
2
3
4
var [a,b="12",c]=[1,,2]
console.log(a);
console.log(b);
console.log(c);

不过有点需要注意的是：
只有当这个元素对应的值严格相等(即为===)undefined的时候，默认值才会生效例如下面这个例子：

1
2
3
4
let [a,b,c="zone"]=[1,undefined,null];
console.log(a);//1
console.log(b);//undefined
console.log(c)//null

数值的扩展

在ES6中,提供了一种二进制和八机制数值的新的写法，分别是用前缀0b(Binary)和0o(octal);
例如

1
2
0b1110===14;
0o110===72;

0_1468811198915_upload-e2631f36-c526-4ac6-9153-52facc3369c5

Math对象的扩展

在ES5中，我们几个常用的Math的方法主要是：

1
2
3
随机数: Math.random();
向上取值：Math.floor();
向上取值：Math.ceil();

在ES6中,我们又新增了几个Math的方法:

Math.trunc()

Math.trunc()用于去除一个数的小数部分,返回整数部分。(感觉与Math.floor()作用类似)

Math.sign()

Math.sign()用来判断一个数到底是正数、负数、还是零.例如：

1
2
3
4
5
6
Math.sign(2);//1
Math.sign(-0);//-0
Math.sign(-2);//-1
Math.sign(0);//0
Math.sign("2");//1
Math.sign("2a1");//NAN

这样 对于Math.sign()的几个返回值大致就是

  • 参数为正数,返回1;
  • 参数为负数,返回-1;
  • 参数为0,返回-0;
  • 参数为-0返回-0;
  • 参数为其他值时，会先转换成number类型，然后再作判断。

Math.cbrt()

Math.cbrt() 用于计算一个数的平方根。

函数的拓展

函数新增的默认值

在ES5中,其实是不能直接为函数的参数指定默认值的,要想设置默认值，一般是采取这种变通的方式,例如：

1
2
3
4
5
6
function zone(name){
    this.name=name||"赵日天";
    console.log(this.name);
}
zone("acorn"); //acorn
zone();        //赵日天

在ES6中,可以为参数设置默认值,直接写在参数定义的后面。例如：

1
2
3
4
5
6
function zone(name="赵日天"){
    this.name=name;
    console.log(this.name);
}
zone();//赵日天
zone("acorn");//acorn

函数的Length属性

指定了默认属性以后,函数的length属性,将返回没有指定默认值的参数个数,也就是说指定了默认值以后,length属性将失真。
例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var a =function (name,a,b,c){
    this.name=name||"赵日天";
    console.log(this.name);
}
a.length;//4 

var b=function (name="赵日天",ba,sad,as,d,asd,a,ada){
    this.name=name;
    console.log(this.name)
}
b.length;//0

var c=function(a,s,sd,sa,name="acorn"){
  this.name=name;
  console.log(this.name)
}
c.length;//4

通过上面的例子。我们可以发现.对于对于有指定了默认值的函数参列表,length在取值的时候，会触碰到就停止。

新增的数据类型————Symbol

在ES5中,一般常见的数据类型也就以下6种：

  • Undefined
  • Null
  • Boolean
  • String
  • Number
  • Object

在ES6中，新增加了一种数据类型————symbol
例如

1
2
var a=Symbol();
    typeof a//"symbol"

##set与map
set方法就是ES6提供的新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的。
怎么说呢。比如我们要清除一个数组中的多余项，在ES5中我们需要这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 var a=[1,2,3,1,2,3,2,12,3,566,7,89,0,"1","2",2,3];

function play(arr){
    var now=[];
    for(var i=0;i< arr.length;i++){
        if(now.indexOf(arr[i])===-1){
            now[now.length]= arr[i];
        }else{
            continue;
        }
    }
    return now;
}
play(a);//[1, 2, 3, 12, 566, 7, 89, 0, "1", "2"]

现在 有了ES6 又有了一种更加简便的方法

1
2
3
4
5
 var a=[1,2,3,1,2,3,2,12,3,566,7,89,0,"1","2",2,3];
function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe(a);//[1, 2, 3, 12, 566, 7, 89, 0, "1", "2"]

###set的属性和方法
set结构的实例有以下属性：

  • Set.prototype.constructor:构造函数,默认即时set函数;
  • Set.prototype.size:返回Set实例成员总数;

Set实例的方法分为操作方法(用于操作数据)与遍历方法(用于遍历成员)。

操作方法：

  • add(value):添加某个值,返回Set结构本身.
  • delete(value):删除某个值,返回以一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值，表示改值是否是Set的成员。
  • clear():清楚所有成员,没有返回值。

Map的基本用法

javascript对象本质上就是,键值对的集合,但是在ES5中，对象的键名只能由字符串来担任。例如：

1
2
3
4
5
6
var zone=document.getelementById("zone");
var a={
    zone:1,
    name:"asdasd"
}
这里的zone代表的是 一个对象，但是在 a这个对象中，也会被转换成字符串。

这里是因为。在ES5中。一个对象只接受 字符串作为其键名,上面的例子中zone会制动转换为"zone";
在ES6中引入了Map这种数据结构,类似于对象,也是键值对的集合。但是这里面键名不仅限于字符串，各种类型的值都可以当做键名,简直碉堡了。例如下面这个例子

1
2
3
4
5
6
7
8
9
var a={zone:"赵日天"};
var b={
     a:"a",
     b:"b"
}
var c= new Map();
c.set(a,"hello");
c.set("acorn","三大赵日天")
c//Map {Object {zone: "赵日天"} => "hello", "acorn" => "三大赵日天"}

Map实例的属性和操作方法

  • size属性
    size属性会返回Map结构的成员总数(类似于length)

    1
    2
    3
    4
    let zone=new Map();
    zone.set("zone",true);
    zone.set("a","日天");
    zone.size//2

  • set(key,value)属性
    set顾名思义,就是设置key所对应的键值,然后返回整个Map结构,如果key值已经存在,后者会覆盖前者

    1
    2
    3
    4
    5
    let zone=new Map();
    zone.set("zone",true);
    zone.get("zone");//true;
    zone.set("zone",false);
    zone.get("zone"); //false;

  • get(key)
    get方法读取key对应的键值,如果找不到key,返回undefined

  • has(key)
    has方法返回一个布尔值,表示某个值是否出现在Map数据结构中。
  • delete(key)
    delete方法删除某个值,返回一个布尔值,表示删除是否成功。
  • clear()
    clear()方法清除所有成员,并没有返回值.