zoukankan      html  css  js  c++  java
  • ES6 基础

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

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

    • ES6的字符模板:

    用·符号包含

    let dessert="cake",
    drink="tea";
    let breakfast= kitchen`今天的早餐是 
     ${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);
  • 相关阅读:
    Sql中关于日期的格式化
    linq中存储过程返回集合存在的问题
    当页面请求数据是从静态页中获取的Post方法会报405的错误
    jquery中load方法在ie下会卡住
    jquery用div实现下拉列表的效果
    jquery获取服务器端控件的方法
    【转】jquery实现文本框有提示输入的信息
    toString()方法浅谈
    Object类与上下转型
    多态
  • 原文地址:https://www.cnblogs.com/guanguan-/p/7859353.html
Copyright © 2011-2022 走看看