ES6---学习笔记（一）
ES6
- 1、let 关键字
- 2、const 关键字
- 3、变量和对象的解构赋值
- 4、模板字符串
- 5、简化对象和函数写法
- 6、箭头函数
-
- 6.1、问题1
- 6.2、问题2
- 7、ES6中函数参数的默认值
- 8、rest参数
- 9、扩展运算符
- 10、Symbol
-
- 10.1、基本使用
- 10.2、Symbol创建对象属性
- 11、迭代器
-
- 11.1、概述
- 11.2、特性
- 11.3、工作原理
- 11.4、迭代器自定义遍历对象
1、let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
1. 不允许重复声明；
2. 块儿级作用域（局部变量）；
3. 不存在变量提升（let不存在，var存在）；
意思就是let定义的变量声明和变量使用遵守严格的顺序：先声明后使用；
4. 不影响作用域链；
什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用；
// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值
2、const 关键字
const 关键字用来声明常量，const 声明有以下特点：
1. 声明必须赋初始值；
2. 标识符一般为大写（习惯）；
3. 不允许重复声明；
4. 值不允许修改；
对数组元素的修改和对对象内部的修改是可以的（数组和对象存的是引用地址）；
5. 块儿级作用域（局部变量）；
注： 声明对象类型使用 const，非对象类型声明选择 let；
3、变量和对象的解构赋值
什么是解构赋值：
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；
<script>
// ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；
// 1、数组的解构赋值
const F4 = ["大哥","二哥","三哥","四哥"];
let [a,b,c,d] = F4;
// 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥"
console.log(a + b + c + d); // 大哥二哥三哥四哥
// 2、对象的解构赋值
const F3 = {
name : "大哥",
age : 22,
sex : "男",
xiaopin : function(){ // 常用
console.log("我会演小品！");
}
}
let {name,age,sex,xiaopin} = F3; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin); // 大哥22男
xiaopin(); // 此方法可以正常调用
</script>
应用场景：
频繁使用对象方法、数组元素，就可以使用解构赋值形式；
4、模板字符串
概述：
模板字符串（template string）是增强版的字符串，用反引号（`）标识；
特点：
1、字符串中可以出现换行符；
2、可以使用 ${xxx} 形式引用变量；
<script>
// 声明字符串的方法：单引号（''）、双引号（""）、反引号（``）
// 声明
let string = `我也一个字符串哦！`;
console.log(string);
// 特性
// 1、字符串中可以出现换行符
let str =
`
- 大哥
- 二哥
- 三哥
- 四哥
`;
console.log(str);
// 2、可以使用 ${xxx} 形式引用变量(使用了Jquery操作文档对象)
let s = "大哥";
let out = `${s}是我最大的榜样！`;
console.log(out);
</script>
应用场景：
当遇到字符串与变量拼接的情况使用模板字符串；
5、简化对象和函数写法
概述：
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；
<script>
// ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
// 变量和函数
let name = "訾博";
let change = function(){
console.log("活着就是为了改变世界！");
}
//创建对象
const school = {
// 完整写法
// name:name,
// change:change
// 简化写法
name,
change,
// 声明方法的简化
say(){
console.log("言行一致！");
}
}
school.change();
school.say();
</script>
6、箭头函数
概述：
ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；
特性：
1. 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；
2. 不能作为构造实例化对象；
3. 不能使用 arguments 变量；
箭头函数的注意点：
1. 如果形参只有一个，则小括号()可以省略；
2. 函数体如果只有一条语句，则花括号{}可以省略，函数的返回值为该条语句的执行结果；
3. 箭头函数 this 指向声明时所在作用域下 this 的值；
4. 箭头函数不能作为构造函数实例化；
5. 不能使用 arguments；
<script>
// ES6允许使用箭头（=>）定义函数
// 传统写法：无参数
var say = function(){
console.log("hello！");
}
say();//hello！
// ES写法2：无参数
let speak = () => console.log("hello 哈哈！");
speak();//hello 哈哈！
// 传统写法：一个参数
var hello = function(name){
return "hello " + name;
}
console.log(hello("訾博"));//hello 訾博
// ES6箭头函数：一个参数
let hi = name => "hi " + name;
运行结果：
console.log(hi("訾博"));//hi 訾博
// 传统写法：多个参数
var sum = function(a,b,c){
return a + b + c;
}
console.log(sum(1,2,3));//6
// ES6箭头函数：多个参数
let he = (a,b,c) => a + b + c;
console.log(he(1,2,3));//6
// 特性
// 1、箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
const school = {
name : "大哥",
}
// 传统函数
function getName(){
console.log("getName：" + this.name);
}
// 箭头函数
getName1 = () => console.log("getName1：" + this.name);
window.name = "訾博";
// 直接调用
getName();//getName:訾博
getName1();//getName1:訾博
// 使用call调用
getName.call(school);//getName:大哥
getName1.call(school);//getName1:訾博
// 结论：箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
// 2、不能作为构造实例化对象
// let Persion = (name,age) => {
// this.name = name;
// this.age = age;
// }
// let me = new Persion("訾博",24);
// console.log(me);
// 报错：Uncaught TypeError: Persion is not a constructor
// 3、不能使用 arguments 变量
// let fn = () => console.log(arguments);
// fn(1,2,3);
// 报错：Uncaught ReferenceError: arguments is not defined
</script>
6.1、问题1
点击 div 2s 后颜色变成粉色
<html>
<head>
<meta charset="utf-8">
<title>箭头函数的实践和应用场景title>
<style>
div {
width: 200px;
height: 200px;
background: #58a;
}
style>
head>
<body>
<div id="ad">div>
<script>
// 需求-1 点击 div 2s 后颜色变成『粉色』
// 获取元素
let ad = document.getElementById('ad');
// 绑定事件：这也是错误写法，这里的this还是window
// ad.addEventListener("click", () => {
// // ES6写法
// // 定时器：参数1：回调函数；参数2：时间；
// setTimeout(() => this.style.background = 'pink',2000);
// }
// )
// 绑定事件
ad.addEventListener("click", function(){
// ES6写法
// 定时器：参数1：回调函数；参数2：时间；
// 这个this才是ad
setTimeout(() => this.style.background = 'pink',2000);
}
)
script>
body>
html>
6.2、问题2
从数组中返回偶数的元素
<html>
<head>
<meta charset="utf-8">
<title>箭头函数的实践和应用场景title>
<style>
div {
width: 200px;
height: 200px;
7、ES6中函数参数的默认值
概述：
ES允许给函数的参数赋初始值；
代码示例及相关说明：
background: #58a;
}
style>
head>
<body>
<div id="ad">div>
<script>
// 需求-1 点击 div 2s 后颜色变成『粉色』
// 获取元素
let ad = document.getElementById('ad');
// 绑定事件：这也是错误写法，这里的this还是window
// ad.addEventListener("click", () => {
// // ES6写法
// // 定时器：参数1：回调函数；参数2：时间；
// setTimeout(() => this.style.background = 'pink',2000);
// }
// )
// 绑定事件
ad.addEventListener("click", function() {
// ES6写法
// 定时器：参数1：回调函数；参数2：时间；
// 这个this才是ad
setTimeout(() => this.style.background = 'pink', 2000);
})
//需求-2 从数组中返回偶数的元素
const arr = [1, 6, 9, 10, 100, 25];
// const result = arr.filter(function(item){
// if(item % 2 === 0){
// return true;
// }else{
// return false;
// }
// });
const result = arr.filter(item => item % 2 === 0);
console.log(result);
// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
script>
body>
html>
7、ES6中函数参数的默认值
概述：
ES允许给函数的参数赋初始值；
<script>
//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a,b,c=10) {
return a + b + c;
}
let result = add(1,2);
console.log(result); // 13
//2. 与解构赋值结合
// 注意这里参数是一个对象，且对象的三个其他参数都已经提前赋好了值
function connect({host="127.0.0.1", username,password, port}){
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host: 'atguigu.com',
username: 'root',
password: 'root',
port: 3306
})
</script>
8、rest参数
概述：
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments，ES6的rest参数：…args，rest参数必须放在最后面；
<html>
<head>
<meta charset="utf-8">
<title>rest参数title>
head>
<body>
<script>
// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
// ES5获取实参的方式
function data(){
console.log(arguments);
}
data("大哥","二哥","三哥","四哥");//输出的是以对象的类型输出
// ES6的rest参数...args，rest参数必须放在最后面
function data(...args){
console.log(args); // 数组的操作方法：fliter some every map
}
data("大哥","二哥","三哥","四哥");//输出的是以数组的类型输出
script>
body>
html>
9、扩展运算符
介绍：
… 扩展运算符能将数组转换为逗号分隔的参数序列；扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；
<html>
<head>
<meta charset="utf-8">
<title>扩展运算符应用title>
head>
<body>
div>
div>
<script>
//1. 数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// 传统的合并方式
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);//['王太利','肖央','曾毅','玲花']
//2. 数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);
//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // arguments
script>
body>
html>
10、Symbol
Symbol 概述：
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类
型，是一种类似于字符串的数据类型；
Symbol 特点：
1. Symbol 的值是唯一的，用来解决命名冲突的问题；
2. Symbol 值不能与其他数据进行运算；
3. Symbol 定义的对象属性不能使用for…in循环遍历 ，但是可以使用Reflect.ownKeys 来获取对象的所有键名；
10.1、基本使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>symboltitle>
head>
<body>
<script>
//创建Symbol
let s = Symbol();
// console.log(s, typeof s);
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2==s3); // false
//Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4==s5); // true
//不能与其他数据进行运算
// let result = s + 100;
// let result = s > 100;
// let result = s + s;
// USONB you are so niubility
// u undefined
// s string symbol
// o object
// n null number
// b boolean
script>
body>
html>
10.2、Symbol创建对象属性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Symbol创建对象属性title>
head>
<body>
<script>
// 向对象中添加方法 up down
let game = {
name:'俄罗斯方块',
up: function(){},
down: function(){}
};
// 我们要往game对象里面添加方法，但是怕game对象已经存在
// 同名方法，所以我们这时使用到了Symbol
// 方式一
// 声明一个对象
let methods = {
up: Symbol(),
down: Symbol()
};
game[methods.up] = function(){
console.log("我可以改变形状");
}
game[methods.down] = function(){
console.log("我可以快速下降!!");
}
console.log(game);
// 方式二
let youxi = {
name:"狼人杀",
[Symbol('say')]: function(){
console.log("我可以发言")
},
[Symbol('zibao')]: function(){
console.log('我可以自爆');
}
}
console.log(youxi);
// 如何调用方法？？？ 讲师没讲，这是弹幕说的方法
let say = Symbol('say');
let youxi1 = {
name:"狼人杀",
[say]: function(){
console.log("我可以发言")
},
[Symbol('zibao')]: function(){
console.log('我可以自爆');
}
}
youxi1[say]();
script>
body>
html>
11、迭代器
11.1、概述
遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作；
11.2、特性
ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费；原生具备 iterator 接口的数据(可用 for of 遍历)：
Array；
Arguments；
Set；
Map；
String；
TypedArray；
NodeList；
11.3、工作原理
- 创建一个指针对象，指向当前数据结构的起始位置；
- 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
- 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
- 每调用 next 方法返回一个包含 value 和 done 属性的对象；
注：需要自定义遍历数据的时候，要想到迭代器；
以下可以直接使用for .. of..进行遍历数据是因为数组自身具备了iterator接口
<html>
<head>
<meta charset="utf-8">
<title>迭代器title>
head>
<body>
<script>
// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
// 使用 for...of 遍历数组
for(let v of xiyou){
console.log(v);//唐僧,孙悟空, 猪八戒, 沙僧
}
//获取iterator对象，使用next遍历
let iterator = xiyou[Symbol.iterator]();
// 调用对象的next方法
console.log(iterator.next());//value:'唐僧',done:false
console.log(iterator.next());//value:'孙悟空',done:false
console.log(iterator.next());//value:'猪八戒',done:false
console.log(iterator.next());//value:'沙僧',done:false
console.log(iterator.next());//value:undefined,done:true
// 重新初始化对象，指针也会重新回到最前面
let iterator1 = xiyou[Symbol.iterator]();
console.log(iterator1.next());//value:'唐僧',done:false
script>
body>
html>
下面的目的是为了根据自己的需要只遍历banji对象中的stus数组，以下是因为对象是不具备iterator接口的，所以直接在该对象中创建一个iterator接口，值得注意的是iterator接口里需要创建一个指针对象:return {}，且指针对象里面有一个next方法:next function(){}，每调用 next 方法返回一个包含 value 和 done 属性的对象:return{value：' ',done:' '}
11.4、迭代器自定义遍历对象
<html>
<head>
<meta charset="utf-8">
<title>迭代器自定义遍历数据title>
head>
<body>
<script>
// 声明一个对象
const banji = {
name: "终极一班",
stus: [
'xiaoming',
'xiaoning',
'xiaotian',
'knight'
],
[Symbol.iterator]() {
// 索引变量
let index = 0;
// 保存this
let _this = this;
//返回对象
return {
//创建next方法
next: function() {
if (index < _this.stus.length) {
const result = {
value: _this.stus[index],
done: false
};
// 下标自增
index++;
// 返回结果
return result;
} else {
return {
value: undefined,
done: true
};
}
}
};
}
}
// 遍历这个对象
for (let v of banji) {
console.log(v);//xiaoming,xiaoning,xiaotian,knight
}
script>
body>
html>
输出结果：
xiaoming
xiaoning
xiaotian
knight