设为首页 加入收藏

TOP

ES6新特性(一)
2019-09-25 18:11:38 】 浏览:113
Tags:ES6 特性

ECMAScript 6 是ECMA于2015.06发布的版本,作为一个分界点,现在我们通常把这之后的版本统称为ES6。ES6带来了许多全新的语法,同时添加了类的概念,可以预见的是,java script正朝着工程化语言迈进,我们并不知道这对于年轻的java script来说是好还是坏,因为它最开始是做为一款轻量级的脚本语言而风靡全球的。

 

一  新的原始类型和变量申明

  1,symbol

  在ES6之前,我们知道java script支持6种数据类型:object,string,boolean,number,null,undefined。现在,ES6新增了一种原始数据类型:symbol,表示独一无二的值,即每个symbol类型的值都不相同。这让我想起了另一个特殊的值:NaN,想一想,他们是不是有一点类似呢!

1 var sy = Symbol('test'); 2 var sy1 = Symbol('test'); 3 console.log(tepeof sy);//'symbol'
4 sy == sy1;//false
5 var sy2 = new Symbol('test');//error : Symbol is not a constructor

  创建symbol数据类型的值时,需要给Symbol函数传递一个字符串,并且有一点特殊的是:不能使用new关键字调用它。另外,每个symbol类型值都是独一无二的,即使传递的是相同的字符串。

  2,let和const

  ES6新增了两个申明变量的关键字:let和const。他们申明的变量仅在let和const关键字所在的代码块内起作用,即在使用let和const的那一对大括号{}内起作用,也称块级作用域(ES6之前只有函数作用域和全局作用域)。let和const申明变量不会在预编译过程中有提升行为(在全局申明也不会变成window的属性),且不能重复申明。所以要使用这类变量,只能在let和const关键字之后使用它们。

1 { 2     let a = 0; 3     console.log(a);//0
4 } 5 console.log(a);//error a is not defined

  const用来申明一个常量,申明时必须赋值,且一旦申明就不能改变。

  其实说const变量不能更改是不准确的,请看下面的例子:

1 const obj = { 2     name:'ren', 3     age:12
4 }; 5 obj = {};//error
6 obj.sex = male; 7 consol.log(obj);//{name:'ren',age:12;sex:'male'}

  const申明的如果是一个原始值,那么上面的说法是准确的,如果const申明的是一个引用值,那么更准确的说法应该是一个不能被重新赋值的变量。

  3,解构赋值 

  解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

let [a,b,c] = [1,2,3]; console.log(a,b,c);//1,2,3
************************** let [a,b,c] = [1,,3]; console.log(a,b,c);//1,undefined,3
************************** let [a,,b] = [1,2,3]; console.log(a,b);//1,3
************************** let [a,..b] = [1,2,3];//...是剩余运算符,表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);//1,[2,3]

  事实上所有可枚举(iterable)的对象都可以使用结构赋值,例如数组,字符串对象,以及ES6新增的Map和Set类型。

1 let arr = 'hello'; 2 let [a,b,c,d,e] = arr; 3 console.log(a,b,c,d,e);//'h','e','l','l','o'

  对象的解构赋值和数组类似,不过左边的变量名需要使用对象的属性名,并且用大括号{}而非中括号[]:

1 let obj = {name:'ren',age:12,sex:'male'}; 2 let {name,age,sex} = obj; 3 console.log(name,age,sex);//'ren',12,'male';

   

二  新的对象和方法

  1,Map和Set

  Map对象用于保存键值对,任何值java script支持的值都可以作为一个键或者一个值。这听起来和对象差不多啊?其实它们还是有区别的:

    a) object的键只能是字符串或ES6的symbol值,而Map可以是任何值。

    b) Map对象有一个size属性,存储了键值对的个数,而object对象没有类似属性。

1 let myMap = new Map([['name','ren'],['age',12]]); 2 console.log(myMap);//{'name'=>'ren','age'=>12}
3 myMap.set('sex','male'); 4 console.log(myMap);//{'name'=>'ren','age'=>12,'sex'=>'male'}
5 myMap.get('name');//'ren'
6 myMap.has('age');//true
7 myMap.delete('age');//true
8 myMap.has('age');//false
9 myMap.get('age');//undefined

  Map构造函数接收一个二维数组来创建一个Map对象。数组元素的第0位表示Map对象的key,第1位表示Map对象的value。

  Map对象使用set方法来新增数据,set方法接收两个参数,第一个表示key,第二个表示value。使用get方法获取数据,参数是对象的key。

  Map对象使用delete方法来删除数据,接收一个参数,表示需要被删除的key。

  Map对象使用has方法检测是否已经具有某个属性,返回boolean值。

  Set对象和Map对象类似,但它是用来存储一组唯一值的,而不是键值对。类似数组,但它的每个元素都是唯一的。

1 let mySet = new Set([1,2,3]); 2 console.log(mySet);//{1,2,3}
3 mySet.add(4); 4 console.log(mySet);//{1,2,3,4}
5 mySet.delete(1);//true
6 mySet.has(1);//false

  利用Set对象唯一性的特点,可以轻松实现数组的去重:

1 let arr = [1,1,2,3,4,4]; 2 let mySet = new Set(arr); 3 let newArr = Array.from(mySet); 4 console.log(newArr);//[1,2,3,4]

  2,对象新特性

  创建对象的字面量方式可以更加简洁。直接使用变量名作为属性,函数体作为方法,最终变量值变成属性值,函数名变成方法名。

 1 let name = 'ren';  2 let age = 12;  3 let myself = {  4  na
首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇获取Object对象的方法,Reflect.o.. 下一篇javascript实现上传图片并展示

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目