概念
ESMAScript是标准规范，JavaScript是它的实现
发展流程
let和const的定义
变量和常量的严格区分
1
2
3
4
5
6
7
8
9
10
11
|
// 传统定义变量和常量的方式 统一使用var
var name = "zzl";
var link = "https://www.kuangstudy.com";
var PI = Math.PI;
// ES6定义的方式 -- 变量
let name = "学相伴";
let link = "https://www.kuangstudy.com";
// 定义常量
const PI = Math.PI;
|
let和const解决了var的变量穿透问题和常量修改问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// let和const解决
// 1. var的变量穿透的问题
// 2. 常量修改的问题
for (var i = 0; i < 5; i++) {
console.log(i);
}
//这里就造成了变量穿透问题
console.log(i);
//解决，将var改成let
for (let i = 0; i < 5; i++) {
console.log(i);
}
|
1
2
3
4
5
6
7
8
9
|
// var定义常量可以修改
var PI = Math.PI;
PI = 100;
console.log(PI);
// 改用const，无法修改
const PI = Math.PI;
PI = 100;
console.log(PI);
|
模板字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 字符串会牵扯到动态部分
var person = {
name: "zzl",
address: "广东",
};
//传统方式
let info = person.name + "在" + person.address;
console.log(info);
// ES6
let message = `${person.name}在${person.address}`;
console.log(message);
|
函数默认参数
添加默认参数在未传对应值的时候，也不会出现错误
1
2
3
4
5
6
7
|
// 函数默认参数
function sum(a = 50, b = 50) {
return a + b;
}
let result = sum(100, 100);
console.log(result);
|
箭头函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 箭头函数 - 重点
var sum = function (a, b) {
return a + b;
};
// 改进1
sum = (a, b) => {
return a + b;
};
// 改进2
sum = (a, b) => a + b;
// 一个参数
var newarr = arr.map(function(obj){
return obj * 2;
});
// 改进
newarr = arr.map(obj=>obj*2);
console.log(newarr);
|
注意：逻辑代码仅有return可以省去，若不是，则不能省去，参数仅有一个时，括号才可省略
对象初始化简写
核心：是指如果一个对象的key和value的名字一样的情况下可以定义成一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var info = {
title: "广东学相伴",
link: "https://www.kuangstudy.com",
go: function () {
console.log("我上学");
},
};
// ES6简写
// 因为对象是key:value存在
// 1: 如果key和变量的名字一致，可以只定义一次即可
// 2：如果value是一个函数，可以把':function'去掉，只剩下()即可
let title = "广东学相伴";
let link = "https://www.kuangstudy.com";
let message = {
title,
link,
go() {
console.log("我上学");
},
};
|
对象解构
核心：ES6提供一些快捷获取对象属性和行为方式的方法
1
2
3
4
5
6
7
8
9
10
11
12
|
let message = {
title,
link,
go() {
console.log("我上学");
},
};
//ES6对象结构 - 其实就是快速获取属性和方法的一种形式
var { title, link } = message;
console.log(title);
console.log(link);
|
传播操作符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 对象传播操作符 ...
var info = {
name: "广东学相伴",
address: "广东",
link: "https://www.kuangstudy.com",
go: function () {
console.log("我上学");
},
};
// 解构出来
// ...person会取出除了name和address的其他属性
var { name, address, ...person } = info;
console.log(name);
console.log(address);
console.log(person)
|
数组map
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
|
// 要对arr数组每个元素*2
let arr = [1, 2, 3, 4, 5, 6, 7];
// 传统的方式
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr.push(arr[i] * 2);
}
console.log(newarr);
// map -- 自带的循环，并且会把处理的值回填对应的位置
var newarr2 = arr.map(function (ele) {
return ele * 2;
});
console.log(newarr2);
var users = [
{ age: 10, name: "小学" },
{ age: 12, name: "小信" },
{ age: 15, name: "小胖" },
];
var newusers = users.map((ele) => {
ele.age += 1;
return ele;
});
console.log(newusers);
|
数组reduce
接受一个函数和一个初始值，该函数接收两个参数，一个是上次处理的结果，另一个是下一个要处理的结果
1
2
3
4
5
|
var arr = [1, 2, 3, 4];
var result = arr.reduce(function (a, b) {
return a + b;
});
console.log("Result=", result);
|
