筆記、JS101 (常用內建函式)


Posted by s103071049 on 2021-04-21

| 內建函式可以幫助節省時間、簡潔程式碼。務必理解函式回傳的型態為何
參考查詢 monzilla

一、數字相關函式

  • 字串轉數字
var a=20
var b="10"
var c="10.25"

console.log(a+Number(b)) //法一

console.log(a+parseInt(b,10)) //法二,後面的參數為幾進位
  • 數字轉字串
var a=2
a.toString() //法一
a+"" //法二,數字加字串會變成字串
  • 浮點數
console.log(a+parseFloat(b)) //小數
console.log(parseFloat(b).toFixed()) // return string 取小數第幾位四捨五入
  • 精準度
// JS 可以存的最大數值最小數值是多少,超過會不精準
Number.MAX_VALUE
Number.MIN_VALUE
  • 數學相關
Math.PI //constant, usually using Uppercase to express

Math.ceil(10.5) // 11, 無條件進位
Math.ceil(10) // 10
Math.floor(10.9) //10 無條件捨去
Math.round(10.9) //11 四捨五入

Math.sqrt(9) //3 開根號
Math.pow(2,10) //2^10 次方

Math.random() //產生隨機數 範圍在[0,1) 
//產生1~10的隨機數 console.log(Math.floor(Math.random()*10+1))

二、字串相關函式

  • toLowerCase , toUpperCase
//法一
var a ="abc".toUpperCase() 
var a ="ABC".toLowerCase()

//法二 ASCI

var a="g"  

var aCode=a.charCodeAt(0) //parametedr is index number
var str = String.fromCharCode(aCode-('a'.charCodeAt(0)-'A'.charCodeAt(0)))

console.log(str)
  • 判斷大小寫字母
//字串可以比大小

var char="g"  
console.log(char>"a" && char<"z") //true
console.log(char>"A" && char<"Z") //false
  • indexOf()
//判斷某個字是否存在於該字串中

var str ="miss u so much~"
//>=0 一定存在;<0 表不存在

var index = str.indexOf("much") 
//10 如果有出現在字串中,會回傳第一個字字母出現的位置
console.log(index)
  • str.replace(a,b)
//將 a 換成 b 只會換掉第一個
var str ="miss u so much~"

var a = str.replace("s","@")  //mi@s u so much~
console.log(a)

//將 所有 a 換成 b 要用正規表達式
var str ="miss u so much~"

var a = str.replace(/s/g,"@") 
console.log(a) //mi@@ u @o much~
  • str.split() 將string切開變成array,常用於讀取資料
  • 括號內傳入以甚麼來切割
var str ="miss u so much~"

console.log(str.split(" ")) //[ 'miss', 'u', 'so', 'much~' ]
  • str.trim() 將string前面的space去掉
var str ="   miss u so much~"

console.log(str.trim(" ")) //miss u so much~
  • str.length 判斷字串長度
// str.length 不是函式,所以沒有()
var str ="   miss u so much~   "


console.log(str.length) //21個字

for(var i=0;i<str.length;i++){
   console.log(str[i]); //把每個字列在一行
}

三、陣列相關函式

  • arr.join() 把每一個陣列元素,用特定的字元接在一起變成字串
    | ()未指定,預設值為空白
// arr.join() turn array into string
var arr =[1,2,3]
console.log(arr.join()) //1,2,3
console.log(arr.join("$")) //1$2$3
  • arr.map(函式) 把arr的每一個元素都帶到function去,用回傳值取代原本的值
    | (),帶入function名稱
// want each component in array become negative

var arr =[1,2,3]

function negative(x){
   return x*-1
}
console.log(arr.map(negative)) //我想要陣列的每個元素變成負數
// 可以結合匿名函式
// 可以不斷地接下去

var arr =[1,2,3]

console.log(
   arr
   .map (function (x){
     return x*-1 //我想要陣列的每個元素變成負數
})
  .map (function (x){
     return x*2  //再將陣列的每個元素變兩倍
})
)
  • arr.filter() 用法同map,回傳true的會留下,回傳false的會不見
var arr =[1,2,3,-2,-3,-5]

console.log(
   arr
   .map (function (x){
     return x*-1 // [-1,-2,-3,2,3,5]
})
   .filter (function (x){
    return x>0 //[2,3,5]
   })
)
  • arr.slice() 只想要陣列的某個部分,可以用slice這個函式

    zero-based index before which to end extraction. silce extracts up to but not including end

| arr.slice(a,b) 我從這陣列索引是a的地方往後切,切到b但b我不要
| arr.slice(a) 我從這陣列索引是a的地方切,後面的我全都要

var animals =['ant','biscon','camel','duck','elephant']

console.log(animals.slice(2)) //['camel','duck','elephant']

console.log(animals.slice(2,4))//['camel','duck']

console.log(animals.slice(1,5)) // ['biscon','camel','duck','elephant']
  • arr.splice() 用途為新增、刪除元素,會改變原本的陣列

    splice(start, deleteCount, item1, item2, itemN), start 表示從第幾個 index 開始,deleteCount means an integer indicating the number of elements in the array to remove from start.

var animals =['ant','biscon','camel','duck','elephant']

animals.splice(1,0,"dog") 
console.log(animals) 
//['ant','dog','biscon','camel','duck','elephant']

animals.splice(4,2,"cat","bear")//[duck'] 刪除換成 'cat' ,'bear'
console.log(animals) //['ant','dog','biscon','camel','cat','bear']
  • arr.sort() 會依照英文字母排序、依照字串的第一個數字由小排到大
var  arr =[1,30,4,21]

//  a b 由小排到大
//法一、
arr.sort(function(a,b){
    if(a===b) return 0
    if (b>a) return -1 //等價 return a>b ? 1 :-1 
    return 1
})

console.log(arr)
//法二、
arr.sort(function(a,b){
    return a-b
})

#js101-(常用內建函式)







Related Posts

前端、後端差異 & 瀏覽器運作流程

前端、後端差異 & 瀏覽器運作流程

Next.js 入門:使用 next export 輸出 static file

Next.js 入門:使用 next export 輸出 static file

DNS 是什麼?DNA 的兄弟嗎?

DNS 是什麼?DNA 的兄弟嗎?


Comments