JavaScripts笔记I(基础)

本文主要是介绍JavaScripts笔记I(基础)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScripts基础

js是一门编程语言，可以实现很多的网页交互效果。

JavaScript脚本语言具有以下特点:

（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。 [4]不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。

js书写位置

内部 js

直接写在html中，用scripts标签包住，一般scripts标签写在body上面

外部js

在html文件外部创建一个js文件，然后再在html文件中通过scripts标签调用；scripts标签中无需再写代码，否则会被忽视
行内js

代码写在标签内部多用于vue框架

js注释

单行注释
- 符号：//
- 快捷键 ctrl+/
块注释
- 符号：/* */
- 快捷键：shift+alt+a

注意点：结束符号是" ; " 结束符号可以省略不写

输入输出语句

输出语句

语句1

document.write(“hello world”)

作用：向body内输出内容

语句2 ***

alert(“hello world”)

作用：页面弹出警告对话框

语句3

console.log(‘控制台打印’)

作用：控制台输出语法，程序员调试使用

输入语句

语句1 ***

prompt(‘please write you name？’)

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

执行顺序：

按html文档流顺序执行js代码
alert()和prompt()他们会跳过页面渲染先被执行

变量

抽象：存储数据的容器

语法：

let 变量名

let 是关键字(允许、许可、让、要)，所谓关键字就是系统提供专门用来声明变量的词语

变量赋值初始化：let num =20

注意：声明变量统一使用let

var声明变量缺点：

可以先使用再声明
var声明过的变量可以重复声明
变量提升，全局变量，没有块级作用域等等

数组

声明语法


let  array = ['a','b','c']
//同样通过下标索引获取元素

常量

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

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

命名规范和变量一致

常量使用：

声明：

const G = 10010
console.log(G)

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

不需要重新赋值的数据可以使用常量const

数据类型

js是弱类型语言，变量属于哪种数据类型，只有赋值之后我们才能确认；

不同于java强类型语言

基本数据类型
- Number 数字型
  - 整数、小数、负数、正数
```
let age = 18 //整数
let num = 3.14 //小数
```
  - 算数运算符与java相同
  - NaN
    - 代表计算错误，它是一个不正确或者一个未定义的数学操作所得到的结果。 NaN是粘性的，任何对NaN的操作都会返回NaN。
```
console.log("你好" - 2) //返回NaN
console.log(NaN - 2) //返回NaN
```
- String 字符串型
  - 在js中无论是单引号、双引号、反引号包裹的数据都叫字符串
  - 字符串拼接一样使用+号
  - 模板字符串
    - 使用场景：
      - 拼接字符串和变量
      - 拼接变量较多比较麻烦
      - 语法：
        
        字符串使用反引号包裹
        变量使用${变量}
        
        let age =18 document.write(`今年我${age}岁了`)
- boolean 布尔型
  - 表示肯定或者否定时在计算机中对应的是布尔类型，他只有两个固定的值true和flase，表示真或者假
- undefined 未定义型
  - 比较特殊的类型只有一个值undefined
  - 只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值为undefined
```
let age //为声明变量
document.write('age') //输出undefined
```
- null 空类型
  - js中的null 仅表示一个代表"无"、”空“、”值未知“的特殊值
  - null 一般作为尚未创建的对象
```
let age =null 
console.log(age) //输出结果为null
typeof  age //输出结果的数据类型为对象
```
引用数据类型
- object 对象
通过typeof关键字可以检测数据类型
1. 作为运算符 typeof age
2. 函数形式 typeof(age)
一般都是用第一种形式

类型准换

JavaScript是一种动态类型的编程语言，它的变量不需要在声明时指定类型，可以根据变量的值自动推断类型。JavaScript中有许多数据类型，包括基本数据类型和复杂数据类型。

通俗的来讲：就是把一种数据类型的变量转换成我们所需要的数据类型

隐式转换

JS中的隐式转换指的是在进行运算或比较时自动将数据类型从原始值（如字符串、布尔值等）转换为其他数据类型。而显式转换则需要通过特定的函数来手动进行转换。

以下是常用的隐式转换示例及对应的结果：

当两个不同类型的操作数相加时，会先将其中一个操作数转换成与另一个操作数相同的类型再进行计算。

示例：let result = "5" + 3; // 输出结果为 “53”
当使用乘法运算符 * 连接两个字符串时，会将第二个操作数视为重复次数并返回新的字符串。

示例：let result = "hello" * 3; // 输出结果为 “hellohellohello”
当使用关系运算符 <, >, <=, >=, ==, !=, ===, !== 进行比较时，会根据操作数的类型进行隐式转换后再进行比较。

示例：console.log(true == 1); // 输出结果为 true
当调用内置函数 parseInt() 或 parseFloat() 时，可以将字符串转换为整数或浮点数。

示例：let numStr = "10"; let numInt = parseInt(numStr); console.log(typeof numInt); // 输出结果为 number

规则：
- +号两边只要有一个是string，都会把另一个数据转换成string类型
- 除了+以外的算术运算符比如 - * / 等都会把数据转换成数字类型

注意当当+号作为正号是会将数据转换成数字类型

//+号做拼接
console.log("2"+"2") //输出为22
//+号做正号 加号
console.log(2+"2") //输出为22
console.log(+"2"+"2") //输出为22

缺点是转换类型不明确

显式转换

以下是常用的显式转换示例及对应的结果：

使用全局函数 Number() 将任意类型的变量转换为数字类型。

示例：let strNum = "10"; let num = Number(strNum); // 输出结果为 10 (number)
使用全局函数 String() 将任意类型的变量转换为字符串类型。

示例：let boolValue = false; let strBool = String(boolValue); // 输出结果为 “false” (string)
使用全局函数 Boolean() 将任意类型的变量转换为布尔类型。

示例：let zero = 0; let isZero = Boolean(zero); // 输出结果为 false (boolean)