let/const
let
块级作用域：一种普遍存在于各个语言中的作用域范围；
{
var a = 10;
let b = 20;
}
console.log(a)//10
console.log(b)// b is not defined
在一个大括号中用let声明的变量在外部不可访问了，每个大括号都是独立的作用域
有了let声明我们在函数外部就无法访问到 i ，i作为下标只存在于for循环中， 所以，这个时候每个i都是独立的；我们在点击的时候可以轻易的获取当前元素的下标，而不用做很多繁琐的处理了
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var aLi = document.querySelectorAll("li");
for(let i = 0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(i);
}
console.log(i);//0 1 2 3
}
</script>
JS中var声明一个变量是存在声明提升的，这是JS中的一个缺陷所在， 但是现在的let不存在声明提升
<script>
// console.log(a);//undefined
// console.log(b);//b is not defined
// var a = 10;
// let b = 20;
let a = 20;
function foo(){
console.log(a);
let a = 10;
}
foo();//a is not defined
//报错,暂时性死区
//js预编译的时候发现有一个局部的a,所以就不会再去寻找全局的a
//但是在执行的时候他发现局部的a在后面let声明的,所以报错
</script>
ES6规定在某个区块中， 一旦用let或const声明一个变量，那么这个区块就变成块级作用域，用let 或者const声明的变量即为该区块绑定， 该变量不受任何变量影响。 在该变量使用let声明前不可以用。在语法上，我们叫这种情况为：暂时性死区 (temporal dead zone，简称 TDZ)
const常量
声明常量:
const a = 20;//常量:不能被修改的量
a = 30;
//Uncaught TypeError:Assignment to constant variable.(未捕获的类型错误:赋值给常量变量)
console.log(Math.PI);//3.141592653589793
Math.PI = 4;
console.log(Math.PI);//3.141592653589793
const arr = [2,3,4,5];
//arr = [3,4,4,6];
//不能修改数组或对象的引用,但是可以通过API取修改内部结构
arr.push(6,7);
console.log(arr);//[2, 3, 4, 5, 6, 7]
扩展运算符 ...
三个点号，功能是把数组或类数组对象展开成一系列用逗号隔开的值
var arr = [1,2,3,4,5];
console.log(arr);//Array(5)
console.log(...arr);//1 2 3 4 5 console.log 不会显示逗号，中间其实是有逗号的
function add(arr){
arr.pop();
console.log(arr);
}
var foo = function(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1, 2, 3];
//传统写法
foo(arr[0], arr[1], arr[2]);
//使用扩展运算符
foo(...arr);
//1
//2
//3
rest运算符
rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组
//主要用于不定参数，所以ES6开始可以不再使用arguments对象
var bar = function(a, ...args) {
console.log(a);
console.log(args);
}
bar(1, 2, 3, 4);
//1
//[ 2, 3, 4 ]
-
字符串扩展(了解)
1.字符串的 Unicode 表示; 规则为\u + 四位十六进制;
例如: console.log("\u0061");打印结果是 a；
这种新的字符表示方式只能表示 \u 0000 ~ \u ffff 之间的数字。 如果超出范围必须用双字节表示;
console.log("\uD842\uDFB6");打印结果是 𠮶
如果不按照规则熟悉书写 例如 console.log("\uD842\uDFB69")
这个9是多余字符； 那么则认为这段字符是 \uD842\uDFB6 + 9 所以打印结果是 𠮶9；
如果想要一次性表示超出范围的字符那么我们可以使用{}来表示；
例如:
console.log("\u20BB9"); 这个的打印结果是 拆分开来的 ₻9
console.log("\u{20BB9}"); 这个打印的结果是一个完整的字符
ES6支持多种格式的字符表示;
字符串模板扩展：
ES6中存在一种新的字符串， 这种字符串是 以 (波浪线上的那个字符 > 反引号)括起来表示的；
通常我们想要拼接一个带有标签的字符串， 是用这样的方式:
bianliang + " <strong>这是一个文字" + obj.name + "</strong> " + bianliang
但是有了ES6字符串一切都变得非常简单了;
` ${bianliang} <strong>这是一个文字${obj.name}</strong>${bianliang} `
用 ${ } 扩住变量让拼接变得非常容易;
非常简单的换行；
`In JavaScript \n is a line-feed.`
console.log(`string text line 1
string text line 2`);
当我们想要在字符串中使用 `反引号的时候我们需要进行转义；
`\`Yo\` World!` //"`Yo` World!"
模板还可以调用函数；
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
字符串的新增方法:
repeat()重复功能
'x'.repeat(3) //xxx；
重复字符串;
includes() startsWith() endsWith() ;判定字符串中是否存在某个字符串;
var s = 'Hello world!';
s.startsWith('Hello') // true 以参数开头
s.endsWith('!') // true 以参数结尾
s.includes('o') // true 包括参数;
第二种方法接受第二个参数，第二个参数表示从第几位开始;
var s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
for of
一种新的遍历方式;
for of 可以用于遍历字符串：
var s = "abc";
for(let b of s){
console.log(b) // "a" "b" "c"
}
=>箭头函数
var test = function(x){
return x+2;
}
使用箭头函数： var test = x =>x+2;
var 函数名 = 参数 => 运算规则;
如果箭头函数只有一个形参,那么可以省略小括号
var foo = str => {
console.log(str);
}
如果函数体只有一句话,那么可以省略大括号
var foo = str => console.log(str);
如果只有一句话,并且这句话就是return,可以省略return关键字
var foo = str => str+"abc";
console.log(foo("fooo"));
箭头函数会自动绑定this(箭头函数没有自己的this)
<button>按钮</button>
document.querySelector("button").onclick = function(){
setTimeout(() => {
console.log(this);
},1000);
}
缺陷
第一： 箭头函数是不能new的，它的设计初衷就跟构造函数不太一样
第二： 箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=>({id:3, val=20})
解构赋值
/* var arr = [2,43,5, 30];
//var a = arr[0];
var [a,b,c,d=0] = arr;
console.log(a,b,c,d); */1 2 3 4
var obj = {name:"lisi", age:80, gender: "female"};
var {age, name, gender="male"} = obj;
console.log(age, name, gender);
var json = [
{name:"lisi", age:80, gender: "female"},
{name:"liwu", age:70, gender: "male"},
{name:"liliu", age:60, gender: "female"}
]
var [{age},{name},{gender}] = json;
//var {name} = b;
console.log(name);
Symbol类型 第六种基本数据类型Symbol
Symbol函数会生成一个唯一的值可以理解为Symbol类型跟字符串是接近的 但每次生成唯一的值，也就是每次都不相等，至于它等于多少，并不重要 这对于一些字典变量，比较有用
var s1 = Symbol();
var s2 = Symbol();
var s3 = Symbol("abc");
var s4 = Symbol("abc");
s1不等于s2
s3不等于s4
案例：点击div变色
var obj ={
red: Symbol(),
blue: Symbol(),
green: Symbol(),
yellow: Symbol()
}
var color = obj.red;
//适用于只需要关心状态(属于哪个状态)
//但是不用知道内部结构(不关心值为多少)
document.querySelector("div").onclick = function(){
if(color === obj.red){
this.style.background = "blue";
color = obj.blue;
}else if(color === obj.blue){
this.style.background = "green";
color = obj.green;
}else if(color === obj.green){
this.style.background = "yellow";
color = obj.yellow;
}else if(color === obj.yellow){
this.style.background = "red";
color = obj.red;
}
}
Set和Map结构
set
Set集合是默认去重复的，但前提是两个添加的元素严格相等 所以5和"5"不相等，两个new出来的字符串不相等
Set集合，本质上就是对数组的一种包装 例如：
let imgs = new Set();
imgs.add(1）;
imgs.add(1）;
imgs.add(5）;
imgs.add("5"）;
imgs.add(new String("abc")）;
imgs.add(new String("abc")）;
// 打印的结果： 1 5 '5' 'abc' 'abc'
下面展示了一种极为精巧的数组去重的方法
var newarr = [...new Set(array)];
set集合遍历:
- 根据KEY遍历
var imgs = new Set(['a','b','c']);
//根据KEY遍历
for(let item of imgs.keys()){
console.log(item);
} //a //b //c
- 根据VALUE遍历
//根据VALUE遍历
for(let item of imgs.values()){
console.log(item);
} //a //b //c
- 根据KEY-VALUE遍历
for(let item of imgs.entries()){
console.log(item);
} //['a','a'] //['b','b'] //['c','c']
- 普通for...of循环
//普通for...of循环(for...of跟for-in的区别很明显，就是直接取值，而不再取下标了)
for(let item of imgs){
console.log(item);
} //a //b //c
map
Map集合,即映射
let map = new Map();
map.set("S230", "张三");
map.set("S231", "李四");
map.set("S232", "王五");
map.get("s232"); // 获取某一个元素 王五
for(let [key,value] of map)
{console.log(key,value);}
//循环遍历，配合解构赋值
class的写法 语法糖(了解)
Class保留字终于成了关键字
以前编写一个构造函数（类）
function Pad(color){
this.color = color;
}
现在的写法跟Java更接近了
class Iphone{
constructor(color, size){
this.color = color;
this.size = size;
}
playgame(){
//.............
}
toString(){
return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;
}
}
我们定义了一个类，名字叫Iphone 通过类生成一个实例： var iphone = new Iphone("白色", 5);
其中constructor被称之为构造方法，在我们new 一个对象的时候，自动被调用
不过本质上，JS依然使用了原型来实现，也就是说，这不过是一个新的写法而已 跟以前的构造函数没有区别。
要注意的是，使用了class来定义类，必须先定义再使用
