ES6的小知识(前半部分)

2018-08-14 10:04:38来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、let与const的使用

let:用来声明一个变量,与var类似

1.用let声明的变量,所声明的变量只在命令所在的代码块内有效

1 function hander(){
2     let a = 10;
3     console.log(a); 
4 }
5 
6 hander();          //10
7 console.log(a);    //报错未定义  

 

2.用let声明的变量在域解析的时候是不会被提升的

3.let不允许在同一作用域下声明已经存在的变量

4.let和var在for循环里的区别

//html代码
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>

//js代码
//在var的情况下点击五个button
var aBtns = document.getElementsByTagName('button');
var len = aBtns.length;
for(var i = 0; i < len; i++){
    aBtns[i].onclick = function(){
        console.log(i); //5,5,5,5,5
    }
}
//在let的情况下点击五个button
var aBtns = document.getElementsByTagName('button');
var len = aBtns.length;
for(let i = 0; i < len; i++){
    aBtns[i].onclick = function(){
        console.log(i); //0,1,2,3,4
    }
}

 

另外在for循环语句里的let是父作用域,在循环体内是子作用域,他不属于同一作用域,不会报错

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

 

 

 

const:用来声明一个常量,常量是不可以变化的

const同样有let的前三条特点,另外他还有以下特点:

1.声明的时候必须要赋值

2.声明的常量储存简单的数据类型时候不可改变其值,如果存储的是对象,那么引用不可以被改变,至于对象里面的数据如何改变,是没有关系的

 

二、变量的结构赋值

变量的结构赋值:就是一种匹配模式,只要等号俩边的模式相同,那么左值的变量就可以被赋予对应的值

1.数组的结构赋值

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

let [,,d] = [,,4];
console.log(d);      //4

let [y]  = [];
console.log(y);      //undefind

let [z = 1] = [];    //默认值
console.log(z);      //1 

  

2.对象的结构赋值

let {a,b} = {b:'1',a:'2'};
console.log(a,b);  //'2','1'

let {a:b} = {a:1};
console.log(a);    //报错未定义
console.log(b);    //1

 3.其他基本类型的结构赋值

let [a,b,c,d] = '1234';
console.log(a,b,c,d);  //1,2,3,4

//注意:null和undefined是不能进行结构赋值的

 

 

三、数据结构Set

集合:集合是有一组无序并且唯一的项组成的,特点是key和value相同,没有重复的value

Es6增加了数据结构Set,他和数组相似,但是他里面的成员都是唯一的,没有重复的值

 

首先创建一个Set集合

const s = new Set([1,2,3]);
console.log(s);  //Set(3)[1,2,3]

想查找Set的长度不是使用常规的length,他提供了一个属性size查找他的长度

而且他也提供了很多方法,例如

set.add(value) 添加一个数据,返回的是Set集合本身,

set.delete(value) 删除一个数据,返回一个布尔值,表示删除是否成功,

set.has(value) 判断一个值是否是Set 的成员,返回一个布尔值,

set.clear() 清楚Set里所有数据,没有返回值

set.keys() 返回键名的遍历器

set.values() 返回键值的遍历器

set.entries() 返回键值对的遍历器

set.foreach() 使用回调函数遍历每个成员

  

const s = new Set([1,2,3]);
s.forEach(function(value,key,set){
   console.log(value + 'cher'); // 1cher,2cher,3cher
})
console.log(s)  //Set(3){1,2,3};遍历完本身是没有改变的

 

数组去重用Set集合是特别简单的

 

 

四、数据结构Map

字典:是用来存储不重复的key的Hash结构,不同于集合Set的是字典使用的是键、值的形式存储数据的

Map的键是可以为任意类型的值

 

首先创建一个Map

const map = new Map([
   ['a',1],
   ['b',2]  
])
console.log(map);  //Map(2){'a' => 1,'b' => 2}

 

想获取Map的长度也是和Set一样使用size属性,他的方法没有Set 的add(value),多了俩个方法,其他都是一样

1.map.set(key,value) 设置键值key对应的键值value,返回的是Map结构,如果key已经在Map中存在,那就覆盖,否则就生成该键

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

  

注意:在使用Map过程中

Map.set(NaN,10).set(NaN,100);它只会添加后面一个

Map.set({},'a').set({},'b'); 它会添加俩个,因为键名是对象,地址不一样

 

 

五、Symbol数据类型

Symbol表示独一无二的值,它是JavaScript的第7种数据类型,它属于基本数据类型

数据类型:null,undefined,number,boolean,string,object,Symbol

let s1 = Symbol();
let s2 = Symbol();

console.log(s1); //Symbol()
console.log(s1 === s2);  //false

  

Symbol是不能使用new的否则会报错,因为他是基本数据类型,不是对象

Symbol接取一个字符串作为参数,表示对Symbol的描述,主要是为了在控制台显示,或者转为字符串的时候,比较容易区分

let s3 = Symbol('cher');

let s4 = Symbol('chun');

console.log(s3,s4);  //Symbol(chun)  Symbol(cher)

console.log(s3 == s4)  //false

 

Symbol的数据类型转换:

//转换为字符串
console.log(String(Symbol('chun'))) //Symbol(chun)
console.log(Symbol('cher').toString()) //Symbol(cher)

//转换为布尔值
console.log(!!Symbol()); //true

//Symbol不可以转换为数字,也不可以做任何运算

 

Symbol作为对象的属性名

let s = Symbol('cher');
const obj = {};
obj[s] = 'helloWorld';

console.log(obj);    //{Symbol(cher):"helloWorld"}
console.log(obj[s]); //helloWorld

 

作为对象的属性名,它不能被for...in循环遍历,但也不是私有的属性,可以通过Object.getOwnPropertySymbols方法获得一个对象的所有Symbol属性。

const s = {
  [Symbol()]:123,
  a:1,
  b:2
}
    
for(var i in s){
   console.log(i + '---' + s[i]);  //'a---1','b---2'
}
console.log(Object.getOwnPropertySymbols(s));            //[Symbol()]]
console.log(s[Object.getOwnPropertySymbols(s)[0]]);      //123

 

  

  

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue初识:一个前端萌新的总结

下一篇:js 编辑数组