JS常用方法

2020-10-25| 前端

JS（JavaScript）是一种脚本语言，是许多浏览器的默认脚本语言，因此不需要在<script>标签中使用 type=”text/javascript”。

下面所有JS代码都是写在下面这个模板的<script>标签中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>

<body>
  <div id="app">
    <button id="button" onclick="test()">Button</button>
  </div>
</body>

<script>
	// JS代码....
</script>
  
</html>

获取HTML元素

1	document.getElementById(id)

对象与JSON字符串互相转化

1 2	var jsonStr = JSON.stringify(obj1) // 对象转JSON字符串 var obj2 = JSON.parse(jsonStr) // JSON字符串转对象

判断对象为空

js的对象有3种状态：undefined、null、空对象（无属性的对象）、有属性的对象

function test() {

	var obj1
	getType(obj1) // undefined
	
	var obj2 = null
	getType(obj2) // null

	var obj3 = {}
	getType(obj3) // {}

	var obj4 = {
		a: 1,
		b: 2
	}
	getType(obj4) // 有属性
}

function getType(obj) {
	if(obj === undefined) console.log('undefined')
	else if(obj === null) console.log('null')
	else if(Object.keys(obj).length === 0) console.log('{}')
	else console.log('有属性')
}

另外，很多时候判断变量直接写if(obj)，这个详细展开说下。

IF+变量

很多时候，我们直接使用变量作为判断条件，如：

1 2	if(obj) {} obj ? true : false

对于不同的变量类型，判断为true/false的结果各有差异，具体为：

undefined、null => false
空字符串 => false （只有空格的字符串不算空字符串）
整数0 => false

为true的情况就与以上情况相反。

是否相等

两个等号==与三个等号===都是用来比较变量是否相等，区别在于，两个等号是不严格相等，类型不同的变量只要值相等也属于相等。一般使用三个等号，类型不同即不相等。
不等号 !=与!==的区别也是如此，一般使用后者。

例子：

function test() {
	var num = 1
	var str = "1"

	console.log(num == str) // true
	console.log(num === str) // false
}

遍历数组

遍历数组元素都是通过下标来遍历，无论数组元素是普通类型还是对象。

function test() {
	var arr = [1,2,3,4,5,6]
	for(var i in arr) { // 第一种
		console.log(arr[i])
	}
	for(var i=0; i<arr.length; i++){ // 第二种
		console.log(arr[i])
	}

	var obj1 = {
		a: 1,
		b: 2,
		c: 3,
		d: 4
	}
	var obj2 = {
		e: 99,
		f: 88
	}
	var arr = [obj1, obj2] // 对象数组
	for(var i in arr) {
		console.log(arr[i])
	}
}

遍历对象属性

遍历对象属性也可以用for in语法，此外还可以用Object.keys()。

function test() {
	var obj = {
		a: 1,
		b: 2,
		c: 3,
		d: 4
	}

	for(var key in obj) {
		console.log(key + ":" + obj[key])
	}

	var keys = Object.keys(obj); // 只包含key的数组 于是遍历对象改为遍历数组
	for(var i in keys) {
		console.log(keys[i] + ":" + obj[keys[i]])
	}
}

对象合并与复制

使用三点运算符... 或 Object.assign()

三点运算符例子：

function test() {
	var obj1 = {
		a: 1,
		b: 2,
		c: 3,
		d: 4
	}
	var obj2 = {
		e: 99,
		f: 88
	}
	
	var obj3 = {...obj1} // 复制
	
	var obj4 = {...obj1, ...obj2} // 合并
	
	var obj5 = {
		e: 100,
		f: 88
	}
	var obj6 = {...obj4, ...obj5} // 有相同属性时，后者覆盖前者
	
	console.log(JSON.stringify(obj3)) // {"a":1,"b":2,"c":3,"d":4}
	console.log(JSON.stringify(obj4)) // {"a":1,"b":2,"c":3,"d":4,"e":99,"f":88}
	console.log(JSON.stringify(obj6)) // {"a":1,"b":2,"c":3,"d":4,"e":100,"f":88}
}

Object.assign()例子：

function test() {
	var obj1 = {
		a: 1,
		b: 2,
		c: 3,
		d: 4
	}
	var obj2 = {
		e: 99,
		f: 88
	}
	
	var obj5 = {
		e: 100,
		f: 88
	}
	
	var obj6 = Object.assign(obj1, obj2, obj5) // 把obj2、obj5都合并到obj1并返回

	console.log(JSON.stringify(obj1)) // {"a":1,"b":2,"c":3,"d":4,"e":100,"f":88}
	console.log(JSON.stringify(obj6)) // {"a":1,"b":2,"c":3,"d":4,"e":100,"f":88}
}

注：合并后的对象属性顺序与合并顺序一致。当参与合并的两个对象有相同属性 key 时，后一个对象的属性 value 会覆盖前一个对象的value。

对象属性的增删

JS对象可以随意新增、删除属性字段。前提是这个对象不为 null 或 undefined。

function test() {
	var user = {}
	
	user.name = "abc" // 添加属性
	user.age = 24
	user.sex = "male"
	console.log(JSON.stringify(user)) // {"name":"abc","age":24,"sex":"male"}
	
	delete user.age // 删除属性
	console.log(JSON.stringify(user)) // {"name":"abc","sex":"male"}
	
	var user2 = null
	user2.name = "efg" // Cannot set property 'name' of null
	
	var user3
	user3.name = "efg" // Cannot set property 'name' of undefined
}

查找数组元素并返回

JS的Array.find方法用于查找出满足指定条件的元素。

function test() {
	var arr = [1,2,3,4,5]
	
	var result = arr.find((e) => {
		e = e + 1
		return e === 6
	})
	
	console.log(arr) // 不改变原数组元素
	console.log(result) // 5
	
	var arr2 = []
	var result2 = arr2.find((e) => {
		return e + 1 === 6
	})
	console.log(result2) // undefined
}

在回调函数中，“return + 条件”，条件符合则返回true，查找到元素。回调函数中即使对每个元素有修改，也不会改变原数组和原数组中的元素。若符合条件的元素有多个，只返回第一个。

若数组为空，则返回 undefined 。

此外，还有返回符合条件的元素的下标的方法：Array.findIndex。除了返回的是下标值外，其他和 find 方法无异。空数组返回 -1 。

function test() {
	var arr = [1,2,3,4,5]
	
	var result = arr.findIndex((e) => {
		e = e + 1
		return e === 6
	})
	
	console.log(arr) // 不改变原数组元素
	console.log(result) // 5
	
	var arr2 = []
	var result2 = arr2.findIndex((e) => {
		return e + 1 === 6
	})
	console.log(result2) // -1
}

查找元素下标还有更简单的方法： indexOf和lastIndexOf，用法如下：

function test() {
	var arr = [1,2,3,4,5,4]
	
	var result = arr.indexOf(4) // 3
	var result2 = arr.lastIndexOf(4) // 5
	
	console.log(result)
	console.log(result2)
}

如果要返回所有符合条件的元素，用 filter 方法：

function test() {
	var arr = [1,2,3,4,5,4]
	
	var result = arr.filter((e) => {
		return e === 4
	})

	console.log(result)
}

遍历数组元素并执行函数

这个功能用上面小节“遍历数组”中的方法也可实现。这里介绍更高级的方法。

map:

function test() {
	var arr = [1,2,3,4,5]
	
	var result = arr.map((e) => {
		return e*2
	})
	
	console.log(arr) // [1,2,3,4,5]
	console.log(result) // [2, 4, 6, 8, 10]
}

map 方法对原数组每个元素执行一遍回调函数，返回新数组。如果没有return，则新数组元素为 undefined。若原数组为空，则新数组也为空：[]

map 方法也可以这么用：

function test() {
	var obj1 = {
		a: 1,
		b: 2
	}
	var obj2 = {
		a: 3,
		b: 4
	}
	var obj3 = {
		a: 5,
		b: 6
	}	
	
	var arr = [obj1, obj2, obj3]
	var arrA = []
	var arrB = []
	
	arr.map((e, index) => {
		arrA[index] = e.a
		arrB[index] = e.b
	})
	
	console.log(arr)
	console.log(arrA) // [1, 3, 5]
	console.log(arrB) // [2, 4, 6]
}

forEach:

function test() {
	var arr = [1,2,3,4,5]
	arr.forEach((e, index) => {
		console.log(e)
	})
}

与 map 不同，forEach 没有返回值，但也是每个元素都执行一遍回调函数。

map 和 forEach 会不会改变原数组？这个要看具体情况。

如果是对象数组，则会改变原数组：
【因为对象数组遍历时的 e 是引用类型，改变引用即改变原对象

function test() {
	var obj1 = {
		a: 1,
		b: 2
	}
	var obj2 = {
		a: 3,
		b: 4
	}
	var obj3 = {
		a: 5,
		b: 6
	}
	var arr = [obj1,obj2,obj3]
	
	arr.map((e, index) => {
		e.b = e.a
	})
	
	console.log(arr) // [{a: 1, b: 1},{a: 3, b: 3},{a: 5, b: 5}]

}

如果是基本类型数组，则不改变原数组：
【基本类型包括number, string, boolean, null, undefined

function test() {
	var arr = [1,2,3,4,5]
	
	arr.map((e, index) => {
		e = e*2
	})
	
	console.log(arr) // [1,2,3,4,5]
}

如果是下面这样用，不管是什么类型的数组都会改变原数组：

function test() {
	var arr = [1,2,3,4,5]
	
	arr.map((e, index) => {
		arr[index] = 1
	})
	
	console.log(arr) // [1, 1, 1, 1, 1]

}

上面的例子都是用 map，改成 forEach 现象相同。

增删数组元素

pop：删除数组的最后一个元素，返回删除的元素。

push：向数组的末尾添加一个或更多元素，返回新的长度。

shift：删除数组的第一个元素，返回删除的元素。

unshift：向数组的开头添加一个或更多元素，返回新的长度。

例子：

function test() {
	
	var arr = [1,2,3,4,5,6,7,8,9,10]
	
	var result1 = arr.pop() 
	console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
	console.log(result1) // 10
	console.log("----------------")
	
	var result2 = arr.push(11,12,13)
	console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13]
	console.log(result2) // 12
	console.log("----------------")

	var result3 = arr.shift()
	console.log(arr) // [2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13]
	console.log(result3) // 1
	console.log("----------------")
	
	var result4 = arr.unshift(20,21,22)
	console.log(arr) // [20, 21, 22, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13]
	console.log(result4) // 14
	console.log("----------------")	
	
}

指定下标增删元素：splice 方法

array.splice(index, howmany, item1,…..,itemX)

index：要添加/删除元素的下标位置
howmany：在此下标位删除多少元素，为0表示不删除元素
item1,…..,itemX：要添加的元素，一个或多个

只返回被删除的元素组成的数组，若没有删除元素则返回空数组。

function test() {
	
	var arr = [1,2,3,4,5,6,7,8,9,10]
	
	var result1 = arr.splice(2,2) // 删除index=2,3 的元素
	console.log(arr) // [1, 2, 5, 6, 7, 8, 9, 10]
	console.log(result1) // [3, 4]
	console.log("----------------")
	
	var result2 = arr.splice(7,0,20,21) // 在 index=7 插入两个元素
	console.log(arr) // [1, 2, 5, 6, 7, 8, 9, 20, 21, 10]
	console.log(result2) // []
	console.log("----------------")	
	
	var result3 = arr.splice(1,3,30,31)  // 删除index=1,2,3 的元素，再在 index=1 插入两个元素
	console.log(arr) // [1, 30, 31, 7, 8, 9, 20, 21, 10]
	console.log(result2) // []
	console.log("----------------")	
}

字符串常用方法

JS中的字符串变量有很多方法的使用方式和作用与 Java 类似，其中包括：
substring(start, end)
split(regex, limit)
concat(str1, str2, …)
indexOf(searchString，position)
lastIndexOf(searchString, position)
replace(searchValue, replaceValue)