面向对象内
data:function(){ }
=> data(){ }
render:function(h){ return h(App) }
=> render:h => h(App)
用let
声明变量只在块级作用域起作用,适合在for
循环使用,也不会出现变量提升现象。同一个代码块内,不可重复声明的相同变量,不可重复声明函数内的参数。
let
与var
区别:let
声明的变量仅仅在自己的块级作用域起作用,出了这个块级作用域就不起作用。任何一对花括号中的语句都属于一个块,在花括号里面用let定义的所有变量在花括号外都是不可见的,我们称之为块级作用域。
//var
var arr = [ ];
for(var i=0; i<10; i++){
arr [i] = function(){
alert(i)
}
}
arr [8](); //结果:10
//let
var arr = [ ];
for(let i=0; i<10; i++){
arr[i] = function(){
alert(i)
}
}
arr[8](); //结果:8
let
声明变量的时候不会出现“变量提升”//var
var a = 1;
(function(){
alert(a);
var a = 2;
})(); //结果:undefined
//let
var a = 1;
(function(){
alert(a);
let a = 2;
})(); // 结果:报错a未定义
解析: 用let
声明的变量,在其块级作用域内是封闭的,是不会受到外面的全局变量a
影响的,并且要先声明再使用,所以a
的值即不是1
(因为不受外面的影响),也不是undefined
(因为先声明后使用),更不是2
,未声明定义就使用,只有报错啦。
let
注意事项:错误示范一:
{ var a =1; let a =2; //报错,因为 a 已经用 var 声明过 }
错误示范二:
{ let a =1; let a= 2; //还是报错,因为 a 已经用 var 声明过 }
错误示范:
function say(word){ let word = 'hello Jack'; alert(word) } say('hello Lili'); //say() 函数内用 let 重新声明了 word 这个参数,会报错的。
const
是constant
(常量)的缩写,用于声明一个常量并必须赋值,声明后不可修改。跟let
一样只在块级作用域起作用,不可重复声明同一个变量,不会变量提升,声明引用类型的常量时,要注意是传址赋值。
const Person = {"name":"张三"};
Person.name = "李四";
Person.age = 20;
console.log(Person);
//结果:正常输出{name: "李四", age: 20}
const Person = {"name":"张三"};
Person.age = 20;
Person = {};
//错误,企图给常量Person赋新值(新地址)
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
var arr = [1,2,3];//把数组的值分别赋给下面的变量;
var a = arr[0];
var b = arr[1];
var c = arr[2];
console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3
var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量;
console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3
数组及 JSON 对象均可以解构赋值
var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];
console.log(c1);//结果:c1的值为3.1
console.log(c2);//结果:c2的值为3.2
var [a,b,c] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
undefined
注意: 解构不成功,变量的值就等于
undefined
。相当于只声明了变量 c,但是没赋值。
var [a,b,c] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为undefined
注意: 当新的值为
undefined
的时候,是不会覆盖默认值的。
var [a,b,c=3] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3
// 赋一个有效的值即可覆盖默认值
var [a,b,c=3] =[1,2,4];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为4
对象的解构赋值不会受到属性的排列次序影响(数组则会受影响),它是跟属性名关联起来的,变量名要和属性名一致,才会成功赋值。如果变量找不到与其名字相同的属性,就会赋值不成功,值为undefined
。
如果想给一个变量名与属性名不一样的变量解构赋值,可以这样写:
var { b:a,} = {"b":2};
console.log(a);//结果:a的值为2
var {a:{b}} = {"a":{"b":1}};
console.log(b);//结果:b的值为1
var {a,b=2} = {"a":1};
console.log(b);//结果:b的值为默认值2
在解构赋值的过程中,字符串被转换成了一个类似数组的对象,变量都分别赋上了对应的值。
var [a,b,c] = "我是萌";
console.log(a);//我
console.log(b);//是
console.log(c);//萌
var x = 1;
var y = 2;
[x,y] = [y,x];
函数只能返回一个值,我们可以将多个值装在一个数组或者对象中,再用解构赋值快速提取其中的值。将demo
函数的运行结果直接通过结构赋值赋给变量name
和age
,实现快速的提取对应的值。
function demo(){
return {"name":"张三","age":21}
}
var {name,age} = demo();
console.log(name);//结果:张三
console.log(age);//结果:21
function demo({a,b,c}){
console.log("姓名:"+ a);
console.log("身高:"+ b);
console.log("体重:"+ c);
}
demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});
//旧:
function demo(a){
var name;
if(a === undefined){//判断参数书否是否传值
name= "张三"; //没传,赋默认值
}else{
name= a;
}
console.log(name);
}
//新
function demo({name="张三"}){
console.log("姓名:"+name);//结果:姓名:张三
}
demo({});