以元组和字典的形式介绍数据结构。

Data Types and Data Structures - 数据类型和数据结构


Postgresql 允许为条件语句或表达式分配临时名称，`AS`是一个可选的选项。

## 语法

```sql
SELECT [column_name] AS [alias_name] FROM [table_name];
```

`AS`关键字是可选的

```sql
SELECT [column_name] [alias_name] FROM [table_name];
```

## 示例

使用示例数据库`customer`中的表展示如何使用别名

![GLa9wQ](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/GLa9wQ.jpg)

#### 分配别名

```sql
SELECT first_name,last_name FROM customer;
```

![9HMAUh](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/9HMAUh.jpg)

如果要重新命名`last_name`，可以使用`AS`关键字

```sql
SELECT first_name,last_name AS surname FROM customer;
```

![MC3NsJ](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/MC3NsJ.jpg)

省略`AS`关键字，则列名将被自动命名

```sql
SELECT first_name,last_name surname FROM customer;
```

#### 表达式分配别名

```sql
SELECT first_name || '' || last_name FROM customer;
```

![MPeosC](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/MPeosC.jpg)

可以看到表头是无意义的`?column?`，解决此问题，可以使用表达式分配别名

```sql
SELECT first_name || '' || last_name AS full_name FROM customer;
```

![cALRwO](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/cALRwO.jpg)

#### 包含空格的别名

如果列别名包含一个或多个空格，就需要用双引号引起来

```sql
column_name AS "column alias"
```

```sql
SELECT first_name || '' || last_name "full name" FROM customer;
```

![4g2bXW](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/4g2bXW.jpg)

## 总结

- `[column || expression] AS alias_name`为列分配别名
- `AS`关键字可选
- 如果列别名包含一个或多个空格，就需要用双引号引起来


Postgresql - Column Aliases


`Next.js` 内置了对环境变量的支持，让你可以执行以下操作：

- 使用 `.env.local` 加载环境变量
- 通过给环境变量添加 `NEXT_PUBLIC_` `前缀将环境变量暴露给浏览器

## 创建环境变量

```bash
DB_HOST=localhost
DB_USR=root
DB_PWD=123456
```

## 创建 env.js

```jsx
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
  return (
    <>
      <Container>
        <Head>
          <title>Environment Variables</title>
        </Head>
        <h1>Database Credentials</h1>
        <p>Host: {props.host}</p>
        <p>Username: {props.username}</p>
        <p>Password: {props.password}</p>
      </Container>
    </>
  )
}

export async function getStaticProps() {
  // Connect to Database using DB properties
  return {
    props: {
      host: process.env.DB_HOST,
      username: process.env.DB_USER,
      password: process.env.DB_PASS
    }
  }
}
```

`Next.js`会在`.env*`中自动扩展变量，即可以定义变量

```bash
HOSTNAME=localhost
PORT=3000
HOST=http://$HOSTNAME:$PORT
```


Next.js 内置了对环境变量的支持

Next.js - Environment Variables


![Flexbox](https://cdn.jsdelivr.net/gh/manonicu/pics@master/20181016105026.png)

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

- 基本介绍
- 浏览器兼容性
- 启用 Flexbox
- 容器属性
  - 行||列 对齐 ==row and columns==
  - 水平||垂直 对齐 ==Vertical and horizontal==
  - 更改水平对齐 ==change horizontal alignment==
  - 更改垂直对齐 ==change vertical alignment==
    - 关于基准线 ==about baseline==
  - 换行 ==wrap==
- flex 元素上的属性
  - order
  - align-self
  - flex-grow
  - flex-shrink
  - flex-basis
  - flex

### 介绍

Flexbox，也称为灵活盒模块，是两个现代布局系统之一，还有 css Grid。与 css Grid（二维）相比，flexbox 是一维布局模型。它将基于行或列控制布局，但不能同时控制布局。flexbox 的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。Flexbox 不兼容 IE10 以下，IE10 以下可以使用如下方式：

- Table layouts
- Floats
- clearfix hacks
- display: table hacks

### 兼容性

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/20181020205051.png)

IE10 以下不兼容，一些浏览器需要使用-webkit 或者 display:-webkit-box 兼容处理。

### 使用 flexbox

```css
display: flexbox;
```

或者

```css
display: inline-flexbox;
```

### 容器属性

- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow

### 行对齐或者列对齐

flex-direction 决定容器以行对齐还是列对齐。

- flex-direction:row，行对齐，从左到右
- flex-direction:row-reverse，行对齐，从右到左
- flex-direction:column，列对齐，从上到下
- flex-direction:column-reverse，列对齐，从下到上

如下图所示：

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/20181020205713.png)

### 水平对齐或者垂直对齐

flex-direction 默认是 row，从左向右，当其属性值为 column 时，是从上到下，可以使用 justify-content 和 align-items 改变水平和垂直对齐。

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/20181022100130.png)

### 改变水平对齐方式

justify-content 有 5 个属性值：

1. flex-start 左对齐
2. flex-end 右对齐
3. center 居中对齐
4. space-between 首尾对齐容器左右侧，中间间距相等
5. space-around 每个元素的间距相等

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/20181022100921.png)

### 改变垂直对齐方式

align-items 有 5 个属性值：

1. flex-start 顶部对齐
2. flex-end 底部对齐
3. center 居中对齐
4. baseline 基线对齐
5. stretch 拉伸以适应容器

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20181022141409.png)

关于 align-items:baseline，可以看看 codepen：[https://codepen.io/flaviocopes/pen/oExoJR](https://codepen.io/flaviocopes/pen/oExoJR)

### 换行

默认情况下，flexbox 容器中的项目保留在一行中，缩小它们以适合容器。

可以使用 flex-wrap:wrap 或者 flex-wrap:wrap-reverse 对容器中的元素进行换行处理。

一种简写方式：flex-flow:row wrap;即 flex-direction:row && flex-wrap:wrap

### 适用于 flexbox 容器内每个元素的属性

1. order
2. align-self
3. flex-grow
4. flex-shrink
5. flex-basis
6. flex

#### order-改变元素的顺序，如下图所示，可以指定某个元素的 order 值，以改变其位置，默认值为 0

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20181022142507.png)

#### align-self-元素使用 align-self 覆盖容器的 align-items 对当前元素的对齐方式

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20181022142842.png)

#### flex-grow || flex-shrink 如有必要，可以增加或缩小某个元素

flex-grow：默认值为 0，当某个元素 flex-grow 为 1，另一个为 2，则为 flex-grow：2 的元素占用 flex-grow:1 的空间的 2 倍。

flex-shrink：默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。

比如：有这么一个容器，div>.box1*3+.box2*2 父容器定义宽度为 500px，子元素定义宽度为 120px，box1 的 flex-shrink 为 1，.box2 的 flex-shrink 为 2，那么子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子，所以加权综合可得 100*1+100*1+100*1+100*2+100\*2=700px。

```
于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px
```

#### flex-basis-用于设置或检索弹性盒伸缩基准值，默认值为 auto，其与 width 的区别可以参考这篇文章：https://www.jianshu.com/p/17b1b445ecd4

#### flex：有三个属性值

1. flex-grow
2. flex-shrink
3. flex-basis

```css
flex: 0 1 auto 分别对应flex-grow、flex-shrink、flex-basis;
```

## 结尾

友情献上小游戏，通过游戏学习 flexbox

http://flexboxfroggy.com/#zh-cn


Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

Flexbox指南


## Numbers 类型

> python 有 4 种数字类型

- Boolean
- Integer
- Float
- Complex

### Boolean

布尔值，只有 True 和 False 两个值，可以用来表示真假。

```python
a=True
b=False
```

在数学运算种，布尔值的值只有 0 和 1，0 表示 False，1 表示 True。

```python
c=4+True #5
d=False
if d==0:
    print('d is zero')
else:
    print('d is not zero')
```

### Integer

```python
a = 37
b = -299392993727716627377128481812241231
c = 0x7fa8      # Hexadecimal
d = 0o253       # Octal
e = 0b10001111  # Binary
```

### Float

```python
>>> a = 2.1 + 4.2
>>> a == 6.3
False
>>> a
6.300000000000001
>>>
```

### 比较 Comparisons

python 有如下比较运算符：

```python
x < y      Less than
x <= y     Less than or equal
x > y      Greater than
x >= y     Greater than or equal
x == y     Equal to
x != y     Not equal to

#布尔值操作
if b >= a and b <= c:
    print('b is between a and c')

if not (b < a or b > c):
    print('b is still between a and c')
```

### 数字转换

使用类型名转换数字，如下：

```python
a = int(3.14)
b = float(3)
```


Numbers - 数字类型


> `useRef` 返回一个可变的 `ref` 对象，其 `.current` 属性被初始化为传入的参数（initialValue），返回的 `ref` 对象在组件的整个生命周期内保持不变。

例如：创建`VideoPlayer`组件

```tsx
import {useRef} from 'react'
import VideoPlayer from 'videoplayer'

function VideoPlayerComponent() {
  const playerRef = useRef(new VideoPlayer())
  //
}
```

对于上面的代码，在初始化组件时，调用`new VideoPlayer()`的结果将存储在`ref`中，在下一次渲染时，仍将调用`new VideoPlayer()`，但是`useef`不会再接收到其调用结果，这意味着`playerRef`可能为空。

同样的，`useState`也是存在这种情况，区别在于，`useState`可以接受初始化函数，比如

```tsx
import {useState} from 'react'
import VideoPlayer from 'videoplayer'
function VideoPlayerComponent() {
  const [player] = useState(() => new VideoPlayer())
  //
}
```

所以，在使用`playerRef`的时候，需要对它做个判断：

```tsx
import {useRef} from 'react'
import VideoPlayer from 'videoplayer'

function VideoPlayerComponent() {
  const playerRef = useRef<VideoPlayer | null>(null)

  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer()
  }

  const onClick = () => {
    // Error: Object is possibly 'null'.
    playerRef.current.play()
  }
}
```

组件只会调用一次`new VideoPlayer()`并存储在`playerRef`中，但是 typescript 会检查并提示`Error: Object is possibly 'null'`

解决方法：

operation chaining - 可选链

`playerRef.current.play()` => `playerRef.current？.play()`

useImmutableRefValue

```tsx
import {useMemo, useRef} from 'react'

const useImmutableRefValue = <R,>(createRef: () => R) => {
  const ref = useRef<R>()

  const value = useMemo(() => {
    if (!ref.current) {
      ref.current = createRef()
    }

    return ref.current
    // Only one instance, no deps required.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return value
}

export default useImmutableRefValue
```

```tsx
import VideoPlayer from 'videoplayer'
import useImmutableRefValue from 'useImmutableRefValue'

function Component() {
  const player = useImmutableRefValue(() => new VideoPlayer())

  const onClick = () => {
    player.play()
  }
}
```


useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue），返回的 ref 对象在组件的整个生命周期内保持不变。

useImmutableRefValue - 帮助你更好的使用Typescript开发React应用


## 迭代器

在 JavaScript 中，迭代器是一种对象，它定义了一系列值以及访问这些值的方法。迭代器用于遍历集合的元素，例如数组或对象。

你可以在对象上实现 next() 方法来创建迭代器。next() 方法返回一个对象，该对象具有两个属性：value 和 done。value 属性是序列中的下一个值，done 属性是一个布尔值，表示迭代器是否到达了序列的末尾。

下面是一个迭代器的示例，它返回数组的元素：

```js
let array = [1, 2, 3]
let iterator = {
  index: 0,
  next: function () {
    if (this.index < array.length) {
      return {value: array[this.index++], done: false}
    } else {
      return {done: true}
    }
  }
}
```

你可以使用 for...of 循环来遍历迭代器返回的值：

```js
for (let value of iterator) {
  console.log(value)
}
```

上面的 for...of 循环的输出是：

```js
1
2
3
```

你还可以使用 iterator.next() 方法来手动遍历迭代器返回的值：

```js
let result = iterator.next()
while (!result.done) {
  console.log(result.value)
  result = iterator.next()
}
```

## 生成器

生成器是 JavaScript 中一种特殊的函数，它返回一个迭代器。生成器使用 function\* 语法定义，并使用 yield 关键字返回值。

下面是一个返回数组元素的生成器的示例：

```js
function* generateArrayValues(array) {
  for (let value of array) {
    yield value
  }
}

let iterator = generateArrayValues([1, 2, 3])
```

你可以使用 for...of 循环或 iterator.next() 方法来遍历生成器返回的值：

```js
for (let value of iterator) {
  console.log(value)
}

// or

let result = iterator.next()
while (!result.done) {
  console.log(result.value)
  result = iterator.next()
}
```

上面的 for...of 循环或使用 iterator.next() 的手动迭代的输出是：

```js
1
2
3
```

生成器还可以接受参数，并且可以使用 yield 关键字暂停和恢复。下面是一个生成数字序列的生成器的示例：

```js
function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    yield i
  }
}

let iterator = generateNumbers(1, 3)
for (let value of iterator) {
  console.log(value)
}
```

上面的 for...of 循环的输出是：

```bash
1
2
3

```

生成器对于创建无法一次性存储在内存中的大型值序列非常有用。它们允许你一次一个地遍历值，并在必要时暂停生成器，这可以提高代码的性能。

总之，生成器是 JavaScript 中返回迭代器的特殊函数。您可以使用 for... of 循环或 iterator.next ()方法来迭代生成器返回的值，生成器可以接受参数并使用 yield 关键字暂停和继续。


在 JavaScript 中，迭代器是一种对象，它定义了一系列值以及访问这些值的方法。迭代器用于遍历集合的元素，例如数组或对象。