标签 Javascript 下的文章

2024-08-27

JavaScript是一种广泛使用的编程语言，其功能和应用范围非常广泛。然而，对于任何编程语言，都有其自身的特点和需要注意的问题。下面我将列举并详细解释JavaScript的九大主题，包括其特点、应用场景以及注意事项。

函数（Function）
JavaScript函数是一种封装了特定功能的代码块，可以在程序中任何需要的地方调用。函数可以有参数，并可以返回一个值。
对象（Object）
JavaScript对象是一种复杂的数据类型，它可以储存多个键值对，每个键值对可以是不同的数据类型。对象可以用来创建自定义对象类型，并提供了封装数据和方法的能力。
作用域（Scope）
JavaScript作用域决定了变量的可见性和生命周期。JavaScript有两种作用域：全局作用域和局部作用域。局部作用域一般是在函数内部定义的。
闭包（Closure）
闭包是一个可以捕获其周围作用域中的变量的函数。闭包可以捕获和存储其外部环境中的数据，即使外部函数已经返回。
原型链（Prototype Chain）
JavaScript对象有一个特殊的内部属性，称为原型。当访问对象的属性时，如果没有在该对象上找到，就会检查其原型。这种链式结构称为原型链。
异步编程（Asynchronous Programming）
JavaScript是单线程的，但它支持异步编程，这通过回调函数和事件循环实现。异步代码不会阻塞主线程，可以在某个任务完成时执行回调。
DOM操作（DOM Manipulation）
JavaScript可以通过DOM API来操作HTML文档。这包括查询、修改、添加和删除HTML元素和属性。
BOM操作（BOM Manipulation）
JavaScript可以通过BOM API操作浏览器窗口。这包括控制浏览器窗口的大小和位置，管理浏览器的历史记录等。
错误处理（Error Handling）
JavaScript提供了try-catch语句来处理代码中可能出现的错误。开发者可以使用throw语句手动抛出异常，并用catch块来捕获它们。

以上是JavaScript的九大主题，每个主题都有其特点和应用场景，开发者需要根据实际情况选择合适的方法和技术。

2024-08-27




// 假设我们有一个对象，我们需要遍历它的所有属性
const objectToIterate = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};
 
// 使用for...in遍历对象的所有可枚举属性(包括原型链中的属性)
for (const prop in objectToIterate) {
  if (objectToIterate.hasOwnProperty(prop)) { // 确保属性是对象自身的而不是继承的
    console.log(`${prop}: ${objectToIterate[prop]}`);
  }
}
 
// 使用Object.keys()获取对象键的数组，然后使用forEach遍历
Object.keys(objectToIterate).forEach(key => {
  console.log(`${key}: ${objectToIterate[key]}`);
});
 
// 使用Object.entries()获取一个键值对数组，然后使用for...of遍历
for (const [key, value] of Object.entries(objectToIterate)) {
  console.log(`${key}: ${value}`);
}
 
// 使用for...of结合Object.values()遍历对象的所有值
Object.values(objectToIterate).forEach(value => {
  console.log(value);
});

以上代码展示了四种遍历对象属性的方法，分别是使用for...in、Object.keys()的forEach、Object.entries()的for...of循环以及结合Object.values()的forEach。每种方法都有其适用场景，开发者可以根据具体需求选择合适的遍历方式。

如何在 JavaScript 中判断字符串是否为空？

2024-08-27

在JavaScript中，可以使用以下方法来判断一个字符串是否为空：

使用if语句和length属性：




let str = " ";
if (str.length === 0) {
    console.log("字符串为空");
} else {
    console.log("字符串不为空");
}

使用==或===来判断字符串是否为一个空字符串：




let str = "";
if (str == "") { // 或使用 === 来进行严格比较
    console.log("字符串为空");
} else {
    console.log("字符串不为空");
}

使用!运算符来检查字符串是否为空或者undefined：




let str;
if (!str) {
    console.log("字符串为空或未定义");
} else {
    console.log("字符串不为空");
}

请注意，上述第三种方法会认为未定义(undefined)的变量以及空字符串""都将被视为空。如果你只想判断空字符串，请使用前两种方法。

2024-08-27

在JavaScript中，new Date() 是用来创建一个新的 Date 对象的构造函数。Date 对象可以用来处理日期和时间。

以下是一些使用 new Date() 的示例：

创建一个表示当前日期和时间的 Date 对象：




var currentDate = new Date();
console.log(currentDate); // 输出：当前的日期和时间

创建一个指定日期和时间的 Date 对象：




var specificDate = new Date('December 17, 1995 03:24:00');
console.log(specificDate); // 输出：指定的日期和时间：1995年12月17日 03:24:00

创建一个指定时间戳的 Date 对象：




var timestamp = 1609459200000; // 对应于2021年1月1日 UTC 的时间戳
var dateFromTimestamp = new Date(timestamp);
console.log(dateFromTimestamp); // 输出：对应于时间戳的日期：2021年1月1日

获取 Date 对象的日期和时间组成部分：




var dateComponents = new Date();
console.log(dateComponents.getFullYear()); // 输出：当前年份
console.log(dateComponents.getMonth()); // 输出：当前月份（0-11）
console.log(dateComponents.getDate()); // 输出：当前日期（1-31）
console.log(dateComponents.getHours()); // 输出：当前小时数（0-23）
console.log(dateComponents.getMinutes()); // 输出：当前分钟数（0-59）
console.log(dateComponents.getSeconds()); // 输出：当前秒数（0-59）

设置 Date 对象的日期和时间：




var date = new Date();
date.setFullYear(2021); // 设置年份
date.setMonth(0); // 设置月份（0-11）
date.setDate(1); // 设置日期（1-31）
date.setHours(0); // 设置小时数（0-23）
date.setMinutes(0); // 设置分钟数（0-59）
date.setSeconds(0); // 设置秒数（0-59）
console.log(date); // 输出：设置后的日期和时间

以上代码展示了如何使用 new Date() 来创建和操作日期和时间。

【JavaScript】面试手撕柯里化函数

2024-08-27

柯里化是函数式编程中的一个概念，它指的是将接受多个参数的函数转换成一个新函数，该新函数接受一个参数，返回一个接受剩余参数的新函数。

以下是一个简单的JavaScript柯里化函数的例子：




function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}
 
// 使用 curry 函数的例子
function add(a, b, c) {
  return a + b + c;
}
 
const curriedAdd = curry(add);
const addOne = curriedAdd(1);
const addOneTwo = addOne(2);
 
console.log(addOneTwo(3)); // 输出: 6
console.log(curriedAdd(1, 2, 3)); // 输出: 6

在这个例子中，curry 函数通过闭包封装了参数，当传入的参数个数达到原函数需要的参数个数时，就会调用原函数并返回结果，否则返回一个新的函数，该函数可以接受剩余的参数。这样就实现了函数的柯里化。

JavaScript 混淆与反混淆

2024-08-27

JavaScript 混淆与反混淆通常是指保护或者加密 JavaScript 代码以防止阅读或修改。混淆的目的是使得代码难以阅读和理解，而反混淆是尝试恢复原始代码的过程。

混淆可以通过多种方式实现，例如使用压缩、变量名替换、流程分解等技术。以下是一个简单的 JavaScript 代码混淆示例：




function helloWorld() {
    console.log("Hello, World!");
}
 
// 混淆代码
var _0x23a7=['log','Hello,','World!','console','\x73\x6F\x6D\x8A\x63\x68\x61\x74'];
function _0x23a8(){var _0x23a9=_0x23a7[_0x23a7['\x74\x6F\x6F\x6C\x6F\x61\x64\x53\x74\x72\x69\x6E\x67'](++_0x23a7['\x70\x75\x73\x68\x6F\x6C\x64'])/_0x23a7['\x70\x75\x73\x68\x6F\x6C\x64']()];_0x23a7[_0x23a7['\x70\x75\x73\x68\x6F\x6C\x64']](_0x23a9);}
setTimeout(_0x23a8, 0);

这段代码通过混淆变量名、字符串和函数名，使得原始代码难以阅读和理解。反混淆是一个逆过程，目的是将混淆的代码转换回可读的形式，以便进行阅读、分析或修改。

反混淆可以通过以下方法手动进行，但对于更复杂的混淆代码，可以使用专业的反混淆工具，例如 JShaman、jsbeautifier 等。




// 手动反混淆的示例
var log='\x73\x6F\x6D\x8A\x63\x68\x61\x74'.split('').reverse().join('');
var message=['Hello,','World!'];
function decryptAndLog(){
    console[log](message.join('')
}
setTimeout(decryptAndLog, 0);

这个例子手动还原了原始代码的意图，并且可以运行以打印 "Hello, World!"。然而，对于复杂的混淆代码，这个过程可能会非常繁琐且容易出错，这就是为什么通常使用自动化工具来帮助进行反混淆。

Java对象转JSON的三种方法

2024-08-27

在Java中，将对象转换为JSON可以使用多种库，其中常见的有Jackson和Gson。以下是使用这两种库将Java对象转换为JSON的示例代码：

使用Jackson库：

首先，添加Jackson库的依赖到你的项目中。如果你使用Maven，可以添加以下依赖：




<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.1</version>
</dependency>

然后，使用ObjectMapper类将Java对象转换为JSON字符串：




import com.fasterxml.jackson.databind.ObjectMapper;
 
public class JacksonExample {
    public static void main(String[] args) throws Exception {
        ObjectMapper mapper = new ObjectMapper();
        MyObject obj = new MyObject();
        // 设置对象的属性
        String json = mapper.writeValueAsString(obj);
        System.out.println(json);
    }
}
 
class MyObject {
    // 定义对象属性和对应的getter和setter方法
}

使用Gson库：

添加Gson库的依赖：




<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.9</version>
</dependency>

使用Gson类将Java对象转换为JSON字符串：




import com.google.gson.Gson;
 
public class GsonExample {
    public static void main(String[] args) {
        Gson gson = new Gson();
        MyObject obj = new MyObject();
        // 设置对象的属性
        String json = gson.toJson(obj);
        System.out.println(json);
    }
}
 
class MyObject {
    // 定义对象属性和对应的getter和setter方法
}

这两种方法都能将Java对象转换为JSON字符串。Jackson相对于Gson而言，提供了更多的功能和更细致的控制，包括日期格式化、自定义序列化和反序列化等。而Gson则相对简单且快速。根据项目需求和偏好选择合适的库。

2024-08-27

JavaScript 提供了七种数据类型，其中包括六种基本数据类型（也被称为简单数据类型）和一种复杂数据类型（对象）。

基本数据类型：
- undefined：未定义的变量或值。
- null：空值。
- boolean：布尔值，true 或 false。
- number：数值，包括整数和浮点数。
- string：字符串，字符的序列。
- symbol：独一无二的值，用作对象属性的标识。（ES6 新增）
复杂数据类型：
- object：由一组键值对组成的集合。
特殊类型：
- bigint：大整数，可以安全存储任意大的整数。（ES10 新增）

示例代码：




let undefinedValue = undefined;
let nullValue = null;
let aBoolean = true;
let aNumber = 42;
let aString = "Hello, world!";
let aSymbol = Symbol("unique");
let anObject = { key: "value" };
let aBigInt = 12345678901234567890n;
 
console.log(typeof undefinedValue); // "undefined"
console.log(typeof nullValue);      // "object" ( historical artifact)
console.log(typeof aBoolean);       // "boolean"
console.log(typeof aNumber);        // "number"
console.log(typeof aString);        // "string"
console.log(typeof aSymbol);        // "symbol"
console.log(typeof anObject);       // "object"
console.log(typeof aBigInt);        // "bigint"

注意：在 JavaScript 中，null 被认为是一个对象类型的值，这是历史遗留问题。而在新的 JavaScript 规范中，null 被修正为一个单独的值，并且被认为是 "object" 类型的一个成员。

vite下javascript-obfuscator 代码混淆

2024-08-27

在Vite项目中使用javascript-obfuscator进行代码混淆，你需要先安装javascript-obfuscator库，并在Vite配置文件中设置插件来处理混淆。

安装javascript-obfuscator:




npm install javascript-obfuscator --save-dev

创建一个Vite插件来处理混淆：

创建一个vite-plugin-obfuscator.js文件，并写入以下内容：




import { obfuscate } from 'javascript-obfuscator';
 
export default function obfuscatorPlugin() {
  return {
    transform(code, id) {
      if (/\.js$/.test(id) && !id.includes('node_modules')) {
        const obfuscationResult = obfuscate(code, {
          compact: true,
          controlFlowFlattening: true,
          // 根据需要添加其他混淆选项
        });
        return obfuscationResult.getObfuscatedCode();
      }
    },
  };
}

在Vite配置文件中使用插件：

在你的vite.config.js或vite.config.ts文件中，引入并使用插件：




import obfuscatorPlugin from './vite-plugin-obfuscator';
 
export default {
  plugins: [
    obfuscatorPlugin()
  ],
  // 其他配置...
};

现在，当你运行Vite开发服务器或构建你的项目时，所有非node_modules的JavaScript文件都将通过插件进行混淆处理。确保根据你的项目需求调整javascript-obfuscator的混淆选项。

JavaScript:void(0)：用法及常见问题解析

2024-08-27

在JavaScript中，void操作符被用作一种返回undefined值的方法。void操作符后面通常跟一个要计算的表达式，JavaScript引擎会计算这个表达式，但是不会返回任何值，即返回undefined。

常见用法：

用于防止链接跳转：通常在HTML中，当你点击一个链接时，页面会跳转到该链接指定的地址。如果你不想让链接导航到其他页面，可以使用javascript:void(0)来阻止这种默认行为。




<a href="javascript:void(0);" onclick="doSomething();">Click Me</a>

用于条件函数调用：如果你想根据某些条件来调用一个函数，但不一定要调用，你可以使用void操作符和一个条件运算符。




void (condition ? func1() : func2());

常见问题解析：

关于javascript:前缀：这是一种过时的做法，现代的浏览器不再需要这个前缀。但是，如果你需要兼容老版本的浏览器，可能还会看到这种用法。
关于javascript:后面跟0：这是一种简化的写法，直接返回undefined。
关于javascript:后面不跟任何东西：这样写会导致JavaScript引擎尝试执行undefined，通常会抛出语法错误。
关于void操作符的返回值：void操作符总是返回undefined，不管其后面的表达式的结果是什么。
关于void操作符的副作用：由于void操作符会计算其后的表达式，如果表达式有副作用，那么这些副作用会被触发。因此，使用void操作符时需要小心，确保不会不小心触发不需要的函数调用或者其他副作用。