章节目录：
一、ES6简介
二、ES6新特性
2.1 变量声明
- 关键字var与let
<script>
/*
1. var声明变量可以跨作用域访问，let只能在作用域内进行访问。
*/
{
var varDefined = 1;
let letDefined = 2;
}
// 打印结果。
console.log(" var defined= " + varDefined);
// var defined= 1
console.log(" let defined= " + letDefined);
// Uncaught ReferenceError: letDefined is not defined
</script>
<script>
/*
2. 相同变量名，var可以多次声明，let只能声明一次。
*/
var a = 1;
var a = 2;
console.log(a);
// 2
let b = 3;
let b = 4;
console.log(b);
// Uncaught SyntaxError: Identifier 'b' has already been declared
</script>
- 关键字const
<script>
/*
1. const声明的变量是只读常量。
2. 声明时必须初始化且声明之后不允许改变。
*/
const c = 1;
c = 3;
console.log(c);
// Uncaught TypeError: Assignment to constant variable.
</script>
2.2 解构表达式
<script>
/*
1. 数组解构。
*/
let arry = [1, 2, 3];
const [x, y, z] = arry;
console.log(x, y, z);
// 1 2 3
</script>
<script>
/*
1. 对象解构。
*/
const User = {
name: "zhangSan",
age: 18
};
const { name, age } = User;
console.log(name);
// zhangSan
console.log(age);
// 18
</script>
2.3 字符串
<script>
/*
1. 字符串操作。
2. startsWith()：表示要参数子串是否在字符串头部。
3. endsWith()：表示要参数子串是否在字符串尾部。
4. includes()：表示参数子串是否被包含在字符串中。
*/
let str = "hello world.js";
console.log(str.startsWith("hello"));
// true
console.log(str.endsWith(".js"));
// true
console.log(str.includes("world"));
// true
console.log(str.includes(".vue"));
// false
// 5.1 模板字符串：用反引号 ` str ` 表示，可以定义多行字符串。
let str1 = `
<div>
<span></span>
</div>
`;
console.log(str1);
/*
<div>
<span></span>
</div>
*/
// 5.2 模板字符串：可以在字符串中加入变量和表达式。
let userName = "zhangSan";
let userAge = 18;
let info = `我叫${userName},今年${userAge}岁了。`;
console.log(info);
// 我叫zhangSan,今年18岁了。
// 5.3. 模板字符串：可以在字符串中调用函数。
function getWorldStr() {
return "world";
}
let str2 = `hello ${getWorldStr()}`;
console.log(str2);
// hello world
</script>
2.4 函数
<script>
/*
1. 函数技巧。
*/
// 2. 设置参数默认值。
function add(num1, num2 = 1) {
return num1 + num2;
}
// 若没传num2，则使用默认值1。
console.log(add(1));
// 2
// 3. 不定参数：表示不确定的参数个数，由 ... 参数标识符 组成。
// 注意：具名参数只能放在参数列表最后，且只能有一个不定参数。
function getLength(...param) {
console.log(param.length);
}
getLength(1);
// 1
getLength(1, 2);
// 2
getLength(1, 2, 3);
// 3
// 4.1 箭头函数：在单个参数下的使用。
var print = str => console.log(str);
print("hi");
// hi
// 4.2 箭头函数：在多个参数下的使用。
var print1 = (str1, str2) => console.log(str1 + " " + str2);
print1("hello", "world");
// hello world
// 4.3 箭头函数：当需要多行代码时可以用 { } 括起来。
var print2 = (str1, str2) => {
str3 = str1 + " " + str2;
console.log(str3);
}
print2("hello", "js");
// hello js
// 4.4 练习：使用箭头函数进行对象解构，获取指定变量值。
var Dog = {
dogName: "jack",
dogAge: 1
};
var getDogName = ({ dogName }) => { return "dogName = " + dogName };
console.log(getDogName(Dog));
// dogName = jack
</script>
2.5 对象方法
<script>
/*
1. 使用Object的方法，对对象属性进行元素枚举。
*/
var Person = {
name: "liSi",
age: 20
};
console.log(Object.keys(Person));
// [ "name","age" ]
console.log(Object.values(Person));
// [ "liSi",20 ]
console.log(Object.entries(Person));
// [ 'name', 'liSi' ] [ 'age', 20 ]
/*
2. 定义并调用对象的函数属性。
*/
var Person = {
name: "jan",
sing(music) {
console.log(this.name + " 在唱 " + music);
}
}
Person.sing("love story");
// jan 在唱 love story
</script>
2.6 数组方法
<script>
/*
1.map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
*/
let arry = [1, 2, 3, 4];
console.log(arry);
// 1, 2, 3, 4
arry = arry.map(
(items) => {
return items * 3;
}
);
console.log(arry);
// 3, 6, 9, 12
/*
2.reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce的数组。
*/
let arry1 = [1, 2, 3, 4];
arry1 = arry1.reduce(
(num1, num2) => {
console.log(" 上一次回调的返回值是: " + num1);
console.log(" 当前元素值是: " + num2);
return num1 + num2;
}
);
// 上一次回调的返回值是: 1
// 当前元素值是: 2
// 上一次回调的返回值是: 3
// 当前元素值是: 3
// 上一次回调的返回值是: 6
// 当前元素值是: 4
console.log(" 执行完结果为: " + arry1);
// 执行完结果为: 10
</script>