js基础知识

Posted Yang-0394

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js基础知识相关的知识,希望对你有一定的参考价值。

定义方式

内嵌脚本

像style标签一样,在html文档中使用script标签嵌入js代码:

  <script>
      alert(\'test\');
  </script>
外部引用

通过src属性引入外部js文件:

  <script src="test.js"> </script>

注意:在定义js脚本的时候,要注意js放置的位置,如果放在了

标签中则会阻塞Html文档的解析,一般放在标签的最后。

变量声明

命名

变量名以字母、$、下划线开始,后跟字母、数字、下划线。

声明方式

变量声明有var、let(let属于es6新增,还有const,const用于声明常量,,let和const都存在块级作用域,而var不存在块级作用域,它存在于最近的函数作用域或全局作用域,容易污染全局)

声明提升

JS代码在被执行之前会先被解析,解析器会把声明的变量提升到脚本的最前面(注意:提升时不会赋值,只有执行到赋值语句时才会进行赋值),这就是声明提升。
eg:

  console.log(a);
  var a = 1;
  console.log(a)

  // 实际执行过程为:
  var a;
  console.log(a); // undefined
  a = 1;
  console.log(a); // 1

注意:let声明的变量不会提升到最前,如果声明前使用就会报错,也就是使用let(还有const)声明的变量在声明前存在临时性死区(TDZ)。但是如果声明有误,在代码执行之前的解析过程中就会报错。
eg:

  var a = 1;
  console.log(a)
  let while = 2;

代码不会打印出a的值,而是在解析过程中就报了错:Uncaught SyntaxError: Unexpected token \'while\'

const使用

const用于声明常量,常量名一般全部大写,常量在声明的同时要赋值,而且不能重新赋值,但是对于引用类型可以修改引用类型的值,因为对于引用类型存储的是地址,修改引用的类型的值和地址是没关系的,但是你不能把它指向新的地址。

var和let的区别

1、let有块级作用域而var没有。
2、let重复声明变量会报错,而var重复声明变量会进行覆盖。
3、let全局声明的变量不存在window对象中,而var是存在于window对象中的。

内置类型

类型

最新的ECMAScript标准定义了8种数据类型:
7种原始类型:Number, String, Boolean, Undefined, Null, Symbol, BigInt
1种引用类型:Object

注意:BigInt是一种新的数据类型(整数后面加n),用于当整数值大于Number数据类型支持的范围时(Number时双精度64位浮点数(1,11,52),可表整数范围:-(2^53 -1)和 (2^53 -1),但是现在只有Chrome +67和Opera +54支持。而且在使用时不能使用Number和BigInt操作数的混合执行算术运算,需要通过显式转换其中的一种类型。

类型检测

typeof操作符:检测变量的数据类型,原始类型返回结果:number, string, boolean, undefined, symbol, bigint; 引用数据类型:object, function。
注意:返回结果里没有null,对于{},[], null 通过typeof返回的都是object。

null和undefined的区别

null: object类型,代表“空值”,代表一个空对象指针.
注意是空对象指针而不是空对象,空对象还是存在内存空间里的,只不过值是空。而空对象指针代表着不占据内存空间。
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。 例如,
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时或者return后面什么也没有,返回undefined。

NaN

NaN表示无效的数值,类型转换或计算为无效的数。

  console.log(typeof NaN) // number
  console.log(Number(NaN)) // NaN
  console.log(Boolean(NaN)) // false
  console.log(String(NaN)) // NaN
  console.log(NaN == NaN) //false
类型转换

类型转换有显示转换,这个从上面就可以看到,然后还有隐式转换,看个下面的一个例子吧:

  let str = true + 11 + null + 9 + undefined + "zhangsan" + false + null + 9 + [];

str的值是多少?

先说一下结果:NaNzhangsanfalsenull9
下面说一下计算过程你就可以明白转换的过程了,首先布尔类型与数字类型计算时,true会转为1,false会转为0,null与数字加时会转为0,undefined类型在与任何数类型进行‘+’运算结果都是NaN,当NaN与字符串相加时,因为NaN是Number类型,所以NaN会隐式调用toString方法得到‘NaN’,而字符串与布尔类型相加时,布尔类型会转为字符串,变成\'false\',同样null,9,空数组与字符串相加时也会转成字符串,null变成\'null\', 而空数组变为\'\'。

布尔类型的隐式转换

转义字符

转义原因:1、有特殊含义,如 <, >用来表示HTML标签。
2、有些字符在ASCII字符集中没有定义,因此需要使用转义字符串表示。

半方大也就是一个英文字符,全方大就是一个中文字符,不断行空白就是半个英文字符。

运算符

赋值运算符: =
算术运算符:, /, +, -, %
符合运算符:
=, /=, +=, -=, %=
一元运算符:++,--
++前置

  let a = 1;
  let b = ++a;
  console.log(a,b) // 2 2

++后置

  let a = 1;
  let b = a++;
  console.log(a, b) // 2 1

也就是前置时,先自增再赋值;后置时先赋值再自增。
比较运算符:>, <, >=, <=, (强制类型转换比较),=(不强制类型转换比较)
逻辑运算符:&&,||,!(优先级:!> && > ||)

  console.log(true || false || false) // true

短路运算:当逻辑运算已经决定结果时就不会接着判断了

  let a = true, b = false;
  console.log(a || b)

a为真值就已经知道结果了,就不会再判断f的值了。

逗号运算符:

  let a = (1,2,3);
  console.log(a); // 3

流程控制

1、if
2、if/else
3、三元表达式
4、switch
5、while
6、do/while
7、for

以上是关于js基础知识的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段

Chrome-Devtools代码片段中的多个JS库