ES6 基础

Posted 2020-10-15 guan

let用来定义块变最。ES6新增了块作用域  如if {}

const 用来定义恒量，恒量不能重新赋值。

• ES6的字符模板：

用·符号包含

let dessert="cake",
drink="tea";
let breakfast= kitchen`今天的早餐是 \n ${dessert} 与 ${drink} !`   //键盘上波浪符下面的符号
function kitchen(strings,...values){  //string指的这模板标签里面的字符，value指的是模板标签面的值
//console.log(strings);
//console.log(values);
let result=‘‘;
for(var i=0;i<values.length;i++)
{
 result+=strings[i];
result+=values[i];
}
}

 

• 新增的字符串方法如：

str.startWith("a")  字符串以a开头

str.endWidht("a") 字符串以a结尾

str.includes("a")  字符串中是否包"a"

 

• ES6里面可以给定义的函数设置默认的值

function breakfast(dessert=‘cake‘,drink=‘tea‘){   //默然值

return `${dessert} ${drink}`

}

console.log(breakfast()}   //cake teak

•    ES6新增操作符 ...

//展开
let fruits=["apple","tea"],
     foots=["banana‘,"cake‘,...fruits];
console.log(fruits);  //输出 [ "apple‘,‘tea"]
console.log(...fruits); //输出 "apple‘,‘tea"
console.log(foods);//输出  ["banana", "cake", "apple‘,‘tea"]
//rest
function breakfast(dessert,drink,...foods){  //意思是说函数除了指定dessert drink参数以外，其它的参数都会放在foods参数里面
console.log(dessert,drink,foods); 
}
breakfast("cake","tea","apple","banana"); //输出 "cake" "tea"  ["apple","banana"]

•  ES6可以用对象作为函数的参数

function breakfast(dessert,drink,{location,restaurant}={}) //参数给了一个默认的值，一个空{}
{
console.log(dessert,drink,location,restaurant);
}
breakfast("cake","tea",{location:"江苏",restaurant:"董小姐"}) //输出cake tea 江苏 董小姐

 

• ES6给函数新增了一个name属性

let breakfast=function(argument){
//...
}

console.log(breakfast.name);  //输出 breakfast

let breakfast=function superBreakfast(argument){
//...
}

console.log(breakfast.name);  //输出 superBreakfast

• ES6新增了一种定义函数的方法 Arrow Functions

‘user strict‘
let breakfast=(dessert,drink)=>dessert+drink; 
let breakfast=(dessert,drink)=>{dessert+drink} ; //大括号里面可以有更复杂的操作

//等于
var breakfast =function(desset,drink){
return dessert+drink
}

•  ES6定义属性

值和属性一样时可以简写

‘use strict‘
let dessert="cake",drink="tea";
let food={
dessert:dessert,  //属性和值是一样的时候可以简写
drink:drink，
breakfast:function(){}

}
//可以简写成

let food={
dessert,
drink,
breakfast(){}

}
console.log(food);  //输出{dessert: "cake", drink: "tea"}

如果属性名不包括空格可以用“. ”号来调用，如果包含空格只能用“[ ]”号来调用

‘use strict‘
let food={};
foot.dessert="cakc";
offd[‘hot drink‘]="tea";
console.log(food);

• ES6 新增的Object.assign可以把一个对象的属性复制到另一个对象里面

‘use strict‘
let breakfast={};
Object.assign{
breakfast,
{drink:"beer"}
};
console.log(breakfast);  //输出{drink:"beer"}

 

• ES6 新增的Object.setPrototypeOf可以在创建对象以后改变对象

let breakfast={
getDrink(){
return "tea";
}
};
let dinner={

getDrink(){
return "beer";
}

} let sunday=Object.create(breakfast); 
console.log(sunday.getDrink()); //输出 tea 
console.log(Ojbect.getPrototypeof(sunday)===breakfast);//输出true 

 Object.setPrototypeOf(sunday,dinner);

•  ES6的 _proto_ 可以设置对象的prototype

let breakfast={
getDrink(){
return "tea";
}
};
let dinner={
getDrink(){
return "beer";
}
let sunday={
_proto_:breakfast,
getDrink(){   //重新定义一个getDrink方法

return super.getDrink()+"milk"; } }  //super的意思是执行一下_proto_里抽breakfast的getDrink
console.log(Object.getPrototypeOf(sunday)===breakfast); //输出true 
sunday._proto_=dinner;
console.log(Object.getPrototypeOf(sunday)===dinner); //输出true
console.log(sunday.getDrink()); // 输出 tea milk

•  ES6的Iterators迭代，指轮流交换的意思

{value:"", done:true/false } true指完成了迭代；Generators可以生成这种迭代器

‘use strict‘
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 John=chef(["tomato","egg"]);
console.log(John.next()); //输出{value: "tomato", done: false}
console.log(John.next());//输出{value: "egg", done: false}
console.log(John.next()); //{value: undefined, done: true}

Generators生成器

let chef=function*(foods){
for(var i=0;i<foods.length,i++)
{

yield foods[i];

}
}
let John=chef(["tomato","egg"]);
console.log(John.next()); //{value: "tomato", done: false}
console.log(John.next()); //{value: "egg", done: false}
console.log(John.next()); //{value: undefined, done: true}

•  ES6的类 class

‘use strict‘
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 John=new Chef(‘tomato‘);
//John.cook(); tomato

let John=new Chef();
console.log(John.menu="apple"); 
console.log(John.menu="orange");
console.log(John.menu) //["apple","orange"]

• ES6新增的 static指的是静态的，不需要实例化就可以便用

‘use strict‘
class Chef{

static cook(food){
console.log(food);
}
}
//let John=new Chef(‘tomato‘);
//John.cook(); tomato

Chef.cook("tomato"); //tomato

• ES6新增extends

‘use strict‘
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 John=new Chef("John‘,"1999-9-9");

}

• ES6的set有点像数姐，set和数组不同的是不能有重复的内容

‘use strict‘
let dessert=new Set(‘cake apple‘);
dessert.add("orange");
console.log(dessert);//{"c", "a", "k", "e", " ", …}
console.log(dessert.size);//8 长度
console.log(dessert.has("c"));  // true
console.delete("c") //删除
dessert.forEach(index=>{ //遍历
console.log(index);
})

for (let i of dessert) //set内部的元素可以遍历for...of...
{ 
console.log(i); 
}

dessert.clear(); //清空

• ES6中的用Map组织名值对的数据

Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

注意，只有对同一个对象的引用，Map结构才将其视为同一个键。这一点要非常小心。

‘use strict‘
let food=new Map();
let fruit={},cook=function(){},dessert="sweet";
food.set(fruit,"apple");
food.set(cook,"cook");
food.set(dessert,"cake");
console.log(food);//Map(3) {{…} => "apple", ? => "cook", "sweet" => "cake"}
console.log(food.size) //长度3
console.log(food.get(fruit)); // 获取apple
food.delete(dessert);
console.log(food.has(dessert)) //删除false
food.forEach((value,key)=>{
console.log(`${value}=${key}`);
})  //遍历  
food.clear(); //清空

•  ES6中的Module导入导出模块

‘use strict‘;
let fruit="apple";
expert let dessert="cake"
expert default function dinner(fruit,dessert){ //加入expert default指模块默认导出的东西

console.log(`今天的早餐是 ${fruit}与 ${dessert}`)
}

expert{fruit,dessert} //导出的可以是函数、类、变量
expert{dinner as default}  //也可以表示模板默认导出的东西

import {fruit,dessert as dinner } from ‘./modul/chef‘;   //用来更变导入模块的名字 as
import * as chef from ‘./modul/chef‘;  //导入所有的模块
import dinner from‘./modul/chef‘;  //默认导出的模块导入

console.log(fruit,dinner); 
console.log(chef.fruit,chef.dessert);