ES6基础

作者: 丶HanGH | 来源:发表于2017-12-04 20:19 被阅读0次

    块级作用域、字符串、函数

    1. 作用域
      在之前的js中,只有函数作用域和全局作用域,指的是变量只能在函数中或者全局中,块级作用域是不存在的。
      例:在for循环或while等其他循环中,var 定义一个变量,在外部获取是没问题的,在ES6的的语法中 ,let 一个变量,在大括号外是获取不到的。
      const 是定义一个常量,定义之后是无法更改的
    2. 字符串
    • 模板字符串
    var name = "han";
    var course = "你好";
    //普通写法
    console.log("hello," + name + "course is" + course);
    //ES6写法 (字符串内回车表示换行)
    console.log(`hello,${name},course is ${course}`);
    
    1. 函数
    • 箭头函数
    //传统写法
    function hello(name) {
        console.log(`Hello,${name}!`);
    }
    //ES6写法
    const Hello = (name) => {
        console.log(`Hello,${name}!`);
    }
    setTimeout(() => {
        console.log('1秒后执行');
    }, 1000);
    hello("韩贵和");
    
    • 如果函数体只有一句return 函数大括号可以省略
    const double = x => x * 2;
    console.log(double(5));
    
    • 带默认参数箭头函数
    const hello = (name = "Han") => {
        console.log(`Hello,${name}`);
    };
    hello();
    hello("韩贵和");
    
    • 传入数组参数
    function hello(name1, name2) {
        console.log(name1, name2);
    }
    
    let arr = ['Han', "韩贵和"];
    //传统传入数组参数方法
    hello.apply(null, arr);
    //ES6写法 使用...展开符
    hello(...arr);
    

    对象基础、解构

    1. Object扩展
    • Object.keys、values、entries
    obj = {name: 'Han', course: "WhatTheHan"};
    console.log(Object.keys(obj));
    console.log(Object.values(obj));
    console.log(Object.entries(obj));
    
    • 对象方法简写,计算属性
    const obj = {
        name:"Han",
        hello:function () {},
        //函数简写
        Hello(){}
    };
    
    • 展开运算符(不是ES6标准)
    const obj = {name:'Han',course:"Hello"};
    const obj2={type:'name',name:'Han'};
    console.log({...obj,...obj2});
    console.log({...obj,...obj2,date:"2017"});
    
    1. 解构赋值
    • 数组解构
    const arr = ["Hello","Han"];
    //传统写法
    let arg1 = arr[0];
    let arg2 = arr[1];
    //ES6语法,批量解构赋值
    let [arg1,arg2] = arr;
    console.log(arg1,'|',arg2);
    
    • 对象解构
    const obj = {name:'whatthehan',course:'React'};
    const {name,course} = obj;
    console.log(name,'|',course);
    

    类、模块化

    1. 提供class的语法糖
    • prototype的语法糖
    • Extends继承
    • Constructor构造函数
    class Han{
        constructor(){
            //构造函数
            this.name='HanGH';
        }
        sayHello(){
            console.log(`Hello,${this.name} !`);
        }
    }
    const app = new Han();
    app.sayHello();
    
    1. 新的数据结构
    • Set ,元素不可重和
    • Map,对象扩展
    • Symbol,生成不重复变量
    1. 模块化
    • ES6中自带了模块化机制,告别sea.js和require.js
      • Import , import {}
      • Export , Export default
      • Node 现在不支持,还需要require来加载文件

    其他

    1. 对象扩展符、函数绑定
    2. 装饰器
    3. Async await
    4. Promise
    5. 迭代器和生成器
    6. 代理Proxy

    相关文章

      网友评论

          本文标题:ES6基础

          本文链接:https://www.haomeiwen.com/subject/slbxixtx.html