1. let
let关键字就是用来声明变量的使用let关键字声明的变量具有块级作用域在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的防止循环变量变成全局变量使用let关键字声明的变量没有变量提升使用let关键字声明的变量具有暂时性死区特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用let关键字声明变量</title>
</head>
<body>
<script type="text/javascript">
/*
let关键字就是用来声明变量的
使用let关键字声明的变量具有块级作用域
在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
防止循环变量变成全局变量
使用let关键字声明的变量没有变量提升
使用let关键字声明的变量具有暂时性死区特性
*/
/* --------let关键字就是用来声明变量的-------- */
// let a = 10;
// console.log(a);
/* --------使用let关键字声明的变量具有块级作用域-------- */
// if (true) {
// let b = 20;
// console.log(b)
// if (true) {
// let c = 30;
// }
// console.log(c);
// }
// console.log(b)
/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */
// if (true) {
// let num = 100;
// var abc = 200;
// }
// console.log(abc);
// console.log(num)
/* -------防止循环变量变成全局变量--------- */
// for (let i = 0; i < 2; i++) {}
// console.log(i);
/*-----使用let关键字声明的变量没有变量提升------*/
// console.log(a);
// let a = 100;
/* -------使用let关键字声明的变量具有暂时性死区特性------- */
var num = 10
if (true) {
console.log(num);
let num = 20;
}
</script>
</body>
</html>
2. const
作用：声明变量，常量就是值（内存地址）不能变化的量。
具有块级作用域
if (true) {
const a = 10;
}
console.log(a) // a is not defined
声明变量时必须赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用const关键字声明常量</title>
</head>
<body>
<script type="text/javascript">
// 使用const关键字声明的常量具有块级作用域
// if (true) {
// const a = 10;
// if (true) {
// const a = 20;
// console.log(a); // 20
// }
// console.log(a); // 10
// }
// console.log(a); a is not defined
// 使用const关键字声明的常量必须赋初始值
// const PI = 3.14;
// 常量声明后值不可更改
const PI = 3.14;
// PI = 100;
const ary = [100, 200];
ary[0] = 123;
ary = [1, 2] // 报错
console.log(ary);
</script>
</body>
</html>
3. 解构赋值
ES6中允许从数组或对象中提取值，按照对应位置，对变量赋值。对象也可以实现解构。
3.1 数组解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组解构</title>
</head>
<body>
<script type="text/javascript">
// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
let ary = [1,2,3];
let [a, b, c, d, e] = ary;
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined
console.log(e) // undefined
</script>
</body>
</html>
3.2 对象解构
对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象解构</title>
</head>
<body>
<script type="text/javascript">
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {name: 'lisi', age: 30, sex: '男'};
// let { name, age, sex } = person;
// console.log(name)
// console.log(age)
// console.log(sex)
let {name: myName} = person;
console.log(myName)
</script>
</body>
</html>
4. 箭头函数
4.1 箭头函数的用法
ES6 中新增的定义函数的方式
箭头函数是用来简化函数定义语法的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数</title>
</head>
<body>
<script type="text/javascript">
// 箭头函数是用来简化函数定义语法的
// const fn = () => {
// console.log(123)
// }
// fn();
// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
// const sum = (n1, n2) => n1 + n2;
// const result = sum(10, 20);
// console.log(result)
// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
// const fn = v => {
// alert(v);
// }
// fn(20)
// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
function fn () {
console.log(this);
return () => {
console.log(this)
}
}
const obj = {name: 'zhangsan'};
const resFn = fn.call(obj);
resFn();
</script>
</body>
</html>
4.2 箭头函数面试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数面试题</title>
</head>
<body>
<script type="text/javascript">
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say(); // 100
</script>
</body>
</html>
注意：obj 对象是没有局部作用域的，所以 say 这个方法实际上是定义在全局作用域的，所以this是指向 window的，故 alert 弹出 100
5. 剩余参数
剩余参数允许我们将一个不定数量的参数表示为一个数组
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item);
return total;
};
console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60
let ary1 = ['张三', '李四', '王五'];
let [s1, ...s2] = ary1;
console.log(s1) // '张三'
console.log(s2) // [ '李四', '王五']
6. ES6的内置对象扩展
6.1 Array的扩展方法
6.1.1扩展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
注意：console.log 会将逗号分隔符忽略
扩展运算符可以应用于合并数组
// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
let ary = ["a", "b", "c"];
...ary // "a", "b", "c"
console.log(...ary)
console.log("a", "b", "c")
// 扩展运算符应用于数组合并
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// ...ary1 // 1, 2, 3
// ...ary1 // 4, 5, 6
let ary3 = [...ary1, ...ary2];
console.log(ary3)
// 合并数组的第二种方法
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
ary1.push(...ary2);
console.log(ary1)
- 扩展运算法将类数组或可遍历对象转换为真正的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展运算符</title>
</head>
<body>
<div>1</div>
<div>4</div>
<div>3</div>
<div>6</div>
<div>2</div>
<div>5</div>
<script type="text/javascript">
// 利用扩展运算符将伪数组转换为真正的数组
var oDivs = document.getElementsByTagName('div');
console.log(oDivs)
var ary = [...oDivs];
ary.push('a');
console.log(ary);
</script>
</body>
</html>
输出结果：
6.1.2 构造函数方法 Array.from()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array.from方法</title>
</head>
<body>
<script type="text/javascript">
// var arrayLike = {
// "0": "张三",
// "1": "李四",
// "2": "王五",
// "length": 3
// }
// var ary = Array.from(arrayLike);
// console.log(ary)
var arrayLike = {
"0": "1",
"1": "2",
"length": 2
}
var ary = Array.from(arrayLike, item => item * 2)
console.log(ary)
</script>
</body>
</html>
6.1.3 实例方法 find（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>find方法</title>
</head>
<body>
<script type="text/javascript">
var ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find(item => item.id == 3);
console.log(target)
</script>
</body>
</html>
6.1.4 实例方法 findindex（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>findIndex方法</title>
</head>
<body>
<script type="text/javascript">
let ary = [10, 20, 50];
let index = ary.findIndex(item => item > 15);
console.log(index)
</script>
</body>
</html>
6.1.5 实例方法 includes（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>includes方法</title>
</head>
<body>
<script type="text/javascript">
let ary = ["a", "b", "c"];
let result = ary.includes('a')
console.log(result) // true
result = ary.includes('e')
console.log(result) // false
</script>
</body>
</html>
6.2 String 的扩展方法
6.2.1 模板字符串
ES6 中新增的创建字符串的方式，使用反引号定义。
let name = `zhangsan`
模板字符串可以解析变量
模板字符串可以换行
在模板字符串中可以调用函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板字符串</title>
</head>
<body>
<script type="text/javascript">
// let name = `张三`;
// let sayHello = `Hello, 我的名字叫${name}`;
// console.log(sayHello);
// let result = {
// name: "zhangsan",
// age: 20
// };
// let html = `
// <div>
// <span>${result.name}</span>
// <span>${result.age}</span>
// </div>
// `;
// console.log(html);
const fn = () => {
return '我是fn函数'
}
let html = `我是模板字符串 ${fn()}`;
console.log(html)
</script>
</body>
</html>
6.2.2 实例方法： startWith（）和 endWith（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>startsWith方法和endsWith方法</title>
</head>
<body>
<script type="text/javascript">
let str = 'Hello ECMAScript 2015';
let r1 = str.startsWith('Hello');
console.log(r1); // true
let r2 = str.endsWith('2016');
console.log(r2); // false
</script>
</body>
</html>
6.2.3 实例方法： repeat（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>repeat方法</title>
</head>
<body>
<script type="text/javascript">
console.log("y".repeat(5)); // yyyyy
</script>
</body>
</html>
7. Set 数据结构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值是唯一的，没有重复的值。
7.1 Set实例方法
// const s1 = new Set();
// console.log(s1.size) // 0
// const s2 = new Set(["a", "b"]); // 传递数组到Set里面
// console.log(s2.size) // 2
// const s3 = new Set(["a","a","b","b"]); // 利用Set进行数组去重
// console.log(s3.size) // 2
// const ary = [...s3];
// console.log(ary) // ['a', 'b']
// const s4 = new Set();
// 向set结构中添加值 使用add方法
// s4.add('a').add('b');
// console.log(s4.size) // 2
// 从set结构中删除值 用到的方法是delete
// const r1 = s4.delete('c');
// console.log(s4.size) // 2
// console.log(r1); // false
// 判断某一个值是否是set数据结构中的成员 使用has
// const r2 = s4.has('d');
// console.log(r2) // false
// 清空set数据结构中的值 使用clear方法
// s4.clear();
// console.log(s4.size); //0
7.2 遍历
// 遍历set数据结构 从中取值
const s5 = new Set(['a', 'b', 'c']);
s5.forEach(value => {
console.log(value)
})
