全栈之路javascript基础知识2

Posted 2021-11-24 涂宗勋

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]