ES6的小知识（前半部分）

时间：2022-05-09 23:46:56

一、let与const的使用

let：用来声明一个变量，与var类似

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

 function hander(){

     let a = 10;

     console.log(a);

 }

 hander();          //

 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);      //

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);    //

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]]);      //

　　

　　

相关文章