Day02-进入JavaScript

资料型态(Data type)

在JavaScript中有以下的资料型态去储存我们的资料,想像一下平常生活中,我们会把水装进水壶,而把食物装进储物罐,同理可证在程序中我们也需要对不同的资料做分类,而进行储存。

• String
• Number
• Array
• Object
• Function

变数的宣告

首先我们会使用var做宣告变数的动作:

var template = 'hello world'

var宣告变数template并且等於hello world,也就是把hello world的字串丢进template。

先不要想说这样的解释是对的还是错的,总而言之我们先知道怎麽宣告变数存取资料即可!!!

String

会储存文字类型像是 人名、地址、电话
会使用 " " 、 ' ' 包括住资料

在程序码中就会是

var phone = '090909090909'

或是

var phone = "090909090909"

但是当你使用英文总是要使用到 ' 单引号,这样就会造成跳脱文字

var user = 'Hi,I'm Ian' 

於是我们会用 " " 包括住单引号而避免程序跳过字元

var user = "Hi,I'm Ian" 

字串连接变数

console.log("name: " + name)// name: Ian

上面这个有点不够方便

於是就有了template string
透过两个「`」包括住内容,若要取用变数就使用${变数}即可

console.log(`name: ${name}`) //name: Ian

Number

储存数字等等,像是价钱等计算

var price = 90

Array

• index(索引)从0开始
• 可放入任何资料型态
• array中可以再放入array达成多维阵列(matrix)

Array我们可以理解为一个篮子装了很多资料,并且这个篮子有别於我们平常使用1开始,array的index是从0开始计算

假设我们要储存3天的资料会用以下方式储存,以下为三天,若要储存100天不就要有100个变数...，放心array就是解决这种问题。

var day1 = '33'
var day2 = '32'
var day3 = '31'

我们使用 , 做为阵列中切割的方式

var tempetature = ['33', '32', '31']

var tempetature = ['33', '32', '31']
console.log(tempetature) // 印出变数
console.log(tempetatuer[0]) //33

截图的部分我是去extentions中下载code runner这个扩充套件,即可在编译器中直接执行程序。

拉回正题

array可以放任何型态

React (JavaScript library)中的 useState就是在array放入function,不知道React可以先跳过。

以下为在阵列中放入函式:

var temp = [function(){console.log('hello world')}, 'Ian']

console.log(temp[0] , temp[1])
temp[0]()

Object

• 资料型态为 key : value
• 透过 . 存取key取得value
• 也可以使用object['key']

举个例子有个使用者他叫 Ian 年龄 22岁 性别 男,在object中会这样表示

var user = {
  name: 'Ian',
  age: 22,
  sex: 'male'
}

我们来取得user的name

var user = {
  name: 'Ian',
  age: 22,
  sex: 'male'
}

console.log(user.name) //Ian

也可以这样写

var user = {
  name: 'Ian',
  age: 22,
  sex: 'male'
}

console.log(user['name']) //Ian

记得用object[key]一定要用' ' 单引号把字串包起来,不然会变成取用变数!!!

Function

• 可以理解function为执行一长串命令的指令
• 计算的函式

我们执行以下代码

function sayHi() {
  console.log('Hello')
}

奇怪,怎麽没有反应???
没错,因为我们没有呼叫函式当然不会执行

function sayHi() {
  console.log('Hello')
}
sayHi() // Hello

接下来我们来使用带有参数的function

var user = 'Jessica'

function sayHi(parameter) {
  console.log("Hi,I'm " + parameter)
}

sayHi(user) //Hi,I'm Jessica

我们一一分解

首先指定一个user变数为Jessica

并且我们定义一个sayHi function带入参数

最後我们呼叫sayHi并且把user丢到()里面

而sayHi funcition就会抓到user变数,并且把parameter指向user

而console.log实际会印出 ("Hi,I'm " + user)