JS 入门

[joephon]

♦️ 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

重点掌握

= 赋值操作符

栗子

var a = 20

小知识点

+ - * / 无异于日常数学运算符

但是 = 在 JS 里是赋值，不是 等于

JS 里的 等于 是一种 布尔运算

如： == 、 ===

♦️ 3 数据类型（上）

在 JS 里，数据的类型可以是 数字、字符串

关键字

Number String

栗子

var num = 2 

其中 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

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

每一种数据类型，都有独特的操作方式

栗子

// 声明
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({})           // => true

null 和 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()

function() {...}

没有名字的函数叫 匿名函数

匿名函数 没有名字，所以定义之后无法调用，因而一般会赋给一个变量来存储或直接执行

// 声明
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 代码执行顺序是 由上而下

这篇文章价值九元