ES6小结
ES6新特性
1.let 和 const
/*
1.let var const 变量
const一般在require一个模块的时候用或者定义一些全局常量。
let 变量,块作用域,不能重复声明覆盖
var 变量,函数作用域,能重复声明覆盖
*/
aaa2(){
this.bb();
const a=2;
a=3;
console.log(a,"11111");
/*
TypeError: Assignment to constant variable.
*/
},
bb(){
var a=[1,2];
for(let i=0;i<a.length;i++){
console.log(i,"111");
}
console.log(i, "222");
for (var i = 0; i < a.length; i++) {
console.log(i, "333");
}
console.log(i, "444");
/*
0 "111"
1 "111"
undefined "222"
0 "333"
1 "333"
2 "444"
*/
},
2.变量的解构赋值
1.数组的解构赋值
b1(){
// 1.前后模式匹配
var [a,b,c]=[1,3,6];
console.log(a,b,c); // 1 3 6
var [a,[b,[[c]]]]=[1,[2,[[4]]]];
console.log(a, b, c); // 1 2 4
// 2.前多后少
var [a,b,c]=[2,3];
console.log(a, b, c); // 2 3 undefined
var [[a,[b]],c]=[[1,[]],4];
console.log(a, b, c); // 1 undefined 4
// 3.前少后多
var [a,b] = [2,3,1];
console.log(a, b); // 2 3
var [,,c]=[2,3,1];
console.log(c); // 1
var [...a]=[2,3,1];
console.log(a); // [2, 3, 1]
// *** 解构时,如果等号右边是不可遍历的,则会报错 *****
// var [a, b] = 1;
// var [a, b] = null;
// var [a, b] = {};
// var [a,b]=true;
// var [a,b]=NaN;
// var [a, b] = undefined;
// console.log(a); // TypeError: X is not iterable
// 4.带默认值
// 先结构赋值,没有值的话再使用默认值
var [a=3,b,c]=[1,2,3];
console.log(a,b,c); // 1 2 3
var [a = 3, b, c] = [, 2, 3];
console.log(a,b,c); // 3 2 3
},
2.对象的解构赋值
b2(){
var {
a,b}={
b:1};
console.log(a, b, "2222222222"); // undefined 1 "2222222222"
var {
a: name, b: value } = {
a: 1, b: 2 };
console.log(name, value) // 1 2
var {
a:name,b:value}=[1,2];
console.log(name, value, "111111111") // undefined undefined "111111111"
var {
0:name,1:value} = [1,2]; // 数组是一个特殊的对象 [1,2] 效果等同于 {0:1,1:2}
console.log(name, value); // 1 2
// 通过解构,我们可以很容易的把对象的方法复制给变量。
const {
log} = console;
log("aaaaa"); // aaaaa
const {
log:name1} = console;
name1("name"); // name
},
3.字符串的解构赋值
// 因为字符串具有length这个属性,因此我们还可以对该属性进行解构赋值:
b3(){
const [a,b,c,d,e,f]="future";
console.log(a, b, c, d, e, f); // f u t u r e
let {
length:aa}="future";
console.log(aa) // 6
},
4.数字以及布尔值的解构赋值
// 解构赋值时,如果等号右边是数值和布尔值,则会先转为对象,
// 但是等号右边为undefined 和 null时无法转为对象,所以对他们进行解构赋值时,都会报错
b4(){
let {
toString:s}=123;
console.log(s); // ƒ toString() { [native code] }
// let { prop: x } = null;
// console.log(x); // TypeError: Cannot destructure property 'prop' of 'null' as it is null.
},
5.函数参数的解构赋值
b5(){
function aa([a,b,c]) {
return a+b-c;
};
console.log(aa([2,3,1]),"434");
function bb([a, b, c]=[2,3,0]) {
return a + b - c;
};
console.log(bb([5, 4, 2])); // 7
console.log(bb([5, 4])); // NaN
console.log(bb([])); // NaN
console.log(bb()); // 5
function cc({
x,y}={
x:3,y:5}) {
return x+y;
}
console.log(cc({
x: 4, y: 6 })); // 10
console.log(cc({
x: 4 })); // NaN
console.log(cc({
})); // NaN
console.log(cc()); // 8
function dd({
x=3,y=6 }) {
return x + y;
}
console.log(dd({
x: 4, y: 7 })); // 11
console.log(dd({
x: 4 })); // 10
console.log(dd({
})); // 9
// console.log(dd()); // TypeError: Cannot read property 'x' of undefined
},
6.解构的用途
b6(){
// 1.交换变量的值
function aa(x,y) {
[x,y]=[y,x];
console.log(x,y);
};
aa(5, 7); // 7 5
// 2.函数只能返回一个值,如果想返回多个值,需要将它们放在数组或对象里返回
function bb() {
return {
a:1,b:2}
}
let {
a,b}=bb();
console.log(a,b);
// 3.函数参数的定义
//参数是一组有次序的值
function cc([x, y, z]) {
return x + y + z;
}
cc([2,3,5])
console.log(cc([2,3,5])); // 10
//参数是一组无次序的值
function