全栈之路-前端javascript基础知识2

Posted 2022-01-21 涂宗勋

1、==和!=在比较之前会进行类型转换，===和!==比较之前不进行类型转换，一般推荐使用===和!==.
2、关于for循环，除了和java类似的普通for循环之外，还有for in和for of和forEach。其中for in遍历的是对象的属性而不是内容，同时不保证顺序。forEach不能break和return。for of保证顺序，可以break和return，是ES6之后的语法。例如有如下代码：

function test8()
	let arr=["a11","a12","a13","a14","a15"];
	arr.name="testArr";
	arr[7]="a77";
 arr[8]="a88";

	for(const a in arr)
		console.log(a);
	
	console.log("##########################");
	for(const a of arr)
		console.log(a);
		if("a13" === a)
			console.log("break");
			break;
		
	
	console.log("##########################");
	arr.forEach((a)=>
		console.log(a);
	)
	console.log("##########################");
	arr.forEach((a,index,arr1)=>
		console.log(a,index,arr1);
	)

test8();

运行后结果如下：

0
1
2
3
4
7
8
name
##########################
a11
a12
a13
a14
a15
2undefined
a77
a88
break
##########################
a11
a12
a13
a14
a15
a77
a88
##########################
a11 0 (9) ["a11", "a12", "a13", "a14", "a15", empty × 2, "a77", "a88", name: "testArr"]
a12 1 (9) ["a11", "a12", "a13", "a14", "a15", empty × 2, "a77", "a88", name: "testArr"]
a13 2 (9) ["a11", "a12", "a13", "a14", "a15", empty × 2, "a77", "a88", name: "testArr"]
a14 3 (9) ["a11", "a12", "a13", "a14", "a15", empty × 2, "a77", "a88", name: "testArr"]
a15 4 (9) ["a11", "a12", "a13", "a14", "a15", empty × 2, "a77", "a88", name: "testArr"]
a77 7 (9) ["a11", "a12", "a13", "a14", "a15", empty × 2, "a77", "a88", name: "testArr"]
a88 8 (9) ["a11", "a12", "a13", "a14", "a15", empty × 2, "a77", "a88", name: "testArr"]

可以看到，for in打印了数组的索引和name，会跳过没有实际内容的元素；for of顺序遍历数组的内容，空指也会遍历，同时可以正确break退出循环；forEach也是顺序遍历，会跳过空值元素。
3、js中定义有返回值的函数，只需要函数中return即可，不需要像java一样指定返回值类型，例如：

function test9()
	return "hello world";

let h=test9();
console.log(h);

执行结果会正常打印“hello world”.
4、js中string类型属于基本类型，或者叫原始类型。对于所有基础类型变量，不能动态添加可以使用的属性，非基础类型变量才能动态添加可以使用的属性。并且一个变量的赋值，如果是使用new创建的，即使看起来像是基本类型，实际还是object。例如：

function test10()
	let name1="tzx";
	name1.age=31;
	let name2=new String("tuzongxun");
	name2.age=31;
	console.log(name1.age);
	console.log(name2.age);
	console.log(typeof name1.age);
	console.log(typeof name2.age);

test10();

上边代码执行结果如下：

undefined
31
undefined
number

5、js数组常用操作一，filter示例：

function test11()
	let arr=["name":"zs","age":20,"name":"ls","age":20,"name":"ww","age":30];
	arr.filter(function(a)
		return a.age==20;
	).forEach((a)=>
		console.log(a);
	
	)

test11();

filter用来过滤，和java中stream中的filter差不多的作用，上边代码执行后会输出age为20的对象，如下：

name: "zs", age: 20
name: "ls", age: 20

6、js数组常用操作二，find示例：

function test12()
	let arr=["name":"zs","age":20,"name":"ls","age":20,"name":"ww","age":30];
	let user=arr.find(function(a)
		return a.age==20;
	);
	console.log(user);

test12();

find可以用来过滤查找，返回查找到的第一个，然后结束执行，上边代码执行结果如下：

name: "zs", age: 20

7、js数组常用操作三，map示例：

function test13()
	let arr=["name":"zs","age":20,"name":"ls","age":20,"name":"ww","age":30];
	let arr1=arr.map(function(a)
		return a.age;
	);
	console.log(arr1);

test13();

map可以处理一个数组，然后根据逻辑生成一个新的数组，这里就是取对象中的age值组成了一个新的数组返回，执行结果如下：

(3) [20, 20, 30]

8、js数组常用操作四，push、pop、unshift和shift，示例如下：

function test14()
	let arr=[1,2,3];
	arr.push(4)
	console.log(arr);

	arr.pop();
	console.log(arr);

	arr.unshift(4,4);
	console.log(arr);

	arr.shift();
	console.log(arr);

test14();

上述代码执行后输出如下，push可以向数组末尾添加一个或者多个元素，pop从数组末尾删除一个元素，unshift在数组开头添加一个或多个元素，shift从数据开头删除一个元素。

(4) [1, 2, 3, 4]
(3) [1, 2, 3]
(5) [4, 4, 1, 2, 3]
(4) [4, 1, 2, 3]

9、js数组常用操作五，concat、reverse、join和sort，示例如下：

function test15()
	let arr=[4,1,2,3];
	let arr1=[10,11,12];
	let arr2=[20,21,22];
	let arr3=arr.concat(arr1,arr2);
	console.log(arr3);

	arr3.reverse()
        console.log(arr3);

	console.log(arr3.join());
	console.log(arr3.join("-"));
	
	arr3.sort(function(a,b)
		return a-b;
	);
	console.log(arr3);
	arr3.sort(function(a,b)
		return b-a;
	);
	console.log(arr3);

test15();

concat可以把多个数组元素合并为一个数组，reverse反转数组里的元素，join把数组内的元素拼接成字符串，如果不指定参数则默认使用逗号拼接，sort可以对数组排序，排序逻辑根据参数中的函数确定，可以对基础类型排序，也可以对对象排序。上述代码输出结果如下：

(10) [4, 1, 2, 3, 10, 11, 12, 20, 21, 22]
(10) [22, 21, 20, 12, 11, 10, 3, 2, 1, 4]
22,21,20,12,11,10,3,2,1,4
22-21-20-12-11-10-3-2-1-4
(10) [1, 2, 3, 4, 10, 11, 12, 20, 21, 22]
(10) [22, 21, 20, 12, 11, 10, 4, 3, 2, 1]

相关代码地址：https://gitee.com/tuzongxun/js-study/blob/master/test.html