Javascript基础笔记（1）-基础语法与表达式

2023-02-15 本文已影响0人布拉德澈

前端三层.png

一、基础语法

（一）Javascript书写位置

在<body>中<script></script>标签对内，书写Javascript代码
将代码单独保存在.js格式文件中，在html文件中时间<script></script>的形式引入它
这个极其简单，就不举例了。

(二) 认识输出语句

alert()语句，弹出一个警告框
consolo.log（） 控制台输出

/*字符串显示需要用引号包括
* 语句末尾书写英文状态下的分号
*/
<script>alert("开始学习javascript!");</script>

alert效果.png

<script>console.log("在调试控制台才能看到我！");</script>

console显示.png

二、变量

变量是计算机语言中能储存计算机结果或能表示值的抽象概念。

变量不是数值本身，它是一个用于存储数值的容器

（一）定义变量

第一步：声明，并赋值
var a = 10;
使用var关键字定义变量，=表示赋值
es6 使用let = 10; 暂时不讨论这个，进入ES6再研究这个。
第二步，变量被赋值后，就可以使用了；
console.log(a);

(二)改变变量的值

变量的值可以被改变，后续使用不再需要书写声明关键字var.

var a = 10;  //定义变量a，并赋初值为10
a = 18;        //更改变量a的值为18
console.log(a)  // 18

（三)变量的命名

只能由字母、数字、下划线、$符号组成，但不能以数字开头。
不能是javascript关键字或保留字，
变量名大小写敏感。

这也是Javascript标识符的命名规则，函数、类名、对象的属性等也遵循这个规则

** 优秀变量命名法：**

驼峰命名法： myVariable 建议使用
C风格： my_variable

(四)变量的默认值

一个变量只定义，不赋初值，默认值是undefined
一个变量只有被var定义，并赋初值之后，才算正式初始化完成。

(五)变量声明提升

变量声明提升：提前使用一个稍后才声明的变量，而不发生异常

在执行所有代码前,javascript有一个预解析阶段，会于都所有变量的定义

三、Javascript基本数据类型

数据类型简介与检测

两大类：基本数据类型 & 复杂数据类型

基本数据类型：Number 、String、Boolean、Undefined、Null
复杂数据类型：Object、Array、Function、RegExp、Date、Map、Set等等

typeof运算符

使用typeof 运算符可以检值或变量的类型

var a = 10;
console.log(typeof a);   //number
var b = 'this is javascript';
console.log(typeof b)  //string

5种基本数据类型typeof检测结果

typeof检测结果.png

基本数据类型

（一）Number(数字)类型

所有数字不分大小、部分整浮、部分正负，都是数字类型
var a=10; var b= 3.1415926; var c = -12; var d = 0b10;
特殊数字类型NaN.
NaN即“not a number”，字面意思“不是一个数”，但它市一个数字类型的值。
Javascript数学运算中，若结果不能得到数字，其结果往往都是NaN。
NaN 不自等。

（二）String(字符串)类型

字符串就是“人类自然语言”
字符串要用引号包裹。双引号、单引号均可，但必须成对。数字用引号包裹后，也会转变为字符串。
+可以用来拼接多个字符串。
console.log("abc"+"def"),最终输出为："abcdef"
字符串length属性：表示字符串的长度。'我爱javascript'.length ,结果显示：12。
字符串常用方法一览：

字符串常用方法.png

1.charAt()方法： 得到指定位置的字符。'abcde'.charAt(0)获取字符串第0位的字符。

2.substring(a,b)方法:

(1)得到从a开始到b结束(不包括b)的子串。 'abcde'.substring(2,4)结果为cd。
(2)substring(a,b)，a可以大于b,数字顺序将自动调整为小数在前。

3.substr(a，b)方法：

(1)得到从a开始的长度为b的子串。'abcdefg'.substr(2,4)结果为cdef
(2)substr(a，b),a可以是负数，表示倒数位置。

4.slice(a，b)方法：

(1) slice(a，b)得到从a开始到b结束（不包括b处）的字串。
(2) slice(a，b)参数a可以是负数。
(3) slice(a，b)参数a必须小于参数b.

** 5.toUpperCase()转为大写 **
javascript.toUpperCase(); //JAVASCRIPT
** 6.toLowerCase()转为小写 **
‘JAVASCRIPT’.toLowerCase(); //javascript

** 7.indexOf() **

(1) indexOf(a，b)方法返回某个指定的字符串值在字符串中首次出现的位置
(2) 如果要检索的字符串值没有出现，则该返回 -1

（三）Boolean(布尔)类型

布尔型值只有两个：true和false,分别表示真和假。true、false

（四）undefined

一个没有被赋值的变量默认值为undefined,而undefined的类型也是undefined。
undefined是一种类型，也是值，这种类型只有它自己一个值。

（五）null

null表示‘空’，空对象
当需要将对象销毁、数组销毁或则删除事件监听时，将他们设置为null。

（六）数据类型转换

1.其他->数字

使用Number（）函数

Number('123');        //123
Number('123.4');     //123.4
Number('2022年');     //NaN
Number('2e3');       //2000
Number('  ');          //0

parseInt（）函数：将字符转换为整数

parseInt(3.14)   //3
parseInt('圆周率时3.14')   //NaN
parseInt(true)       //NaN
parseInt('3是一个数')   //3

parseFloat():将字符串转为浮点数
···
parseFloat(3.14) //3.14
parseFloat('圆周率时3.14') //NaN
parseFloat('3是一个数') //3
···

2.转换为字符串

使用String()函数

String(123);  //'123'
String(123.45) //'123.45'
String(NaN);  // 'NaN'

toString()方法：

var a=6; a.toString( );  // `6`

复杂数据类型一览

数组、对象、函数等
以后再详细记录。

javascript数据类型.png

四、表达式与操作符

(一)JS基本表达式

1.算术表达式

算术运算符包括：加+、减-、乘*、除/、取余%。

(1)加号有“加法”和“连接符”两个作用。一般加号两边都是数字，则为“加法”，否则为连接符。
(2)取余运算也叫“求模运算”，用“%”表示。a%b表示求a除以b的余数。结果只获得余数。
(3)默认情况下，乘除法优先级高于加减法，使用圆括号改变运算顺序。
(4)隐式类型转换：如果参与数学运算的操作数不是数字类型，javascript将自动将此操作数转换为数字类型。加号参考第一条。
(5)javascript使用IEEE754二进制浮点数算术标准，导致个别小数计算产生“精度”问题。解决办法：在进行小数运算时，调用toFixed()方法，保留指定的小数位数。举例：(0.1+0.23).toFixed(3)
(6)javascript中没有提供幂计算、开根号的运算符，需要使用Math对象相关方法进行计算。

2.关系表达式

关系运算符：大于>、小于<、大于等于>=、小于等于<=、等于==、不等于!=、全等于===、不全等于!==。

(1)判断相等，使用==。一个=是赋值符号，并不判断相等。
(2)特殊情况，NaN不自等。使用isNaN（）函数来判断变量的值是否为NaN。

3.逻辑表达式

逻辑运算符：非!、与&&、或||。
逻辑运算优先级：非->与->或

(1)!表示非，也可以称为“置反运算”。!是一个“单目运算符”，只需要一个操作数。结果一定是一个布尔值。
(2)&&表示“并且”，称之为“与运算”，口诀： $\color{red}{同是真才真！}$

true && true  //true
true && fasle  //false
false && false  //false
false && true  //false

(3)||表示或则，称为“或运算”，口诀： $\color{red}{有真就真！}$

true && true  //true
true && fasle  //true
false && false  //false
false && true  //true

4.赋值表达式

赋值运算符：赋值=、快捷赋值+=,-=,*=,/=,%=、自增运算++、自减运算--

(1) 一个等号=，将等号右边的数值赋予左边的变量。可以连续使用赋值运算符。
(2) 快捷赋值运算符表示再原数值基础上进一步进行运算。
(3) ++和--表示再自身基础上加1或减1。
(4) a++先用再加，++a先加再用

$\color{red}{运算顺序：非运算->数学运算->关系运算->逻辑运算}$