前端杂学录（二）

已于 2024-09-27 15:27:37 修改
阅读量546 收藏 13
点赞数 14
分类专栏： 前端 文章标签： html5 javascript css 前端
于 2024-09-27 12:57:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcm2577/article/details/142589071
版权

1.字符串和数字的转换

字符串转数组

  1. 使用 split() 方法

    • 根据指定的分隔符将字符串分割成数组
    • const str = "Hello, World!";
const arr = str.split(", "); // ["Hello", "World!"]

  2. 使用扩展运算符 (...)

    • 将字符串转换为字符数组
    • const str = "Hello";
const arr = [...str]; // ["H", "e", "l", "l", "o"]

  3. 使用 Array.from() 方法

    • 创建一个数组实例，包含字符串中的每个字符
    • const str = "Hello";
const arr = Array.from(str); // ["H", "e", "l", "l", "o"]

  4. 使用 Object.prototype.slice.call()

    • 通过将字符串视为类数组对象进行转换
    • const str = "Hello";
const arr = Array.prototype.slice.call(str); // ["H", "e", "l", "l", "o"]

字符串转数字

  1. 使用 Number() 函数

    • 将字符串转换为数字
    • const str = "123.45";
const num = Number(str); // 123.45

  2. 使用 parseInt()

    • 将字符串解析为整数
    • const str = "123.45";
const num = parseInt(str); // 123

  3. 使用 parseFloat()

    • 将字符串解析为浮点数
    • const str = "123.45";
const num = parseFloat(str); // 123.45

  4. 使用一元加号 (+)

    • 通过在字符串前加上 + 来快速转换为数字
    • const str = "123.45";
const num = +str; // 123.45

  5. 使用 Math.floor(), Math.ceil(), Math.round()

    • 这些方法可以将字符串转换为数字，并根据需要进行取整
    • const str = "123.45";
const num = Math.floor(str); // 123

总结

  • 字符串转数组：常用方法有 split()、扩展运算符、Array.from() 等。
  • 字符串转数字：常用方法有 Number()、parseInt()、parseFloat() 和一元加号等。

 2.至少说出一种开源项目(如Node)中应用原型继承的案例

示例：HTTP 服务器

Node.js 的 http.Server 和 http.IncomingMessage 是通过原型继承实现的。以下是一个简单的例子：

const http = require('http');

// 创建一个新的 HTTP 服务器
const server = http.createServer((req, res) => {
    // req 是 http.IncomingMessage 的实例
    console.log(req instanceof http.IncomingMessage); // 输出: true
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
});

// 服务器监听请求
server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

原型继承的实现

在这个例子中：

  • http.Server 通过原型链继承了 EventEmitter，这使得服务器实例能够使用事件处理。
  • http.IncomingMessage 也使用原型继承，以便在请求中添加额外的功能，例如请求头、请求方法等。

Express.js

Express.js 是一个流行的 Node.js Web 应用框架，它利用原型继承来实现中间件和路由处理。

示例

在 Express 中，Router 是通过原型继承自 EventEmitter 的。它允许你定义中间件和路由处理器：

const express = require('express');
const app = express();
const router = express.Router();

router.get('/', (req, res) => {
    res.send('Hello from Router');
});

app.use('/router', router);
app.listen(3000, () => {
    console.log('Server running at http://localhost:3000/router');
});

2. Mongoose

Mongoose 是一个 MongoDB 的对象建模工具，它使用原型继承来定义模型和文档。

示例

在 Mongoose 中，模型是通过构造函数和原型继承来创建的。例如，定义一个模型并创建实例：

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    name: String,
    age: Number,
});

const User = mongoose.model('User', userSchema);

const userInstance = new User({ name: 'Alice', age: 30 });
console.log(userInstance instanceof User); // 输出: true

3. Socket.io

Socket.io 是一个用于实时通信的库，使用原型继承来实现客户端和服务器端的通信逻辑。

示例

在 Socket.io 中，Socket 实例可以通过原型继承获取事件处理功能：

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
    console.log('New client connected');
    
    socket.on('message', (msg) => {
        console.log('Message received: ', msg);
    });
});

在这个例子中，socket 是 Socket 类的实例，通过原型继承获取了处理事件的能力。

3.IIFE

IIFE（Immediately Invoked Function Expression，立即调用函数表达式）是一种在 JavaScript 中创建局部作用域的方法。它允许你定义一个函数并立即执行它，从而避免变量污染全局作用域。

语法

IIFE 的基本语法如下：

(function() {
    // 这里是局部作用域
    console.log('IIFE executed!');
})();

或使用箭头函数：

(() => {
    console.log('IIFE executed with arrow function!');
})();

特点

  1. 局部作用域：IIFE 内部的变量不会泄露到外部作用域中，避免全局命名冲突。
  2. 立即执行：定义后立即执行，适合初始化任务或封装代码。

用法示例

1. 创建私有变量
const result = (function() {
    const privateVar = 'I am private';
    return function() {
        console.log(privateVar);
    };
})();

result(); // 输出: I am private
// console.log(privateVar); // 会报错: privateVar is not defined
2. 模块模式

IIFE 常用于模块化编程，封装相关代码：

const MyModule = (function() {
    let privateVar = 'I am private';

    return {
        getPrivateVar: function() {
            return privateVar;
        }
    };
})();

console.log(MyModule.getPrivateVar()); // 输出: I am private

总结

IIFE 是一种有效的 JavaScript 编程模式，能够创建局部作用域，避免全局变量污染，并且在需要立即执行代码的场景中非常实用。随着 ES6 的模块化功能引入，IIFE 的使用逐渐减少，但在某些场合依然非常有用

4.eval()

在 JavaScript 中，eval()函数可以将一个 JSON 格式的字符串转换为对象，但这种方法存在安全风险，不建议使用。

let jsonStr = '{"name":"John","age":30}';
let obj = eval('(' + jsonStr + ')');
console.log(obj.name); // John
console.log(obj.age); // 30

不推荐使用eval()的原因主要有以下几点：

安全风险：

  • 如果处理的字符串来自不可信的源，攻击者可能会注入恶意代码，执行后可能会导致严重的安全问题，如窃取用户数据、篡改页面内容等。

性能问题：

  • 通常，eval()的执行速度比其他安全的解析方法要慢。

更好的替代方法是使用JSON.parse()函数来将 JSON 格式的字符串转换为对象：

let jsonStr = '{"name":"John","age":30}';
let obj = JSON.parse(jsonStr);
console.log(obj.name); // John
console.log(obj.age); // 30

5.描述new一个对象的详细过程，手动实现一个new操作符

new 操作符的工作原理

  1. 创建新对象：创建一个空对象（{}）。
  2. 设置原型：将新对象的 __proto__ 属性指向构造函数的 prototype。
  3. 执行构造函数：调用构造函数，并将新对象作为 this 上下文。
  4. 返回对象：如果构造函数返回的是一个对象，则返回该对象；否则返回新创建的对象。

手动实现 new 操作符

我们可以通过一个函数来模拟 new 操作符的行为：

function myNew(constructor, ...args) {
    // 1. 创建一个新对象
    const obj = {};

    // 2. 设置原型
    Object.setPrototypeOf(obj, constructor.prototype);

    // 3. 执行构造函数，绑定 this 为新对象
    const result = constructor.apply(obj, args);

    // 4. 返回新对象
    return (result && typeof result === 'object') ? result : obj;
}

function Person(name) {
    this.name = name;
}

const alice = myNew(Person, 'Alice');
console.log(alice.name); // 输出: Alice
console.log(alice instanceof Person); // 输出: true

6.理解es6 class构造以及继承的底层实现原理

        1. class 的构造

  • 构造函数：在类中定义的构造函数（constructor）在创建实例时自动调用。构造函数可以接收参数并初始化对象的属性。 
    class Person {
    constructor(name) {
        this.name = name;
    }
}

const alice = new Person('Alice');
console.log(alice.name); // 输出: Alice

    2. 继承

  • 继承：使用 extends 关键字可以实现类的继承，子类可以继承父类的属性和方法。
class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex');
dog.speak(); // 输出: Rex barks.

3. 底层实现原理

在底层，ES6 class 实际上是基于原型链实现的，以下是其工作原理：

a. 类的声明和构造

当你声明一个类时，JavaScript 会创建一个构造函数，类名就是构造函数的名称。

console.log(Person === Person.prototype.constructor); // 输出: true
b. 原型链

使用 extends 关键字时，子类的原型会自动设置为父类的实例，确保继承关系。

console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出: true
c. 调用父类构造函数

在子类的构造函数中，必须调用 super()，这会调用父类的构造函数并初始化继承的属性。

class Dog extends Animal {
    constructor(name) {
        super(name); // 调用父类构造函数
    }
}

7.insertBefore() 

insertBefore() 是 JavaScript 中用于操作 DOM 的方法，属于 Node 接口。它用于在指定的子节点之前插入一个新的子节点。

parentNode.insertBefore(newNode, referenceNode);
  • parentNode：要插入新节点的父节点。
  • newNode：要插入的新节点。
  • referenceNode：在其之前插入新节点的现有子节点。如果为 null，则新节点将被添加到子节点列表的末尾。

    返回值

  • 返回插入的新节点。

真的不想学习啦
关注
专栏目录
转行做前端的学习心得，深情交流
qq_43623970的博客
07-02 998
一、Why choose front-end 2015.07毕业后，进了一家游戏公司做运营策划，写过营销方案、做过内容编辑、知道广告投放和换量，还得兼职产品经理画原型。 每天9.30-23.00以后，周末经常加班，像无头苍蝇一样碰撞一年后，我没有任何成就感，我开始思考自己每天做的是什么，将来会做什么，做的这份工作是自己喜欢的吗？在这个领域上将来会有所成就吗？ 1、重复而繁杂 => No，我喜欢专心研磨一个东西，直到做好它 2、各种会议和无数遍的方案修改 => No，我做事的时候不喜欢被打扰，但这
杂学之(前端localStorage).docx
04-22
在HTML5中，`localStorage`是一项重要的前端存储技术，它为开发者提供了更高效的数据存储解决方案，弥补了传统Cookie存储容量的不足。Cookie每个条目的存储限制为4KB，而`localStorage`通常支持5MB的数据存储，尽管...
前端杂学录(一)
最新发布
wcm2577的博客
09-27 338
原始类型：存储在栈内存中，值是直接存储的，数据大小固定，访问速度快。引用类型：存储在堆内存中，变量保存的是对数据的引用，数据大小动态变化，适合复杂的数据结构。垃圾回收：JavaScript 自动管理内存，使用垃圾回收器清理不再使用的对象，以防止内存泄漏。改变原数组的方法push()pop()shift()unshift()splice()sort()reverse()。不改变原数组的方法map()filter()reduce()slice()concat()find()some()every()。
前端杂学1
小蜗牛的博客
02-27 214
1.MVVM是什么将MVC中的V变为了MVVM，实现了双向绑定。其中VM就是vue的作用，这样页面的动态化可以通过vue来操作，而不是页面直接与后端操作，实现了前后端的分离2.为什么vue采用异步渲染？调用1次nexttick这样可以理解为渲染节流:异步方法，返回promise 是微任务4.5.vue生命周期6.null和undefied的区别8.箭头函数和普通函数区别不用return：没有花括号 或者只有一句9.json的理解。
前端笔记67——键盘事件
裕博的博客
01-28 443
前言 在上一篇博客中有分享到鼠标有关的事件。PC端操作中有鼠标当然就少不了键盘有关的事件，下面分享JavaScript关于键盘的事件操作。 键盘事件 简单理解，和键盘有关的事件。 事件名称和触发场景 事件名称 事件的触发场景 onkeydown 当键盘按下的时候触发 onkeyup 当键盘抬起的时候触发 举个例子 ...
80后老阿姨转行做前端的学习心得，深情交流！
BOM485480的博客
07-03 2010
一、Why choose front-end 2012.07毕业后，进了一家游戏公司做运营策划，写过营销方案、做过内容编辑、知道广告投放和换量，还得兼职产品经理画原型。 每天9.30-23.00以后，周末经常加班，像无头苍蝇一样碰撞一年后，我没有任何成就感，我开始思考自己每天做的是什么，将来会做什么，做的这份工作是自己喜欢的吗？在这个领域上将来会有所成就吗？ 1、重复而繁杂 => No，我喜欢专心研磨一个东西，直到做好它 2、各种会议和无数遍的方案修改 => No，我做事的时候不喜欢被打扰，但这
前端笔记71——利用键盘码来控制div移动
裕博的博客
01-29 245
前言 在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现div的移动呢？下面就分享一个Demo。 利用键盘码来控制div移动源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style ty
vue，Cli与vuex与router的使用
yy020604的博客
11-15 351
文章主要说了一下vue的三大组成
技术人生——关于职业发展的思考
裕博的博客
07-31 212
我从事Android开发工作快两年了，从一个Android小菜鸟到现在开发商业化项目游刃有余，从一个什么都不会到现在思考功能的最佳实现方法，从一个人独立开发到现在带着小伙伴们一起搞Android开发；我的博客见证了我的成长，我从0篇博客到现在加上这篇博客在CSDN有330篇原创博客了，其中记载了我的学习笔记，开发中的踩坑的过程，一路走来真的学习到很多东西。或者今天是我职业生涯中的一个转折吧！我决...
只有突破程序员思维，才不会沦为码农
qiancheng9998的博客
04-29 544
过去我曾一直认为程序员是依靠他们的技术在编程，也是因为技术使得程序员的水平有高低之分，但随着我写代码的时间越来越长，也接触到更多的程序员，我渐渐发现程序员们其实是依靠他们所特有的程序员思维在进行编程的，而他们中的佼佼者正是那些有着更高思维成熟度的优秀程序员们。 　　什么是程序员思维 那么，什么是程序员思维呢？我曾读到过一些文章，试图给它下一个明确的定义，比如，具备抽象和逻辑思维的能力，拥有面向对...
图解杂学Linux
09-27
《图解杂学Linux》是一本面向初学者和爱好者，由伊藤幸夫编著的图书，旨在通过直观的图表和简洁的语言，帮助读者轻松掌握Linux操作系统的基础知识和实用技能。这本书涵盖了Linux系统的核心概念、安装与配置、常用...
杂学电荷泵倍压输出电路
09-26
电荷泵倍压输出电路是一种利用电容储能和开关元件实现电压提升的电路技术，尤其在需要小电流高电压的应用中十分常见。电荷泵的基本原理是通过控制开关元件（通常为MOSFET或BJT）的状态，使得电容在不同时间连接到...
杂学热插拔及电源输入EOS分析
09-26
在电子硬件设计中，热插拔以及电源输入的电气过应力（EOS）分析是至关重要的环节，因为这直接影响到功率集成电路（Power IC）的稳定性和寿命。本文将深入探讨这些问题，并提供改善策略。 首先，电源芯片的工作电压...
【HTML5】html5开篇基础（2）
Easonmax的博客
09-23 998
文本或图像等其他形式
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4370
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 309
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 788
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 524
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
python的numpy库杂学
08-30
嗨！很高兴回答你关于Python的NumPy库的问题。NumPy是一个强大的科学计算库，提供了高性能的数组对象和各种功能丰富的数学函数。 首先，你可以使用以下命令安装NumPy库： ```python pip install numpy ``` 一旦安装完成，你可以在Python脚本中导入NumPy库： ```python import numpy as np ``` 现在让我们来看一些NumPy的常用功能。 1. 创建NumPy数组： - 使用`np.array()`函数从Python列表或元组创建数组。 - 使用`np.zeros()`创建一个元素全为0的数组。 - 使用`np.ones()`创建一个元素全为1的数组。 - 使用`np.random`模块生成随机数组。 2. 数组操作： - 通过索引访问和修改数组的元素。 - 使用切片操作提取子数组。 - 使用数组的形状、大小和维度等属性。 3. 数学函数： - NumPy提供了丰富的数学函数，例如平方根(`np.sqrt()`)、指数函数(`np.exp()`)、对数函数(`np.log()`)等。 - 通过在数组上应用这些函数，可以进行元素级别的数学操作。 4. 数组运算： - NumPy支持基本的数组运算，如加法、减法、乘法和除法。 - 这些运算可以在两个数组之间进行，也可以在数组和标量之间进行。 5. 线性代数： - NumPy提供了许多线性代数操作的函数，如矩阵乘法(`np.dot()`)、矩阵求逆(`np.linalg.inv()`)、特征值和特征向量(`np.linalg.eig()`)等。 这只是NumPy库的一小部分功能，但对于进行科学计算和数据分析来说非常重要。你可以参考NumPy官方文档以了解更多详细信息：https://numpy.org/doc/ 希望这些信息能帮助你开始学习NumPy库！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值