JavaScript基本語法02

JavaScript ECMAScript · 發表 2018-11-23 16:12:25

摘要：書接上文JavaScript基本語法01, 記錄了字串, 日期Date 和JavaScript 的基本語法接下來將繼續記錄陣列, 運算子和條件語句等相關語法筆記陣列Array JavaScript ...

書接上文JavaScript基本語法01, 記錄了字串, 日期Date 和JavaScript 的基本語法
接下來將繼續記錄陣列, 運算子和條件語句等相關語法筆記

陣列Array

JavaScript
JavaScript
length
JavaScript

建立陣列

直接量建立

// 字面量表示法
//1.1: 簡單陣列
var empty = [];//空陣列
var pram = [2, 3, 2]//有三個數值的陣列
var misc = [1.1, true, "a"] //三個不同元素的陣列

// 1.2: 陣列中的直接量不一定是常量,也可能是表示式
var base = 1024
var baseArr = [base, base + 1, base + 2, base + 3]

// 1.3: 包含物件或陣列
var array3 = [[1, {x: 1, y: 2}], [2, {x: 3, y: 4}]]

//1.4: 忽略中間量中的某個值,省略的元素將被賦予undefined
var undef1 = [1, ,3] //三個元素,中間的為undefined
var undef2 = [, ,] //2個元素都是undefined
//注: 陣列直接量的語法允許遊客選的結尾的逗號,故[, ,]只有2個元素

Array()建立

// 建構函式
// 空陣列
var a = new Array()
//指定陣列長度
var a1 = newArray(10)
//顯示建立
var a2 = newArray(1, 2, 3, "a")

陣列操作

//3. 讀寫陣列元素
//注: 1.陣列是物件的特殊形式,故JavaScript的陣列不存在越界報錯的情況,只會取到undefined
var value = a2[3]

//4. 陣列的長度
//length屬性為可讀可寫
var arr = [1, 2, 3, 4, 5, 6]
var arrLength = arr.length//6
arr.length = 4//陣列變為[1, 2, 3, 4]
arr.length = 0// 刪除所有元素,為[]
arr.length = 5// 長度為5,但是沒有元素,相當於new Array(5)

//5. 陣列元素的新增和刪除
//5.1: 索引值新增
var a0 = []
a0[0] = 3
a0[1] = "one"
//a0為[3, "one"]

陣列的方法

主要介紹ECMAScript 中的方法

join()

0.不改變原陣列
1.將陣列所有的元素都轉化成字串,並連線在一起,返回生成後的字串(如不指定分隔符預設使用逗號)
2.join是String.split()的逆向操作

var arr0 = [1, 2, 3, 4]
var join1 = arr0.join() // "1,2,3,4"
var join2 = arr0.join("") //"1234"
var join3 = arr0.join("-")//"1-2-3-4"
console.log(join1,join2,join3)

reverse()

0.改變原陣列
1.將陣列中的元素顛倒順序*/

arr0.reverse()//現在arr0為[4, 3, 2, 1]
console.log(arr0)

sort()

0.改變原陣列
1.不帶引數時,以字母表順序排序
2.如果陣列包含undefined,則會被排到陣列的末尾
3.字母排序區分大小寫,A < a

var arr1 = new Array("tian", "quan", "jun")
arr1.sort() //arr1 = ["jun", "quan", "tian"]
console.log(arr1)

//條件比較
vararr2 = new Array("ant", "Bug", "cat", "Dog")
arr2.sort()//["Bug", "Dog", "ant", "cat"]
console.log(arr2)

//不區分大小寫排序
arr2.sort(function (s, t) {
var a = s.toLowerCase()
var b = t.toLowerCase()
if (a < b) return -1
if (a > b) return 1
return 0
})
console.log(arr2)
//["ant", "Bug", "cat", "Dog"]

concat()

建立並返回一個新陣列

//0.不改變原陣列
var arr4 = [0, 2, 3]
var concat1 = arr4.concat() //[0, 2, 3]
var concat2 = arr4.concat(1, 4)//[0, 2, 3, 1, 4]
var concat3 = arr4.concat([1, 4]) //[0, 2, 3, 1, 4]
var concat4 = arr4.concat([1, 4], [5, 6]) //[0, 2, 3, 1, 4, 5, 6]
var concat5 = arr4.concat(1, [4, [5, 6]]) //[0, 2, 3, 1, 4, [5, 6]]
var concatArr = [concat1, concat2, concat3, concat4, concat5]
console.log(concatArr)

slice()

注意:
1.返回陣列的部分陣列
2.不改變原陣列
3.兩個引數,分別表示始末位置,含左不含右
4.1表示第一個元素,-1表示倒數第一個元素
5.只有一個引數,預設以此引數開始,到最後一個元素結束

var arr3 = [1, 2, 3, 4, 5]
var slice1 = arr3.slice(0,2) //[1, 2]
var slice2 = arr3.slice(3) //[4, 5]
var slice3 = arr3.slice(1,-2) //[2, 3]
var slice4 = arr3.slice(-3,-2)//[3]
var sliceArr = [slice1, slice2, slice3, slice4]
console.log(sliceArr)

splice()

1.在陣列中插入或刪除元素的通用方法
2.會修改原陣列,會改變陣列的索引值
3.兩個引數,引數一:起始位置;引數二:處理元素的個數(可省略)
4.若省略第二個引數,預設從起始位置到最後
5.如果沒有元素就返回空陣列

var m = [1, 2, 3, 4, 5, 6, 7]
var splice1 = m.splice(4)//返回[5, 6, 7], m 是[1, 2, 3, 4]
console.log(m)
var splice2 = m.splice(1, 2) //返回[2, 3], m 是[1, 4]
console.log(m)
var splice3 = m.splice(1, 1) //返回[4], m 是[1]
console.log(m)
var spliceArr = [splice1, splice2, splice3]
console.log(spliceArr)

push和pop

方法將陣列當成棧使用
1.push方法在尾部新增一個或者多個元素,返回新的陣列長度
2.pop刪除陣列的最後一個元素,減小陣列的長度,返回刪除的值
3.改變原陣列的值和長度

var m0 = []
var pp1 = m0.push(1, 2)//[1, 2], 返回2
var pp2 = m0.pop()//[1], 返回2
var pp3 = m0.push(3, 4)//[1, 3, 4], 返回3
var pp4 = m0.pop()//[1, 3],返回4
var pp5 = m0.push([9,0]) //[1, 3, [9, 0]], 返回3
var pp6 = m0.pop()//[1, 3], 返回[9, 0]
var pp7 = m0.pop()//[1], 返回3
var ppArr = [pp1, pp2, pp3, pp4, pp5, pp6, pp7]
console.log(ppArr)

unshift和shift

1.unshift在頭部新增一個或者多個元素,返回長度
2.shift刪除陣列的第一個元素,返回刪除的元素
3.改變原陣列,改變原陣列的索引
4.unshift插入多個元素時,試一次性插入的

var sh = []
var sh1 = sh.unshift(1)//sh: [1], 返回: 1
var sh2 = sh.unshift(22) //sh: [1, 22], 返回: 2
var sh3 = sh.shift()//sh: [22], 返回: 22
var sh4 = sh.unshift(3, [4, 5]) //sh: [3, [4, 5], 1], 返回:3
var sh5 = sh.shift()//sh: [[4, 5], 1], 返回: 3
var sh6 = sh.shift()//sh: [1], 返回: [4, 5]
var shiftArr = [sh1, sh2, sh3, sh4, sh5, sh6]
console.log(shiftArr)
//注: unshift插入多個元素時,試一次性插入的,例如:
sh.unshift(3, 4)
// 結果: [3, 4]
sh.unshift(3)
sh.unshift(4)
//結果: [4, 3]

toString和toLocalString

1.toString()將陣列元素轉化成字串後,用都好連結輸出
2.toString()和join()不加引數的返回的值是一樣的
3.toLocalString()是toString()的本地化版本

var str0 = [1, 2, 3].toString() //返回: "1,2,3"
var str1 = ["a", "b", "c"].toString()//返回: "a,b,c"
var str2 = [1, [2, "c"]].toString()//返回: "1,2,c"
var str3 = [1, 2, 3].toLocaleString()//返回: "1,2,3"
var strArr = [str0, str1, str2, str3, str4]
console.log(strArr)

`ECMAScript5`

ECMAScript5
ECMAScript5
ECMAScript5

forEach()

1.方法從頭到尾遍歷陣列,為每個元素呼叫指定的函式
2.forEach使用三個引數呼叫該函式:陣列元素,元素索引, 陣列本身

var data1 = [1, 2, 3, 4, 5]
//求和
var sum = 0
data1.forEach(function (value) {
sum += value
})
//15

//每個元素本身自加1
data1.forEach(function (value, i, arr) {
arr[i] = value + 1
})
//[2, 3, 4, 5, 6]

map()

1.返回一個新陣列,不改變原陣列
2.原陣列若是稀疏陣列,返回也是稀疏陣列
3.具有相同的長度,相同的缺失元素

var arr2 = data1.map(function (x) {
return x * x
})
// [4, 9, 16, 25, 36]

filter()

邏輯判定,過濾陣列

1.返回原陣列的一個子集
2.返回原陣列符合條件的元素,組成新陣列
3.會將稀疏陣列壓縮,返回的是稠密陣列

var arr3 = data1.filter(function (x) {
return x > 3
})
//[4, 5, 6]

var data2 = [1, 2, 3, 4, 5]
var arr4 = data2.filter(function (i) {
return i % 2 == 0
})
//[2, 4]

var data3 = [1, 2, , , null, 5]
var arr5 = data3.filter(function (x) {
return x !== undefined && x != null
})
console.log(arr5)
//[1, 2, 5]

every和some

陣列的邏輯判定

1.對陣列元素應用指定的函式進行判定
2.返回trur或者false
2.every()都為true返回true,否則返回false
3.some()都為false,返回false;有一個為true,返回true
4.一旦該方法確定了返回值,就會停止遍歷陣列
5.空陣列,every()返回true,some()返回false

var data4 = [1, 2, 3, 4, 5]
var sum1 = data4.every(function (x) {
return x < 10
})
//sum1 = true
var sum2 = data4.every(function (x) {
return x % 2 === 0
})
//sum2 = false

var sum3 = data4.some(function (x) {
return x % 2 === 0
})
//sum3 = true
var sum4 = data4.some(isNaN)
//sum4 = false, data4不包含非整數值元素

reduce和reduceRigh

作用: 將陣列元素進行組合生成單個值
1.reduce()需要兩個引數;引數一:執行操作的函式;引數二:傳遞給函式的初始值
2.reduceRight()是倒敘操作,功能與reduce相同

var data5 = [1, 2, 3, 4, 5]
var sn0 = data5.reduce(function (x, y) {
return x + y
}, 0)
//15

var sn1 = data5.reduce(function (x, y) {
return x * y
}, 1)
//120

var sn2 = data5.reduce(function (x, y) {
return x > y ? x : y
})

indexOf和lastIndexOf

1.搜尋整個陣列中具有給定值的元素,返回找到的第一個元素的索引,如果沒有找到就返回-1
2.indexOf(),從前向後搜尋,lastIndexOf()從後向前搜尋
3.引數一:元素值; 引數二: 搜尋的起始位置(可省略,預設從頭開始)

var data6 = [0, 1, 2, 1, 0]
var index1 = data6.indexOf(1) //1, data6[1] = 1
var index2 = data6.indexOf(3) //-1, 沒有值為3的元素
var index3 = data6.lastIndexOf(1) //3, data6[3] = 1
var index4 = data6.indexOf(2, 1)//2, data6[2] = 2
var index5 = data6.lastIndexOf(2, -1)//2, data6[2] = 2

判定一個位置物件是否為陣列

var data = [1, 2]
// var isA = data.isArray()
console.log(data.isArray())

型別間的轉換

Number()

將其他型別資料轉成Number型別資料

//1、Null-->Number
console.log(Number(null));//0

//2、Undefined-->Number
console.log(Number(undefined));//NaN

//3、Boolean-->Number
console.log(Number(true));//1
console.log(Number(false));//0

//4、String-->Number
//如果字串中只有數字、小數點、(最前面空格 正負號)則轉換成對應的十進位制數
console.log(Number("123"));//123
console.log(Number("12.3"));//12.3
console.log(Number("+123"));//123
console.log(Number("-123"));//-123
console.log(Number("123"));//123

//如果是一個空字串，結果是0
console.log(Number(""));//0
console.log(Number(""));//0

//如果字串中含有非數字，非正負號，轉換失敗，結果NaN
console.log(Number("123abc"));//NaN
console.log(Number("123+456"));//NaN
console.log(Number("abc"));//NaN

parseInt()

會試圖將其收到的任何輸入值(通常是字串）轉成整數型別，如果轉換失敗就返回NaN。
轉換規則：如果第一個非空白字元(空格、換行、tab)是數字或者正負號則開始轉換，直到碰到第一個非數字字元停止轉換。如果第一個非空白字元不是數字或者正負號，轉換失敗，結果是NaN.

console.log('-----parseInt------')
console.log(parseInt("123"));//123
console.log(parseInt("+123"));//123
console.log(parseInt("-123"));//-123
console.log(parseInt("123"));//123
console.log(parseInt("12a3"));//12
console.log(parseInt("12.3"));//12
console.log(parseInt("12 3"));//12

//NaN
console.log(parseInt("true")); //NaN
console.log(parseInt(".123")); //NaN
console.log(parseInt("+-123")); //NaN

parseFloat()

會試圖將其收到的任何輸入值(通常是字串）轉成浮點數型別，如果轉換失敗就返回NaN。

console.log( parseFloat("2.5a") );//2.5
console.log( parseFloat(".56") ); //0.56
console.log( parseFloat("-.23")); //- 0.23
console.log( parseFloat("+.23 + .1") );//0.23
console.log( parseFloat("3.14.956") ); //3.14
console.log( parseFloat("a3.14") ); //NaN

String

其它基本型別轉換成String型別

//Null-->String
var str0 = "titan" + null;
console.log(typeof str0); //string
console.log(str0); //titannull

//Undefined-->String
var str1 = "jun" + undefined;
console.log(typeof str1); //string
console.log(str1); //junundefined

//Boolean-->String
var str2 = true.toString(); //true
console.log(typeof str2);//string
console.log(str2);//"true"
console.log(false.toString());//"false"


//Number-->String
var num = 10;
var str3 = num.toString();
console.log(typeof str3);//string
console.log(str3);//"10"

Boolean()

其它基本型別轉換成Boolean 型別
絕大部分值在轉換為布林型別時都為true ，但以下6中falsy 值除外

/**
 * 1、""
 * 2、null
 * 3、undefined
 * 4、0
 * 5、NaN
 * 6、false
 */
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(false));

// 都輸出false