JavaScript基础部分学习

一、JavaScript介绍

一种运行在客户端的编程语言，实现人机交互效果

  • 网页特效
  • 表单验证
  • 数据交互

JavaScript的组成

  • ECMAScript
  • WebAPI

其中，webapi可以分为dom（页面文档对象模型）和bom（浏览器对象模型）

书写位置：

  • 内部js：直接写在html文档里，在body里面的最后一行添加一个script标签，在其中添加js
  • 外部js：写在以.js结尾的文件中，通过script+src的标签引入（例如：script src=“123.js”）
  • 内联js：代码写在一个标签中，例如：button onclick=“alert(“123”)”，在vue中使用

js中的注释：单行注释（//）或多行注释（/* */）

js中语句结尾的分号可写可不写

输入输出语法：

1、输出：

  • document.write(“要输出的内容”),相当于向html文档中输出，直接改变网页内容
  • alert(“要输出的内容”)，直接通过网页的弹窗来提示
  • console.log(“要输出的内容”)，在控制台中输出，用于调试

2、输入

  • prompt(“提示信息”)，可以通过弹窗来让用户输入内容

字面量：用于描述事物的遍历，例如1是数字字面量；"abc"是字符串字面量

二、js基础知识

1、变量

  • 声明变量：let 变量名
  • 变量赋值：变量名 = 5
1
2
let age = 18
console.log(age)

注意：不允许多次声明同一变量

声明多个变量：let a = 1, b = 2

变量名的规则：

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

变量名的规范

  • 遵循小驼峰命名法

注意：旧版本js中使用var来声明变量，现在已不再使用

2、数组

let arr = [数据1,数据2,…]
let b = arr[0]
数组的下标从0开始

变量名可以使用中文作为变量，但是一般不能使用

数组长度属性：length，例如：arr.length

js中的数组的特征：可以容纳不同数据类型的内容，数组不需要提前定义大小，可随时修改

数组添加新的数据：

  • arr.push(新增的内容):添加到数组末尾，返回该数组的新长度，可以添加多个元素
  • arr.unshift(新增的内容)：添加到数组开头，返回数组长度

数组删除数据：

  • arr.pop()：删除最后一个元素，并返回该元素的值
  • arr.shift()：删除第一个元素
  • arr.splice(操作的下标，删除的个数)：从哪个位置开始删几个

3、常量

常量的声明：const PI = 3.14

常量在声明时必须赋值，且不允许修改

4、数据类型

给数据分类的作用

  • 更加充分高效利用内存
  • 更加方便使用数据

数据类型：

  • 基本数据类型
  • 引用数据类型

基本数据类型

1、number 数字型：

整数、小数、正数、负数

js是弱数据类型语言，number既可以整数也可浮点数

NaN代表一个计算错误，表示一个未定义的数学操作得到的结果

2、string 字符串类型

使用单引号、双引号、反引号包裹的数据，单双引号没区别（可以使用单包双、双包单的策略）

字符串可以使用加号拼接，但是不能使用乘号

转义字符可以使用

模板字符串：换一种方式输出字符串和变量

1
console.write(`我今年${age}岁了`)
3、布尔类型

取值true/false

注意：除了0、null、undefined、NaN、‘’、false为假外，其他都为真

4、未定义类型

只声明一个变量但是未赋值，则是未定义类型

5、null

表示空，是一个对象

null+1会产生1

检测数据类型的方法
typeof关键字/函数
typeof x或typeof(x)

数据类型转换

  • 隐式转换：进行某些运算时会自动转换，例如加法时一边是字符串的话会自动将另一边也转换为字符串

将字符串转换为数字的最简单的方法：添加加号，例如：+“abc”

  • 显式转换：parseInt/parseFloat

parse可以转换例如"12px"这样的字符串

5、运算符

赋值运算符

“=”，或者+=，-=，*=，/=

一元运算符

自增/自减：++/–

比较运算符

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

和=的区别：

  • 2 == '2’是true
  • 2 === '2’是false

通常全部使用===来判断

注意：NaN不等于任何值，包括它自己

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

“a”<“b”,“aa”<“ab”

逻辑运算符

&& 逻辑与
|| 逻辑或
! 非 取反

注意：&&与||的结果并不是直接的布尔值，而是只是将其两边的数据当成布尔值看，然后选择一个作为值。

逻辑中断：左边已经有结果时可以不用判断右边，可以用于变量赋值中

x = x || 0可以让x如果为undefined或NaN、null，就变成0

6、语句

表达式和语句：

  • 表达式：可以被求值的代码，例如3 + 4，x = 7等等
  • 语句：一段可以执行的代码，例如prompt()，alert()等等

表达式可以写在赋值语句的右侧

分支语句

  • if语句中，只有数字0和空字符串为假，其余都为真
  • 三元运算符：条件1？满足代码：不满足代码
  • switch语句：switch括号中根一个数据，然后判断case中哪个数据于它全等

循环语句

断点调试：可以在浏览器的调试模式中的某行语句打断点，然后刷新浏览器，就会开始进行断点处调试

  • while循环

使用continue和break继续和退出循环

  • for循环

for中可以定义变量

7、函数

函数的声明：

1
2
3
function sayhi(){
    console.log("hi");
}

函数命名规范：和变量名基本一直，前缀应为动词

调用函数：sayhi();

参数列表/返回值：

1
2
3
4
5
6
7
8
function getSum(end) {
    let sum = 0
    for(let i = 0;i < end;i++)
    {
        sum += i
    }
    return sum
}

注意：如果函数调用时有参数没有传递，会导致这个值变成undefined

函数默认值：function a(x = 0, y = 0)

如果实参过多，那么多余的实参会被忽略

作用域：let定义的函数的作用域只包含在它所在的块中

  • 全局作用域：直接定义在script标签中的变量
  • 局部作用域：定义在函数中的变量

注意：如果函数内部变量没有声明直接赋值也当全局变量看

匿名函数

function() {}

1、函数表达式：

let fn = function() {}

将函数赋值给fn，变量中装的是函数，调用时可以使用fn()

与具名函数的不同：具名函数调用可以写在任何位置，但是匿名函数只能在声明后再使用

2、立即执行函数

1
(function(){})()

会直接执行函数中的内容，避免全局变量之间的污染

注意：立即执行函数的后面必须添加分号

8、对象

一种数据类型，可以详细描述某种事物

1
2
3
4
5
let obj = {
    uname: 'abc',
    age: 18,
    gender: "male"
}

也可以let obj = new Object()

  • 使用.来属性访问；
  • 可以添加一个新的属性，让它等于一个值
  • 删：delete 对象名.属性

也可以让属性名变成一个字符串，这样的话访问这个属性可以使用obj[‘uname’]类似的方式来访问，注意其中必须要加上引号。这种方法用于属性的遍历

方法也可以存在变量中，让其赋予一个匿名函数

遍历对象每个属性的方法：

1
2
3
for(let k in obj){
    console.log(obj[k])
}

通常用这种方法来遍历一个对象中的每个属性

内置对象

类似不同的内置类，提供了许多方法

  • Math.random()生成0到1之间的随机数
  • Math.ceil/floor向上/下取整
  • Math.pow/abs/max/min