Fork me on GitHub

JavaScript基本语法02

JavaScript

  • 书接上文JavaScript基本语法01, 记录了字符串, 日期DateJavaScript的基本语法
  • 接下来将继续记录数组, 运算符和条件语句等相关语法笔记

数组Array

  • 数组是值的有序集合
  • JavaScript数组事务类型的:数组元素可以使任何类型, 同一数组中的不同元素也可以是不同类型
  • 数组的元素也可以是对象或者其他数组
  • JavaScript数组可能是稀疏的: 数组元素的索引不一定是连续的,之间可能有空缺
  • 稀疏数组的length比任何元素的索引都要大
  • JavaScript中的数组可以存储多个不同类型的数据

创建数组

直接量创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 字面量表示法
//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()创建

1
2
3
4
5
6
7
// 构造函数
// 空数组
var a = new Array()
//指定数组长度
var a1 = new Array(10)
//显示创建
var a2 = new Array(1, 2, 3, "a")

数组操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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()的逆向操作
1
2
3
4
5
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.将数组中的元素颠倒顺序*/
1
2
arr0.reverse()  //现在arr0为[4, 3, 2, 1]
console.log(arr0)

sort()

  • 0.改变原数组
  • 1.不带参数时,以字母表顺序排序
  • 2.如果数组包含undefined,则会被排到数组的末尾
  • 3.字母排序区分大小写,A < a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var arr1 = new Array("tian", "quan", "jun")
arr1.sort() //arr1 = ["jun", "quan", "tian"]
console.log(arr1)

//条件比较
var arr2 = 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()

创建并返回一个新数组

1
2
3
4
5
6
7
8
9
//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.只有一个参数,默认以此参数开始,到最后一个元素结束
1
2
3
4
5
6
7
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.如果没有元素就返回空数组
1
2
3
4
5
6
7
8
9
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.改变原数组的值和长度
1
2
3
4
5
6
7
8
9
10
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插入多个元素时,试一次性插入的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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()的本地化版本
1
2
3
4
5
6
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

  • 1.ECMAScript5定义了九个新的数组方法
  • 2.大多数ECMAScript5数组方法的第一个参数是一个函数
  • 2.第二个参数是可选的,如果有,则调用的函数被看作是第二个参数的方法
  • 3.也就是说在调用函数时,传递进去的第二个参数作为它的this关键字的值来使用
  • 4.ECMAScript5中的数组方法不会修改他们调用的原始数组
  • 5.传递给这些方法的函数是可以改变这些数组的

forEach()

  • 1.方法从头到尾遍历数组,为每个元素调用指定的函数
  • 2.forEach使用三个参数调用该函数:数组元素,元素索引, 数组本身
1
2
3
4
5
6
7
8
9
10
11
12
13
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.具有相同的长度,相同的缺失元素
1
2
3
4
var arr2 = data1.map(function (x) {
return x * x
})
// [4, 9, 16, 25, 36]

filter()

逻辑判定,过滤数组

  • 1.返回原数组的一个子集
  • 2.返回原数组符合条件的元素,组成新数组
  • 3.会将稀疏数组压缩,返回的是稠密数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.参数一:元素值; 参数二: 搜索的起始位置(可省略,默认从头开始)
1
2
3
4
5
6
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

判定一个位置对象是否为数组

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

类型间的转换

Number()

将其他类型数据转成Number类型数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//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.
1
2
3
4
5
6
7
8
9
10
11
12
13
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。
1
2
3
4
5
6
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类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 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

-------------本文结束感谢您的阅读-------------
欢迎您扫一扫下面的微信公众号,订阅我的博客!
TitanKing wechat
坚持原创技术分享,您的支持将鼓励我继续创作!
分享到:
0%