前端开发_JavaScript基础

JavaScript介绍

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

作用：

• 网页特效 (监听用户的一些行为让网页作出对应的反馈)

• 表单验证 (针对表单数据的合法性进行判断)

• 数据交互 (获取后台的数据, 渲染到前端)

• 服务端编程 (node.js)

组成：

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

JavaScript权威网站

JavaScript书写位置

1. 内部JavaScript

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

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

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

2. 外部JavaScript

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

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

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

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

3. 内联JavaScript

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

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

JS基本语法

注释

1. 单行注释
   • //
   • 快捷键：ctrl+/
2. 块注释
   • /* */
   • 快捷键：shift+alt+A

运算符

赋值运算符

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

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

一元运算符

++和–，即自增和自减

前置自增：先自加再使用

后置自增：先使用再自加

比较运算符

> ： 左边是否大于右边

<： 左边是否小于右边

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

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

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

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

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

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

对比：

= 单等是赋值

== 是判断

=== 是全等

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

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

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

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

逻辑运算符

逻辑与：&&

逻辑或：||

逻辑非：!

运算符优先级

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

逻辑与比逻辑或优先级高

结束符

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

实际开发中可写可不写

语句

表达式和语句

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

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

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

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

分支语句

1. if语句

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

2. 双分支if

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

3. 多分支if

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

4. 三元运算符

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

5. switch语句

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

循环语句

1. while循环

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

2. for循环

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

继续循环使用continue

跳出循环使用break

输入输出

输出语法

1. body内输出

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

   作用：向body内输出内容

   如果输出的内容写的是标签，也会被解析成网页元素

2. 警告框输出

   alert('要输出的内容')
   

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

3. 控制台输出

   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开始）

操作数组

1. 新增

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

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

2. 删除

   数组名.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

匿名函数

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

1. 函数表达式

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

   语法：

   lef fn = function(){
       函数体
   }
   

   调用：

   fn()
   

2. 立即执行函数

   避免全局变量时间的污染

   // 方式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])	//打印属性值
}

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

Math

Math对象是JavaScript提供的一个“数学”对象

Math对象包含的方法有：

• random：生成0-1之间的随机数（包含0不包括1）
• ceil：向上取整
• floor：向下取整
• max：找最大数
• min：找最小数
• pow：幂运算
• abs：绝对值