前端开发_JavaScript基础

JavaScript介绍

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

作用：

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)

组成：

ECMAScript：规定了js基础语法核心知识。
Web APIs：
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript权威网站

JavaScript书写位置

内部JavaScript

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

script标签写在上面，即html文件底部

将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。
外部JavaScript

代码写在以.js结尾的文件里，通过script标签，引入到html页面中

示例：<script src="my.js"></script>

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

外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读
内联JavaScript

代码写在标签内部（后面vue框架会用这种模式）

示例：<button onclick="alert('test')">点我</button>

JS基本语法

注释

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

运算符

赋值运算符

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

其他赋值运算符：+=、-=、*=、/=、%=

一元运算符

++和–，即自增和自减

前置自增：先自加再使用

后置自增：先使用再自加

比较运算符

> ：左边是否大于右边

<：左边是否小于右边

>=：左边是否大于或等于右边

<=：左边是否小于或等于右边

==：左右两边值是否相等

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

!==：左右两边是否不全等

比较结果为boolean类型，即只会得到 true 或 false

对比：

= 单等是赋值

== 是判断

=== 是全等

开发中判断是否相等，强烈推荐使用 ===

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

NaN不等于任何值，包括它本身

不同类型之间比较会发生隐式转换

逻辑运算符

逻辑与：&&

逻辑或：||

逻辑非：!

运算符优先级

在这里插入图片描述

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

结束符

使用英文分号;代表语句结束

实际开发中可写可不写

语句

表达式和语句

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

因为表达式可被求值，所以它可以写在赋值语句的右侧

语句是一段可以执行的代码

语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。

分支语句

if语句

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

双分支if

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

多分支if

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

三元运算符

条件?满足条件执行的代码:不满足条件执行的代码

switch语句

switch(数据){
    case 值1:
        代码1
        break
    case 值2:
        代码2
        break
    default:
        代码n
        break
}

循环语句

while循环

while(循环条件){
    要重复执行的代码（即循环体）
}

for循环

for(变量起始值;终止条件;变量变化量){
    循环体
}

继续循环使用continue

跳出循环使用break

输入输出

输出语法

body内输出
```
document.write('要输出的内容')
```
作用：向body内输出内容

如果输出的内容写的是标签，也会被解析成网页元素
警告框输出
```
alert('要输出的内容')
```
作用：页面弹出警告对话框
控制台输出
```
conosole.log('控制台打印')
```
作用：控制台输出语法，程序员调试使用

输入语法

prompt('请输入：')

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

在这里插入图片描述

代码执行顺序：按HTML文档流顺序执行JavaScript代码

但是，alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量

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

包括数字字面量、字符串字面量、数组字面量、对象字面量等等

变量

变量是计算机存储数据的“容器”

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

变量的使用

声明变量

语法：let+变量名

let 不允许多次声明一个变量

声明多个变量：

多个变量中间用逗号隔开let 变量1 = 值1, 变量2 = 值2

变量赋值

语法：变量名 = 数值

也可以声明时直接赋值

let 变量名 = 赋值

更新变量

再次进行变量赋值即可

变量命名规则与规范

规则：

不能用关键字
- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

规范：

起名要有意义
遵守小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写。例：userName

数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

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

数组声明

语法：let 数组名 = [数据1,数据2,……,数据n]

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

数组使用

语法：数组名[下标]（下标从0开始）

操作数组

新增

数组名.push(元素1,...,元素n)将一个或多个元素添加到数组末尾，并返回数组的新长度

数组名.unshift(元素1,...,元素n)将一个或多个元素添加到数组的开头，并返回数组的新长度
删除

数组名.pop()从数组中删除最后一个元素，并返回该元素的值

数组名.shift()从数组中删除第一个元素并返回该元素的值

数组名.splice(start，deleteCount)从起始位置删除几个元素（deleteCount可选）

常量

使用 const 声明的变量称为“常量”。

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

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

数据类型

基本数据类型

number 数字型

JavaScript 中的正数、负数、小数等统一称为数字类型。

数学运算符也叫算术运算符，主要包括加+、减-、乘*、除/、取余%（求模）

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

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

string 字符串型

通过单引号（ ‘’）、双引号（ “”）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

无论单引号或是双引号必须成对使用

单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

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

+运算符可以实现字符串的拼接。

数字相加，字符相连

模板字符串

拼接字符串和变量

语法：

`` (反引号)
在英文输入模式下按键盘的tab键上方那个键
内容拼接变量时，用 ${ } 包住变量
示例：

document.write(`我的名字是${name}，今年${age}岁`)

boolean 布尔型

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

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）

undefined 未定义型

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

只声明变量，不赋值的情况下，变量的默认值为 undefined，

null 空类型

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

null 和 undefined 区别：

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

引用类型

object 对象

检测数据类型

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

作为运算符： typeof 变量名 （常用的写法）
函数形式： typeof(变量名）

类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

隐式转换

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

规则：

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

除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

显示转换

转换为数字型

Number(数据)
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字
parseInt(数据)
- 只保留整数
parseFloat(数据)
- 可以保留小数

转换为字符型:

String(数据)
变量.toString(进制)

函数

function，是被设计为执行特定任务的代码块

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

函数使用

函数声明

function 函数名(参数列表) {
    函数体
}

参数列表可以省略

示例：

function f1(){
    document.write('hello')
}

function f2(num1,num2){
    document.write(num1+num2)
}

函数命名规范

和变量命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议：常用动词约定

函数调用

函数名(传递的参数列表)

如果某个参数没有给对应形传实参，默认是undefined

函数返回值

当函数需要返回数据出去时，用return关键字

区别于java的是，java需要声明返回类型，这里直接返回就可以了

示例：

function getSum(x,y){
    return x+y
}

没有return的函数默认返回undefined

匿名函数

没有名字的函数, 无法直接使用。

函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

语法：
```
lef fn = function(){
    函数体
}
```
调用：
```
fn()
```
立即执行函数

避免全局变量时间的污染
```
// 方式1
(function(){函数体})();

// 方式2
(function(){函数体}());
```
多个立即执行函数要用 ; 隔开，要不然会报错

对象

JavaScript里的一种数据类型

对象组成

对象由属性和方法组成

let 对象名 = {
    属性名: 属性值,
    方法名: 函数
}

对象使用

对象声明

let 对象名 = {}

//示例
let 对象名 = new Object()

//示例
let person = {}

对象属性调用

//语法：对象名.属性名

//示例
let person = {
    uname: '老师',
    age: 18,
    gender: '女'
}

console.log(person.name)

如果对象属性为多次属性或 - 等属性，点操作就不能使用了

需要换用以下方式：

//示例：
let person = {
    'user-name': '老师',
    age: 18,
    gender: '女'
}

console.log(person['user-name'])

对象属性修改

语法：对象名.属性名 = 新值

对象新增属性

语法：对象名.新属性 = 新值

示例：

let person = {
    uname: '老师',
    age: 18,
    gender: '女'
}

person.address = '成都'

对象删除属性

语法：delete 对象名.属性

对象方法

方法的声明和正常函数声明相同

let 对象名 = {
    方法名: function() {...}
}

方法调用和属性调用类似：对象名.方法名()

遍历对象

使用 for in 语法进行遍历

//示例
let person = {
    uname: '老师',
    age: 18,
    gender: '女'
}

for (let i in person){
    console.log(i)	//打印属性名
    console.log(person[i])	//打印属性值
}