♦️ A 变量
变量是有名字的容器，容器用于存储数据，通过容器名字获取容器内的数据
JS 定义变量，需要一个关键字、一个操作符、一个变量名和要存储的数据
关键字
var let const
操作符
=
栗子
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 |
重点掌握
= 赋值操作符
栗子
小知识点
+ - * / 无异于日常数学运算符
但是 = 在 JS 里是赋值，不是 等于
JS 里的 等于 是一种 布尔运算
如： == 、 ===
♦️ 3 数据类型（上）
在 JS 里，数据的类型可以是 数字、字符串
关键字
Number String
栗子
其中 2 是数字类型
Number 即 阿拉伯数字
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
栗子
var arr = [1, 2, 3, 4]
var arr2 = [1, "晓程序公开课", arr, [1, 2], {x: 1}]其中 [...] 由一对中括号包裹起来的都是数组类型
Array 数组的每一项可以是任意数据类型，以 , 分隔，
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
String
Array
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
每一种数据类型，都有独特的操作方式
栗子
// 声明
var num = 1
var num2 = 2
var num3 = num + num2
// 调用
num3 // => 3
数字类型基本遵循数学里的加、减、乘、除等运算
// 声明
var str = '晓程序'
var str2 = '公开课'
var str3 = str + str2
// 调用
str3 // => '晓程序公开课'
str3[0] // => '晓'
字符串类型可以通过索引来拿到对应节点的字符 string[index]
小知识点
Number 和 String 可以强制转化
Number('123') // => 123
String(123) // => '123' ♦️ 8 数据的基本操作（中）
Boolean null 和 undefined
栗子
// 声明
var ok = true
var yes = Boolean(ok)
var bad = false
var no = Boolean(bad)
// 调用
ok // => true
yes // => true
bad // => false
no // => false
布尔类型的数据，非 true 即 false
Boolean() // => false
Boolean(undefined) // => false
Boolean(null) // => false
Boolean('') // => false
Boolean(0) // => false
Boolean(1) // => true
Boolean(' ') // => true
Boolean('ooxx') // => true
Boolean([]) // => true
Boolean({}) // => truenull 和 undefined 都是 false
小知识点
在 JS 里，0 表示 false 1 表示 true
'' 空字符串表示 false
任何非 0 '' null undefined 的数据都是 true
♦️ 9 数据的基本操作（下）
Array Object
栗子
// 声明
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 开始
// 声明
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 }通过调用 对象 的 属性 可以获得 属性 的 值
obj.key // => value
obj['key'] // => value
小知识点
获取数组的最后一项，可以通过数组的 长度 - 1 来拿到最后一位的 索引
arr[arr.length - 1]
获取 对象 的 属性 有两种书写方式
obj['key'] obj.key
♦️ 10 函数（上）
在 JS 里，函数是一种可以重用的代码块
关键字 function
栗子
function func() {
// 函数体
}函数由一个关键字 function、一个函数名、一对圆括号、一对花括号组成
// 声明
function name() {...}
// 调用
name()没有名字的函数叫 匿名函数
匿名函数 没有名字，所以定义之后无法调用，因而一般会赋给一个变量来存储或直接执行
// 声明
var fn = function() {...} // => 将匿名函数赋给变量 fn
// 调用
fn()
// 声明 && 调用
(function(){...})() // => 声明匿名函数后立执行（俗称闭包）小知识点
一般情况下，匿名函数 可以用 箭头函数替代
function() {...} // => 匿名函数
() => {...} // => 箭头函数♦️ J 函数（下）
函数在声明的时候，可以拥有自己的参数
function func(arg) {
// 函数体
}其中 arg 就是函数 func 的参数
函数的参数写在圆括号内，可以有多个，表示 从函数外部传入函数内部的数据
// 声明
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
栗子
if (true) {
// 条件为真的逻辑
} else {
// 条件为假的逻辑
}if else 语句需要有一个条件，写在一对圆括号里 ()
这个条件必须为布尔值，非 true 即 false
[1, 2, 3].map(function(item) {
return item // => 1, 2 ,3
})每一个数组都内置了一个 map 方法，用于遍历数组的每一项
小知识点
map 方法需要传入一个函数
var arr = [2, 3, 4]
function func(arg) {
return arg
}
arr.map(func) // => 2, 3, 4♦️ K 综合实操
写一个函数来遍历一个数组的每一项
在遍历之前，需要判断输入的参数类型是否为数组
如果是，则遍历并打印数组的每一项
如果不是，直接返回，什么也不做
栗子
// 声明
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 代码执行顺序是 由上而下
这篇文章价值九元
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent