JavaScript笔记26-50

龙司Glsa

已于 2023-01-10 23:33:12 修改

阅读量836

点赞数

分类专栏： JavaScript 文章标签： javascript 排序算法算法

于 2023-01-10 23:05:44 首次发布

本文链接：https://blog.csdn.net/m0_74006038/article/details/128637762

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

DO WHILE 循环:
是一个和 while 循环类似的循环
while 会先进行条件判断，满足就执行，不满足直接就不执行了
但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断
语法： do { 要执行的代码 } while (条件)

// 下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 {} 内部的代码
var num = 10
do {
  console.log('我执行了一次')
  num = num + 1
} while (num < 10)

FOR 循环

和 while 和 do while 循环都不太一样的一种循环结构

道理是和其他两种一样的，都是循环执行代码的

语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
  // 这里写的是要执行的代码
  console.log(i)
}

// 控制台会依次输出 1 ~ 10

这个只是看起来不太舒服，但是用起来比较好用

BREAK 终止循环:

在循环没有进行完毕的时候，因为设置的条件满足，提前终止循环

比如：要吃五个包子，吃到三个的时候，不能在吃了，就停止吃包子这个事情

要终止循环，就可以直接使用 break 关键字

for (var i = 1; i <= 5; i++) {
  // 没循环一次，吃一个包子
  console.log('我吃了一个包子')
  // 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环
  // 循环就不会继续向下执行了，也就没有 4 和 5 了
  if (i === 3) {
    break
  }
}

CONTINUE 结束本次循环

在循环中，把循环的本次跳过去，继续执行后续的循环

比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个

跳过本次循环，就可以使用 continue 关键字

for (var i = 1; i <= 5; i++) {
  // 当 i 的值为 3 的时候，执行 {} 里面的代码
  // {} 里面有 continue，那么本次循环后面的代码就都不执行了
  // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
  if (i === 3) {
    console.log('这个是第三个包子，掉地下了，我不吃了')
    continue
  }
  console.log('我吃了一个包子')
}

函数

对于 js 来说，函数就是把任意一段代码放在一个盒子里面
在想要让这段代码执行的时候，直接执行这个盒子里面的代码就行

for (var i = 0; i < 10; i++) {
  console.log(i)
}

// 函数，这个 {} 就是那个 “盒子”
function fn() {
  for (var i = 0; i < 10; i++) {
    console.log(i)
  }
}

函数定义：

定义阶段就是把代码放在盒子里面
有两种定义方式声明式和赋值式

声明式：使用 function 这个关键字来声明一个函数

语法：
function fn() {
  // 一段代码
}
// function: 声明函数的关键字，表示接下来是一个函数了
// fn: 函数的名字，定义的（遵循变量名的命名规则和命名规范）
// (): 必须写，是用来放参数的位置
// {}: 就是用来放一段代码的位置（也就是 “盒子”）

赋值式：其实就是和使用 var 关键字是一个道理了
首先使用 var 定义一个变量，把一个函数当作值直接赋值给这个变量就可以了

语法：
var fn = function () {
  // 一段代码
}
// 不需要在 function 后面书写函数的名字了，因为在前面已经有了

函数调用：

就是让盒子里面的代码执行一下
让函数执行
两种定义函数的方式不同，但是调用函数的方式都以一样的

调用一个函数函数调用就是直接写 函数名() 就可以了

// 声明式函数
function fn() {
  console.log('我是 fn 函数')
}

// 调用函数
fn()

// 赋值式函数
var fn2 = function () {
  console.log('我是 fn2 函数')
}

// 调用函数
fn()

注意：定义完一个函数以后，如果没有函数调用，那么写在 {} 里面的代码没有意义，只有调用以后才会执行

调用的区别

虽然两种定义方式的调用都是一样的，但是还是有一些区别的
声明式函数：调用可以在定义之前或者定义之后

// 可以调用
fn()

// 声明式函数
function fn() {
  console.log('我是 fn 函数')
}

// 可以调用
fn()

赋值式函数：调用只能在 定义之后

// 会报错
fn()

// 赋值式函数
var fn = function () {
  console.log('我是 fn 函数')
}

// 可以调用
fn()

函数的参数：

在定义函数和调用函数的时候都出现过 ()

() 的作用就是用来放参数的位置参数分为两种行参和实参

// 声明式
function fn(行参写在这里) {
  // 一段代码
}

fn(实参写在这里)

// 赋值式函数
var fn = function (行参写在这里) {
  // 一段代码
}
fn(实参写在这里)

行参和实参的作用：

1.行参
就是在函数内部可以使用的变量，在函数外部不能使用
每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范）
多个单词之间以 , 分隔

// 书写一个参数
function fn(num) {
  // 在函数内部就可以使用 num 这个变量
}

var fn1 = function (num) {
	// 在函数内部就可以使用 num 这个变量
}

// 书写两个参数
function fun(num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

var fun1 = function (num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

如果只有行参的话，那么在函数内部使用的值个变量是没有值的，也就是 undefined
行参的值是在函数调用的时候由实参决定的

2.实参
在函数调用的时候给行参赋值的
也就是说，在调用的时候是给一个实际的内容的

function fn(num) {
  // 函数内部可以使用 num 
}

// 这个函数的本次调用，书写的实参是 100
// 那么本次调用的时候函数内部的 num 就是 100
fn(100) 

// 这个函数的本次调用，书写的实参是 200
// 那么本次调用的时候函数内部的 num 就是 200
fn(200)

函数内部的行参的值，由函数调用的时候传递的实参决定
多个参数的时候，是按照顺序一一对应的

function fn(num1, num2) {
  // 函数内部可以使用 num1 和 num2
}

// 函数本次调用的时候，书写的参数是 100 和 200
// 那么本次调用的时候，函数内部的 num1 就是 100，num2 就是 200
fn(100, 200)

参数个数的关系：

1.行参比实参少
因为是按照顺序一一对应的
行参少就会拿不到实参给的值，所以在函数内部就没有办法用到这个值

function fn(num1, num2) {
  // 函数内部可以使用 num1 和 num2
}

// 本次调用的时候，传递了两个实参，100 200 和 300
// 100 对应了 num1，200 对应了 num2，300 没有对应的变量
// 所以在函数内部就没有办法依靠变量来使用 300 这个值
fn(100, 200, 300)

2.行参比实参多
因为是按照顺序一一对应的
所以多出来的行参就是没有值的，就是 undefined

function fn(num1, num2, num3) {
  // 函数内部可以使用 num1 num2 和 num3
}

// 本次调用的时候，传递了两个实参，100 和 200
// 就分别对应了 num1 和 num2
// 而 num3 没有实参和其对应，那么 num3 的值就是 undefined
fn(100, 200)

函数的return return 返回的意思，其实就是给函数一个 返回值 和 终断函数

返回值：
函数调用本身也是一个表达式，表达式就应该有一个值出现
现在的函数执行完毕之后，是不会有结果出现的

// 比如 1 + 2 是一个表达式，那么 这个表达式的结果就是 3
console.log(1 + 2) // 3

function fn() {
  // 执行代码
}

// fn() 也是一个表达式，这个表达式就没有结果出现
console.log(fn()) // undefined

return 关键字就是可以给函数执行完毕一个结果

function fn() {
  // 执行代码
  return 100
}

// 此时，fn() 这个表达式执行完毕之后就有结果出现了
console.log(fn()) // 100

可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果

终断函数：
当开始执行函数以后，函数内部的代码就会从上到下的依次执行
必须要等到函数内的代码执行完毕
而 return 关键字就是可以在函数中间的位置停掉，让后面的代码不在继续执行

function fn() {
  console.log(1)
  console.log(2)
  console.log(3)
  
  // 写了 return 以后，后面的 4 和 5 就不会继续执行了
  return
  console.log(4)
  console.log(5)
}

// 函数调用
fn()

预解析：
预解析其实就是聊聊 js 代码的编译和执行
js 是一个解释型语言，就是在代码执行之前，先对代码进行通读和解释，然后在执行代码
也就是说， js 代码在运行的时候，会经历两个环节解释代码和执行代码

解释代码：
因为是在所有代码执行之前进行解释，所以叫做预解析（预解释）
需要解释的内容有两个
声明式函数：在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数
var 关键字在内存中先声明有一个变量名

fn()
console.log(num)

function fn() {
  console.log('我是 fn 函数')
}

var num = 100

经过预解析之后可以变形为

function fn() {
  console.log('我是 fn 函数')
}
var num

fn()
console.log(num)
num = 100

赋值式函数会按照 var 关键字的规则进行预解析

作用域：
什么是作用域，就是一个变量可以生效的范围
变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域

全局作用域：
全局作用域是最大的作用域
在全局作用域中定义的变量可以在任何地方使用
页面打开的时候，浏览器会自动生成一个全局作用域 window
这个作用域会一直存在，直到页面关闭就销毁了

// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的
var num = 100
var num2 = 200

局部作用域：
局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域
在局部作用域中定义的变量只能在这个局部作用域内部使用
在 JS 中只有函数能生成一个局部作用域，别的都不行
每一个函数，都是一个局部作用域

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100

function fn() {
  // 下面这个变量就是一个 fn 局部作用域内部的变量
  // 只能在 fn 函数内部使用
  var num2 = 200
}

fn()

变量使用规则：
有了作用域以后，变量就有了使用范围，也就有了使用规则
变量使用规则分为两种，访问规则和赋值规则

访问规则：
当想获取一个变量的值的时候，这个行为叫做访问
获取变量的规则：
首先，在自己的作用域内部查找，如果有，就直接拿来使用
如果没有，就去上一级作用域查找，如果有，就拿来使用
如果没有，就继续去上一级作用域查找，依次类推
如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量 is not defined）

var num = 100

function fn() {
  var num2 = 200
  
  function fun() {
    var num3 = 300
    
    console.log(num3) // 自己作用域内有，拿过来用
    console.log(num2) // 自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
    console.log(num) // 自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
    console.log(a) // 自己没有，一级一级找上去到全局都没有，就会报错
  }
  
  fun()
}

fn()

变量的访问规则也叫做作用域的查找机制
作用域的查找机制只能是向上找，不能向下找

function fn() {
  var num = 100
}
fn()

console.log(num) // 发现自己作用域没有，自己就是全局作用域，没有再上一级了，直接报错

赋值规则：
当你想给一个变量赋值的时候，那么就先要找到这个变量，在给他赋值

变量赋值规则：
先在自己作用域内部查找，有就直接赋值
没有就去上一级作用域内部查找，有就直接赋值
还没有再去上一级作用域查找，有就直接赋值
如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，再给他赋值

function fn() {
  num = 100
}
fn()

// fn 调用以后，要给 num 赋值
// 查看自己的作用域内部没有 num 变量
// 就会向上一级查找
// 上一级就是全局作用域，发现依旧没有
// 那么就会把 num 定义为全局的变量，并为其赋值
// 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
console.log(num) // 100

对象：

对象是一个复杂数据类型存储了一些基本数据类型的一个集合

var obj = {
  num: 100,
  str: 'hello world',
  boo: true
}

这里的 {} 和函数中的 {} 不一样
函数里面的是写代码的，而对象里面是写一些数据的
对象就是一个键值对的集合
{} 里面的每一个键都是一个成员
也就是说，可以把一些数据放在一个对象里面，那么他们就互不干扰了
其实就是准备一个房子，把想要的数据放进去，然后把房子的地址给到变量名，当需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据

创建对象：

字面量的方式创建一个对象

// 创建一个空对象
var obj = {}

// 像对象中添加成员
obj.name = 'Jack'
obj.age = 18

内置构造函数的方式创建对象

// 创建一个空对象
var obj = new Object()

// 向对象中添加成员
obj.name = 'Rose'
obj.age = 20

Object是js` 内置的构造函数，用于创建一个对象使用的

数据类型之间存储的区别：

既然区分了基本数据类型和复杂数据类型
那么他们之间就一定会存在一些区别
他们最大的区别就是在存储上的区别
存储空间分成两种栈和堆
栈：主要存储基本数据类型的内容
堆：主要存储复杂数据类型的内容

基本数据类型在内存中的存储情况：
var num = 100，在内存中的存储情况
直接在 栈空间 内有存储一个数据

复杂数据类型在内存中的存储情况：
下面这个对象的存储

var obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

复杂数据类型的存储：

1.在堆里面开辟一个存储空间
2.把数据存储到存储空间内
3.把存储空间的地址赋值给栈里面的变量
这就是数据类型之间存储的区别

数据类型之间的比较：

基本数据类型是值之间的比较

var num = 1
var str = '1'

console.log(num == str) // true

复杂数据类型是地址之间的比较

var obj = { name: 'Jack' }
var obj2 = { name: 'Jack' }

console.log(obj == obj2) // false

因为创建了两个对象，那么就会在堆空间里面开辟两个存储空间存储数据（两个地址）
虽然存储的内容是一样的，那么也是两个存储空间，两个地址
复杂数据类型之间就是地址的比较，所以 obj 和 obj2 两个变量的地址不一样
所以得到的就是 false

数组

什么是数组？字面理解就是数字的组合其实不太准确，准确的来说数组是一个数据的集合也就是把一些数据放在一个盒子里面，按照顺序排好

[1, 2, 3, 'hello', true, false]
//这个东西就是一个数组，存储着一些数据的集合

数据类型分类：

number/string/boolean/undefined/null/object/function / array` / …
数组也是数据类型中的一种
简单的把所有数据类型分为两个大类基本数据类型和复杂数据类型

基本数据类型： number / string / boolean / undefined / null
复杂数据类型： object / function / array / …

创建一个数组：数组就是一个 [] 在 [] 里面存储着各种各样的数据，按照顺序依次排好

字面量创建一个数组：
直接使用 [] 的方式创建一个数组

// 创建一个空数组
var arr1 = []

// 创建一个有内容的数组
var arr2 = [1, 2, 3]

内置构造函数创建数组：
使用 js 的内置构造函数 Array 创建一个数组

// 创建一个空数组
var arr1 = new Array()

// 创建一个长度为 10 的数组
var arr2 = new Array(10)

// 创建一个有内容的数组
var arr3 = new Array(1, 2, 3)

数组的 length：
length: 长度的意思
length 就是表示数组的长度，数组里面有多少个成员，length 就是多少

// 创建一个数组
var arr = [1, 2, 3]

console.log(arr.length) // 3

数组的索引：
索引，也叫做下标，是指一个数据在数组里面排在第几个的位置
注意： 在所有的语言里面，索引都是从 0 开始的
在 js 里面也一样，数组的索引从 0 开始

// 创建一个数组
var arr = ['hello', 'world']

上面这个数组中，第 0 个 数据就是字符串 hello，第 1 个 数据就是字符串 world
想获取数组中的第几个就使用 数组[索引] 来获取

var arr = ['hello', 'world']

console.log(arr[0]) // hello
console.log(arr[1]) // world

数组的排序：
排序，就是把一个乱序的数组，通过处理，让他变成一个有序的数组

冒泡排序：

先遍历数组，让挨着的两个进行比较，如果前一个比后一个大，那么就把两个换个位置
数组遍历一遍以后，那么最后一个数字就是最大的那个了
然后进行第二遍的遍历，还是按照之前的规则，第二大的数字就会跑到倒数第二的位置
以此类推，最后就会按照顺序把数组排好了

首先准备一个乱序的数组

var arr = [3, 1, 5, 6, 4, 9, 7, 2, 8]

接下来就会用代码让数组排序

先不着急循环，先来看数组里面内容换个位置

// 假定现在要让数组中的第 0 项和第 1 项换个位置
// 需要借助第三个变量
var tmp = arr[0]
arr[0] = arr[1]
arr[1] = tmp

第一次遍历数组，把最大的放到最后面去

for (var i = 0; i < arr.length; i++) {
  // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
  if (arr[i] > arr[i + 1]) {
    var tmp = arr[i]
    arr[i] = arr[i + 1]
    arr[i + 1] = tmp
  }
}

// 遍历完毕以后，数组就会变成 [3, 1, 5, 6, 4, 7, 2, 8, 9]

第一次结束以后，数组中的最后一个，就会是最大的那个数字

然后把上面的这段代码执行多次。数组有多少项就执行多少次

按照数组的长度来遍历多少次

for (var j = 0; j < arr.length; j++) {
  for (var i = 0; i < arr.length; i++) {
    // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
    if (arr[i] > arr[i + 1]) {
      var tmp = arr[i]
      arr[i] = arr[i + 1]
      arr[i + 1] = tmp
    }
  }
}

// 结束以后，数组就排序好了

优化：

想象一个问题，假设数组长度是 9，第八次排完以后
后面八个数字已经按照顺序排列好了，剩下的那个最小的一定是在最前面
那么第九次就已经没有意义了，因为最小的已经在最前面了，不会再有任何换位置出现了
那么第九次遍历就不需要了，所以可以减少一次

for (var j = 0; j < arr.length - 1; j++) {
  for (var i = 0; i < arr.length; i++) {
    // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
    if (arr[i] > arr[i + 1]) {
      var tmp = arr[i]
      arr[i] = arr[i + 1]
      arr[i + 1] = tmp
    }
  }
}

第二个问题，第一次的时候，已经把最大的数字放在最后面了
那么第二次的时候，其实倒数第二个和最后一个就不用比了
因为要把倒数第二大的放在倒数第二的位置，即使比较了，也不会换位置
第三次就要倒数第三个数字就不用再和后两个比较了
以此类推，那么其实每次遍历的时候，就遍历 当前次数 - 1 次

for (var j = 0; j < arr.length - 1; j++) {
  for (var i = 0; i < arr.length - 1 - j; i++) {
    // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
    if (arr[i] > arr[i + 1]) {
      var tmp = arr[i]
      arr[i] = arr[i + 1]
      arr[i + 1] = tmp
    }
  }
}

至此，一个冒泡排序就完成了

选择排序：

先假定数组中的第 0 个就是最小的数字的索引
然后遍历数组，只要有一个数字小，那么就替换之前记录的索引
知道数组遍历结束后，就能找到最小的那个索引，然后让最小的索引换到第 0 个的位置
再来第二趟遍历，假定第 1 个是最小的数字的索引
在遍历一次数组，找到小的那个数字的索引
遍历结束后换个位置
依次类推，也可以把数组排序好

准备一个数组

var arr = [3, 1, 5, 6, 4, 9, 7, 2, 8]

假定数组中的第 0 个是最小数字的索引

var minIndex = 0

遍历数组，判断，只要数字小，那么就替换掉原先记录的索引

var minIndex = 0
for (var i = 0; i < arr.length; i++) {
  if (arr[i] < arr[minIndex]) {
    minIndex = i
  }
}

// 遍历结束后找到最小的索引
// 让第 minIndex 个和第 0 个交换
var tmp = arr[minIndex]
arr[minIndex] = arr[0]
arr[0] = tmp

按照数组的长度重复执行上面的代码

for (var j = 0; j < arr.length; j++) {
  // 因为第一遍的时候假定第 0 个，第二遍的时候假定第 1 个
  // 所以要假定第 j 个就行
  var minIndex = j
  
  // 因为之前已经把最小的放在最前面了，后面的循环就不需要判断前面的了
  // 直接从 j + 1 开始
  for (var i = j + 1; i < arr.length; i++) {
    if (arr[i] < arr[minIndex]) {
      minIndex = i
    }
  }

  // 遍历结束后找到最小的索引
  // 第一堂的时候是和第 0 个交换，第二趟的时候是和第 1 个交换
  // 直接和第 j 个交换就行
  var tmp = arr[minIndex]
  arr[minIndex] = arr[j]
  arr[j] = tmp
}

优化：和之前一样，倒数第二次排序完毕以后，就已经排好了，最后一次没有必要了

for (var j = 0; j < arr.length - 1; j++) {
  var minIndex = j
  
  for (var i = j + 1; i < arr.length; i++) {
    if (arr[i] < arr[minIndex]) {
      minIndex = i
    }
  }

  var tmp = arr[minIndex]
  arr[minIndex] = arr[j]
  arr[j] = tmp
}

在交换变量之前，可以判断一下，如果遍历后得到的索引和当前的索引一直

那么就证明当前这个就是目前最小的，那么就没有必要交换

要判断，最小作引和当前作引不一样的时候，才交换

for (var j = 0; j < arr.length - 1; j++) {
  var minIndex = j
  
  for (var i = j + 1; i < arr.length; i++) {
    if (arr[i] < arr[minIndex]) {
      minIndex = i
    }
  }

  if (minIndex !== j) {
    var tmp = arr[minIndex]
    arr[minIndex] = arr[j]
    arr[j] = tmp   
  }
}