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

  

  

ES6的小知识(前半部分)的更多相关文章

  1. C++PRIMER第二章前半部分答案

    C++PRIMER第二章前半部分答案 哈哈哈,为什么是前半部分呢,后半部分还在学习中,重新系统性的学习c++,共同进步嘛,不多说,跟我一起来看看吧,第三章开始才是新手收割的时候,慢慢来~~ 2.1&a ...

  2. es6 一些小知识

    本人最近被es6感兴趣了,学习一些,以下就是自己总结的一些小知识 1.当你在百度输入"es6"关键字,点击进入es6入门,首先你需要知道怎样学习的顺序,先看第21章Module语法 ...

  3. ES6的小知识(后半部分)

    一.iterator和for-of循环 在js里有数组和对象,es6又新出现了set和map这样js就有了四种数据集合,这样可以组合使用他们,比如数组里拥有对象,set等,这样就需要一个统一的 接口机 ...

  4. 后半部分样式和JS前半部分脚本语言

    样式 剩余样式: 1.<div style=display:"none"></div>:nono 是隐藏该元素内容,block是显示该元素内容 2.< ...

  5. 显示段落p中的前半部分内容 剩下的用三个点代替,点击更多时显示所有内容

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 3星|《腾讯产业森林:AI时代的创业密码》:后半部分是较详细的创业指南,前面泛泛介绍腾讯、AI

    腾讯产业森林:AI时代的创业密码 前半部分泛泛介绍腾讯对创业者的支持,腾讯支持的创业项目的案例.AI的一些基本介绍,后半部分是比较详细的写给创业者的各阶段行动与选择的指南. 总体评价3星,有一些参考价 ...

  7. Unix系统小知识(转)

    Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...

  8. Unicode和汉字编码小知识

    Unicode和汉字编码小知识 将汉字进行UNICODE编码,如:“王”编码后就成了“\王”,UNICODE字符以\u开始,后面有4个数字或者字母,所有字符都是16进制的数字,每两位表示的256以内的 ...

  9. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

随机推荐

  1. Android无法删除项目+导入项目报错

    Android无法删除项目+导入项目报错 Android无法删除项目:关闭eclipse或关闭电脑,然后重启,继续删除就可以了 导入项目报错:右键–>配置–>中就可以看到了,更改一下就可以 ...

  2. Spring事物管理--相关要点及配置事物管理器

    事务的四大特征 1.原子性:一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做要么全不做 2.一致性:数据不会因为事务的执行而遭到破坏 3.隔离性:一个事物的执行,不受其他事务的干扰,即并 ...

  3. python练习题-day13

    1.获取移动平均值 def wrapper(fun): def inner(*args,**kwargs): ret=fun(*args,**kwargs) ret.__next__() return ...

  4. 漫画HDFS工作原理(转)

    转自:http://blog.csdn.net/netcoder/article/details/7442779?locationNum=2 对漫画内容更好的解读,可参考: http://www.we ...

  5. 51.webpack vue-cli创建项目

    在上两篇博文中已经安装了node.js.webpack.vue-cli,安装的版本为: 今天通过这篇博文创建项目. 1.选择路径 首先通过命令行进入想要创建项目的路径,例如: 通过e:命令进入盘幅,再 ...

  6. Kindle:自动追更之云上之旅

    2017年5月27: 原来的程序是批处理+Python脚本+Calibre2的方式,通过设定定时任务的方式,每天自动发动到自己的邮箱中.缺点是要一直开着电脑,又不敢放到服务器上~~ 鉴于最近公司查不关 ...

  7. mysql 试题总结

    一.MySQL的复制原理以及流程 1.复制基本原理流程 1.主:binlog线程——记录下所有改变了数据库数据的语句,放进master上的binlog中: 2.从:io线程——在使用start sla ...

  8. Ajax跨域请求COOKIE无法带上的解决办法

    原生ajax请求方式: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx.com/demo/b/ ...

  9. hdu4916 Count on the path

    调了好久.... •把树视为以1为根的有向树,然后将1删除 •原树变为一个森林,并且任一棵树的根节点均为原树中1的子节点 •只需要考虑最小编号前3小的三棵树 •记f[x][y]为去掉x和y两棵树后的最 ...

  10. Tomcat日志文件catalina.out文件过大问题

    随着项目的运行,Tomcat的日志文件catalina.out的大小日益增大,现在都有好几个GB了.如果我们不做任何处理,catalina.out的文件大小将会持续增加,直到把我们的系统硬盘空间给撑爆 ...