Toypipi's blog

1.flex布局，无需考虑父子宽高

1
2
3
4

/* 父元素设置 */
display: flex;
justify-content: center;
align-items: center;

2.相对定位+transform，无需考虑父子宽高

1
2
3
4
5

/* 子元素设置 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

3.display：table-cell

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.parent {
  width: 500px;
  height: 500px;
  background-color: pink;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  display: inline-block;
}

查询不存在对象的属性会报错，如果 . 的左边是 null 或 undefined，则属性访问表达式会失败。因此在写类似 ``book.author.sername` 这样的表达式时，要确保 book 和 book.author 是有定义的。以下是两种防止这类问题的写法：

1

surname = book && book.author && book.author.surname

1

let surname = book?.author?.surname

如果想迭代对象的属性，可以使用 for/in 循环，或者基于 Object.keys() 方法的结果使用 for/of :

1
2
3
4
5

let o = {x:1, y:2, z:3}
let keys = ''
for(let k of Object.key(o)){
    keys += k
}

也可以像下面这样迭代每个键对应的值：

1
2
3
4
5

let o = {x:1, y:2, z:3}
let sum = 0
for(let v of Object.values(o)){
    sum += v
}

解构赋值，ES6 新增语法，以下是解构赋值的一些示例代码：

1
2
3

let [x,y] = [1,2]
[x,y] = [x+1,y+1]
[x,y] = [y,x]

解构赋值让使用返回数组的函数变得异常便捷：

1
2
3
4
5
6
7
8
9
10

function toPolar(x, y){
    return [Math.sqrt(x*x+y*y), Math.atan2(y,x)]
}

function toCartesian(r, theta){
    return [r*Math,cos(theta), r*Math.sin(theta)]
}

let [r,theta] = toPolar(1.0, 1.0)
let [x,y] = toCartesian(r,theta)

遍历一个对象所有属性的名/值对：

dependencies

指定项目依赖，值为包名加上版本号。

版本号可以指定一个范围，有以下语法。

• version：精确的版本，例如 1.0.0
• >version：大于 version
• >=version：大于等于
• <version: 小于
• <=version: 小于等于
• ~version: 允许补丁级别的变化，例如 ~1.2.3 表示 >=1.2.3 <1.3.0
• ^version：允许不更改最左侧非0版本号数字的变化，例如 ^1.2.3 表示 >=1.2.3 <2.0.0
• 1.2.x
• http://...
• *
• version1 - version2 等同于 >=version1 <=version2