Vue 2.0 入门系列(14)学习 Vue.js 需要掌握的 es6 (1)
针对之前学习 Vue
用到的 es6
特性,以及接下来进一步学习 Vue
要用到的 es6
特性,做下简单总结。
var、let 与 const
var 与 let
es6
之前,JavaScript 并没有块级作用域,所谓的块,就是大括号里面的语句所组成的代码块,比如
function fire(bool) {
if (bool) {
var foo = "bar";
}
console.log(foo);
}
fire(true); //=> bar
虽然变量 foo
位于 if
语句的代码块中,但是 JavaScript 并没有块级作用域的概念,因此被添加到了当前的执行环境 - 即函数中,在函数内都可以访问到。
另外一个令人困惑的地方是变量提升:
function fire(bool) {
if (bool) {
var foo = "bar";
} else {
console.log(foo);
}
}
fire(false); //=> undefined
我们都知道,直接访问一个未定义的变量,会报错:
console.log(nope); //=> Uncaught ReferenceError: nope is not defined
但是在上述的例子中,会返回 undefined
。也就是说,变量的定义被提升到了作用域的顶部,等价于:
function fire(bool) {
var foo;
if (bool) {
foo = "bar";
} else {
console.log(foo);
}
}
fire(false);
而在 JavaScript 中,声明但是未赋值的变量会被赋值为 undefined
,因此,结果输出 undefined
。
为了解决上述问题,引入了 let
关键字,let
定义的变量。
首先,let
定义的变量只在代码块内有效:
function fire(bool) {
if (bool) {
let foo = "bar";
}
console.log(foo);
}
fire(true); //=> Uncaught ReferenceError: foo is not defined
其次, let
定义的变量不存在变量提升:
function fire(bool) {
if (bool) {
let foo = "bar";
} else {
console.log(foo);
}
}
fire(false); //=> Uncaught ReferenceError: foo is not defined
因此,使用 let
,上述问题完全解决,这也告诉了我们,应当尽可能的避免用 var
,用 let
来代替,除非你需要用到变量提升。
const
const
与 let
的基本用法相同,定义的变量都具有块级作用域,也不会发生变量提升。不同的地方在于,const
定义的变量,只能赋值一次。
对于基本类型来说,需要通过赋值来改变其值,因此 const
定义之后就相当于无法改变:
const a = 1;
a = 2; // Uncaught TypeError: Assignment to constant variable.
++a; // Uncaught TypeError: Assignment to constant variable.
对于数组和对象来说,值是可以改变的:
const arr = ["a","b","c"];
arr.push("d");
arr.pop();
那么什么时候使用 const
呢? 在一些不需要重复赋值的场合可以用:
const provinces = [];
const months = [];
总而言之,多用 let
和 const
,少用 var
。
箭头函数
在 Vue 中,使用箭头函数的最大好处就是可以让 this
指向 Vue 实例:
var vm = new Vue({
el:'#root',
data:{
tasks:[]
},
mounted(){
axios.get('/tasks')
.then(function (response) {
vm.tasks = response.data;
})
}
});
由于回调函数的 this
指向全局对象 window
,因此,我们需要通过 vm
来访问实例的方法,如果使用箭头函数,则可以写成:
new Vue({
el:'#root',
data:{
tasks:[]
},
mounted(){
axios.get('/tasks')
.then(response => this.tasks = response.data);
}
});
箭头函数的 this
对象始终指向定义函数时所在的对象,相当于:
var vm = new Vue({
el:'#root',
data:{
tasks:[]
},
mounted(){
var that = this;
axios.get('/tasks')
.then(function (response) {
that.tasks = response.data;
})
}
});
模板字符串
模板字符串为 Vue 的组件模板定义带来了巨大的便利,在此之前,需要这样定义一个模板:
let template = '<div class="container"><p>Foo</p></div>';
如果要写成多行,可以用反斜杠:
let template = '<div class="container">\
<p>Foo</p>\
</div>';
或者使用数组形式:
let template = [
'<div class="container">',
'<p>Foo</p>',
'</div>'
].join('');
如果要嵌入变量,可以写成:
let name = "jack";
let template = `<div class="container"><p>` + name + '</p></div>';
而使用模板字符串,则可以方便的在多行里面编写模板:
let template = `
<div class="container">
<p>Foo</p>
</div>
`
由于模板字符串的空格和换行会被保留,为了不让首行多出换行符,可以写成:
let template = `<div class="container">
<p>Foo</p>
</div>
`
或者使用 trim()
方法从字符串中移除 前导 空格、尾随空格和行终止符。
let template = `
<div class="container">
<p>Foo</p>
</div>
`.trim();
模板字符串嵌入变量或者表达式的方式也很简单:
let name = "jack";
let template = `
<div class="container">
<p>${name} is {100 + 100}</p>
</div>
`.trim();
默认参数
在 es6
之前,JavaScript 不能像 PHP 那样支持默认参数,因此需要自己手动定义:
function takeDiscount(price, discount){
discount = discount || 0.9;
return price * discount;
}
takeDiscount(100);
es6
则允许定义默认参数
function takeDiscount(price, discount = 0.9){
return price * discount;
}
takeDiscount(100);
甚至可以以函数形式传递参数:
function getDiscount(){
return 0.9;
}
function takeDiscount(price, discount = getDiscount()){
return price * discount;
}
takeDiscount(100);
rest 参数
先从函数的参数传递说起:
function sum(a,b,c){
let total = a + b + c;
return total;
}
sum(1, 2, 3);
在 JavaScript 中,函数参数实际上以数组的方式进行传递,参数会被保存在 arguments
数组中,因此上例等价于:
function sum(){
let total = arguments[0] + arguments[1] + arguments[2];
return total;
}
sum(1, 2, 3);
不过 arguments
不单单包括参数,也包括了其他东西,因此没法直接用数组函数来操作 arguments
。如果要扩展成任意多个数值相加,可以使用循环:
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total = total + arguments[i];
}
return total;
}
sum(1, 2, 3, 4, 6);
es6
则提供了 rest 参数来访问多余变量,上例等价于:
function sum(...num) {
let total = 0;
for (let i = 0; i < num.length; i++) {
total = total + num[i];
}
return total;
}
sum(1, 2, 3, 4, 6);
可以以变量形式进行传递:
function sum(...num) {
let total = 0;
for (let i = 0; i < num.length; i++) {
total = total + num[i];
}
return total;
}
let nums = [1, 2, 3, 4, 6];
sum(...nums);
在函数中体内,num
就是单纯由参数构成的数组,因此可以用数组函数 reduce
来实现同样的功能:
function sum(...num) {
return num.reduce( (preval, curval) => {
return preval + curval;
})
}
sum(1, 2, 3, 4, 6);
...
还可以与其他参数结合使用,只需要将其他参数放在前面即可:
function sum(total = 0, ...num) {
return total + num.reduce( (preval, curval) => {
return preval + curval;
});
}
let nums = [1,2,3,4];
sum(100, ...nums);
对象的简写
函数的简写
函数的简写,之前在 Vue
中已经用到过:
Vue({
el: '#root',
data:data,
methods: {
addName: function() {
vm.names.push(vm.newName);
vm.newName = "";
}
}
});
可以简写为:
new Vue({
el: '#root',
data:data,
methods: {
addName() {
vm.names.push(vm.newName);
vm.newName = "";
}
}
});
在组件中频繁用到:
Vue.component('example',{
data(){
return {
};
}
});
属性的简写
let data = {
message: "你好,Vue"
};
var vm = new Vue({
el: '#root',
data:data
})
可以简写成:
let data = {
message: "你好,Vue"
};
var vm = new Vue({
el: '#root',
data
})
也就是说,可以直接在对象中直接写入变量,当函数的返回值为对象时候,使用简写方式更加简洁直观:
function getPerson(){
let name = 'Jack';
let age = 10;
return {name, age};
// 等价于
// return {
// name : name,
// age : age
// }
}
getPerson();
解构赋值
解构赋值可以方便的取到对象的可遍历属性:
let person = {
firstname : "steve",
lastname : "curry",
age : 29,
sex : "man"
};
let {firstname, lastname} = person;
console.log(firstname, lastname);
// 等价于
// let firstname = person.firstname;
// let lastname = person.lastname;
可以将其用于函数传参中:
function greet({firstname, lastname}) {
console.log(`hello,${firstname}.${lastname}!`);
};
greet({
firstname: 'steve',
lastname: 'curry'
});
Vue 2.0 入门系列(14)学习 Vue.js 需要掌握的 es6 (1)的更多相关文章
- Vue 2.0 入门系列(15)学习 Vue.js 需要掌握的 es6 (2)
类与模块 类 es6 之前,通常使用构造函数来创建对象 // 构造函数 User function User(username, email) { this.username = username; ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
- Entity Framework 6.0 入门系列 第一篇
Entity Framework 6.0 入门系列 第一篇 好几年前接触过一些ef感觉不是很好用,废弃.但是 Entity Framework 6.0是经过几个版本优化过的产物,性能和功能不断完善,开 ...
- ABP入门系列目录——学习Abp框架之实操演练
ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WE ...
- 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记
VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- webpack3.10.0(入门系列基本概念1)
一.概念 webpack的核心是一个用于现代JavaScript应用程序的静态模块打包程序.当webpack处理您的应用程序时,它会递归地构建一个依赖图,其中包含应用程序所需的每个模块,然后将所有这些 ...
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
随机推荐
- Python代码2转3、3转2的方法
众所周知,Python2和Python3不兼容. 那么,假如遇到了超大的工作量,我们是不是需要一行一行地手动去改呢? 当然不是. (一)2转3 Python3.7(顺便提一句,现在装3.7发现好像安装 ...
- Linux设置程序开机自启动
注意: 作者测试时,Linux版本为RedHat6,同时应用在CentOS6应该也可以(作者未实测,但有同事在CentOS6上使用可行),系统版本的不同,可能造成操作上的差异(CentOS7就与Cen ...
- 代码检测docker-sonarqube
gitlab-ce + gitlab-runner + sonarqube,在提交代码时对代码质量进行检测,对不符合要求的代码不允许提交到gitlab version: '3.1' services: ...
- net core 下 接受文件 测试
/* IFormFileCollection Files 再Request对象下的From对象下的Files对象 public interface IFormFileCollection : IRea ...
- HDU 2795 Billboard (线段树单点更新 && 求区间最值位置)
题意 : 有一块 h * w 的公告板,现在往上面贴 n 张长恒为 1 宽为 wi 的公告,每次贴的地方都是尽量靠左靠上,问你每一张公告将被贴在1~h的哪一行?按照输入顺序给出. 分析 : 这道题说明 ...
- TCP,UDP,HTTP
使用图表非常系统介绍了TCP和UDP的区别 https://blog.fundebug.com/2019/03/22/differences-of-tcp-and-udp/ 举了一个TCP/IP通讯的 ...
- go语言系列--输出正弦函数
实验所用到的标准库和包 库与包之间的理解可以类比成:数据库种的库和表 库名 作用 image 常见图形格式的访问及生成 log 日志记录库 math 数学库 os 操作系统平台不依赖平台操作封装 查看 ...
- [CSP-S模拟测试]:简单的括号序列(组合数)
题目传送门(内部题82) 输入格式 一行一个字符串$ss$,保证$ss$中只包含$'('$和$')'$. 输出格式 一行一个整数,表示满足要求的子序列数对$10^9+7$的结果. 样例 样例输入1: ...
- mysqli使用localhost问题
<?php $mysqli = new mysqli('localhost', 'root', '123456', 'mysql'); if ($mysqli->connect_error ...
- STOMP协议详解
STOMP协议详解 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.STOMP协议介绍 STOMP即Simple (or Streaming) T ...