ES6学习总结 吐槽:github pages貌似在国内的三大运营商中只有电信可以正常访问,移动、联通经常访问不了,偶尔多次刷新可以访问,但有的时候还不能正常加载样式…
块级作用域变量let,const
let 的特性:
-
只在 let 所在代码块有效
-
创建块级作用域,并只在块级作用域内有效
-
没有变量提升
-
不允许在相同作用域重复声明
const 的特性:
-
声明一个只读常量,声明后就初始化,无法更改,以后也无法赋值
-
创建块级作用域,并只在块级作用域内有效
-
声明的常量不提升
-
不允许在相同作用域重复声明
const 实际保证的是声明的变量的内存地址不可改变。
模板字符串
插入大段的 html 内容时使用:
$(‘#app’).append(
There are ${basket.count} items in your basket, ${basket.onSale} are on sale!
);
用反引号 (
) 来标识起始,用 ${} 来引用变量,并且所有空格和输出都会保存在爱输出之中。
箭头函数
箭头函数的三个直观特点
- 不需要function关键字来创建函数
- 省略return关键字
- 继承当前上下文的this关键字
eg:
let array = [1,2,3];
array.map(function(item){
return item * item;
})
array.map(item => item * item)
function computeA(a,b){
let a = a + b;
return a;
}
computeA(a,b)=>{
let a = a +b;
return a;
}
解构赋值
1.数组的解构赋值
- 完全解构
let[a, b,c] = [1,2,3]; // a = 1; b = 2; c = 3;
解构不成功
let[x, y] = [1]; // x = 1; y = undefined;
- 不完全解构
let[a, [b],c] = [1, [2,3],4]; // a = 1; b = 2; c = 4;
2.对象的解构赋值
对象的解构不同于数组的解构,对象的解构赋值是先找到同名变量,然后赋值给对应的变量。赋值的是后者,前者用于匹配。
let { bar, foo } = {foo:"aaa",bar:"bbb"};
foo // "aaa"
bar // "bbb"
let { baz } = {foo:"aaa",bar:"bbb"};
baz // undefined
default、rest、扩展运算符
- default是默认值,在 ES6 之中可以指定默认值,可以在解构、函数参数之中传入默认值。
function animal(type=’cat’) { console.log(type);}
ES6 引入 rest 参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中
function add(...values){letsum =0;
fot (var val of values) {
sum += val;
}
return sum;
}
add(2,3,5) // 10
rest 注意点:
-
rest 参数后不能有其他参数,只能是最后一个参数
-
函数的 length 属性,不包括 rest 参数
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log(...[1,2,3])// 1 2 3
console.log(1, ...[2,3,4],4)// 1 2 3 4 5