ES6学习笔记
课程bilibili:av48509573
笔记只是方便我回忆，和视频没有什么不同的
1.课程介绍
ECMAScript简称ES,可以看作一套标准
js就是实施这套标准的语言
主流浏览器用es5
现在以年代命名
2作用域let
即申明一个变量后什么时候可以去使用它
if (true) {
var fruit = 'apple';
}
console.log(fruit);
输出apple
if (true) {
let fruit = 'apple';
}
console.log(fruit);
输出报错，未定义
用let定义的变量，在块的外面就不能使用了，使用大括号{}分为块
3.const
使用它可以去声明一个恒量，这样就可以让他不能再去分配新的值
const fruit = [];
fruit.push('apple');
fruit.push('lemon');
console.log(fruit);
输出Array [ "apple", "lemon" ]
const fruit = [];
fruit.push('apple');
fruit.push('lemon');
fruit = [];
console.log(fruit);
输出报错
4解构数组
场景：将函数返回的数组，一一赋值给对应的变量
老的思路
function foods(){
return ['xx','xx'];
}
var tmp = foods();
var hot = tmp[0], cold = tmp[1];
对应变量和临时变量数组内的值一一对应
解构数组思路
function foods(){
return ['xx','xx'];
}
let [hot,cold] = foods();
console.log(hot,cold);
输出xx xx
5解构对象
function foods(){
return {'hot':'x1','cold':'x2'};
}
let {'hot':hotfoods,'cold':coldfoods} = foods();
console.log(hotfoods,coldfoods);
输出x1 x2
以此分别使用该对象里的值
6模板字符串
场景：希望把两个变量连成一句话
老方法
let hotfood = 'x1',
coldfood = 'x2';
let foods = "热" + hotfood + "冷" + coldfood;
console.log(foods);
新方法（感觉有点像数据绑定）（`为反引号）
（结构为`${变量名}`）
let hotfood = 'x1',
coldfood = 'x2';
let foods = `热${hotfood}冷${coldfood}`;
console.log(foods);
7带标签的模板
可以通过模板字符串前面的标签来处理该字符串
1.添加模板的标签
2.添加标签函数，含有两个参数，string，...values （...为扩展运算符
以此来修改返回值
3.通过调用模板对象来调用修改的输出
let hotfood = 'x1',
coldfood = 'x2';
let foods = store `热${hotfood}冷${coldfood}`;
function store(strings,...values){
console.log(strings);
console.log(values);
}
console.log(foods);
输出
Array(3) [ "热", "冷", "" ]
Array [ "x1", "x2" ]
通过组合strings和values数组来定义输出
（目的在于可以使用与重复度比较高的字符串，可以简单添加修改货币符号等...）
let hotfood = 'x1',
coldfood = 'x2';
let foods = store`热${hotfood}冷${coldfood}`;
function store(strings, ...values) {
console.log(strings);
console.log(values);
let result = '';
for (let i = 0; i < values.length; i++) {
result += strings[i];
result += values[i];
}
result += strings[strings.length - 1];
return result;
}
console.log(foods);
输出
Array(3) [ "热", "冷", "" ]
Array [ "x1", "x2" ]
热x1冷x2
8.判断字符串里是否包含其他字符串
includes() , startsWith() , endsWith()
str.includes('a') //是否包含‘a’
str.startsWith('b') //是否是‘b’打头
str.endsWith('c') //是否是‘c'结尾
9函数默认参数
可以给函数接受的参数设置默认值，使用该函数如果没给值就使用默认值
function foods (hot = 'x1',cold = 'x2'){
return `${hot} ${cold}`;
}
console.log(foods());
输出x1 x2
10展开操作符...spread展开
let fruits = ['apple','bananer'],
foods = ['x1',...fruits];
console.log(fruits);
console.log(...fruits);
console.log(foods);
输出
Array [ "apple", "bananer" ]
apple bananer
Array(3) [ "x1", "apple", "bananer" ]
不加...输出的是数组，加了以后输出的是数组值
11。 剩余操作符...Rest
一般用在参数里，让函数支持更多的参数，让参数数量不受限制
function foods(hot,cold,...nomal) {
console.log(hot,cold,nomal);
console.log(hot,cold,...nomal);
}
foods('x1','x2','x3','x4');
输出
x1 x2 Array [ "x3", "x4" ]
x1 x2 x3 x4
参数处的...nomal，代表多余的参数都将给nomal对象
输出处的...nomal，代表数组的展开
12. 函数的名字，name属性
可以得到函数的名字
function.name
13.箭头函数
1定义变量，
作为函数的名字 = 可以接收的参数的名字 => 函数返回的值
let breakfast1 = dessert => dessert;
let breakfast2 = (dessert,drink) => {
dessert+drink;
};
普通函数写法
var breakfast1 = function breakfast1(dessert){
return dessert;
};
var breakfast2 = function breakfast2(dessert,drink){
return dessert+drink;
};
14.对象表达式
let hotfood = 'xx',coldfood = 'oo';
let food = {
hotfood:hotfood,
coldfood:coldfood,
breakfast:function(){}
}
若在对象中添加与变量名一样的属性 ，且值为变量的值时
可以这样写
let hotfood = 'xx',coldfood = 'oo';
let food = {
hotfood,
coldfood,
breakfast(){}
}
输出均为
Object { hotfood: "xx", coldfood: "oo", breakfast: breakfast()
16.对象属性名（的操作）
添加属性可以用 . 点
若属性名为带空格的字符串 或 字符串变量，使用 [ ] 中括号
let food = [];
let coldDrink = 'cold drink';
food.dessert = 'cake';
food['hot drink'] = 'tea';
food[coldDrink] = 'coffe';
console.log(food);
输出
[]
"cold drink": "coffe"
dessert: "cake"
"hot drink": "tea"
17.对比两个值是否相等
== 或者 object.is(,)
18.把对象的值复制到另一个对象里
Object.assign(,) 参数1是对象，参数2 是源
let breakfast = {};
Object.assign(
breakfast,{'drink':'tea'}
);
console.log(breakfast);
输出Object { drink: "tea" }
19设置对象的prototype
Object.setPrototypeOf（原本的，改为）
可以在创建对象后改变对象的prototype
let breakfast = {
getDrink() {
return 'tea';
}
};
let dinner = {
getDrink() {
return 'bear';
}
};
let sunday = Object.create(breakfast);
console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday) === breakfast);
Object.setPrototypeOf(sunday,dinner);
console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday) === dinner);
prototype是函数的 原型对象
如上，以breakfast创建的对象sunday的原型对象就是breakfast，所以调用它的属性方法。
而使用setPrototypeOf可以更改其原型对象，更改它所调用的函数，使用其改为调用dinner的属性方法
输出为
tea
true
bear
true
20 __proto__
可以使用__proto__属性来设置函数的prototype
let breakfast = {
getDrink() {
return 'tea';
}
};
let dinner = {
getDrink() {
return 'bear';
}
};
let sunday = {
__proto__:breakfast
};
console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday)===breakfast);
sunday.__proto__=dinner;
console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday)===dinner);
21.super
修改继承的方法，直接定义同样的属性函数
let breakfast = {
getDrink() {
return 'tea';
}
};
let sunday = {
__proto__:breakfast,
getDrink(){
return super.getDrink() + 'wine'
}
};
console.log(sunday.getDrink());
用super来调用源函数对象
输出teawine
22 迭代器 Iterators （交换轮流代替
每次执行时会返回两个对象
{value ： xx ， done : ture/false}
value表示返回值
done为是否还有迭代的东西，没有东西了以后为ture，完成了迭代
拥有一个next方法，每次执行会返回一个对象，含有value和done两个属性，如果没有可以迭代的东西，value这个属性的值就会变成undifined，done会变成ture
可以使用Generators来生成迭代器
以下是手动构造的迭代器
function chef(foods){
let i = 0;
return{
next() {
let done = (i>= foods.length);
let value = !done ? foods[i++] :undefined;
return{
value:value,
done:done
}
}
}
}
let xiaoming = chef(['tomato','egg']);
console.log(xiaoming.next());
console.log(xiaoming.next());
console.log(xiaoming.next());
输出
Object { value: "tomato", done: false }
Object { value: "egg", done: false }
Object { value: undefined, done: true }
从这里看特点大概就是可以一个个取出数组里的值....看起来好像没什么用
23.生成器Generators
用来去生成迭代器
function* chef(){
yield 'apple';
yield 'egg';
}
let xiaoming = chef();
console.log(xiaoming.next());
console.log(xiaoming.next());
console.log(xiaoming.next());
输出
Object { value: "apple", done: false }
Object { value: "egg", done: false }
Object { value: undefined, done: true }
改造
function* chef(foods){
for (let i = 0; i < foods.length; i++) {
yield foods[i];
}
}
let xiaoming = chef(['apple','egg']);
console.log(xiaoming.next());
console.log(xiaoming.next());
console.log(xiaoming.next());
输出同上
可以用函数表达式的方式去创建
let chef = function* chef(){}
24.Classes类
class Chef{
// 构造函数
constructor(food){
this.food = food;
}
//方法之间不需要逗号分开
cook(){
console.log(this.food);
}
}
// 实例化
let xiaoming = new Chef('tomato');
xiaoming.cook();
输出tomato
25.get与set
可以在类中定义get和set
class Chef{
// 构造函数
constructor(food){
this.food = food;
this.dish = [];
}
get menu(){
return this.dish;
}
set menu(dish){
this.dish.push(dish);
}
//方法之间不需要逗号分开
}
// 实例化
let xiaoming = new Chef();
console.log(xiaoming.menu = 'beef');
console.log(xiaoming.menu = 'chicken');
console.log(xiaoming.menu);
输出
beef
chicken
Array [ "beef", "chicken" ]
定义好像是函数的形式，但是调用不是按函数的形式调用，如上
26.静态方法static
不需要实例化就可以使用的方法
class Chef{
static cook(food){
console.log(food);
}
}
// 无需实例化
Chef.cook('tomato');
输出tomato
27.继承 extends
一个类可以去继承其他类里面的东西
class Person{
constructor(name,birthday){
this.name=name;
this.birthday=birthday;
}
intro(){
return `${this.name},${this.birthday}`;
}
}
class Chef extends Person {
constructor(name,birthday){
// 直接使用父类的构造函数
super(name,birthday);
}
}
// Chef实例化
let xiaoming = new Chef('xiaoming','1996-01-01');
//调用父类的方法
console.log(xiaoming.intro());
28.Set
Set是一堆东西的集合，有点像数组，和数组不同的是set中不能有重复的内容，创建set可以使用new Set();
let desserts = new Set('ABC');
//重复添加没用
desserts.add('D');
desserts.add('D');
// 输出set
console.log(desserts);
//显示数量
console.log(desserts.size);
//是否存在
console.log(desserts.has('C'));
//删除项
desserts.delete('C');
console.log(desserts);
// 循环
desserts.forEach(dessert =>{
console.log(dessert);
});
// 清空
desserts.clear();
console.log(desserts);
输出
Set(4) [ "A", "B", "C", "D" ]
4
true
Set(3) [ "A", "B", "D" ]
A
B
D
Set []
29.Map
如果需要键值对项目，可以使用对象，一个对象可以包含多个项目，每一个项目都有一个名字，还有和它对应的值，不过使用对象可能会有冲突，比如不能使用对象作为项目的名字。
可以使用Map组织键值对数据
let food = new Map();
let fruit = {},cook = function(){},dessert = '甜点';
//将以上变量作为项的名字
food.set(fruit,'lemon');
food.set(cook,'x');
food.set(dessert,'o');
console.log(food);
console.log(food.size);
console.log(food.get(fruit));
food.delete(dessert);
console.log(food.has(dessert));
food.forEach((value,key) =>{
console.log(`${key} = ${value}`);
});
输出
Map(3) { {} → "lemon", cook() → "x", "甜点" → "o" }
3
lemon
false
[object Object] = lemon
function(){} = x
