vue项目开发前的es6的知识储备
let命令 学习笔记
1、let所声明的变量,只在let
命令所在的代码块内有效。
2、不存在变量提升:所声明的变量一定要在声明后使用,否则报错。
一定要先声明,再去使用。let x=x;这样就是错误的
ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
3、不允许重复声明:let不允许在相同作用域内,重复声明同一个变量。即不能在函数内部重新声明参数。
块级作用域
1、为什么需要块级作用域?
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
第一种场景,内层变量可能会覆盖外层变量。
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
}
f(); // undefined
第二种场景,用来计数的循环变量泄露为全局变量。下面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。
var s = 'hello';
for (var i = ; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); //
2、ES6 的块级作用域:外层作用域无法读取内层作用域的变量。内层作用域可以定义外层作用域的同名变量。
下面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是10。
function f1() {
let n = ;
if (true) {
let n = ;
console.log(n);
}
console.log(n); //
}
f1()
块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。
// IIFE 写法
(function () {
var tmp = ...;
...
}()); // 块级作用域写法
{
let tmp = ...;
...
}
块级作用域用法:考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
// 函数声明语句
{
let a = 'secret';
function f() {
return a;
}
} // 函数表达式
{
let a = 'secret';
let f = function () {
return a;
};
}
ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。
3、do 表达式
本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值。想要解决方法:使得块级作用域可以变为表达式,也就是说可以返回值,办法就是在块级作用域之前加上do,使它变为do表达式,然后就会返回内部最后执行的表达式的值。
let x = do {
let t = f();
t * t + ;
};
const 命令
const
声明一个只读的常量。一旦声明,常量的值就不能改变。const
一旦声明变量,就必须立即初始化,不能留到以后赋值。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
const
命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
const
声明的常量,也与let
一样不可重复声明。
箭头函数
1、省略了function,花括号‘{}’用‘=>’代替了。这种写法更简洁了。
2、优点,就是函数体内的this的指向始终是指向定义它所在的对象,而不会指向调用它的对象,我们知道es5中的函数是谁执行它,它就指向谁。
ES6---数组array新增方法
参考:http://blog.csdn.net/wbiokr/article/details/65939582
Promise 对象
一、Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。Promise
对象是一个构造函数,用来生成Promise
实例.
补充知识:与 ‘new’ 运算符一起使用用来创建对象并初始化对象的‘函数’就是构造函数; 实例化(在面向对象的编程中,通常把用类创建对象的过程称为实例化。)对象就是创建对象的过程!
var request = new XMLHttpRequest();
“new XMLHttpRequest();” 这句话就是一个标准的构造函数!我们 “var” 声明了一个 “request” 对象,用构造函数 “new XMLHttpRequest();” 来初始化这个 “request” 对象为它赋初始值。
所谓Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
二、Promise
对象有以下两个特点。
(1)对象的状态不受外界影响。Promise
对象代表一个异步操作,有三种状态:pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise
对象的状态改变,只有两种可能:从pending
变为fulfilled
和从pending
变为rejected
。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise
对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
Promise
对象有缺点:
1,无法取消Promise
,一旦新建它就会立即执行,无法中途取消。
2,如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。
3,当处于pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
下面代码创造了一个Promise
实例。
var promise = new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
下面是一个Promise
对象的简单例子。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
} timeout(100).then((value) => {
console.log(value);
});
上面代码中,timeout
方法返回一个Promise
实例,表示一段时间以后才会发生的结果。过了指定的时间(ms
参数)以后,Promise
实例的状态变为resolved
,就会触发then
方法绑定的回调函数。一般情况不调用setTimeout指定时间,Promise 新建后就会立即执行。
三、Promise.prototype.then()
then
方法返回的是一个新的Promise
实例(注意,不是原来那个Promise
实例)。因此可以采用链式写法,即then
方法后面再调用另一个then
方法。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
console.log("resolved: ", comments);
}, function funcB(err){
console.log("rejected: ", err);
});
上面代码中,第一个then
方法指定的回调函数,返回的是另一个Promise
对象。这时,第二个then
方法指定的回调函数,就会等待这个新的Promise
对象状态发生变化。如果变为resolved
,就调用funcA
,如果状态变为rejected
,就调用funcB
。如果采用箭头函数,上面的代码可以写得更简洁。
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("resolved: ", comments),
err => console.log("rejected: ", err)
);
四、Promise.prototype.catch()
Promise.prototype.catch
方法是.then(null, rejection)
的别名,用于指定发生错误时的回调函数。
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});
上面代码中,getJSON
方法返回一个 Promise 对象,如果该对象状态变为resolved
,则会调用then
方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected
,就会调用catch
方法指定的回调函数,处理这个错误。另外,then
方法指定的回调函数,如果运行中抛出错误,也会被catch
方法捕获。
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 处理前面三个Promise产生的错误
});
Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch
语句捕获。
一般来说,不要在then
方法里面定义Reject状态的回调函数(即then
的第二个参数),总是使用catch
方法。
// bad
promise
.then(function(data) {
// success
}, function(err) {
// error
}); // good
promise
.then(function(data) { //cb
// success
})
.catch(function(err) {
// error
});
上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then
方法执行中的错误,也更接近同步的写法(try/catch
)。因此,建议总是使用catch
方法,而不使用then
方法的第二个参数。
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错,因为x没有声明
resolve(x + 2);
});
}; someAsyncThing().then(function() {
console.log('everything is great');
}); setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
//
上面代码中,someAsyncThing
函数产生的 Promise 对象,内部有语法错误。浏览器运行到这一行,会打印出错误提示ReferenceError: x is not defined
,但是不会退出进程、终止脚本执行,2秒之后还是会输出123
。这就是说,Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是“Promise 会吃掉错误”。
一般总是建议,Promise 对象后面要跟catch
方法,这样可以处理 Promise 内部发生的错误。catch
方法返回的还是一个 Promise 对象,因此后面还可以接着调用then
方法。
五、Promise.all()
Promise.all
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
var p = Promise.all([p1, p2, p3]);
Promise.all
方法接受一个数组作为参数,p1
、p2
、p3
都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve
方法,将参数转为 Promise 实例,再进一步处理。
p的状态由p1、p2、p3决定,分成两种情况:
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
六、Promise.race()
Promise.race
方法同样是将多个Promise实例,包装成一个新的Promise实例。
var p = Promise.race([p1, p2, p3]); 上面代码中,只要p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数。
七、Promise.resolve()
有时需要将现有对象转为Promise对象,Promise.resolve
方法就起到这个作用。
八、模块语法
1、ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
ES6 模块不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入。
// ES6模块
import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs
模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。
2、严格模式
- 变量必须声明后再使用
- 函数的参数不能有同名属性,否则报错
- 不能使用
with
语句 - 不能对只读属性赋值,否则报错
- 不能使用前缀0表示八进制数,否则报错
- 不能删除不可删除的属性,否则报错
- 不能删除变量
delete prop
,会报错,只能删除属性delete global[prop]
eval
不会在它的外层作用域引入变量eval
和arguments
不能被重新赋值arguments
不会自动反映函数参数的变化- 不能使用
arguments.callee
- 不能使用
arguments.caller
- 禁止
this
指向全局对象 - 不能使用
fn.caller
和fn.arguments
获取函数调用的堆栈 - 增加了保留字(比如
protected
、static
和interface
)
尤其需要注意this的限制。ES6 模块之中,顶层的this指向undefined,即不应该在顶层代码使用this。
3、export 命令
模块功能主要由两个命令构成:export
和import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export
关键字输出该变量。下面是一个 JS 文件,里面使用export
命令输出变量。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = ; export {firstName, lastName, year};
export
命令除了输出变量,还可以输出函数或类(class)。下面代码对外输出一个函数multiply
。
export function multiply(x, y) {
return x * y;
};
export
输出的变量就是本来的名字,但是可以使用as
关键字重命名。
function v1() { ... }
function v2() { ... } export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
上面代码使用as
关键字,重命名了函数v1
和v2
的对外接口。重命名后,v2
可以用不同的名字输出两次。需要特别注意的是,export
命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 写法一
export var m = 1; // 写法二
var m = 1;
export {m}; // 写法三
var n = 1;
export {n as m};
上面三种写法都是正确的,规定了对外的接口m
。其他脚本可以通过这个接口,取到值1
。它们的实质是,在接口名与模块内部变量之间,建立了一一对应的关系。function
和class
的输出,也必须遵守这样的写法。
另外,export
语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
上面代码输出变量foo
,值为bar
,500毫秒之后变成baz
。export
命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错
3、import 命令
使用export
命令定义了模块的对外接口以后,其他 JS 文件就可以通过import
命令加载这个模块。
// main.js
import {firstName, lastName, year} from './profile'; function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
import
命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js
)对外接口的名称相同。
vue项目开发前的es6的知识储备的更多相关文章
- Vue项目开发前的准备工作,node的安装,vue-cli的安装
一.安装node 1- 点击这里进入node官网下载 2- 3- 下载完成是这样的 4- 双击打开进行安装,一路next,安装完成是这样 5- 打开cmd进入安装node的文件夹,输入node ...
- Vue项目开发相关问题总结
Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- Vue项目开发最新、最全代码规范文档
Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337 一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...
- Vue 项目开发
目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...
- Vue项目开发目录结构
最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两 ...
- vue项目开发时怎么解决跨域
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- VUE项目开发流程
前期准备 安装npm 安装webpack\vue-cli(2.9.6版本--版本不同可能会导致以下一些目录结构以及错误解决办法不符合实际情况) 创建项目 初始化创建项目,项目名称.项目描述.拥有者等等 ...
- vue项目开发遇见bug
1.附件的点击问题,与原生交互的问题: 原生的调用对象和vue的调用对象不同,注意原生方法的位置. 2.10.2以下fetch请求数据的问题(检查是否可以使用 can i use) 10.2以下ios ...
随机推荐
- Hadoop DistributedCache使用案例
背景 公司数据处理具有两个计算框架,单机框架和MR框架.眼下我已经抽象出一套API interface, 供业务计算开发者使用. 并分别在两个计算框架下实现了API的运行调度.应用开发者有时间须要通过 ...
- Java对象的创建过程
//TODO https://www.cnblogs.com/chenyangyao/p/5296807.html
- Elasticsearch - 搜索类型与搜索位置
一.搜索类型: Elasticsearch同意用户选择其所希望的处理查询的方式. 由于存在一些不同的情形,对其使用不同的搜索类型才是合适的.为了控制查询的运行方式,我们能够在请求中使用search_t ...
- Hackrank Candies DP
题目链接:传送门 题意: n个学生站一行,老师给每个学生发至少一个糖 相邻学生,a[i] > a[i-1] 的话,那么右边学生的糖一定要发得比左边学生的糖多 问你满足条件这个老师总共最少的发多少 ...
- HDU3038 How Many Answers Are Wrong —— 带权并查集
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3038 How Many Answers Are Wrong Time Limit: 200 ...
- mongodb 关闭服务 mongod -f /root/mongodb/bin/xx.conf --shutdown
/root/mongodb/bin/mongod -f /root/mongodb/bin/xx.conf --shutdown
- 配置JDK环境变量配置及path和classpath的作用
1.环境变量配置 用鼠标右击“我的电脑”->属性->高级->环境变量 JAVA_HOME :D:\Program Files\Java\jdk1.6.0_12(JDK安装路径) Pa ...
- robot设置chrome mobile emulation
https://www.testwo.com/article/361 http://blog.csdn.net/huilan_same/article/details/52856200 http:// ...
- Overview of MIDI
东拼西凑的介绍 MIDI which means Musical Instrument Digital Interface, introduced in 1980's provided a inter ...
- 关于XAMPP Apache无法启动问题解决方案
安装好XAMPP后,启动Apache服务启动失败,然后从xampp安装目录下执行apache_start.bat文件,如下图 显示443端口被占用. 解决方法: 启动cmd,输入netstat -a ...