块级作用域let
if(true){
let fruit = ‘apple’;
}
consoloe.log(fruit);//会报错，因为let只在if{ }的作用域有效，也就是块级作用域
恒量const
const fruit = ‘apple’;//其实就是fruit这个变量已经指定了apple这个位置，二次赋值其实就是改变他的引用，所以会报错，
console.log(fruit);
const fruit = ‘lemo’;
console.log(fruit);//会报错，const定义的变量不能二次定义，而且const也是块级作用域，不会变量提升
const arr = [ ];
arr.push(‘apple’);
arr.push(‘lemo’);
arr = [ ];//会报错
解构数组
function breakfast(){
return [‘cake’,’coffee’,’apple’];
}
let [dessert,drink,fruit] = breakfast();//会将dessert = ‘cake’,drink = ‘coffee’,fruit = ‘apple’,这就是数组解构，会将对应下标的值赋值
console.log(dessert,drink,fruit);
解构对象
function breakfast(){
return { dessert:’cake’,drink:’coffee’,fruit:’apple’ };
}
//解析对象主要也是用于赋值，对象之间的赋值
let { dessert1:dessert, drink1:drink, fruit1:fruit } = breakfast();
console.log(dessert, drink, fruit );
模板字符串
let dessert = ‘cake’, drink = ‘coffee’;
let breakfast = “今天的早餐是” + drink + “和” + cake;
console.log(breakfast);
//字符串模板使用变量要用${ 变量名 }来表示，常用语HTML的输出，这样` content `，content的内容的格式都不会变化
let breakfast_1 = `今天的早餐是${cake}和${coofee}`;
console.log(breakfast_1);
带标签的模板字符串
let dessert = ‘cake’,drink = ‘coffee’;
let breakfast = kitchen`今天的早餐是${ dessert }和${ drink }`;
function kitchen(strings,…values){//kitchen是标签，再以标签名做函数名，里面的内容就可以作为参数传递过来了
//console.log(strings);
//console.log(values);
//strings里存放的是breakfast里面的字符串，values存放的是变量，strings和values都是数组
let result = ‘’;
for(let i = 0;I < values.length;i++){
result += strings[i];
result += values[i];
}
result += strings[strings.length -1];
return result;//result返回的就是kitchen的那一段话
}
判断字符串里是否包含其他字符串
let str = “今天吃的是apple”;
str.startWith(‘今天’);//返回true，判断str是否是以今天开头
str.endsWith(‘le’);//true,判断str是否是以le结尾
str.includes(‘apple’);//true，判断str是否含有apple这个字符串
默认参数
function breakfast(dessert = “cake”,drink = “coffee”){//设置默认参数
return `${dessert} ${drink}`;
}
console.log( breakfast() );//cake coffee
展开操作符-Spread（…）
let fruits = [‘apple’,’lemo’], foods = [‘cake’,…fruits];
console.log(fruits); //返回的是数组[‘apple’,’lemo’]
console.log(…fruits); //返回的两个字符串apple 和 lemo
console.log(foods); //[‘cake’,’apple’,’lemo’];
剩余操作符(还是…)
function breakfast(dessert,…foods){//多出来的参数都会放在foods里面
console.log(dessert,foods);
}
breakfast(‘cake’,lemo’,’coffee’);//打印的是cake,[‘lemo’,’coffee’]，因为lemo和coffee都放在了foods这个数组里
解构参数
function breakfast(dessert,drink,{location,restaurant} = { } ){//其实就是利用解构对象来做参数传递
console.log(dessert,drink,location,restaurant);
}
breakfast(‘cake’,’coffee’,{ location:”wuhan”,restaurant:”baijingyuan” } );
函数的名字-name属性
function foo1(){ }
let foo2 = function(){ }
let foo3 = function foo4(){ }
console.log(foo1.name,foo2.name,foo3.name);//foo1,foo2,foo4
箭头函数
// 函数名 参数 方法实现
let breakfast = (dessert) => { return dessert; };
翻译成普通函数：
var breakfast = function breakfast(dessert){
return dessert;
}
对象表达式
let dessert = ‘cake’ , drink = ‘coffee’;
//全写
let food = {
dessert:dessert,
drink:drink,
breakfast:function(){ }
}
//简写
let food = {
dessert,
drink,
breakfast(){ }
}
对比两个值是否相等Object.is(var1,var2)
把对象的值复制到另一个对象Object.assign()
let breakfast = { };
Object.assign( breakfast,{ dessert:’cake’,drink:’coffee’ } );
console.log(breakfast);//dessert:’cake’,drink:’coffee’
设置对象的prototype
//Object.getPrototypeOf()
//Objeect.setPrototypeOf()
let breakfast={
getDrink(){
return ‘coffee’;
}
};
let dinner = {
getDrink(){
return ‘beer’;
}
};
let drink = Object.create(breakfast);
drink.getDrink();//coffee
console.log( Object.getPrototypeOf(drink) === breakfast);//true
Object.setPrototypeOf(drink,dinner);
drink.getDrink();//beer
console.log(Object.getPrototyprOf(drink) === dinner);//true
__proto__
let breakfast={
getDrink(){
return ‘coffee’;
}
};
let dinner = {
getDrink(){
return ‘beer’;
}
};
let drink ={
__proto__:breakfast,
}
drink.getDrink();//coffee
console.log( Object.getPrototypeOf(drink) === breakfast);//true
drink.__proto__ = dinner;
drink.getDrink();//beer
console.log(Object.getPrototyprOf(drink) === dinner);//true
super
let breakfast={
getDrink(){
return ‘coffee’;
}
};
let dinner = {
getDrink(){
return ‘beer’;
}
};
let drink = {
__proto__:breakfast,
getDrink(){
return super.getDrink() + ‘,milk’;
}
}
drink.getDrink();//coffee,milk
迭代器
生成器Generators
function* chef(){
yield ‘apple’; //yield就是需要迭代的变量
yield ‘lemo’;
}
function* foods(foodArr){
for(let i = 0;I < foodArr.length;i++){
yield foodArr[i];
}
}
let wanghao = chef();
console.log(wanghao.next());//apple
console.log(wanghao.next() );//lemo
console.log(wanghao.next() );//undefined
class
class Chef {
constructor(food){
//当使用new去生成一个对象的时候会自动调用该方法
//我们也可以使用该方法对这个类进一些初始化
this.food = food;
}//注意此处没有逗号
cook(){
console.log(this.food);
}
}
let wanghao = new Chef(‘apple’);
wanghao.cook();
get与set
class Chef {
constructor(food){
this.food = food;
this.dish = [ ];
}
get menu(){
return this.dish;
}
set menu(dish){
this.dish.push(dish);
}
cook(){
console.log(this.food);
}
}
let wanghao = new Chef();
wanghao.menu = ‘apple’;
wanghao.menu = ‘lemo’;//会自动调用set方法
console.log(wanghao.menu);//会自动调用get方法
静态方法static
//不需要实例化类就可以使用的方法
class Chef {
constructor(food){
this.food = food;
this.dish = [ ];
}
get menu(){
return this.dish;
}
set menu(dish){
this.dish.push(dish);
}
cook(){
console.log(this.food);
}
static cook(food){
console.log(food);
}
}
Chef.cook(‘apple’);//不需要class的实例化对象，直接用类名就可以调用static方法
继承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);
}
}
let wanghao = new Chef(‘王浩’,’1995-07-11’) );
wanghao.intro();//王浩，1995-07-11
Set
let dessert = new Set(‘apple’,’lemo’);//此时dessert = { ‘apple’,’’lemo’ }
dessert.add(‘ice’);//此时dessert = {'apple’,’lemo’,’ice’ }
dessert.add(‘ice’);//Set里面的元素不允许有重复的，所以此时的dessert = { ‘apple’,’lemo’,’ice’}
console.log(dessert.size);// 3,size是deseert的长度
console.log(dessert.has(‘apple’);//true，has(str)是判断是否有这个元素
console.log(dessert.delete(‘apple’);//delete(str)是删除元素str这个元素
dessert.forEach(dessert => {
console.log(dessert);
});//forEach()是循环里面的元素
dessert.clear();//清空里面的元素
Map
let food = new Map();
let fruit = { }.cook =function(){ },dessert = ‘甜点’;
food.set(fruit,’lemo’);// Map{ Object {} => ‘lemo’
food.set(dessert,’pie’);//‘甜点’ = ‘pie’
food.size;//2
food.get(fruit);//lemo
food.delete(dessert);
food.has(dessert);//false
food.forEach((value,key) =>{
console.log(`${ value },${ key}`);
});
food.clear();
Moudle(模块)
// Person.js
let name = ‘王浩’,year = 24;
export { name, year as old };//重命名year为old
//Chef.js
import { name,old as age } from ‘./Person.js’;//文件所在的相对路径，重命名old为age
//或者 import * as person from ‘./Person.js’;peroson.js里面所有的导出都会放chef对象中
console.log(name,age);