学习JavaScript数据结构与算法(一)

2023-10-26 17:26:34 浏览数 (1)

可能很多人工作一段时间，觉得js的知识点掌握的差不多了，应用起来得心应手，但是js的知识高深莫测，所以我打算再系统的学一遍《学习JavaScript数据结构与算法》这本书（主要学习最常用的数据结构和算法），并将学习成果总结如下：

先来点开胃菜

1. js简介

1.1 js基础

1.1.1 数据类型

js的数据类型是我们的常用的10个 基本数据类型（Number,Boolean,String,null,undefined,symbol(ES6新增),BigInt） 引用类型 （Object,Array,Function）

1.1.2 运算符

运算符不难理解，重点注意一下逻辑运算符：&&与（一假则假），||或（一真则真），|非（取反）

短路运算（逻辑中断） 什么是逻辑中断，就是当有多个表达式（值）时，左边表达式的值可以确定结果时，就不再继续运算右边表达式的值了。 （1）逻辑与：表达式1 && 表达式2 如果1真，则返回2，如果1假，则返回1 （2）逻辑或：表达式1 || 表达式2 如果1真，则返回1，如果1假，则返回2

代码语言：javascript复制
举个栗子：
var num = 0
console.log(123 || num  ) //输出123
console.log(num) //输出0

2.ECMAScript和TypeScript概述

ES都很熟悉，不做过多介绍

2.1 ECMAScript介绍

2.1.1模版字面量

模版字面量用一对 ` 包裹。要插入变量的值，只需要把变量放在${}里就可以了，

代码语言：javascript复制
举个栗子
const person = {
    name:"zhouzhouya"
}
console.log(`我是${person.name}`)

2.1.2箭头函数

代码语言：javascript复制
举个栗子
const hello = () => console.log("hello")
hello()

2.1.3函数参数的默认值

代码语言：javascript复制
举个栗子
 function sum(x = 1, y = 2, z = 3) {
    return x   y   z;
  }
 console.log(sum(4, 2)); //输出9

JavaScript函数有个内置的对象，叫做arguments对象。它是一个数组，包含函数被调用时传入的参数。即使不知道参数的名称，我们也可以动态获取并使用这些参数。

2.1.4声明展开和剩余参数

展开运算符...把数组转为参数 在函数中，展开运算符（...）可以代替arguments，当做剩余参数使用

代码语言：javascript复制
举栗
function sum(x, y, ...a) {
    return (x   y) * a.length;
  }
 console.log(sum(1, 2, "hello", "999", "3")); //输出9

2.1.5增强的对象属性

主要介绍的数组解构，一次初始化多个变量

代码语言：javascript复制
栗子
let [x,y] = ['a','b']

2.1.6使用类进行面向对象编程

代码语言：javascript复制
栗子
声明一个有 constructor 函数的类，
class Book {
    constructor(title, pages, isbn) {
      this.title = title;
      this.pages = pages;
      this.isbn = isbn;
    }
    printIsbn() {
      console.log(this.isbn);
    }
  }

2.1.7模块

目前不同的js环境，所采用的模块化方案不同 现代前端开发框架vue，react，angular，采用es6规范

代码语言：javascript复制
import vue from "vue"
export const data = []
export default function aaa()

nodejs环境采用commonJs规范

代码语言：javascript复制
1.js
function aaa(){}
modules.export = {aaa}

2.js
const {aaa} = require('./1.js')
aaa()

传统浏览器环境 需要用script标签引入require.js库，然后define函数定义模块，require函数引入模块

2.2TypeScript

TypeScript是一个开源的、渐进式包含类型的JavaScript超集，会被编译成简单的js代码 安装ts

代码语言：javascript复制
npm install -g typescript

2.2.1类型判断

代码语言：javascript复制
let age:number = 30
ts允许我们给变量设置一个类型，但是这样写法太繁琐，ts会根据变量赋值自动给变量设置类型。

let age = 20
ts会自动判断age是一个数

声明变量但是没给赋值时建议为其设置一个类型
let name:string

如果没有为变量设置类型，它的类型会自动设置为any，可以接收任何值

2.2.2接口

ts的接口有两种接口的概念： 第一种是给变量设置类型,这种接口把变量看成实际的东西，它是对一个对象必须包含的属性和方法的描述。

代码语言：javascript复制
interface Person {
    name:string,
    age:number
}

第二种ts接口的概念和面向对象编程有关，可以定义实现类和接口的行为，

代码语言：javascript复制
interface Comparable{
  comporeTo(b) :number
}
class MyObject implements Comparable {
  age:number;
  comporeTo(b): number {
    if(this.age === b.age) {
      return 0
    }
    return this.age > b.age ? 1 : -1
  } 
}
Comparable接口告诉MyObject类，它需要实现comporeTo，且该方法接收一个参数。在该方法内部，实现想要的逻辑。该接口
的行为在js中不存在，在其他方面很有用处（如开发排序算法）。

3，数组

3.1创建和初始化数组

3.1.1创建数组

使用new关键字,初始化一个数组

代码语言：javascript复制
let day = new Array()

使用[]初始化数组（常用）

代码语言：javascript复制
let day = []

3.1.2访问元素和迭代数组

看一个栗子，求斐波那契数列的前 20 个数。已知斐波那契数列中的前两项是1， 从第三项开始，每一项都等于前两项之和。如何实现此功能呢？ 实现思路：

  1. 声明并创建一个数组
  2. 把斐波那契数列中的前两个数分别赋给数组的第二和第三个位置。 （在 JavaScript 中，数组第一位的索引始终是 0。因为斐波那契数列中不存在 0，所以这里直接略过，从第二位开始分别保存斐波那契数列中对应位置的元素。）
  3. 得到斐波那契数列中3到20的位置上的数，
代码语言：javascript复制
function fb(n) {
   var res = [1, 1];
   if (n == 1 || n == 2) {
      return 1;
    }
    for (var i = 2; i < n; i  ) {
      res[i] = res[i - 1]   res[i - 2];
    }
      return res[n - 1];
   }
   console.log(fb(20)) //输出6765

3.2添加数组

3.2.1在数组末尾插入元素

通过数组自带的push方法就可在数组最后插入元素

3.2.2在数组开头插入元素

通过数组自带的unshift方法就可在数组开头插入元素 另外一种方法

代码语言：javascript复制
我们希望在数组中插入一个新元素（数-1），不像之前那样插入到最后，而是放到数组的开头。为了实现这个需求，首先要
腾出数组里第一个元素的位置，把所有的元素向右移动一位。我们可以循环数组中的元素，从最后一位（长度值就是数组的末尾位置）
开始，将对应的前一个元素（i-1）的值赋给它（i），依次处理，最后把我们想要的值赋给第一个位置（索引 0）上。我们可以将这
段逻辑写成一个函数，甚至将该方法直接添加在 Array 的原型上，使所有数组的实例都可以访问到该方法。
var numbers = [0,1,2,3,4]
for(let i=numbers.length;i>=0;i--){
   numbers[i] = numbers[i-1]
   console.log('numbers[i]: ', numbers[i]);
}
numbers[0] = value

3.3删除元素

3.3.1从数组末尾删除元素

数组的pop方法

3.3.2从数组开头删除元素

数组的shift方法

3.3.2在任意位置添加或删除元素

通过splice函数

代码语言：javascript复制
array.splice(index,howmany,item1,.....,itemX)
第一个参数必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
第二个参数可选。规定应该删除多少元素。必须是数字，但可以是 "0"。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
第三个参数可选。要添加到数组的新元素

3.4二维和多维数组

3.4.1迭代二维数组

一个二维数组的输出，需要迭代所有的行和列，使用嵌套的for循环处理，i为行，j为列。

代码语言：javascript复制
function aaa(val) {
  for (let i = 0; i < val.length; i  ) {
   for (let j = 0; j < val[i].length; j  ) {
       console.log(val[i])
       console.log(val[i][j]);
    }
  }
}
aaa([
 [1, 2, 4, 6],
 [2, 4, 7, 8],
 [8, 9, 10, 11],
 [9, 12, 13, 15],
]);

3.5js数组方法参考

参考文章 juejin.cn/post/712413… 里面的6

代码语言：javascript复制
由于书上内容较多，分大概4-5篇文章进行总结
如有错误，敬请指正。
javascript 变量 函数 数据结构与算法 数组

0 人点赞