ES6的小知识(前半部分)
一、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的小知识(前半部分)的更多相关文章
- C++PRIMER第二章前半部分答案
C++PRIMER第二章前半部分答案 哈哈哈,为什么是前半部分呢,后半部分还在学习中,重新系统性的学习c++,共同进步嘛,不多说,跟我一起来看看吧,第三章开始才是新手收割的时候,慢慢来~~ 2.1&a ...
- es6 一些小知识
本人最近被es6感兴趣了,学习一些,以下就是自己总结的一些小知识 1.当你在百度输入"es6"关键字,点击进入es6入门,首先你需要知道怎样学习的顺序,先看第21章Module语法 ...
- ES6的小知识(后半部分)
一.iterator和for-of循环 在js里有数组和对象,es6又新出现了set和map这样js就有了四种数据集合,这样可以组合使用他们,比如数组里拥有对象,set等,这样就需要一个统一的 接口机 ...
- 后半部分样式和JS前半部分脚本语言
样式 剩余样式: 1.<div style=display:"none"></div>:nono 是隐藏该元素内容,block是显示该元素内容 2.< ...
- 显示段落p中的前半部分内容 剩下的用三个点代替,点击更多时显示所有内容
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 3星|《腾讯产业森林:AI时代的创业密码》:后半部分是较详细的创业指南,前面泛泛介绍腾讯、AI
腾讯产业森林:AI时代的创业密码 前半部分泛泛介绍腾讯对创业者的支持,腾讯支持的创业项目的案例.AI的一些基本介绍,后半部分是比较详细的写给创业者的各阶段行动与选择的指南. 总体评价3星,有一些参考价 ...
- Unix系统小知识(转)
Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...
- Unicode和汉字编码小知识
Unicode和汉字编码小知识 将汉字进行UNICODE编码,如:“王”编码后就成了“\王”,UNICODE字符以\u开始,后面有4个数字或者字母,所有字符都是16进制的数字,每两位表示的256以内的 ...
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
随机推荐
- SparkContext初始化之SparkScheduler初始化
- VS统计项目代码行数
ctrl + shift + F 输入:b*[^:b#/]+.*$ 选项图如下
- ionic3.x版本-实现点击tab导航栏判断是否已经登陆然后加载不同页面,和退出登录功能。
html代码: <ion-tabs #myTabs> <ion-tab [root]="tab1Root" tabTitle="首页" tab ...
- 6、LwIP协议规范翻译——缓冲及内存管理
6.缓冲及内存管理 在一个通信系统中,内存缓冲管理系统必须容纳各种大小的缓冲数据,其范围从包含具有数百个字节的数据的全尺寸TCP段到只有几个字节的短ICMP回复包.此外,为了避免拷贝,应该让数据内容缓 ...
- loadView
loadView在View为nil时调用,早于ViewDidLoad,通常用于代码实现控件,收到内存警告时会再次调用.loadView默认做的事情是:如果此VIewcontroller存在一个对应的n ...
- python练习题-day11
1.编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件), 要求:登录成功一次,后续的函数都无需再输入用户名和密码 flag=False def wrapper(fun): def inn ...
- windows10系统下安装pygame
1.安装python,选择版本3.7.1 下载地址:https://www.python.org/downloads/windows/选择安装版本 2.安装pip 下载地址:https://pypi. ...
- “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...
- C# Newtonsoft.Json JsonSerializerSettings 全局序列化设置
Newtonsoft.Json.JsonSerializerSettings setting = new Newtonsoft.Json.JsonSerializerSettings(); JsonC ...
- wysiwyg 富文本编辑器(附带图片上传功能)
Fist: 需要的文件 font 文件夹下面的也是需要的哟 Then: 引入文件 <link href="bootstrap/css/bootstrap.css" rel=& ...