JavaScript基础语法

Posted 2022-11-30 triennium

变量

一级标题的颜色

二级标题的颜色

三级标题的颜色

tip

API

1.什么是变量呢？

我们把变量理解为一个代名词,或者叫做临时容器。
我们可以吧一个具体的值存入到变量中，那么此时这个变量就代表着我们这个具体的值，我们如果想要重新的使用这个值，不再需要重新的计算或者其他操作，直接使用变量就可以得到之前存储的这个值。

想要创建一个变量（也就是说声明一个变量），需要通过var关键字（es6中通过let来声明）。

var a = 10+2;
在上面的代码中，我们创建了一个变量val，并且使用这个变量val存储了表达式10+2的计算结果，那么如果想要第二次使用10+2的结果，就可以直接使用变量val即可。

console.log(a);//通过控制台可以看到10+2的结果

我们在使用变量的时候，有一点需要理解，变量之所以叫做变量，是因为变量随时可以根据我们的需要更改其中存储的值(因为js是一门弱类型语言)。

var a = 10; a = 20; console.log(a)//此时打印a的结果就为20；

2.变量提升

javascript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一样地运行。这就造成的结果是所有的分辨率那个的声明语句，都会被提升到代码的头部，这就叫做变量提升(hoisting)。

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

上面的代码首先使用console.log方法，在控制到（console）显示变量a的值，这时变量a还没有声明和赋值，所以这时一种错的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。

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

这段代码最后显示的结果为：undefined，标示变量a已经声明，单还未赋值。

数据类型

变量用来临时存储数据(如果想要永久的存储数据，需要通过数据库)。而在任何一门变成语言当中，数据都是分为不同类型的，就如果人类也分为男人和女人一样。

在js当中数据类型分为两类，一类是‘原始类型’，一类是‘引用数据类型’。‘原始类型’又称之为‘基础数据类型’，‘引用类型’也称之为‘对象类型’。

原始类型的数据包含有下面几个：

• Boolean

• Null

• Undefined

• Number

• String

*Symbol（es6中新增加的内容）

引用类型的数据包含有下面几个：

• Object

• Array

• Function

在js当中，引用类型也包括Date ,Math,RegExp等内容

需要注意的是，Js当中的原始值并不能够更改，也就意味着一旦一个原始值创建成功。那么就不能够进行第二次的值得修改，除非重新创建一个数据。。

Boolean

布尔值包含有两个值ture和false。其中ture为真，false为假。

如果JavaScript预期某个位置应该是布尔值，会讲改位置上现有的值自动转为布尔值，转换规则是除了下面六个值被转为false,其他值都为ture。

• undefined

• null

• false

• 0

• NaN

• ""或者‘‘ （空字符串）

Null

Null类型里面只有一个值，就是null。

关于null,你可以把它理解为无，他表示一个空值。

var a = null;

例如上面的代码当中，就可以理解为此时的变量a的值为空。

undefined

undefined类型里面只有一个值，就是undefined。

在代码的编写过程中，一个没有被赋值的变量的类型就是undefined。

var a; console.log(a);//会在浏览器的控制台中输出undefined.

例如上面的代码当中，就可以理解为此时的变量a的值为空。

Number

number类型就是 数字类型。

JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，数字1和1.0是相同的，是同一个数。

1 === 1.0 //ture

这也就是说，JavaScript语言的底层根本没有整数，所有数字都是小数（64位浮点数）。容易造成混淆的是，某些运算只有整数才能完成，此时JavaScript会自动把64位浮点数，转成32位整数，然后在进行运算。

由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。

0.1 + 0.2 === 0.3  //false

0.3 / 0.1   //2.9999999999999996

数值范围：

根据标准，64位浮点数的指数部分的长度是11个二进制位，意味着指数部分的最大值是2047（2的11次方减1）。也就是说，64位浮点数的指数部分的值最大为2047，分出一半标示负数，则JavaScript能够表示的数值范围为21024到2-1012（开区间），超出这个范围的数无法标示。

如果一个数大于2的1024次方，那么就会发生“正向溢出”，即JavaScript无法表示这么大的数，这时就会返回Infinity。

如果一个数小于2的—1075次方，那么就会发生“负向溢出”，即JavaScript无法表示这么小的数，这时会直接返回0.

Math.pow(2,-1075) //0

Number当中的特殊值

1.正零和负零

JavaScript的64位浮点数之中，有一个二进制位是符号位，这意味着，任何一个数都有一个对应的负值，就连0也不例外。

JavaScript内部实际上存在2个0：一个是+0，一个是-0，他们的区别就是64位浮点数表示法的符号位不同。但是他们是等价的

-0 === +0   // true

0 === -0    // true

0 === +0    // true

2.NaN

NaN是javascript的 特殊值，标示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

console.log(5 - ‘x‘); //NaN

NaN并不是一个独立的数据类型，而是一个特殊的数值，他依旧属于Number，使用typeof运算符可以看得很清楚。

需要注意的是，NaN不等于自己

3.Infinity

Infinity标示为无穷大。在js中，如果数值的内容超过了js所能标示的范围，那么就会输出Infinity。

Number当中的一些全局方法（API）：

1.parseInt()

功能1：parseInt方法用于将字符串转为整数。

eg:parseInt(‘123‘)//123

功能2：如果字符串头部有空格，空格会被自动去除。

parseInt(‘ 11‘)//11

功能3：如果parseInt的参数不是字符串，则会先转为字符串在转换。

parseInt(1.23) // 1

//等同于

parseInt('1.23') //1

功能4：检索数字，去除数字外的部分,并且去除浮点数

parseInt('8a')  //8
parseInt('12**') //12
parseInt('12,34') //12
parseInt('15e2')  //15
parseInt('15px') //15

Tip

：如果字符串的第一个字符不能转换为数字，（后面跟着数字的正负号除外），则返回NaN。

parseInt('abc')  //NaN
parseInt('.3') //NaN
parseInt('') //NaN
parseInt('+')  //NaN
parseInt('+1') //1

所以，parseInt的返回值只有两种，要么是整数，要么是NaN。

2.parseFloat()

parseFloat 方法用于讲一个字符串转为浮点数。

parseFloaat(‘3.14‘) // 3.14

如果字符串符合科学计数法，则会进行相应的转换。

parseFloat('314e-2')  // 3.14
parseFloat('0.0314E+2')  //3.14

如果字符串包含不能转为浮点数的字符，则不再进行完后转换，返回已经转换好的部分。

parseFloat(‘3.14more non-digit characters‘) // 3.14

parseFloat方法会自动过滤字符串前面的空格

parseFloat(‘\t\v\r12.34\n‘) // 12.34

如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN.

尤其值得注意，parseFloat会将空字符串转为NaN。

parseFloat([])   //NaN
parseFloat('f12') //NaN
parseFloat('')  //NaN
parseFloat('1asd')  //1
parseFloat('a1')  //NaN

这些特点使得parseFloat的转换结果不同于Number函数。

parseFloat(true)  //NaN
Number(ture)  // 1

parseFloat(null)  //NaN
Number(null) // 0

parseFloat('') //NaN
Number('')  // 0

parseFloat('123.45#')  // 123.45
Number('123.45#')  //NaN

String

将0个或者任意个字符排列起来放在单引号或者双引号当中，就是一个字符串(String)

eg：

var a = "hello world";
var a = 'hello,JavaScript';

上面的变量a和b当中存储的数据就是字符串，其中一个使用了单引号，一个使用的是双引号，两个都是合理的。

单引号字符串内部，可以使用双引号，双引号内部也可以使用单引号。

'key = "value"';
"this is story about a 'man',cool man "

Tip

：由于html语言的属性值使用的双引号,所以很多项目约定，JavaScript语言的字符串只是用单引号，当然，只是用双引号也完全可以，重要的是坚持使用一种风格的引号。

Tip

：如果字符串较长，必须分成多行，可以在每行的尾部使用反斜杠\

var longString = 'LonglongLongString'; 
//"Long long Long String"

转义字符：

反斜杠()在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转移符。

需要用反斜杠转义的特殊字符，主要有下面这些。

• \0 ：null（\u0000）

• \b ：后退键（\u0008）

• \f ：换页符（\u000C）

• \n ：换行符（\u000A）

• \r ：回车键（\u000D）

• \t ：制表符（\u0009）

• \v ：垂直制表符（\u000B）

• \‘ ：单引号（\u0027）

• \" ：双引号（\u0022）

• \\ ：反斜杠（\u005C）

如果在一个正常的字符前面加了，是没有效果的。

console.log("\a");  //输出的是a

运算符

在变成语言当中，运算符是处理数据的基本方法，能够根据现有的值得到新的值。

在JavaScript当中，存在下面的运算符。

• 赋值运算符

• 比较运算符

• 算数运算符

• 位运算符

• 逻辑运算符

• 字符串运算符

• 条件（三元）运算符

• 逗号运算符

• 一元运算符

• 关系运算符

赋值运算符

赋值运算符(assignment operator) 是基于右值(right operand)的值，给左值(left operand)赋值。

说的通俗一些就是 =

顺序是从右向左的进行赋值操作。

下面的列表中包含全部的赋值运算符

• 赋值 x = y

• 加赋值 x += y

• 减赋值 x -= y

• 乘赋值 x *= y

• 除赋值 x /= y

• 模赋值 x %= y

• 指数赋值 x **= y

• 左移赋值 x <<= y

• 右移赋值 x >>= y

• 无符号右移赋值 x >>>= y

• 按位与赋值 x &= y

• 按位异或赋值 x ^= y

• 按位或赋值 x |= y

赋值

简单的赋值运算符，吧一个值赋给一个变量，为了把一个值赋给多个变量，可以用链式使用赋值运算符。

加赋值

加赋值运算符把一个右值与一个变量相加，然后把相加的结果赋给该变量。两个操作数的类型决定了加赋值运算符的行为。算术相加或字符串连接都有可能。

例如：

var x = 10;
var y = 20;
x += y;
console.log(x); 
// 相当于 
x = x + y;

减赋值

减赋值运算符使一个变量减去右值，然后把结果赋给该变量。

例如：

var x = 10;
var y = 20;
x -= y;
console.log(x); // -10 
// 相当于 
x = x - y;

乘赋值

乘赋值运算符使一个变量乘以右值，然后把相成的结果赋给该变量。

例如：

var x = 10;
var y = 20;
x *= y;
console.log(x); // 200
// 相当于
x = x * y;

除赋值

除赋值运算符使一个变量除以右值，然后把结果赋给该变量。

例如：

var a = 10;
var b = 20;
a /= b;
console.log(a);
// 相当于 
a = a / b; 

模赋值

模赋值运算符使一个变量除以右值，然后把余数交给该变量。

例如：

var x = 10;
var y = 20;
a %= b;
console.log(a);
//等同于 
a = a % b;

指数赋值

指数赋值运算符使一个变量为底数、以右值为指数的指数运算（乘方）结果赋给该变量。

例如：

var x = 2;
var y = 3;
x **= y;
console.log(x); // 8
// 相当于
x = x ** y 

比较运算符

• 等于 == 如果两边操作数相等时返回true。

• 不等于 != 如果两边操作数不相等时返回true

• 全等 === 两边操作数相等且类型相同时返回true。

• 不全等!== 两边操作数不相等或类型不同时返回true。

• 大于> 左边的操作数大于右边的操作数返回true

• 大于等于>= 左边的操作数大于或等于右边的操作数返回true

• 小于< 左边的操作数小于右边的操作数返回true

• 小于等于<= 左边的操作数小于或等于右边的操作数返回true

tip

=> 这个是箭头函数

算数运算符

在js当中，出了提供基础的+,-,*,/以外，还提供了一些其他的运算符，下面是所有的算术运算符：

• + 加法运算
• - 减法运算
• * 乘法运算
• / 除法运算
• % 求余运算(求模运算)
• ++ 自增运算
• -- 自减运算
• + 一元正值符
• - 一元负值符
• ** 指数运算符

逻辑运算符

逻辑运算符常用于布尔（逻辑）值之间; 当操作数都是布尔值时，返回值也是布尔值。 不过实际上&&和||返回的是一个特定的操作数的值，所以当它用于非布尔值的时候，返回值就可能是非布尔值。

下面是逻辑运算符：

• 逻辑与(&&)

• 逻辑或(||)

• 逻辑非(!)

逻辑与:

逻辑与&&运算符又称为且运算符，往往用于多个表达式之间的求值。

它的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

逻辑或:

逻辑或||运算符又称为或运算符，同样用于在多个表达式之间求值。

它的运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为false，则返回第二个运算子的值。

逻辑非:

逻辑非(!)运算符又叫取反运算符，就是取一个值的反值。主要用于将一个布尔值变为相反值。即true变为false,false变为true。

如果使用取反运算符的值不是一个布尔值，那么取反运算符就会将其变为一个布尔值，然后再取反。

下面的六个值使用取反运算符取反后都为true，其他都为false。

• undefined
• null
• false
• 0
• NaN
• 空字符串(‘‘)

字符串运算符

字符串运算符指的是+，通过加号，我们可以对两个字符串进行拼接从而返回一个新的字符串。

var a = "hello,";
var b = "world!";
console.log(a + b); // hello,world!

也可以采用简写的形式来拼接字符串。

var str = "hello,";
var str += "world!";
console.log(str); // hello,world!

也可以在使用的过程中进行数据的拼接。

var sayHello = "hello,my name is ";
console.log(sayHello + "zhangsan");// hello,my name is zhangsan

条件运算符

条件运算符也称之为三元运算符。

条件运算符是JavaScript中唯一需要三个操作数的运算符。运算的结果根据给定条件在两个值中取其一。

一。语法为：

条件 ? 值1 : 值2

如果条件为真，则结果取值1。否则为值2。可以在任何允许使用标准运算符的地方使用条件运算符。

数据类型转换

JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。

例如:

var a = 10; // 创建一个变量a，并且赋值为10
a = "hello,world!"; // 将"hello,world"重新赋值给变量a，这样a就由number变为string

强制类型转换

强制转换主要指使用Number()、String()和Boolean()三个函数，手动将各种类型的值，分别转换成数字、字符串或者布尔值。

Number()

使用Number函数，可以将任意类型的值转化成数值。

下面分成两种情况讨论，一种是参数是原始类型的值，另一种是参数是对象。

// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0

String()

String函数可以将任意类型的值转化成字符串，转换规则如下。

(1)原始类型值

• 数值：转为相应的字符串。

• 字符串：转换后还是原来的值。

• 布尔值：true转为字符串"true"，false转为字符串"false"。

• undefined：转为字符串"undefined"。

• null：转为字符串"null"。

String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

//转换对象
String(a: 1) // "[object Object]"
//转换数组
String([1, 2, 3]) // "1,2,3"

Boolean()

Boolean()函数可以将任意类型的值转为布尔值。

它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。

• undefined
• null
• 0（包含-0和+0）
• NaN
• ‘‘（空字符串）

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

自动类型转换

上面说完了强制类型转换，再来说下自动类型转换，它是以强制类型转换为基础的。

遇到以下三种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。

第一种情况，不同类型的数据互相运算。

123 + 'abc' // "123abc"

第二种情况，对非布尔值类型的数据求布尔值。

if ('abc') 
  console.log('hello')
  

第三种情况，对非数值类型的值使用一元运算符（即+和-）。

var a = "10";
console.log(+ a,typeof +a); // 10 "number"
+ foo: 'bar' // NaN
- [1, 2, 3] // NaN