Es6 学习笔记
let
块级作用域，只能使用在定义它的块里，在外面是访问不到的。
{
let fruit = "apple"
console.log(fruit);//apple
}
console.log(fruit);//fruit is not defined
const
声明一个恒量，这样就不能给这个恒量重新分配新的值。其限制的是给恒量分配值的动作并不是限制里面的值。
const fruit = 'apple'
console.log(fruit);
const fruit = 'orange'
console.log(fruit);//Identifier 'fruit' has already been declared
const fruit = []
fruit.push('apple')
console.log(fruit);
fruit = [] //Assignment to constant variable. 不能重新分配fruit的值
解构
function breakfast(){
return ['apple','orange','mulik']
}
let [a,b,c] = breakfast()
console.log(a,b,c);//apple orange mulik
function breakfast(){
return {man:'tom',woman:'may'}
}
let {man:man,woman:woman} = breakfast()//后面的man表示的是自己定义的名字，前面的man表示的是对象的属性
console.log(man,woman);//tom may
- 字符串拼接(使用字符模板)
let dessert = 'apple',drink = 'mulik';
let breakfast = '今天的早餐是'+dessert+'和'+drink+'!'
console.log(breakfast);//今天的早餐是apple和mulik!
let breakfast1 = `今天的早餐是${dessert}和${drink}!`
console.log(breakfast1);//今天的早餐是apple和mulik!
- 使用标签
let dessert = 'apple',
drink = 'mulik';
let breakfast = kitchen `今天的早餐是${dessert}和${drink}!`;
//strings是模板字符串里的每一部分字符 values是里面的值（dessert，drink）
function kitchen(strings, ...values) {
console.log(strings); //["今天的早餐是", "和", "!", raw: Array[3]]
console.log(values); //["apple", "mulik"]
let result = '';
for (var i = 0; i < values.length; i++) {
result += strings[i];
result += values[i];
}
result += strings[strings.length - 1];
return result;
}
- 判断字符串的功能
let dessert = 'apple',
drink = 'mulik';
let breakfast = `今天的早餐是${dessert}和${drink}!`;
console.log(breakfast.startsWith('今天'));//判断是否以“今天”开头 结果为true
console.log(breakfast.endsWith('!'));//判断结尾
console.log(breakfast.includes('早餐'));//判断是否包含
函数设置默认值
如果不设置值就会使用默认的值
... 操作符
- 展开
let fruits = ['apple','orange'],foods = ['bread',...fruits];
console.log(fruits);//["apple", "orange"]
console.log(...fruits);//apple orange
console.log(foods);//["bread", "apple", "orange"]
- 剩余操作符，一般会用在函数参数里面
function breakfast(dessert,drink,...foods){
console.log(dessert,drink,...foods);//出了dessert,drink，其余的参数会放到foods这个数组里面
}
breakfast('apple','orange','tea','piazz')
- 设置对象参数
function breakfast(dessert,drink,{location,restaurant}={}){
console.log(dessert,drink,location,restaurant);//pick mulik 成都 火锅
}
breakfast("pick","mulik",{location:'成都',restaurant:'火锅'})
name属性
- 得到函数名字
function breakfast(dessert){
}
console.log(breakfast.name);//breakfast
let drink = function mulik(dessert){
}
console.log(drink.name);//mulik
Arrow function 箭头函数
- 写法
//ES6
let breakfast = (dessert, drink) => {
return dessert + drink
};
//原始写法
var breakfast = function breakfast(dessert, drink) {
return dessert + drink
}
- []的使用
let food = {};
let drink = 'hot drink';
food.dessert = 'bread';
food[drink]='tea';//使用变量名或者有空格的情况下使用[]
console.log(food);//Object {dessert: "bread", hot drink: "tea"}
Object Assign
- 把一个对象里的属性赋值给另外一个对象
let food = {};
Object.assign(food,{drink:'tea'},{drink:'mulik'})//后面的值会覆盖前面的值
console.log(food);//Object {drink: "mulik"}
Obgect.setPrototypeOf
- 创建对象之后改变其Prototype
let breakfast = {
getDrink(){
return 'tea';
}
}
let dinner = {
getDrink(){
return 'mulik'
}
}
let sunday = Object.create(breakfast);//基于breakfast创建sunnday
console.log(sunday.getDrink());//tea
console.log(Object.getPrototypeOf(sunday)===breakfast);//true
Object.setPrototypeOf(sunday,dinner);
console.log(sunday.getDrink());//mulik
console.log(Object.getPrototypeOf(sunday)===dinner);//true
_ proto _
- 可以得到或者设置对象里的Prototype
let breakfast = {
getDrink(){
return 'tea';
}
}
let dinner = {
getDrink(){
return 'mulik'
}
}
let sunday = {
__proto__ :breakfast
}
console.log(sunday.getDrink());//tea
console.log(Object.getPrototypeOf(sunday)===breakfast);//true
sunday.__proto__ = dinner
console.log(sunday.getDrink());//mulik
console.log(Object.getPrototypeOf(sunday)===dinner);//true
- 重新定义覆盖
let breakfast = {
getDrink(){
return 'tea';
}
}
let dinner = {
getDrink(){
return 'mulik'
}
}
let sunday = {
__proto__ :breakfast,
getDrink(){
return super.getDrink()+'bear'
}
}
console.log(sunday.getDrink());//teabear
Iterators
- 迭代器（轮流交换）；每一次执行的时候会返回一个对象{value:xxx,done:true/false},如果done为true则结束；其中还有一个next的方法每一次执行的时候就会返回一个对象。如果没有可调用的则
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 wanger = chef(['eggs','meat'])
console.log(wanger.next());//Object {value: "eggs", done: false}
console.log(wanger.next());//Object {value: "meat", done: false}
console.log(wanger.next());//Object {value: undefined, done: true}
- Generators 可以生成迭代器
function* chef(foods){
for (var i = 0; i < foods.length; i++) {
yield foods[i];
}
}
let wanger = chef(['eggs','meat']);
console.log(wanger.next());//Object {value: "eggs", done: false}
console.log(wanger.next());//Object {value: "meat", done: false}
console.log(wanger.next());//Object {value: undefined, done: true}
- classes 类
class Chef {
constructor(food) {
this.food = food;
}
cook() {
console.log(this.food);
}
}
let wanger = new Chef('apple');
wanger.cook();//apple
- 类里面的getter setter
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 wanger = new Chef();
console.log(wanger.menu = 'apple');
console.log(wanger.menu = 'orange');
console.log(wanger.menu);//get ["apple", "orange"]
- 静态方法static
class Chef {
constructor(food) {
this.food = food;
this.dish = [];
}
get menu(){
return this.dish;
}
set menu(dish){
this.dish.push(dish)
}
static cook(food) {
console.log(food);
}
}
Chef.cook('apple')
- 继承
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 wanger = new Chef('wanger','1998');
console.log(wanger.intro());//wanger,1998
set
里面不能有重复的内容
let dessert = new Set('apple');
dessert.add('s')
console.log(dessert);
console.log(dessert.size);//3
console.log(dessert.has('p'));//true
dessert.delete('s');
console.log(dessert);//Set {"a", "p", "l", "e"}
dessert.forEach(dessert =>{
console.log(dessert);
});
dessert.clear();//清空
console.log(dessert);
map
let food = new Map();
let fruit = {}, cook = function () {},dessert = '甜点';
food.set(fruit,'orange');
food.set(cook,'apple');
food.set(dessert,'bread');
console.log(food);
console.log(food.size);
console.log(food.get(fruit));
console.log(food.get(cook));
food.delete(dessert);
console.log(food.has(dessert));
food.forEach((value,key) => {
console.log(`${key}=${value}`);//[object Object]=orange function () {}=apple
});
food.clear();
console.log(food);
模块 Module
//在模块文件中
let fruit = 'apple'
let dessert = 'orange'
//需要导出的东西(函数，类，都可以)
export {fruit,dessert};
//导入(引入模块)
import {fruit,dessert} from '路径'
//引入全部
import * as chef from '路径'
console.log(chef.fruit);//apple
//在模块文件中
let fruit = 'apple'
let dessert = 'orange'
function dinner(fruit,dessert){
console.log(`今天的晚餐：${fruit}和${dessert}`);
}
//需要导出的东西(函数，类，都可以) as重命名
export {fruit,dessert,dinner as supper};
//导入(引入模块)as重命名
import {fruit,dessert,supper as dinner} from '路径'
dinner(fruit,dessert)//今天的晚餐：apple和orange
//引入全部
import * as chef from '路径'
console.log(chef.fruit);//apple
- 默认导出
//在模块文件中
let fruit = 'apple'
let dessert = 'orange'
//默认要导出的 方法一
export default function dinner(fruit,dessert){
console.log(`今天的晚餐：${fruit}和${dessert}`);
}
//默认要导出的 方法二
function dinner(fruit,dessert){
console.log(`今天的晚餐：${fruit}和${dessert}`);
}
export {dinner as default}
//导入默认模块可以直接进行重命名
import chef from '路径'
chef('apple','orange')//今天的晚餐：apple和orange
浙公网安备 33010602011771号