ES6新特新

let

let等价于var，都是用来定义变量的

1
2
let a = 123;
console.log(a);

1，所有的变量必须先定义后使用

2，let声明的变量不能重复定义

3，块级作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  var a = 123;
  let a = 123;
}
console.log(a);
let oLis = document.querySelectorAll("li");
for (var i = 0; i < oLis.length; i++) {
   oLis[i].index = i;
   oLis[i].onclick = function() {
       console.log(this.index);
      }
}
for (let i = 0; i < oLis.length; i++) {
   oLis[i].onclick = function() {
   console.log(i);
     }
}

4,暂时性死区：在代码块内，使用let和const命令声明变量之前，该变量都是不可用的，语法上被称为暂时性死区

1
2
3
4
let a = 123;{
let a =456;
console.log(a);
}

const

const修饰的变量称为只读变量，只能读不能写，一旦声明其值就不能改变

解决的问题：有名字的常量

1，只能读不能写(常量)

1
2
3
const a = 123;
a = 666;
console.log(a);

2，必须初始化

1
2
3
const a;  //错
a = 123;
console.log(a);

3，必须先定义后使用

4，不能重复定义

5，块级作用域

在js中有两种作用域：全局作用域和函数作用域

全局作用域：在全局作用域中定义的变量可以在任意位置访问，其随着页面关闭而销毁

函数作用域：在函数内定义的变量与函数，只能在函数内被访问，其随着函数的运行结束而销毁

而块级作用域可以将变量定义在一对大括号中，被括起来的变量集，就是块级作用域，例如函数，判断，循环等，升值在单独的大括号中依然有效

6，暂时性死区：在代码块内，使用let和const命令声明变量之前，该变量都是不可用的，语法上被称为暂时性死区。

如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。假如我们尝试在声明前去使用这类变量，就会报错。这一段会报错的危险区域，就叫做暂时性死区。

1
2
3
4
5
const arr = [1,2,3,4];
arr[0] = 666;
console.log(arr);

arr = [5,5];

for..of

遍历内容（遍历获取的是对象的键值）

1
2
3
4
5
6
7
8
9
10
11
12
let arr = [6,5,7,4,8,9];

for(let item of arr) {
console.log(item);
}
let stu = {
"name": "laowang";
"age": "18";
}
for (let item of stu) { //错
console.log(item);
}

区别：for … in会遍历对象的整个原型链,性能非常差不推荐使用,而for … of只遍历当前对象不会遍历原型链；对于数组的遍历,for … in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for … of只返回数组的下标对应的属性值

字符串扩展的方法：

str.includes(参数)：返回布尔值，表示只找到了参数字符串

str.startWith(参数)：返回布尔值，参数是否在源字符串的头部

str.endsWith(参数)：返回布尔值，参数是否在源字符串的尾部

箭头函数：

匿名函数的另一种写法

作用：代码变得简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let fun1 = function() { //普通函数
console.log("heihei");
}
let fun2 = () => { // 箭头函数
console.log("xixi");
}
fun2();

document.onclick = () => {
console.log("yingyingying");
}

let count = 0;
setInterval(() => {
console.log(++count);
},1000);

箭头函数的特点

1，如果参数只有一个，可以省略小括号

1
2
3
4
let f = a => {
console.log(a);
}
f(123);

2，如果函数只有一行代码，可以省略花括号

1
2
let f = a => console.log(a+1);
f(123);

解构赋值：

解析结构进行赋值

等号左右两边必须类型一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let x = 1;
let y = 2;
let z = 3;

//a，数组
let [x,y,z] = [1,2,3];
console.log(x,y,z);

//b，json
let {
name,
age
} = {
"name": "laowang",
"age": 18
};
console.log(name, age);

let stu = {
"name": "laowang";
"age": 8
};

//去掉json的前缀
let {
name,
age
} = stu;
console.log(name,age);

set集合：

没有下标，不能存储重复元素

let set = new Set([1,2,1,2,3,4,5,5,6,6,7,7]);

增加

set.add(8);

set.add(8);

delete(值) 删除集合中某个数

set.delete(7);

has(值) 判断集合中是否由某个值

console.log(set.has(12));

clear() 清空集合

set.clear();

1
2
3
4
5
6
console.log(set.size);

for (let item of set) {
console.log(item);
}
conlsole.log(set);

利用set集合实现数组去重

1
2
3
4
5
6
//数组去重
let arr = [1, 2, 1, 2, 3, 4, 5, 5, 6, 6, 7, 7];
let set = new Set(arr);
//将set转换为数组
arr = Array.from(set);
console.log(arr);

map：映射

key <==> value (键值对)

身份证 其他数据

特点：key唯一，通过key操作数据

let map = new Map();

set(key,value)向集合中添加一个元素：key已存在，则为改，不存在则为增

get(键) 根据键去取值

delete(键) 判断集合中某个数

has(键) 判断集合中是否含有某个值

clear() 清空集合

ES6模板字符串

字符串拼接是开发时一个必不可少的环节

传统字符串拼接，主要有以下缺点：

传统的字符串拼接不能正常换行

传统的字符串拼接不能友好的插入变量

传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。

es6的模板字符串解决了以上问题

1
2
3
4
for (let i = 0; i < 10; i++) {
    //变量需要通过${变量名}
    oUl.innerHTML += `<li>${i}</li>`;
}

Class类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Student {
    //constructor:构造函数
    constructor(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
}
     study() {
         console.log(this.name + ":study");
        }
    }
let s = new Student("小杨", 18, 'M');
console.log(s.name, s.age, s.gender);
s.study();
let s1 = new Student("小杨杨", 18, 'M');
console.log(s1.name, s1.age, s1.gender);
s1.study();