第一次接触前端 - JavaScript笔记

xuyuelin88117
134 阅读9分钟

JavaScript介绍

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

作用包括：

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

组成

JavaScript的组成包括：

  • ECMAScript: 规定了js基础语法核心知识。

比如：变量、分支语句、循环语句、对象等等

  • Web APIs :
  1. DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
  2. BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

书写位置

内部JavaScript

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

规范：script标签写在上面

拓展： alert(‘你好，js’) 页面弹出警告对话框

外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

内联JavaScript

代码写在标签内部

输入输出语句

输入： prompt()

输出： alert() document.write() console.log()

变量、数据类型

变量

声明变量：let 变量名

let和var区别： let为了解决var的一些问题 var声明:

  1. 可以先使用再声明 (不合理)
  2. var声明过的变量可以重复声明(不合理) 比如变量提升、全局变量、没有块级作用域等等

结论： 以后声明变量我们统一使用 let

数据类型

基本数据类型

  • number 数字型
  • string 字符串型
  • boolean 布尔型
  • undefined 未定义型
  • null 空类型

引用数据类型

  • object 对象
  • function 函数
  • array 数组

tips

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

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

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

用反引号包含数据，内容拼接变量时，用 ${} 包住变量，其他时候直接加号即可

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

控制台语句经常用于测试结果来使用，数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色，通过typeof关键字可以检测数据类型

类型转换

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

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

隐式转换

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

规则：

  • +号两边只要有一个是字符串，都会把另外一个转成字符串
  • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型 缺点：转换类型不明确，靠经验才能总结

小技巧： +号作为正号解析可以转换成Number

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。 为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换

概念： 自己写代码告诉系统该转成什么类型

转换为数字型

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

转换为字符型

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

流程控制

运算符

算术运算符

  • +：求和
  • -：求差
  • *：求积
  • /：求商
  • %：取模（取余数）

赋值运算符

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

一元运算符

  • 自增：++
  • 自减：-- 前置：先自增后运算； 后置：先运算后自增

比较运算符

  • > 左边是否大于右边
  • < 左边是否小于右边
  • >= 左边是否大于或等于右边
  • <= 左边是否小于或等于右边
  • == 左右两边是否相等
  • === 左右两边是否类型和值都相等
  • !== 左右两边是否不全等

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

字符串比较，是比较的字符对应的ASCII码,从左往右依次比较,如果第一位一样再比较第二位，以此类推

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

尽量不要比较小数，因为小数有精度问题

不同类型之间比较会发生隐式转换，所以需要把数据隐式转换转成number类型再比较，并且在开发中，如果进行准确的比较我们更喜欢 === 或者 !==

逻辑运算符

与(&&) 或(||) 非(!)

语句

表达式和语句

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

语句指js整句或命令，js语句是以分号结束（可以省略）

表达式计算出一个值，但语句用来自行以使某件事发生，其实某些情况，也可以把表达式理解为语句，因为它是在计算结果

分支语句

  • 写几句就从上往下执行几句，这种叫顺序结构
  • 有的时候要根据条件选择执行代码，这种就叫分支结构
  • 某段代码被重复执行，就叫循环结构

if分支语句

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

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

三元运算符

其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式

符号?与:配合使用： 条件 ? 满足条件执行的代码 : 不满足条件执行的代码

switch语句

找到跟小括号里数据全等的case值，并执行里面对应的代码，若没有全等（===）的则执行default里的代码

switch case语句一般用于等值判断,不适合于区间判断

switch case一般需要配合break关键字使用 没有break会造成case穿透

循环语句

当如果明确了循环的次数的时候推荐使用for循环，当不明确循环的次数的时候推荐使用while循环

  • continue：结束本次循环，继续下次循环
  • break：跳出所在的循环

注意事项：循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程，因此，需要具备三要素：

  1. 变量起始值
  2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
  3. 变量变化量（用自增或者自减）

数组

数组的基本使用

元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得

操作数组

增

arr.push(新增的内容)：将一个或多个元素添加到数组的末尾，并返回该数组的新长度

arr.unshift(新增的内容)：将一个或多个元素添加到数组的开头，并返回该数组的新长度

删

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

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

arr.splice(操作的下标,删除的个数)：删除指定元素

改

数组[下标] = 新值

查

数组[下标]

函数

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

具名函数

function 函数名(参数列表){
    函数体
}
  1. 声明：function fn() {}
  2. 调用：fn()

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

开发中尽量保持形参和实参个数一致

函数内部只能出现1次return，并且return后面代码不会再被执行，函数可以没有return，这种情况函数默认返回值为undefined

匿名函数

let fn = function() {}

或者用于立即执行函数

对象

对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合，用来描述某个事物

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

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值

  • 点形式 对象.属性
  • [] 形式 对象['属性'] 点后面的属性名一定不要加引号，[] 里面的属性名一定加引号

方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

例子：

let person = {
    name: 'xuyuelin88117',
    sayHello: function(){
        document.write('Hello')
    }
}

person.name//'xuyuelin88117'
person.sayHi()//Hello

增

对象名.新属性名 = 新值

也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活

  1. 对象如果有这个属性相当于重新赋值
  2. 对象如果没有这个属性相当于动态添加一个属性

删

delete 对象名.属性名

改

对象.属性 = 值

对象.方法 = function() {}

查

对象.属性 或者 对象['属性'] 对象.方法()

遍历

对象没有像数组一样的length属性,所以无法确定长度；对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

使用for 变量 in 对象

变量获得对象的属性名，对象[变量]获得属性值

内置对象

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

内置对象Math

提供了一系列做数学运算的方法

  1. random：生成0-1之间的随机数（包含0不包括1）
  2. ceil：向上取整
  3. floor：向下取整
  4. max：找最大数
  5. min：找最小数
  6. pow：幂运算
  7. abs：绝对值
avatar
文章
阅读
粉丝