Java前端Vue的开始

Vue的ES6语法以及一些新的特性

let和const命令

let

之前，js定义变量只有一个关键字为：var ；
这样就会出现一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。
例如 js 中有一块这样的循环：

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外：" + i)

打印的结果确实：

循环中的 i 去能在循环外出现 ！！！

此时就需要 let 关键字了
let: 定义局部变量。

    // 通过for循环，在控制台打印0-4
    for (let i = 0; i < 5; i++) {
        console.log(i)
    }
    console.log("fro循环外的i:"+i)

但此时呢，let 会出错，没关系我们有解决的方案：

切换为 ECMAScript6 即可；

现在我们再执行循环的时候浏览器就会告诉我们应为无法获取该变量，系统就会报错；

const

const 声明的变量是常量，不能被修改

面试题：请你说说var、let、const的区别？

答：var是es3中定义变量的关键字，他会将局部变量串为全局变量;

​ let是es6中新增的关键字，定义局部变量;

​ const是定义常量;

字符串扩展

string的原始的方法有哪些？
indexOf : 返回字符串的索引

lastIndexOf : 返回字符串的最后的索引

length ：获取字符串长度
substr(i,v) : 从第i个索引开始截取v个长度的字符

substring(i,v) : 从第i个位置截取到第v个位置(不包含v)

charAt(i) : 获取第i个索引处的字符

concat : 字符串连接

新添的扩展：
ES6为字符串扩展了几个新的API：
includes() ：返回布尔值，表示是否找到了参数字符串。
startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。
模拟：

`` 与 " " 区别

`` ： 可支持换行；
" " : 不管代码中是否整齐，在输出的时候只有一行；

// 模板字符串
    var str =`
       hello aaa
       hello bbb
       hello ccc
    `

    var str2 = "hello AAA" +
               "hello BBB" +
               "hello CCC"

输出：

解构表达式

数组解构：
例：添加一个数组

let arr = [1,2,3]

正常获取：

解构：进行赋值

let [x,y,z] = arr

解开：

对象解构：
例：添加一个对象

    // 定义一个对象
    let person = {
        name:"张三",
        age:"19",
    }

正常获取：

解构：

let {name,age} = person

解构之后获取：

函数优化

函数的简写方式：函数参数默认值
在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：

// 定义一个加法的方法，传入两个参数a,b，计算a+b的结果，并返回 ；如果b为空，则给b赋默认值1
//传统做法
function add1(a,b) {
    if(b==null){
        b=1;
    }
    return a+b;
}

//传统改进写法一
function add2(a,b) {
    // 当b的值为null或者undefined的时候，返回结果为false
    if(!b){
        b=1;
    }
    return a+b;
}

// 传统改进写法二
function add3(a,b) {
    b = b || 1;//当b不为空的时候，就直接参加计算，当为空的时候，赋值为1
    return a+b;
}

// ES6 新增的改进写法
function add4(a, b = 4) {
    return a+b;
}

箭头函数

箭头函数
ES6中定义函数的简写方式：
只有一个参数时

var print = function (a) {
    console.log(a);
}
// 简写为：
var print = a => console.log(a);

/**
   * 返回结果
   */
  var print3 = function (a) {
      return a+10
  }
    // 使用箭头函数改写，如果只有一行代码，这号代码有返回值，可以省略return
    var print4 = a => a+10

  /**
   * 两个参数
   */
  var print5 = function (a,b) {
      return a+b
  }
  // 通过箭头函数改写
  // 函数名  参数 函数体  返回值的return可以省略
    var print6 = (a,b) => a+b

对象的函数属性简写

比如一个Person对象，里面有eat方法：

let person = {
    name:"lucy",
    eat1:function (food) {
        console.log(this.name+"1正在吃"+food);
    },
    eat2: food => console.log(this.name+"2正在吃"+food),// 在这种情况下，无法通过this访问name
    eat3(food){
        console.log(this.name+"3正在吃"+food)
    },
    eat4: food => console.log(person.name+"4正在吃"+food),// 在这种情况下，无法通过this访问name

}

map方法

map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
例：有一个字符串数组，我们希望转为int数组在这里插入代码片

let arr = ['1','20','-5','3'];
console.log(arr)

arr = arr.map(s => parseInt(s));

console.log(arr)