ES6新特性

ES6中的箭头函数-解构表达式

<script>

    // 普通函数
    function print(str) {
        console.log(str)
    }

    var print1 = function (str) {
        console.log(str)
    }

    print("abc")
    print1("def")

    /**
     * 只有一个参数的箭头函数
     * print2 函数名
     * a 参数名
     * console.log(a) 业务方法
     */
    let print2 = a => console.log(a)

    print("hello")
    print("hello2")


    // 多个参数的箭头函数
    let sum = (a, b) => console.log(a + b)
    sum(1, 2)

    // 带返回值的箭头函数
    let sum2 = (a, b) => {
        return a + b;
    }
    console.log(sum2(1, 3))

    // 无参的箭头函数
    let sayHello = () => {
        console.log("say hello")
    }

    sayHello()


</script>

ES6函数优化-函数属性的简写

<script>

    let person = {
        name: "jack",
        eat: function (food) {
            console.log(this.name + " 在吃 " + food)
        },
        // 箭头函数中不能使用this 获取属性
        eat2: (food) => {
            console.log(this.name + " 在吃 " + food)
        },
        eat3: (food) => {
            console.log(person.name + " 在吃 " + food)
        },
        // ES6 中的对象属性-函数的简写方式
        eat4(food) {
            console.log(this.name + " 在吃 " + food)
        }
    }
    person.eat("苹果")
    person.eat2("栗子")
    person.eat3("桔子")
    person.eat4("橘子")


    function hello(person) {
        console.log("hello, " + person.name)
    }
    hello(person)

    // 箭头函数和解构表达书结合使用
    let hello2 = ({name}) => {
        console.log("hello, " + name)
    }

    hello2(person)


</script>

ES6中的map reduce方法

<script>
    /**
     * ES6 中数组新增了map reduce方法
     * map 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
     *
     */
    let arr = ['1', '2', '-1', '100']
    console.log(arr)

    let newArr = arr.map(s => parseInt(s));
    console.log(newArr)

</script>

UmiJS

umi 中文可发音为乌米， https://umijs.org/zh/guide/
安装Node.js
安装yarn

npm i yarn tyarn -g 
# tyarn 使用的是npm.taobao.org的源，速度要快一点。-g 是指全局安装

安装umi
tyarn global add umi
终端输入umi 进行测试