针对之前学习 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)的更多相关文章

  1. Vue 2.0 入门系列(15)学习 Vue.js 需要掌握的 es6 (2)

    类与模块 类 es6 之前,通常使用构造函数来创建对象 // 构造函数 User function User(username, email) { this.username = username; ...

  2. vue 快速入门 系列 —— 初步认识 vue

    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

  3. Entity Framework 6.0 入门系列 第一篇

    Entity Framework 6.0 入门系列 第一篇 好几年前接触过一些ef感觉不是很好用,废弃.但是 Entity Framework 6.0是经过几个版本优化过的产物,性能和功能不断完善,开 ...

  4. ABP入门系列目录——学习Abp框架之实操演练

    ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WE ...

  5. 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记

    VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...

  6. Vue 2.0入门基础知识之全局API

    3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...

  7. Vue 2.0入门基础知识之内部指令

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...

  8. webpack3.10.0(入门系列基本概念1)

    一.概念 webpack的核心是一个用于现代JavaScript应用程序的静态模块打包程序.当webpack处理您的应用程序时,它会递归地构建一个依赖图,其中包含应用程序所需的每个模块,然后将所有这些 ...

  9. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

随机推荐

  1. Python代码2转3、3转2的方法

    众所周知,Python2和Python3不兼容. 那么,假如遇到了超大的工作量,我们是不是需要一行一行地手动去改呢? 当然不是. (一)2转3 Python3.7(顺便提一句,现在装3.7发现好像安装 ...

  2. Linux设置程序开机自启动

    注意: 作者测试时,Linux版本为RedHat6,同时应用在CentOS6应该也可以(作者未实测,但有同事在CentOS6上使用可行),系统版本的不同,可能造成操作上的差异(CentOS7就与Cen ...

  3. 代码检测docker-sonarqube

    gitlab-ce + gitlab-runner + sonarqube,在提交代码时对代码质量进行检测,对不符合要求的代码不允许提交到gitlab version: '3.1' services: ...

  4. net core 下 接受文件 测试

    /* IFormFileCollection Files 再Request对象下的From对象下的Files对象 public interface IFormFileCollection : IRea ...

  5. HDU 2795 Billboard (线段树单点更新 && 求区间最值位置)

    题意 : 有一块 h * w 的公告板,现在往上面贴 n 张长恒为 1 宽为 wi 的公告,每次贴的地方都是尽量靠左靠上,问你每一张公告将被贴在1~h的哪一行?按照输入顺序给出. 分析 : 这道题说明 ...

  6. TCP,UDP,HTTP

    使用图表非常系统介绍了TCP和UDP的区别 https://blog.fundebug.com/2019/03/22/differences-of-tcp-and-udp/ 举了一个TCP/IP通讯的 ...

  7. go语言系列--输出正弦函数

    实验所用到的标准库和包 库与包之间的理解可以类比成:数据库种的库和表 库名 作用 image 常见图形格式的访问及生成 log 日志记录库 math 数学库 os 操作系统平台不依赖平台操作封装 查看 ...

  8. [CSP-S模拟测试]:简单的括号序列(组合数)

    题目传送门(内部题82) 输入格式 一行一个字符串$ss$,保证$ss$中只包含$'('$和$')'$. 输出格式 一行一个整数,表示满足要求的子序列数对$10^9+7$的结果. 样例 样例输入1: ...

  9. mysqli使用localhost问题

    <?php $mysqli = new mysqli('localhost', 'root', '123456', 'mysql'); if ($mysqli->connect_error ...

  10. STOMP协议详解

      STOMP协议详解 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.STOMP协议介绍 STOMP即Simple (or Streaming) T ...