JS学习笔记一

一、基础语法

1.1 JavaScript介绍

1.1.1 JavaScript是什么

1. JavaScript：是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
2. 作用：
   ①网页特效（监听用户的一些行为让网页做出对应的反馈）
   ②表单验证（针对表单数据的合法性进行判断）
   ③数据交互（获取后台的数据，渲染到前端）
   ④服务端编程（node.js）
3. JavaScript的组成
   JavaScript权威网站：网址
   WCMAScript：
   规定了JS基础语法核心知识。比如：变量、分支语句、循环语句、对象等等。
   Web APIs：
   DOM 操作文档，比如对页面元素进行移动、大小，添加删除等操作
   BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

1.1.2 JavaScript书写位置

1. 内部JavaScript
   直接写在html文件里，用script标签包住
   规范：script标签写在上面
   拓展：alert（‘你好，js’）页面弹出警告对话框
   注：
   

1.1.3 JavaScript注释和结束符

1.1.3.1 注释

1. 单行注释
   符号：//
   作用：//右边这一行代码会被忽略
   快捷键：ctrl+/
2. 块注释
   符号：/* */
   作用：在/* */之间的所有内容都会被忽略
   快捷键：shift+alt+a

1.1.3.2 结束符

作用：使用英文的;代表语句结束
实际情况：实际开发中，可写可不写，浏览器（JavaScript引擎）可以自动推断语句的结束位置
现状：在实际开发中，越来越多的人主张，书写JavaScript代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

1.1.4 JavaScript输入输出语法

1. 什么是语法
   人和计算机打交道的规则约定
2. 输出语法
   ①语法1

   document.write('要出的内容')
   

   作用：向body内输出内容
   注：如果输出的内容写的是标签，也会被解析成网页元素
   ②语法2

   alert('要出的内容')
   

   作用：页面弹出警告对话框
   ③语法3

   console.log('控制台打印')
   

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

   prompt('请输入您的姓名:')
   

   作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
4. JavaScript代码执行顺序
   按HTML文档流顺序执行JavaScript代码

1.1.5 字面量

在计算机科学中，字面量是在计算机中描述事/物

1. 数字字面量：1000
2. 字符串字面量：‘黑马程序员’
3. 数组字面量
4. 对象字面量
5. …

1.2 变量

1.2.1 变量是什么

白话：变量就是一个装东西的盒子
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆
注：变量不是数据本身，它们仅仅是一个用于存储数值的容器，可以理解为是一个个用来装东西的纸箱子
作用：存放数据，变量指的是容器而不是数据

1.2.2 变量的基本使用

1. 声明变量（要想使用变量，首先需要创建变量（声明变量/定义变量））
   语法

   let 变量名
   

   声明变量由两部分构成：声明关键字、变量名（标识）
   let 即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语
2. 变量赋值
   定义变量后，能够初始化它（赋值）。变量名之后跟上一个“=”（赋值运算符），然后是数值。
   注：通过变量名来获得变量里面的数据
   简单点，也可以声明变量的时候直接完成赋值操作，成为变量初始化
3. 更新变量
   变量赋值后，还可以通过简单地给它一个不同的值来更新它。
   注：let不允许多次声明变量
4. 声明多个变量
   变量赋值后，还可以通过简单地给它一个不同的值来更新它
   语法：多个变量中间用逗号隔开

   let age = 18,uname = 'pink'
   

   说明：看上去代码长度更短，但并不推荐这样。为了更好地可读性，请一行只声明一个变量

1.2.3 变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

1.2.4 变量命名规则与规范

规则：必须遵守，不遵守报错（法律层面）
规范：建议，不遵守不会报错，但不符合行内通识（道德层面）

1. 规则
   不能用关键字
   关键字：有特殊含义的字符，JavaScript内置的一些英语词汇。例如：let、var、if、for等。
   只能用下划线、字母、数字、$组成，且数字不能开头
   字母严格区分大小写，如Age和age是不同的变量
2. 规范
   起名要有意义
   遵守小驼峰命名法
   第一个单词首字母小写，后面每个单词首字母大写

1.2.5 let和var的区别

在较旧的JavaScript，使用关键字var来声明变量，而不是let
var现在开发中一般不再使用它，只是我们可能在老版程序中看到它
let为了解决var的一些问题
var声明：
可以先使用再声明（不合理）
var声明过的变量可以重复声明（不合理）
比如变量提升、全局变量、没有块级作用域等等

1.2.6 数组

1.2.6.1 数组的基本使用

数组：一种将一组数据存储在单个变量名下的优雅方式
好处：数组可以保存多个数据
数组字面量：[ ]中括号

1. 声明语法

   let 数组名 = [数据1,数据2,...,数据n]
   

   数组是按顺序保存，所以每个数据都有自己的编号
   计算机中的编号从0开始
   在数组中，数据的编号也叫索引或下标
   数组可以存储任意类型的数据
2. 取值语法

   数组名[下标]
   

3. 一些术语
   元素：数组中保存的每个数据都叫数组元素
   下标：数组中数据的编号
   长度：数组中数据的个数，通过数组的length属性获得

1.3 常量

概念：使用const声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let
命名规范：和变量一致
注：常量不允许重新赋值，声明的时候必须赋值（初始化）

1.4 数据类型

1.4.1 数据类型

计算机世界中的万事万物都是数据。
分类的好处：
①更加充分和高效的利用内存
②更加方便程序员的使用数据
分类：
1. 基本数据类型：
①number数字型
数学中学到的数字，可以是整数、小数、正数、负数
JavaScript中的正数、负数、小数等统一称为数字类型
注：JS是弱数据类型，变量属于哪种类型只有赋值后才能确认
Java是强数据类型
数字可以有很多操作，比如，乘法*、除法/、加法+、减法-等等，所以经常和算术运算符一起
数字运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）
%：取模（取余数）
开发中经常作为·某个数字是否被整除
优先级：同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级
JavaScript中优先级越高越先被执行，优先级相同时从左到右执行
乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用（）可以提升优先级
NaN代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果
NaN是粘性的，任何对NaN的操作都会返回NaN
②string字符串型
通过单引号（’ '）、双引号（" "）或反引号（`）包裹的数据都叫字符串，推荐使用单引号
注：①无论单引号还是双引号必须成对出现
②单引号/双引号可以相互嵌套，但是不可以自己嵌套自己（口诀：外双内单，或者外单内双）
③必要时可以使用转义符\，输出单引号或双引号
字符串拼接：
场景：+运算符可以实现字符串的拼接
口诀：数字相加，字符相连
模板字符串
拼接字符串和变量，操作更简便
语法：反引号；拼接变量时，用${}包住变量
③boolean布尔型
表示肯定或否定时在计算机中对应的是布尔类型数据
它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）
④undefined未定义型
未定义是比较特殊的类型，只有一个值undefined
出现情况：只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值为undefined
使用场景：开发中经常声明一个变量，等待传送过来的数据。
如果不知道这个数据是否传递过来，可以通过检测这个变量是不是undefined，判断用户是否有数据传递过来
⑤null空类型
JavaScript中的null仅仅是一个代表“无”，“空”或“值未知”的特殊值
null和undefined的区别：
undefined表示没有赋值
null表示赋值了，但是内容为空
使用场景：把null作为尚未创建的对象（将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null）
2. 引用数据类型：object对象

1.4.2 控制台输出语句和检测数据类型

1. 控制台输出语句
   用于测试结果
2. 通过typeof关键字检测数据类型
   typeof运算符可以返回被检测的数据类型。它支持两种语法形式：
   ①作为运算符：typeof x（常用写法）
   ②函数形式：typeof（x）

1.4.3 类型转换

原因：JavaScript是弱数据类型，使用表单、prompt获取过来的数据默认是字符串类型的，此时不能直接简单地进行加法运算
概念：把一种数据类型的变量转换成我们需要的数据类型

1.4.3.1 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
规则：
+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符，比如-、*、/等都会把数据转成数字类型
缺点：
转换类型不明确，靠经验才能总结
小技巧：
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

1.4.3.2 显式转换

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显式转换
概念：自己写代码告诉系统该转换成什么类型
转换为数字型：
①Number（数据）：
转成数字型
如果字符串内容里有非数字，转换失败时结果为NaN（Not a Number）即不是一个数字
NaN也是number类型的数据，代表非数字
②parseInt（数据）
只保留整数
③parseFloat（数据）
可以保留小数

二、运算符与语句

2.1 运算符

2.1.1 赋值运算符

对变量进行赋值的运算符
已学过的赋值运算符：=
将等号右边的值赋予给左边 要求左边必须是一个容器
其他运算符：+=、-=、*=、/=、%=

2.1.2 一元运算符

总多的JavaScript的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
自增：
符号：++
作用：让变量的值+1
用法：
前置自增：每执行1次，当前变量数值加1，先自加再使用
后置自增：每执行1次，当前变量数值加1，先使用再自加，使用较多
区别：单独使用时没有区别；参与运算时会有所不同
自减：
符号：–
作用：让变量的值-1
使用场景：经常用于计数来使用

2.1.3 比较运算符

使用场景：比较两个数据大小、是否相等
比较运算符：
>：左边是否大于右边
<：左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边值是否相等
=/=/=：左右两边是否类型和值都相等
!=/=：左右两边是否不全等
比较结果为boolean类型，即只会得到true或false
对比：
= 单等是赋值
=/= 是判断
=/=/= 是全等（开发中推荐）
字符串比较，是比较的字符对应的ASCII码
从左往右依次比较
NaN不等于任何值，包括它本身
涉及到“NaN”都是false
尽量不要比较小数，因为小数有精度问题
不同类型之间比较会发生隐式转换
最终把数据隐式转换成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢=/=/=或者!=/=

2.1.4 逻辑运算符

使用场景：逻辑运算符用来解决多重条件判断

2.1.5 运算符优先级

2.2 语句

2.2.1 表达式

表达式是可以被求值的代码，JavaScript引擎会将其计算出一个结果

2.2.2 语句

语句是一段可以执行的代码
区别：表达式可被求值，所以可以写在赋值语句的右侧；语句不一定有值，所以比如alert（）for和break等语句就不能被用于赋值
某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须成分
程序三大流程控制语句：
从上往下执行，这种叫顺序结构
根据条件选择执行代码，这种叫分支结构
某段代码被重复执行，这种叫循环结构

2.2.2.1 分支语句

分支语句可以让我们有选择性的执行想要的代码
分支语句包含：
if分支语句
三元运算符
switch语句

2.2.2.1.1 if语句

if语句有三种使用：单分支、双分支、多分支
单分支使用语法：

if(条件){
	满足条件要执行的代码
}

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
如果大括号只有一个语句，大括号可以省略

双分支if语法：

if(条件){
	满足条件要执行的代码
}else{
	不满足条件执行的代码
}

多分支if语法：
使用场景：适合于有多个结果的时候

if(条件1){
	代码1
}else if(条件2){
	代码2
}else if(条件3){
	代码3
}else{
	代码n
}