JavaScirpt笔记（一）

原创于 2024-12-15 18:58:20 发布 · 720 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

一、JavaScirpt介绍

1.1JavaScirpt是什么

1.JS是什么

一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2.作用

网页特效（监听用户的一些行为并让网页做出对应反馈）

表单验证（判断合法性）

数据交互（获取后台数据，渲染到前端）

服务端编程（node.js）

3.JavaScirpt的组成

ECMAScript:

规定了js基础语法核心知识。如：变量、分支语句、循环语句、对象等等。

Web APIs:

DOM 操作文档，如：移动页面元素、大小、添加删除等操作。

BOM 操作浏览器，如：页面弹窗、检测窗口宽度、存储数据刀浏览器等等。

1.2JavaScirpt书写位置

1.内部JavaScirpt

直接写在 html文件里，用 script标签包住

规范：script标签写在</body>上面

例：

alert('你好，js!') —— alert:页面弹出警示框

</script>

</body>

注意事项：

2.外部JavaScript

代码写在以.js结尾的文件里。

语法：通过script标签，引入到html页面中。

例：

<body>

</body>

注意事项：

script标签中间无需写代码，否则会被忽略。

3.内联JavaScript

代码写在标签内部

语法：

<body>

<button onclick="alert('你好')">点我月薪过万</button>

</body>

1.3JavaScript注释

单行注释

符号：//

作用：//右边一行代码被忽略

快捷键：Ctrl+/

块注释：/* */

作用：在/*与*/之间的所有内容都会被忽略

快捷键：shift+alt+a

结束符：英文;

实际可写可不写，浏览器自动判断结束位置

1.4JavaScript输入输出语法

输入：

①document.write('输出内容')——向body内输出内容

②alert('输出内容')——页面弹出警告对话框

③console.log('控制台打印')——控制台输出语法，程序员调试使用

输出：

prompt('输入语句')

——————alert（）和prompt（）会跳过页面渲染先被执行。

1.5字面量（字面量是在计算机中描述事/物）

二、变量

2.1变量是什么（装东西的盒子）

变量是计算机用来存储数据的容器

2.2变量的基本使用

1.声明变量：

使用变量前要创建变量（也称为声明变量或者定义变量）

语法：let 变量名（let不允许多次声明同一个变量）

声明变量由两部分组成构成：声明关键字、变量名（标识）

举例：

age为变量的名称，也叫标识符。

2.变量赋值

定义一个变量后，就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

也可声明时直接赋值，称为变量初始化

“=”左右两边均有空格

3.更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

4.声明多个变量（不推荐）

语法：多个变量之间用逗号隔开

2.3变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量本质：程序在内存中申请的一块用来存放数据的小空间

2.4变量命名规则与规范

1.规则

①不能使用关键字

②只能用下划线、字母、数字、$组成，且数字不能开头

③字母严格区分大小写

2.规范：

①起名有意义

②遵守小驼峰命名法——第一个单词首字母小写，后面每个单词首字母大写，如：userName

变量拓宽—数组

数组（Array）：将一组数据存储在单个变量名下

let arr = [ ]

1.1数组的基本使用

1.声明语法

数组是按顺序保存，每个数据都有编号

编号从0开始，例：小明为0，小红为1，以此类推

在数组中，数据的编号也叫索引号或下标

2.取值语法

数组名[下标]

name[0] //小明

name[1] //小红

3.一些术语

元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中的数据个数，通过数组的length属性获得（arr.length可自动获取数组长度）

数组长度=索引号+1

三、常量

3.1常量的基本使用

概念：使用const声明的变量称为“常量”

使用场景：当某个变量永远不会改变的时候，就可以用const声明

命名规范：和常量一致

常量使用：

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

及不需要重新赋值的数据使用const

四、数据类型

4.1

数据类型——数字类型（Number）

即数学中学习到的数字，可以是整数、小数、正数、负数

JS是弱数据类型，变量属于哪种类型只有赋值后才能确认

Java是强数据类型，例如int a=3 必须是整数

算术运算符：与C语言相同

NaN代表一个计算错误。由一个不正确或未定义的数学操作所得结果。

如：console.log('你好'-2) //NaN

NaN是粘性的。任何对NaN的操作都会回到NaN

如：console.log(NaN+2) //NaN

数据类型——字符串类型（string）

单引号（''）、双引号（""）或反引号（`）包裹的数据都叫字符串，推荐使用单引号

1.无论单引号或者双引号必须成对使用

2.单引号/双引号可以互相嵌套，但不能自己套自己（外双内单或外单内双）

3.必要时可以使用转义符\，输出单引号或双引号

字符串拼接：+ 数字相加，字符相连

模版字符串：拼接字符串和变量

语法：

反引号``

内容拼接变量时，用${ }包住变量

数据类型——布尔类型（boolean）

表示肯定或否定时在计算机对应的是布尔类型数据

它有两个固定的值true（真）和false（假）

数据类型——未定义类型（undefined）

未定义是比较特殊的类型，只有一个值undefined

只声明变量不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值undefined

用于检测某个值是否运送过来

数据类型——null类型（空类型）

JS中的null仅仅是一个代表“无”、“空”或“值未知”的特殊值

如果一个变量里面确定存放的是对象，如果还没有准备好对象，可以放个null

undefined表示没有赋值

null表示赋值了，但是内容为空

console.log(undefined + 1) //NaN

console.log(null + 1) //1

4.2检测数据类型

通过typeof关键字检测数据类型

1.作为运算符：typeof x（常用的写法）

2.函数形式：typeof(x)

五、类型转换

类型转换：把一种数据类型的变量转换成我们需要的数据类型。

5.1隐式转换

隐式转换：某系运算符被执行时，系统内部自动将数据类型进行转换。

规则：

+号两边只要有一个是字符串，都会把另一个转成字符串

除+以外的算术运算符都会把数据转成数字类型

小技巧：

+号作为正号解析可以转换成数字型

任何数字和字符串相加结果都是字符串

5.2显式转换

Number（数据）

转成数字类型

如果字符串内容里有非数字，转换失败时结果为NaN（Not a Number）即不是一个数字

NaN也是number类型的数据，代表非数字

Parselnt（数据）只保留整数

parseFloat（数据）可保留小数

六、运算符

6.1赋值运算符——对变量进行赋值的运算符

= ：将等号右边的值赋予给左边，要求左边必须是一个容器

+= : a+= 1→a=a+1

6.2一元运算符

众多的JavaScirpt的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符

和三元运算符

例：10+20→+为二元运算符

一元运算符：正号和符号

自增：

符号++

作用：让变量的值+1

自减同理

常用于计数，计算次数

前置自增：先自加再使用

后置自增：先使用再自加

二者单独使用无区别

一般使用i++，且单独使用

6.3比较运算符

其余同C语言

===：左右两边是否类型和值都相等

比较结果为布尔类型，只会得到true或false

tips:

字符串比较，是比较字符对应的ASCII码

从左往右依次比较

如果第一位一样再比较第二位，以此类推

NaN不等于任何人，包括他自己

尽量不要比较小数，存在精度问题

不同类型之间比较存在隐式转换——最终将数据转换成number类型再比较

6.4逻辑运算符

&&：与（一假则假）

||：或（一真则真）

!：非（真假互换）

6.5运算符优先级