day14 ES6
1. let语法
(1) let是什么？
let用来申明变量,它的用法相似于var，然而所申明的变量，只在let命令所在的代码块内无效,相似于C，C++,JAVA局部变量的概念。
(2) 根本用法
1）块级作用域
{
var a = 10;
let b = 123;
}
console.log(a);
console.log(b);//Uncaught ReferenceError: b is not defined下面代码在代码块之中，别离用let和var申明了两个变量。而后在代码块之外调用这两个变量，后果let申明的变量无奈被打印，var申明的变量返回了正确的值。
这表明，let申明的变量只在它所在的代码块无效。
for(var i=0; i<10; i++){
document.write(i);//0123456789
}
document.write(i)；//10for(let i=0; i<10; i++){
document.write(i);//0123456789
}
document.write(i)；// 看不到,i is not defined 下面代码中，计数器i只在for循环体内无效，在循环体外援用就会报错。
2）暂时性死区
在被let润饰的同名变量下,依据就近准则，外部变量屏蔽内部变量。
上面代码在有两个同名变量a，然而却因为{}使得作用域不同，输入后果为123,456。
let a = 456;
{
let a = 123;
console.log(a);//123
}
console.log(a);//4563) 不存在变量晋升
var命令会产生”变量晋升“景象，即变量能够在申明之前应用，值为undefined。这种景象多多少少是有些奇怪的，依照个别的逻辑，变量应该在申明语句之后才能够应用。
也就意味着被let申明的变量，必须先定义在应用。
// var 的状况
console.log(foo); // 输入undefined
var foo = 2;// let 的状况
console.log(bar); // 报错ReferenceError
let bar = 2;4) 不容许反复申明
var a = 123;
var a = 123; // 能够实现
let b = 123;
let b = 123; // Identifier 'a' has already been declared2. this
1) 当this呈现在一般办法时，this代表调用以后办法的对象自身。
2) 当this呈现在事件中时，this代表触发以后事件的HTML元素自身。
//惯例函数
function fun(){
console.log(this);//this是window对象
}
fun();
//匿名函数
setTimeout(function(){
console.log(this);//this是window对象
},2000);
//事件
document.onclick = function(){
console.log(this);//document对象
}3. bind
bind往往用来批改匿名函数的this指向;
语法：函数对象.bind(新this的指向):用新的参数扭转this的指向；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script type="text/javascript">
let oBox = document.querySelector('#box');
document.onclick = function(){
//document不是元素，不能应用document.style.display会报错
//所以必须应用bind批改this的指向，能力暗藏div块
this.style.display = 'none';
}.bind(oBox);
</script>扩大：有名函数从新指定this对象: apply call
function fun() {
console.log(this);
}
//apply call
fun.apply(oBox);
fun.call(oBox);4.JSON.parse/JSON.stringify
<script type="text/javascript">
let jsonStr = '{"name":"小猫","age": 3}';
let json = JSON.parse(jsonStr);
console.log(typeof json);//object
// let jsonObj = {"name":"小猫","age": 3};
// let json = JSON.stringify(jsonObj);
// console.log(typeof json);//String
</script>5. const 用法
const命令用来申明常量，一旦申明，其值就不能扭转。也就是只读变量。
根本用法：
1) 申明常量
const PI = 3.1415;
PI = 3;// TypeError: Assignment to constant variable.2）常量必须初始化
const foo;//报错 Missing initializer in const declaration3) 块级作用域
{
const foo = 123;
}
console.log(foo);上述代码仍然报错，和let的成果是一样的。
4) 申明不晋升(const润饰的变量必须先定义后应用)
if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}5) const润饰的变量不可反复定义
简略来说，let和const的性能根本相似，只是let用来润饰变量,const用来润饰常量
注意事项：
1.必须要初始化
const a;
a = 123;//X
2.不能改
3.倡议只读变量名大写6. for..in…和for…of…
let strArr = ["heihei","haha","laowang"];
for(let index in strArr){ //遍历下标
console.log(strArr[index]);
}
for(let item of strArr){ //遍历值
console.log(item);
}7. 字符串扩大办法
判断字符串是否蕴含在另一个字符串中：
在ES5 中应用的是 indexOf() 办法，在ES6中能够应用includes()、startsWith()、endsWith()三个办法。
- str.includes(参数): 返回布尔值，示意是否找到了参数字符串。
- str.startsWith(参数)：返回布尔值，参数是否在源字符串的头部。
- str.endsWith(参数)： 返回布尔值，参数是否在源字符串的尾部。
UTF-16 0~65535/UTF-32:
JavaScript外部，字符以UTF-16的格局贮存，每个字符固定为2个字节。对于那些须要4个字节贮存的字（Unicode码点大于0xFFFF的字符），JavaScript会认为它们是两个字符。
如：var str = “????”; 汉字”????”的编码是21c56（须要四个字节），超过了FFFF。即超过javascript自身能示意的字符的最大范畴。javascript就会把“????”当作两个字符解决，
即str.length是2。而且，以前的函数，如：charAt()函数一次只能读取该汉字的其中一半。
<script type="text/javascript">
var str = "????"; //21c56
console.log(str.length);//2
console.log(str.charAt(0));//显示的后果有误
console.log(str.charCodeAt(0).toString(16));//一次只能读两个字节
console.log(str.codePointAt(0).toString(16));//21c56
console.log("\u{21c56}");//????
</script>8. 箭头函数 （针对匿名函数）
定义： ()=> {}
有参数: (参数1，参数2)=>{ }
带有返回值: () => {返回值}
//let fun = function(){
// console.log('haha');
//}
let fun = ()=>{
console.log('haha');
}
fun();
setTimeout(()=>{console.log(123)},2000);
document.onclick = () => {
console.log("document");
}9. 构造赋值
强调格局匹配：等号右边和左边统一
益处：
1）一次性定义很多个变量
let x=10,y=20;
let [a,b,c]=[3,4,5];//相当于a=3,b=4,c=5
//JSON对象赋值
let {name,age} = {name:"老王",age:66};
console.log(name,age);//老王 66…逆运算符
let arr = [1,2,3];
let arr1 = arr;
arr1[0] = 66;
console.log(arr);//[66,2,3] let arr = [1,2,3];
let arr1 = [...arr];
arr1[0] = 66;
console.log(arr);//[1,2,3]2) 能够让一个函数一次性返回多个值
-
应用[], 返回的是数组
function fun(){ return [1,2,3]; } let arr = fun(); console.log(arr);//数组
3) 实现两个数的替换
let a=10,b=20;
[a,b] = [b,a];
console.log(a,b);//20 10回顾其余两种替换数字的办法：
办法1：通过引起一个两头变量
let a=10,b=20;
let temp;
temp = a;
a = b;
b = temp;
console.log(a,b);//20 10办法2：
a = a + b;
b = a - b; //b=a+b-b;=>b=a;
a = a - b; //10. set汇合
set汇合,相似于数组的一种容器
1）定义
let set = new Set(数组);
let set = new Set([1,1,2,2,3,4,5,5]);2) 特点
主动去重,没有下标
3) set的遍历
let set = new Set([1,1,2,2,3,4,5,5]);
for(let item of set){
console.log(item);
}4) 实现数组去重
Array.from(汇合)： 将参数容器转换成数组
let arr =[2,3,4,2,3,4,2,3,4];
let set = new Set(arr);
arr = Array.from(set);
console.log(arr);5） set汇合的办法
- add(参数) 向汇合中增加一个元素(默认增加到最初)
- delete(值) 删除汇合中某个数
- has(值) 判断汇合中是否含有某个值，返回true/false
- clear() 清空集合
发表回复