ES6语法（简单明了，速度掌握）

最新推荐文章于 2024-04-05 13:13:00 发布

原创最新推荐文章于 2024-04-05 13:13:00 发布 · 779 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ES6语法

本文深入探讨ES6语法特性，包括let、const变量声明、对象简写及箭头函数，强调其在Vue组件开发中的应用。同时，剖析Vue对象生命周期及axios库在数据交互中的作用。

ES6语法

1.ES6语法的介绍

ES6是JavaScript语言的一个新版本，也可以叫做ES2015，ES6在ES5的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且Vue组件开发中还是很常用的。

2.变量的声明

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是使用var关键字，let和const与var的区别在于，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const声明的是常量，不能修改。

示例：

// 在ES5中，声明变量使用var
console.log(iNUM1);

var iNum = 10 ;

结果为undefined，因为使用var声明的变量，有预解析，所以是未定义类型，不会报错

// 在ES6中，声明变量可以使用let
console.log(iNum2);

let iNum2 = 20;

检查后会发现报错：iNUM2 is not defined，因为使用let声明的变量，没有预解析，所以会提示这个变量未被定义。

// 在ES6中，使用const关键字声明的是常量
const iNum3 = 10;
iNum3 = 20;

检查后会发现报错：Assignment to constant variable，因为使用const声明的是常量，不允许重新赋值。

ES6对象的简写格式：

// ES5对象的写法
var oObj = {
    name:"wtt",
    age:22,
    address:"fux",
    fnAddress:function(){
        alert(this.address);
    }
}
// 调用
oObj.fnAddress();

// ES5还可以写成：
// 定义对象
var oObj ={};
// 为对象添加属性和方法
oObj.name = "wtt";
oObj.age = 22;
oObj.fnGetAge = function(){
    alert(this.age);
}
// 调用
oObj.fnGetAge();


// ES6的写法
// 定义两个变量 分别为name ,age
var name = "wtt";
var age = 22;
// 定义一个方法fnGetName
fnGetName = function(){
    alety("name")
};
// 创建对象
var oObj = {
    name,
    age,
    fnGetName,
}
// 调用属性和方法
alert(oObj.age);
oObj.fnGetName();

// 注意：实现简写必须保证变量名或方法名和属性一致。

ES6的箭头函数
作用：定义函数一种新方式，改变this的指向。
定义函数的新方式

// 无参数无返回值
var fnTest = ()=>{
    alert("无参数无返回值")
}
// 有参数无返回值
var fnTest = a =>{
    alert(a);
}
// 有参数有返回值
var fnTest = (a,b) =>{
    return a + b;
}

主要作用是改变this的指向

如果函数嵌套层级比较深的时候，this的指向就变成了window，这时候就可以通过箭头函数来解决这个指向的问题。

// 定义一个对象
var oObj = {
    name:"小明呗",
    fnAlert:function(){
        setTimeout()=>{
            alert(this.name);
        },1000};
    }
}
// 调用方法
oObj.fnAlert()

六、Vue对象示例的生命周期

1.首先了解一下对象实例的生命周期

[外链图片转存失败(img-BIoVwmNV-1566039758770)(file:///C:/Users/%E6%B8%85%E9%A3%8E/Desktop/%E5%B0%B1%E4%B8%9A%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5%E8%AF%BE%E4%BB%B6/images/b-03vueassets/life.png)]

2.各个生命周期函数的作用

其实就是一个从创建----加载----修改—销毁的过程。

beforeCreate：vm对象实例化之前
created：vm对象实例化之后
beforeMount：vm对象作用标签之前
mounted：vm对象作用标签之后（初始化数据使用，这个时期可以完成对象属性的修改、数据的修改和发送ajax请求）
beforeUpdate：属性或者数据修改之前
updated：属性或者属性修改之后
beforeDestory：对象销毁之前
destoryed：对象销毁之后

七、axios的数据交互

vue.js没有集成ajax功能，需要使用ajax的功能可以使用vue官方推荐的axios.js库来做ajax的交互。

axios的完整写法

1.将axios.js放入当前代码路径下
2.导包 script src = “./js/axios.js”
3.使用axios发送网络请求获取数据

// axios的完整写法
axios({
    method:"get",
    url:"http://www.baidu.com",
    responseType:"json",
})
    .then(function(response){
          console.log(response)
})
    .catch(function(error){
    	  console.log(reeor)
});

// axios也可以先get再post方式
// 执行get请求
// 为给定ID的user创建请求
axios.get('/user?ID=19001')
    .then(function(response){
    	console.log(response)
})
    .catch(function(error){
  		console.log(error)  
})
    
// 上面的请求也可以这样写
axios.get('/user',{
    params:{ID:19001}
})
    .then(function(response){
    	console.log(response)
})
    .catch(function(error){
    	console.log(error)
})
// 执行post请求
axios.post('/user',{
    firstName:'Fred',
    lastName:'Flinstone'
})
    .then(function(response){
    	console.log(response)
})
    .catch(function(error){
    	console.log(error)
})