ES6 基础

Posted guan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 基础相关的知识,希望对你有一定的参考价值。

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);

 

以上是关于ES6 基础的主要内容,如果未能解决你的问题,请参考以下文章

[vscode]--HTML代码片段(基础版,reactvuejquery)

ES6 模块串联

ES6解构赋值

ES7-Es8 js代码片段

ES6基础语法

JavaScript ES6 的let和const