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

 

原文地址:https://www.cnblogs.com/fanner7/p/10720823.html