本周的主要学习内容为es6的基本知识,再次学习到了更多的知识,受益匪浅,以下为部分知识点
let与const
let:
1.变量不可以重复使用 2.块级作用域:只在声明所在的块级作用域内有效 3.不存在变量提升(“变量提升”现象,即变量可以在声明之前使用,值为`undefined,但let不存在变量提升)
const:
1.一定要赋初始值 2.一般常量是用大写(潜规则) 3.常量的值不能修改 4.块级作用域 5.对于数组和对象的元素修改,不算作对常量的修改,不会报错
解构赋值
- 数组的解构赋值
//对数组内元素直接赋值 let [a,b,c] = [1,2,3] let [foo,[[bar],baz]] = [1,[[2],3]] //解构赋值允许指定默认值 let [foo = true] = []; console.log(foo);//结果为true let [x,y='b'] = ['a'] // x='a',y='b'
- 对象的解构赋值
let {f00,bar} = {foo:‘aaa’,bar:‘bbb’}; //foo=‘aaa’,bar=‘bbb’ let {foo} = {bar:‘baz’}; //foo = undefined 解构失败,变量的值等于undefined
对象的结构也可以取默认值,默认值生成的条件是:对象的属性值严格等于undefined
结构也可以用于嵌套结构的对象
- 字符串的解构赋值
字符串被转换成了一个类似数组的对象
类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值
- 数值和布尔值的解构赋值
解构赋值时,如果等号右边不是对象或数组时,则会先转换为对象。null和undefined 无法转换为对象,所以无法进行解构
- 函数参数的解构赋值
function add([x,y]){ return x + y; } add([1,2]); // 3
函数的参数也可使用默认值
function move({x = 0, y = 0}){ return [x, y]; } move({x: 3, y: 8}); //[3, 8] move({x: 3}); //[3, 0] move({}); //[0, 0] move(); // [0, 0]
注意,下面写法会得到不一样的解构
function move({x, y} = {x = 0, y = 0}){ return [x, y]; } move({x: 3, y: 8}); //[3, 8] move({x: 3}); //[3, undefined] move({}); //[undefined, undefined] move(); // [0, 0]
箭头函数
1.箭头函数中的this是静态的,
2.不能作为构造实例化对象
3.不能使用argument 变量
let fn = (a, b) => { return a + b; }
4.箭头函数的简写
(1)当形参只有一个的时候,省略小括号
(2)当花括号省略后,代码只有一条,此时return 必须省略而且语句的执行结果就是函数的返回值
【…】扩展运算符
1.将数组转化为逗号分隔的参数系列
2.合并数组
3.克隆数组
4.将伪数组变成真数组
es6的基本内容也学的差不多了,在接下来写页面的过程中,希望能够顺利运用所学知识,顺利完成界面。