ES6基本语法和Vue简单实例

1.ES6入门

1.1定义变量

1.1.1用const定义常量

//用const定义一个常量
    const a = 100;

常量就是不会变化的。你强行改变它的值会报错。ES5中不管常量和变量，都是用var定义。

1.1.2用let取代var，定义变量

  for (var i = 0; i < 4; i++) {
      console.log(i)
  }
  console.log("我在循环外:"+i)

使用var定义的循环域里的变量i，在循环域外面居然可以打印出来。这就是变量越界。不太好。规则严格的语言都不会允许变量越界的。

  for (let i = 0; i < 4; i++) {
      console.log(i)
  }
  console.log("我在循环外:"+i)

使用let定义变量，可以防止变量越界。

1.2字符串扩展

1.2.1三个关于字符串的方法

 //三个方法
    const str = "hello es6"
    console.log(str.includes('llo'))
    console.log(str.startsWith('hello'))
    console.log(str.endsWith('es6'))

1.2.2长字符串的新写法

  //长字符串，键盘左上角，常用于拼接长的html代码
    const content = `
        <div>asdfasdf<div>
        asdfasdf
    `
    console.log(content)

这个可以用来写长段的html片段，很好用。

这个点叫做分隔符，在mysql的sql语句里是转义符

https://blog.csdn.net/freshmen2016/article/details/86615651

1.3解构表达式

1.3.1解构简单数组

  // 解构简单数组
    const str = [10,20,30]
    const [x,y,z] = str
    console.log('x='+x)
    console.log('y='+y)
    console.log('z='+z)

1.3.2解构对象

// 解构 对象
    let person = {name:"yang", age : 22}
    const {name,age} = person
    console.log('name='+name)
    console.log('age='+age)

1.3.3解构对象并起别名

   //解构对象并起别名
    const {name:aaa,age:bbb}=person
    console.log('aaa='+aaa)
    console.log('bbb='+bbb)

1.4函数的优化

1.4.1函数传统写法

    /**
     * 函数写法
     * @param a
     * @param b
     */
   function fun1(a,b){
       b = b || 1    //传统写法，给b来个默认值1

       console.log("我是一个方法")
       console.log(a/b)
   }

1.4.2赋默认值

function fun2(a,b=1){//es6赋默认值

       console.log("我是一个方法")
       console.log(a/b)
   }

1.4.3箭头函数

// es6新的定义函数方式1，箭头函数
   let fun3 = (a,b) =>{
       console.log(a)
       console.log(b)
   }

// 单参数
   let fun4 = a =>{

   }

1.4.4函数作为一个对象的属性

   /**
     * 对象写法
     */
    person={
        name : "zhangsan",
        eat1 : function(food){
            console.log(this.name + "吃了" + food)
        },
        eat2 : food => console.log(person.name + "吃了" + food),//
        eat3(food){  //这种写法最优美
            console.log(this.name + "吃了" + food)
        }
    }
    person.eat1('苹果')
    person.eat2('橘子')
    person.eat3('香蕉')

eat1()是传统写法、eat2()是箭头函数、eat3()是最简洁优雅的写法

1.4.5解构表达式传参

/**
     * 箭头函数结合解构表达式
     */
    const p = {
        name:"lisi",
        age:30
    }
    const fun5 = pp => console.log(pp.name)      //一般传参
    //解构表达式，传参，因为p有可能是非常复杂的对象，但是函数只需要某几个属性，没必要把一整个对象都传过来
    const fun6 = ({name}) => console.log(name)

    fun6(p)

一个函数传入的参数如果是很复杂的对象，而方法只需要该对象的其中几个属性，没必要把整个对象传进来，可以使用解构表达式，把该对象的某几个参数传进来。使代码更加优雅。

1.5map和reduce

    /**
     * map方法就是把一个数组经过一个函数处理后，生成一个新的数组
     * @type {number[]}
     */
    let arr = [10,20,30]
    const arr2 = arr.map( a => a * 10)
    console.log(arr2)

    /**
     * reduce函数
     *      会把数组内的元素从左到右依次按函数处理一遍，结果作为下次处理的第一个参数数
     */
    const ret = arr.reduce((a,b)=>a+b)
    const ret2 = arr.reduce((a,b)=>a+b,100)  //100作为第一次执行的参数a
    console.log(ret);
    console.log(ret2);

这俩函数和java8的stream流函数很像。最主要的作用就是不需要程序员自己写迭代了，代码更简洁。

1.6对象扩展

1.6.1声明一个对象

person={
        name:'yang',
        age:'22',
        sex:'男',
        address:'Beijing'
    }

1.6.2keys方法，把person对象里的所有key拿出来，生成一个数组

//keys方法，把person类里所有的key拿出来，作为一个数组
    const keyArr = Object.keys(person)
    console.log('keys:'+keyArr)

1.6.3values方法，把person对象里的所有值，拿出来生成一个数组

//values,把person的值作为一个数组
    const valueArr = Object.values(person)
    console.log('values:'+valueArr)

1.6.4assign函数，把一个解构表达式，赋给对象

  //assign，把一个解构表达式，赋给某个对象
    console.log(Object.assign(person,{long:"20cm"}))
    console.log(Object.assign(person,{long:"20cm"},{name:"wang"}))
    console.log(Object.assign(person,{long:"20cm"},{name2:"wang"},{name3:"wang"}))

1.7数组扩展

1.7.1声明两个数组

let arr = [1,2,3,4,5,6,7,8,9]
let arr2 = [{name:"wang",age:22},{name:"aa",age:11},{name:"bb",age:33}]

1.7.2find函数

//find函数
    let result1 = arr.find(a=>a==8)
    console.log(result1)
    let result2 = arr2.find(a=>a.name=='wang')
    console.log(result2)

就是把元素拿出来。

1.7.3findIndex函数

//findIndex函数
    let index1 = arr.findIndex(a=>a==8)
    console.log(index1)
    let index2 = arr2.findIndex(a=>a.name=='wang')
    console.log(index2)

把元素下标拿出来，第一个元素是0。

1.7.4includes函数

//includes函数，是否包含，返回bool类型，注意只适用于基本类型数组，不适用于对象数组
    //所以arr2用不了
    let flag1 = arr.includes(8)
    console.log(flag1)
    //引用找不到
    let flag2 = arr2.includes({name:'wang',age:22})
    console.log(flag2)

arr2这种引用数组，不能用这个方法。

二、VUE入门实例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
</head>
<body>

    <!-- vue对象的html模板-->
    <div id="app">

        <!--数据双向绑定-->
        <input type="text" v-model="age">

        <!--按钮绑定事件-->
        <input type="button" value="点我加1" v-on:click="age++"><!--js表达式-->
        <input type="button" value="点我加2" v-on:click="add2()"><!--vue里定义的方法-->

        <!--可以用v-text或v-html代替插值表达式 ,插值表达式在chrome调成slow 3G就会用户不友好-->
        <h1>大家好，我是<span v-text="name"></span>{{name}}，我{{age}}<span v-html="redName"></span></h1>
    </div>
</body>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 初始化一个vue实例
    const app = new Vue({
        el:"#app",
        data:{
            name:"Cristiano",
            age:99,
            redName:"<span style='color:red;'>刘德华</span>"
        },
        methods:{
            add2(){
                this.age+=2     //要调用vue实例里的数据和方法，都必须加上this.
            }
        },
        created() {     //钩子函数，也就是生命周期函数
            this.age=1000
        }
    })
</script>
</html>