vue前戏ES6
es6语法
es6语法:let和const:
{
var a=123;
let b=234;
}
console.log(a);
console.log(b); 浏览器里会只看到123;
而且还会抱一个b is not define的错误
为什么?在{ }局部作用域里面可以找到a变量值?
这是js var的一个坑,一旦定义了就是全局的变量.
var示例:
{
var a=123;
let b=234;
}
var a=234;
console.log(a);
console.log(b);
输出的是234,因为var a=123被覆盖了.
如果还是用var的话,就会有各种各样想不到的坑,不符合我们编程的逻辑
所以es6里面,用let在声明变量有以下特点:
- let声明变量块级作用域
- 不能够重复声明
而且还添加了const声明变量
**一旦声明,立即初始化,不能重复声明.**
var示例二:
1 var a = [];
2 for (var i = 0; i < 10; i++) {
3 a[i] = function () {
4 console.log(i);
5 };
6 }
7 a[6]();
上面代码中,变量i
是var
命令声明的,在全局范围内都有效,所以全局只有一个变量i
。每一次循环,变量i
的值都会发生改变,而循环内被赋给数组a
的函数内部的console.log(i)
,里面的i
指向的就是全局的i
。也就是说,所有数组a
的成员里面的i
,指向的都是同一个i
,导致运行时输出的是最后一轮的i
的值,也就是 10
如果使用let
,声明的变量仅在块级作用域内有效,最后输出的是 6
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]();
上面代码中,变量i
是let
声明的,当前的i
只在本轮循环有效,所以每一次循环的i
其实都是一个新的变量,所以最后输出的是6
。你可能会问,如果每一轮循环的变量i
都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i
时,就在上一轮循环的基础上进行计算
模板字符串:
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
// 普通字符串
`In JavaScript '\n' is a line-feed.` // 多行字符串
`In JavaScript this is
not legal.` console.log(`string text line 1
string text line 2`); // 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义
let greeting = `\`Yo\` World!`;
输入结果:`Yo` World!
箭头函数:
var f = (a) = > {a} //等同于
var f = function(a){
return a;
}
使用箭头函数注意点:
箭头函数有几个使用注意点。
首先看事例:
this指向的是使用它的对象,也就是person对象
var person={
name:'张三',
age:18,
fav:function(){
consolo.log(this)
}
}
//箭头函数this的指向发生改变,指向了定义对象时的对象 Window
var person={
name:'张三',
age:18,
fav:()=>{
consolo.log(this)
}
}
person.fav()
不可以使用arguments
对象
该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
var person3 = {
name:'小马哥',
age:18,
fav: ()=>{
console.log(argument);
}
} person3.fav('把妹','把爷');
对象的单体模式
解决this指向了定义对象时的对象的问题
var person={
name:'张三',
age:18,
fav(){
}
}
等同于
var person={
name:'张三',
age:18,
fav:function(){
consolo.log(this)
}
}
ES6的面向对象
ES5:
//构造函数的方式创建一个对象
var Animal(name,age){
this.name=name;
this.age=age; }
Animal.prototype.showName=function(){
console.log(this.name)
} var dog=new Animal('日天',18) ES6:
class Animal{
construtor(name,age){
this.name=name;
this.age=age;
}#什么都不用加直接写
showName(){
console.log(this.name)
}
}
var dog=new Animal('张三',14)
dog.showName()
vue前戏ES6的更多相关文章
- Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...
- webstorn中的vue文件识别es6代码
webstorn中的vue文件识别es6代码 1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => J ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- VUE和ES6资源收集
MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript https://developer.mozilla.org/en/docs/We ...
- .Vue 文件 ES6 语法 webstorm 中的一个识别Bug
webstorm 2017 版本中即使安装了vue template file 设置了 js 语言为 es6 语法仍旧会出现识别不了划线的情况,苦寻很久,最后解决方式如下 <script typ ...
- vue+vux+es6+webpack移动端常用配置步骤
1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = requ ...
- 前端VUE框架-es6
EMCAScript 6 又叫 es2015 1.常量和变量 常量: const a = "hello" 常量不能修改和重复定义 变量: let:定义一个块级作用域的变量 需要先定 ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- 用vue.js学习es6(一):基本工具及配置
一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...
随机推荐
- 联想T470设置U盘启动
联想T470设置U盘启动 学习了:http://www.udaxia.com/upqd/10092.html # F12 in Enter in USB HDD 如果不行: App Menu > ...
- 使用json-server搭建模拟api接口
转载:http://blog.csdn.net/adojayfan/article/details/55011674 作为前端和客户端开发人员,在后端还没有给出对应的api接口时,我们无法做测试. 这 ...
- 倍福TwinCAT(贝福Beckhoff)基础教程 松下伺服驱动器报错 21.0怎么办
编码器通讯断线异常保护,一般就是通讯线松动或者受干扰(最难以排查的情况是,我接了六套驱动器和伺服,比如J0的线是随便做的,其他五套都是西门子的合格网线,我运行程序的时候,J0如果单关节运动没任何问题, ...
- 当php懈垢windows通用上传缺陷
转自独自等待博客 早上逛乌云发现了PKAV大牛的一篇文章,针对php和windows文件上传的分析,思路很YD,果断转之与大家分享. 虽然此文可能有许多的限制条件,但是如果你认真阅读会发现,其实还是比 ...
- Shell 同时读取多个文件
现有两个文件 1.txt 2.txt,内容分别如下: [root@SHO-XXW-- readmulti]# .txt [root@SHO-XXW-- readmulti]# .txt a b c ...
- ES8新特性
Object.values/Object.entries Object.values和 Object.entries是在ES2017规格中,它和Object.keys类似,返回数组类型,其序号和Obj ...
- crm使用soap取消用户訪问记录权限
//取消訪问权限 function demo() { //操作记录的id var targetId = "A8A46444-BA10-E411-8A04-00155D002F ...
- Solution to Triangle by Codility
question: https://codility.com/programmers/lessons/4 we need two parts to prove our solution. on one ...
- [1-6] 把时间当做朋友(李笑来)Chapter 6 【更多思考】 摘录
记住,你不可能百分之百地有效率,至少不可能总是百分之百地有效率. 他们的效率很差.根源在于,他们其实只做简单的事情,而回避那些有难度的工作. 好像丢钱包的人都不是“故意”丢的一样,办事拖拉的人大多并非 ...
- 应用程序之UIWebView的使用
UIWebView简介 知识点总结 代码实现 一.UIWebView简介 1.是iOS内置的浏览器控件,可以浏览网页.打开文档等2.能够加载html/htm.pdf.docx.txt等格式的文件3.系 ...