JS 入门

# ♦️ A 变量

变量是有名字的容器，容器用于存储数据，通过容器名字获取容器内的数据

```JS``` 定义变量，需要一个关键字、一个操作符、一个变量名和要存储的数据


### 关键字

```	var``` ```let``` ```const``` 

### 操作符

```=```

### 栗子

```js
var a = 20
let b = "20"
const c = [20, "20"]	
```

## 小知识点

```let``` 和 ```const``` 被设计来取代 ```var```

三者的区别见 『♣️ A』


# ♦️ 2 操作符

|	运算符	|	描述	|	例子	|
|	:----:	|	:----:	|	----	|
|	+		|	加		|	a + b	|
|	-		|	减		|	a - b	|
|	*		|	乘		|	a * b	|
|	/		|	除		|	a / b	|
|	%		|	除余	|	a % b	|
|	++		|	递增	|	a++		|
|	--		|	递减	|	a--		|
|	=		|	赋值	|	a = b	|
|	==		|	等于	|	a == b	|
|	===		|	严格等于|	a === b|
|	!		|	逻辑非	|	!a		|
|	&&		|	逻辑与	|	&& a	|
|	\|\|	|	逻辑或	|	\|\| a	|

### 重点掌握

```=``` 赋值操作符

### 栗子

```
var a = 20
```

## 小知识点

```+``` ```-``` ```*``` ```/``` 无异于日常数学运算符

但是 ```=``` 在 JS 里是赋值，不是 ```等于```

JS 里的 ```等于``` 是一种 ```布尔运算``` 

如： ```==``` 、 ```===```



# ♦️ 3 数据类型（上）

在 ```JS``` 里，数据的类型可以是 ```数字```、```字符串```

### 关键字

```Number``` ```String```

### 栗子

```js
var num = 2 
```

其中 ```2``` 是数字类型

```Number``` 即 ```阿拉伯数字```

```js
var str = "2"
var str2 = '2'
var str3 = '晓程序公开课'
var str4 = ' + num + '      // str4 = '2'
var str5 = `"${num}"`       // str5 = "2"
```

其中 ```"2"```、```'2'```、```'晓程序公开课'``` 都是字符串类型 

```String``` 被```单引号``` 或 ```双引号``` 包裹起来的字符


## 小知识点

```str4 ``` 和 ```str5``` 是两种常见的字符串拼凑方式


# ♦️ 4 数据类型（下）

在 ```JS``` 里，数据的类型还可以是 ```数组```、```对象```

### 关键字

```Array``` ```Object```

## 栗子

```js
var arr = [1, 2, 3, 4]
var arr2 = [1, "晓程序公开课", arr, [1, 2], {x: 1}]
```

其中 ```[...]``` 由一对中括号包裹起来的都是数组类型

```Array``` 数组的每一项可以是任意数据类型，以 ```,``` 分隔，

```js
var obj = { x: 1, y: 2}
var obj2 = { x: 1, y: "晓程序公开课", z: [1, 2, 3] }
var obj3 = { arr, obj }
    
// obj3 = { 
//    arr: [1, 2, 3, 4], 
//    obj: { x: 1, y: 2},
//  }
```

其中 ```{...}``` 由一对花括号包裹起来的都是对象类型

```Object``` 以 ```键值对``` 的方式呈现 ```x: 1``` 即 ```key: value``` 每一对以 ```,``` 分隔

## 小知识点

```函数```、```类``` 也是一种对象 ```function``` ```class```


# ♦️ 5 实操

分别申明类型为 ```Number``` ```String``` ```Array``` ```Object``` 的 4 个变量

## 栗子

### Number

```
var num = 2017
```

### String

```
var str = "晓程序公开课"
```

### Array 

```
var arr = [num, str]
```

### Object

```
var obj = { x: num, y: str, z: arr }
```

## 小知识点

掌握了四大基本数据类型，便可以根据实际需求为数据选择一种最恰当的存储方式


# ♦️ 6 特殊类型

在 ```JS``` 里，除了 ```Number``` ```String``` ```Array``` ```Object``` 四大基本类型

还有 ```Boolean``` ```null``` ```undefined```

其中 ```Boolean``` 为布尔类型，存在两种值 ```true``` 和 ```false```

```null``` 的值是 ```null``` 表示不存在

```undefined``` 的值是 ```undefined``` 表示未定义

## 栗子

```
var yes = true
var no = false
```

其中变量 ```yes``` 和变量 ```no``` 都是 ```Boolean``` 布尔类型

```
var none = null
var unset = undefined
```

其中变量 ```none``` 是 ```null``` 类型

变量 ```unset``` 是 ```undefined``` 类型

## 小知识点

```true``` ```false``` ```null``` ```undefined``` 属于 ```JS``` 的关键字，这类特殊字符可以在在声明变量的时候可以直接用


# ♦️ 7 数据的基本操作（上）

```JS``` 的数据类型有 ```Number``` ```String``` ```Array``` ```Object``` ```Boolean``` ```null``` 和 ```undefined```

每一种数据类型，都有独特的操作方式

## 栗子

```js
// 声明
var num = 1
var num2 = 2
var num3 = num + num2 

// 调用
num3      // => 3   
```

数字类型基本遵循数学里的加、减、乘、除等运算

```js
// 声明
var str = '晓程序'
var str2 = '公开课'
var str3 = str + str2    

// 调用
str3      // => '晓程序公开课'
str3[0]   // => '晓'
```

字符串类型可以通过索引来拿到对应节点的字符 ```string[index]```

## 小知识点

```Number``` 和 ```String``` 可以强制转化

```js
Number('123')   // => 123 
String(123)     // => '123' 
```


# ♦️ 8 数据的基本操作（中）

```Boolean``` ```null``` 和 ```undefined```

## 栗子

```js
// 声明
var ok = true
var yes = Boolean(ok)
var bad = false
var no = Boolean(bad)

// 调用
ok      // => true  
yes     // => true 
bad     // => false 
no      // => false 
```

布尔类型的数据，非 ```true``` 即 ```false```

```js
Boolean()             // => false
Boolean(undefined)    // => false
Boolean(null)         // => false
Boolean('')           // => false
Boolean(0)            // => false
Boolean(1)            // => true
Boolean(' ')          // => true
Boolean('ooxx')       // => true
Boolean([])           // => true
Boolean({})           // => true
```

```null``` 和 ```undefined``` 都是 ```false```

## 小知识点

在 ```JS``` 里，```0``` 表示 ```false``` ```1``` 表示 ```true```

```''``` 空字符串表示 ```false``` 

任何非 ```0``` ```''``` ```null``` ```undefined``` 的数据都是 ```true```



# ♦️ 9 数据的基本操作（下）

```Array``` ```Object```

## 栗子

```js
// 声明
var arr = [1, 2, 3, 4]

// 调用
arr[0]                  // => 1
arr[1]                  // => 2
arr.length              // => 4 
arr[arr.length - 1]     // => 4
arr[4] = 5              // => arr = [1, 2, 3, 4, 5]
```

数组有个属性 ```length``` 可以放回数组的长度

数组的 ```索引``` 总是从 ```0``` 开始

```js
// 声明
var obj = { x: 1, y: 2 }

// 调用
obj.x                   // => 1
obj['y']                // => 2
obj.z                   // => undefined
obj.z = 3               // => obj = { x: 1, y: 2, z: 3 }
obj['x'] = 0            // => obj = { x: 0, y: 2, z: 3 }
```

通过调用 ```对象``` 的 ```属性``` 可以获得 ```属性``` 的 ```值```

```js
obj.key                // => value
obj['key']             // => value
```

## 小知识点

获取数组的最后一项，可以通过数组的 ```长度 - 1``` 来拿到最后一位的 ```索引```

```arr[arr.length - 1]```

获取 ```对象``` 的 ```属性``` 有两种书写方式

```obj['key']```  ```obj.key``` 



# ♦️ 10 函数（上）

在 ```JS``` 里，函数是一种可以重用的代码块

关键字 ```function```

## 栗子

```js
function func() {
  // 函数体
}
```

函数由一个关键字 ```function```、一个函数名、一对圆括号、一对花括号组成

```js
// 声明
function name() {...}

// 调用
name()
```

```js
function() {...}
```

没有名字的函数叫 ```匿名函数```

```匿名函数``` 没有名字，所以定义之后无法调用，因而一般会赋给一个变量来存储或直接执行

```js
// 声明
var fn = function() {...}   // => 将匿名函数赋给变量 fn

// 调用
fn()

// 声明 && 调用
(function(){...})()         // => 声明匿名函数后立执行（俗称闭包）
```
## 小知识点

一般情况下，```匿名函数``` 可以用 ```箭头函数替代```

```js
function() {...}            // => 匿名函数
() => {...}                 // => 箭头函数
```


# ♦️ J 函数（下）

函数在声明的时候，可以拥有自己的参数

```js
function func(arg) {
  // 函数体
}
```

其中 ```arg``` 就是函数 ```func``` 的参数

函数的参数写在圆括号内，可以有多个，表示 ```从函数外部传入函数内部的数据```

```js
// 声明
function name(arg, arg2) {
  return arg + arg2
}

// 调用
name(1, 2)           // => 3
```

其中 ```arg``` 和 ```arg2``` 是形参

```1``` ```2``` 是实参

```return``` 是 ```JS``` 的关键字，表示 ```返回``` 也表示 ```逻辑结束```

## 小知识点

在 ```JS``` 里，所有函数都有一个默认的 ```返回值``` ：```undefined```

声明函数时，定义的参数叫 ```形参```

调用函数时，输入的参数叫 ```实参```

函数可以有任意类型的返回值 ```Number``` ```String``` ```Array``` ```Object``` ```null``` ```undefined```

甚至，函数也能返回函数 ```function```


# ♦️ Q 判断 && 遍历

关键字 ```if``` ```else``` ```map```

## 栗子

```js
if (true) {
  // 条件为真的逻辑
} else {
  // 条件为假的逻辑
}
```

```if else``` 语句需要有一个条件，写在一对圆括号里 ```()```

这个条件必须为布尔值，非 ```true``` 即 ```false```

```js
[1, 2, 3].map(function(item) {
  return item         // => 1, 2 ,3
})
```

每一个数组都内置了一个 ```map``` 方法，用于遍历数组的每一项

## 小知识点

```map``` 方法需要传入一个函数

```js
var arr = [2, 3, 4]

function func(arg) {
  return arg
}

arr.map(func)        // => 2, 3, 4
```

# ♦️ K 综合实操

写一个函数来遍历一个数组的每一项

在遍历之前，需要判断输入的参数类型是否为数组

如果是，则遍历并打印数组的每一项

如果不是，直接返回，什么也不做

## 栗子

```js
// 声明
var arr = ["小白", "新手", "高手", "大神"]

function mission(arr) {
  var condition = arr instanceof Array
  if (!condition) {
    return 
  } 
  arr.map(function(item) {
    console.log(item)
  }) 
}

// 调用
mission(arr)           // => "小白", "新手", "高手", "大神"
mission()              // => undefined
mission("arr")         // => undefined
mission(1)             // => undefined
mission({})            // => undefined
```

## 小知识点

```instanceof``` 是 ```JS``` 的关键字，常用于判断数据类型

```JS``` 代码执行顺序是 ```由上而下```


### 这篇文章价值九元

![](https://blog-1253509893.cos.ap-chengdu.myqcloud.com/fee.jpeg)

运算符	描述	例子
+	加	a + b
-	减	a - b
*	乘	a * b
/	除	a / b
%	除余	a % b
++	递增	a++
--	递减	a--
=	赋值	a = b
==	等于	a == b
===	严格等于	a === b
!	逻辑非	!a
&&	逻辑与	&& a
\|\|	逻辑或	\|\| a

JS 入门 #12

Description

♦️ A 变量

关键字

操作符

栗子

小知识点

♦️ 2 操作符

重点掌握

栗子

小知识点

♦️ 3 数据类型（上）

关键字

栗子

小知识点

♦️ 4 数据类型（下）

关键字

栗子

小知识点

♦️ 5 实操

栗子

Number

String

Array

Object

小知识点

♦️ 6 特殊类型

栗子

小知识点

♦️ 7 数据的基本操作（上）

栗子

小知识点

♦️ 8 数据的基本操作（中）

栗子

小知识点

♦️ 9 数据的基本操作（下）

栗子

小知识点

♦️ 10 函数（上）

栗子

小知识点

♦️ J 函数（下）

小知识点

♦️ Q 判断 && 遍历

栗子

小知识点

♦️ K 综合实操

栗子

小知识点

这篇文章价值九元

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions