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的指向发生改变,指向了定义对象时的对象 Windowvar 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 的全部内容, 来源链接: utcz.com/z/379052.html