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

Posted 2022-01-21 涂宗勋

1、javascript一开始不叫javascript，之所以叫javascript，是因为当时java被炒的很火，相当于蹭热度。
2、javascript主要有三大块组成，分别是ECMAScript、DOM和BOM。
3、ECMAScript是由ECMAScript-262定义并提供基础核心功能，通常说的ES5、ES6实际就是ECMAScript-262第五版和第六版的简称。
4、DOM即Document Object model，主要是对网页标签的操作，简单粗暴的可以理解成对html标签的操作，是浏览器厂商实现的重点，有相应统一规范。
5、BOM即Browser Object Model，主要是对浏览器的操作，一开始没有统一的规范，直到HTML5对大部分进行了统一。
6、script可以用行内模式，也可以使用外部文件引用方式，默认是按定义的顺序加载执行，但是有一些其他属性可以改变这个默认的动作。
7、为了提升页面加载性能，一般最好把script放到body之后，尽量不放在header上。
8、网络允许的情况下，建议使用外部引用的方式定义和引入script，可有效利用缓存，也可更好的进行管理。
9、noscript标签里的内容可以在浏览器不支持script或者禁用了script时执行。
10、ES5增加了严格模式，使用use strict启用，在javascript开头添加可以对整个javascript生效，也可以只在某个函数中添加，则只对这个函数起作用。
11、javascript语句以分号结尾，也可以不写，但是规范的做法是写上分号。
12、javascript变量可以存任何类型，相当于占位符，定义变量有三个关键字，分别是const、let和var，其中，var在所有版本中均可用，const和let只在ES6之后的版本中有效。
13、在函数中使用var定义变量，则变量是局部变量，如果在函数里不使用关键字定义变量，则这个变量创建后会是全局变量，但此做法不被推荐，严格模式下会报错。
14、let和var的区别一，var定义的变量是函数作用域，let定义的变量是块作用域，例如如下代码：

function test()
	if(true)
		var name='tzx';
	
	console.log(name);

	if(true)
		let name1='tzx';
	
	console.log(name1);

test();

执行之后第一句会成功打印出tzx，第二句则会报错Uncaught ReferenceError: name1 is not defined.
15、let和var区别二，同一个块中，var允许重复声明，let不允许，例如：

function test2()
	var name='tzx';
	var name='tuzongxun';

	let age=30;
	let age=31;

执行的时候就会报错Uncaught SyntaxError: Identifier 'age' has already been declared
16、let和var的区别三，在for循环中，let的定义不会被带到for循环之外，例如如下代码：

function test3()
	for(var i=0;i<5;i++)
		console.log("hello world");
	
	console.log(i);

	for(let j=0;j<5;j++)
		console.log("hello world")
	
	console.log(j)

test3();

执行后会打印出i的值，但是也会报错Uncaught ReferenceError: j is not defined.
在for循环中，有特殊的时候还会出现这样的现象，例如如下代码：

function test4()
	for(var i=0;i<5;i++)
		setTimeout(()=>console.log(i),0);
	
	
	for(let i=0;i<5;i++)
		setTimeout(()=>console.log(i),0);
	

test4();

执行后，上边var声明的会打印出5个5，后边let声明的才是0到5.
17、const的一些约束和let类似，同时const声明的变量必须在声明的同时赋值，且不能直接修改，如果指向的是引用，则可以修改引用的值。
18、综上，声明变量的时候，优先级顺序是const、let，然后才是var。
19、ES6中有6种基础数据类型，分别是Undefined、Null、Boolean、Number、String和Symbol，还有一种复杂数据类型Object。
20、使用typeof判断数据类型时，null会返回Object，函数会返回function,其他数据类型基本和上边说的一样。
21、undefined指使用var或者let声明了变量而没有赋值初始化的状态，undefined、null和未定义变量是有区别的，虽然表面上看是想等的，例如null == undefined为true。建议变量声明的时候初始化，可以更好的排查处理undefined问题。
22、其他类型值可以转换为boolean类型，String类型非空字符串为true，空字符串为false；Number类型非零值为true，零值为false；Object中非null为true，null为false；这种转换在使用if判断的时候会自动转换。
23、Number是有范围的，超过范围的值，正数会转换为Infinity，负数会转换为-Infinity,虽然这种情况不多见。
24、对于函数Number()和parsetInt()进行数值转换，有很多不同，例如：

function test5()
	console.log(Number(""));
	console.log(parseInt(""));
	let n1="111aaa";
	console.log("number:"+Number(n1));
	console.log("parseInt:"+parseInt(n1));

test5();

四个结果分别是0、NaN、NaN和111。
25、parseInt可以指定第二个参数以说明是什么进制，例如parseInt("10",2)，代表按二进制解析。parseFloat（）只解析十进制。
26、字符串插值```，里边的换行符、空格等都会被保留，例如：

function test6()
    let a=`first
    sceond`;

    let b=`first
second`;

    console.log(a.length);
    console.log(b.length);

test6();

上述代码执行后的结果分别是16和12。
字符串插值中也可以使用变量，例如下边的代码会输出25：

function test7()
	let num=5;
	console.log(`$num*num`);

test7();

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