javaScript【2】

m0_58310590

于 2024-03-28 00:45:00 发布

阅读量774

点赞数 27

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_58310590/article/details/137048049

版权

在 JavaScript 中，let、var 和 const 是用于声明变量的关键字，它们之间有一些区别。

var：var 是 JavaScript 最早引入的变量声明关键字。使用 var 声明的变量具有函数作用域，意味着变量在声明它的函数内可见。如果在函数内部使用 var 声明变量，它将成为该函数的局部变量。如果在函数外部使用 var 声明变量，它将成为全局变量。此外，使用 var 声明的变量可以在其声明之前被访问（变量提升）。
let：let 是在 ECMAScript 6（ES6）中引入的关键字。与 var 不同，let 声明的变量具有块级作用域，意味着变量在声明它的块（例如，{}）内可见。块是由一对花括号 {} 包围的代码段。使用 let 声明的变量不会被提升到其声明之前，这意味着在声明之前访问 let 变量会导致引用错误。
const：const 也是在 ES6 中引入的关键字。const 声明的变量也具有块级作用域，与 let 相同。
1. 不同的是，使用 const 声明的变量必须被初始化，并且一旦被赋值后就不能再修改其值。这意味着 const 声明的变量是常量，对其进行重新赋值会导致错误。

总结一下：

使用 var 声明的变量具有函数作用域，可以在其声明之前访问，并且可以被重新赋值。

function exampleVar() {
  var x = 10;
  if (true) {
    var x = 20; // 同一个变量 x
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 20
}
exampleVar();

使用 let 声明的变量具有块级作用域，不会被提升，可以在其声明之前访问，并且可以被重新赋值。

function exampleLet() {
  let x = 10;
  if (true) {
    let x = 20; // 不同的变量 x
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 10
}
exampleLet();

使用 const 声明的变量具有块级作用域，不会被提升，必须被初始化，并且不能被重新赋值。

function exampleConst() {
  const x = 10;
  if (true) {
    const x = 20; // 不同的常量 x
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 10
}
exampleConst();

在编写 JavaScript 代码时，推荐使用 let 和 const 来声明变量，因为它们提供了更严格的作用域规则和不可变性，有助于减少意外的错误和提高代码可维护性。

函数

【1】前言

** 函数在 JavaScript 中非常重要，它们使得代码可以模块化、可重用，并提供了一种组织和结构化代码的方式。您可以定义自己的函数来执行所需的任务，并根据需要调用它们。**

在js中传多了只拿对应的数据
在js中传少了也不会报错

【2】以下是定义和使用函数的基本语法：

// 定义一个函数
function 函数的名称(函数的值, 函数的值, ...) {
  // 函数体，执行特定的任务或计算
  // 可以使用参数进行计算
  // 可以使用 return 语句返回一个值
}

// 调用函数
var result = 函数的名称(值1, 值2, ...);

functionName 是函数的名称，可以根据需要自定义。
parameter1, parameter2, ... 是函数的参数列表，用于接收传递给函数的值。参数是可选的，可以没有参数。
function body 是函数体，包含函数要执行的代码。在函数体中，可以使用参数进行计算，并且可以使用 return 语句返回一个值。如果没有 return 语句，则函数将返回 undefined。
argument1, argument2, ... 是函数调用时传递给函数的实际值。

以下是一个简单的函数示例：

// 定义一个函数，计算两个数的和
function addNumbers(a, b) {
  var sum = a + b;
  return sum;
}

// 调用函数，并将结果存储在变量中
var result = addNumbers(5, 3);
console.log(result); // 输出：8

在这个示例中，addNumbers 是一个函数，接受两个参数 a 和 b。函数体中计算了 a 和 b 的和，并使用 return 语句返回了结果。在调用函数时，传递了实际的参数值 5 和 3，并将返回的结果存储在变量 result 中。

。**

【3】函数的调用

函数名加（）
函数调用时，会立即执行，代码体里面的代码
可以多次调用，每次调用是独立不相关的
函数的执行跟定义位置无关，只与调用的位置有关

有参函数：

有参函数接受一个或多个参数，并在函数体内使用这些参数进行操作或计算。

function addNumbers(a, b) {
  	var a = 5
    var b = 8
    var sum = a + b;
  console.log("The sum is: " + sum);
}

// 调用有参函数
addNumbers(5, 10); // 输出：The sum is: 15

在上面的例子中，addNumbers是一个有参函数，它接受两个参数 a 和 b，并计算它们的和。在函数体内，我们将结果打印到控制台。

无参函数：

无参函数不接受任何参数，它们在函数体内执行一些特定的操作或计算。

function sayHello() {
  console.log("Hello, world!");
}

// 调用无参函数
sayHello(); // 输出：Hello, world!

在上面的例子中，sayHello是一个无参函数，它不接受任何参数，只是在函数体内打印了一条问候语。

【4】普通函数和 ES6 函数（箭头函数）在语法和功能上的区别。

语法格式：

普通函数的语法格式如下：

function functionName(parameter1, parameter2) {
  // 函数体
}

ES6 函数（箭头函数）的语法格式如下：

const functionName = (parameter1, parameter2) => {
  // 函数体
}

this 的指向：

普通函数中的 this 关键字指向函数被调用时的上下文。具体的指向取决于函数的调用方式，如通过对象调用、作为构造函数调用、使用 call() 或 apply() 方法调用等。
ES6 函数（箭头函数）中的 this 关键字指向定义时的上下文，而不是运行时的上下文。箭头函数没有自己的 this，它继承了外层作用域的 this 值。

arguments 对象：

普通函数内部可以使用 arguments 对象来访问传递给函数的参数列表，它是一个类数组对象。
ES6 函数（箭头函数）没有自己的 arguments 对象，如果需要访问参数列表，可以使用剩余参数语法 ...args 来获取参数的数组。

返回值：

普通函数可以使用 return 关键字来返回一个值。如果没有显式指定返回值，则函数返回 undefined。
ES6 函数（箭头函数）可以使用 return 关键字来返回一个值，或者可以省略 return 关键字并直接返回一个表达式的结果。

构造函数：

普通函数可以作为构造函数使用，通过 new 关键字创建实例对象。

// 定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 使用构造函数创建实例对象
const person = new Person('mao', 30);
console.log(person.name); // 输出: mao
console.log(person.age); // 输出: 30

使用普通函数的方法作为对象的方法示例：

// 定义一个对象
const obj = {
  name: 'mao',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

// 调用对象的方法
obj.greet(); // 输出: Hello, mao

ES6 函数（箭头函数）不能用作构造函数，不能通过 new 关键字创建实例对象。

// 使用箭头函数作为对象的方法
const obj = {
  name: 'John',
  greet: () => {
    console.log('Hello, ' + this.name); // 注意：箭头函数中的 this 指向的是定义时的上下文，这里的 this 不是 obj 对象
  }
};

// 调用对象的方法
obj.greet(); // 输出: Hello, undefined

【4】函数的返回值

【1】返回值机制

JavaScript 的返回值机制是指函数在执行完毕后，可以通过 return 语句将一个值返回给调用者。

注意事项：

return 语句：使用return关键字可以在函数中指定要返回的值。当汉子执行到 return 语句时，函数会立即执行，并将指定的值作为函数的返回值返回给调用者。
返回值类型：JavaScript的函数可以返回任何有效的数据类型，包括数字、字符串、布尔值、数组、对象等。函数可以根据需要进行适当的计算和处理，并返回相应的结果。
单一返回值：每个函数只能返回一个值。如果需要返回多个值，可以使用数组、对象或其他数据结构来封装多个值，并将其作为单个返回值返回。
undefined：如果函数没有明确的 return 语句或者 return 后面没有指定返回值，函数将默认返回 undefined。
返回值的使用：调用函数时，可以将返回值赋给一个变量，以便进一步使用或处理。返回值可以用于输出到控制台、进行条件判断、进行数学运算等等。

function add(a, b) {
  return a + b;
}

let result = add(66, 5); 
// 调用 add 函数，并将返回值赋给 result 变量
console.log(result);
// 71

【2】终止函数执行

提前结束函数的执行流程。

function stopExecution() {
    if (false) { // 假设某个条件不成立
        return; // 结束函数执行
    }
    console.log('This line will not be executed');
}
stopExecution(); // 不输出任何内容，函数直接结束

注意：stopExecution();只能用在函数末尾使用并不能在函数代码中是使用只能用return写一个返回值。

【5】函数的数据类型

在JavaScript中，函数被视为一种特殊的数据类型，可以被分配给变量、作为参数传递给其他函数，或者从函数中返回。JavaScript中的函数类型被称为"function"（）。

函数是一等公民：函数可以像其他数据类型（如字符串、数字等）一样被赋值给变量、作为参数传递给其他函数，以及作为函数的返回值。
函数可以拥有属性和方法：由于函数是对象，所以可以向函数对象添加属性和方法。
函数可以被分配给变量：

var myFunction = function() {
  // 函数体
};

在上面的示例中，函数被分配给了变量myFunction，你可以通过该变量来调用函数。

函数可以作为参数传递给其他函数：

function performOperation(callback) {
  // 执行某些操作
  callback();
}

function myFunction() {
  console.log("Hello, world!");
}

performOperation(myFunction);

在上面的示例中，performOperation函数接受一个回调函数作为参数，并在执行某些操作后调用该回调函数。

函数可以从函数中返回：

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

var double = createMultiplier(2);
console.log(double(5)); // 输出 10

在上面的示例中，createMultiplier函数返回了一个新的函数，该函数将传入的number与factor相乘。通过调用createMultiplier并将其结果赋值给变量double，我们创建了一个乘以2的函数。然后，我们调用double(5)，得到了10作为输出。

具体示例：

// 函数作为参数传递
function calculate(operation, a, b) {
  return operation(a, b);
}

function add(x, y) {
  return x + y;
}

function subtract(x, y) {
  return x - y;
}

console.log(calculate(add, 5, 3)); // 输出 8
console.log(calculate(subtract, 5, 3)); // 输出 2

// 函数作为返回值
function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ", " + name + "!");
  };
}

var sayHello = createGreeter("Hello");
var sayGoodbye = createGreeter("Goodbye");

sayHello("Alice"); // 输出 "Hello, Alice!"
sayGoodbye("Bob"); // 输出 "Goodbye, Bob!"

function greet(name) {
    console.log('nihao, ' + name);
}

// 函数赋值给变量
const nian = greet;
nian('gril');
// nihao, gril

// 函数作为对象的方法
greet.bai = 'music';
console.log(greet.bai);
// music

【6】arguments对象

【1】什么是arguments对象

每个函数都有一个特殊的对象arguments，它包含了函数被调用时传递的参数信息。arguments对象类似于一个数组，但它并不是一个真正的数字，而是一个类数组对象。

特点

访问参数：可以使用索引来访问传递给函数的参数。例如，arguments[0] 访问第一个参数，arguments[1] 访问第二个参数，以此类推。
长度属性：arguments.length 属性可以获取函数接收到的参数个数。
遍历参数：可以使用 for 循环或其他迭代方式遍历 arguments 对象中的参数。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出：6
console.log(sum(4, 5, 6, 7)); // 输出：22

总结：

arguments 对象是 JavaScript 函数内部的一个特殊对象，用于访问传递给函数的参数信息。它可以通过索引、长度属性和遍历来使用。

【7】函数的递归

函数的内部可以调用函数自己本身，这种做法称为递归
函数递归需要考虑好结束递归的条件，不然会出现死递归导致程序崩溃，内存溢出
递归一般是解决数学中的问题

【8】作用域

变量起作用的范围
函数内部是一个作用域
作用域也可以用一对大括号包裹起来，在es6以前是没有块级作用域这个概念，在后续es6中补充
变量退出作用域会自动销毁，全局变量只有关闭浏览器才会销毁

JavaScript 中的作用域决定了变量和函数的可见性和可访问性范围。全局作用域在整个程序中可访问，函数作用域在函数内部可访问，块级作用域在代码块内部可访问。词法作用域使得变量的作用域在函数定义时就确定了。

var globalVariable = "Global"; // 全局作用域

function outer() {
  var outerVariable = "Outer"; // 函数作用域

  if (true) {
    var blockVariable = "Block"; // 块级作用域（在 ES6 之前）

    let blockScopedVariable = "Block Scoped"; // 块级作用域（使用 let 声明）
    const constantVariable = "Constant"; // 块级作用域（使用 const 声明）
  }

  console.log(globalVariable); // 可访问
  console.log(outerVariable); // 可访问
  console.log(blockVariable); // 可访问（在 ES6 之前）
  console.log(blockScopedVariable); // 不可访问
  console.log(constantVariable); // 不可访问
}

outer();

【9】参数和函数的作用域

函数的参数是局部变量，只能在函数内部使用
函数内部的变量也是局部变量
可以理解为函数体本身是一个独立的作用域

对象

【1】什么是对象

js中的对象是无序的属性集合
我们可以把js中的对象想象成键值对，其中值可以是数据或者函数
特征-在对象中属性表示
行为-在对象中用方法表示

JavaScript 中的对象是一种非常重要的数据类型，可以存储多个属性和方法，并且可以通过点号或方括号运算符来访问属性。

【2】对象的创建

【1】对象字面量（obj）

直接使用花括号 {} 来创建一个空对象，或者初始化对象时在花括号内直接指定键值对。

var obj = {}

对象字面量语法：使用花括号 {} 来定义对象，并在其中指定属性和对应的值。例如：

const person = {
    name:'nishibushisha',
    age: 18,
    gender:'male'
}
console.log(person.age) // 18

构造函数：使用构造函数创建对象。构造函数是一个普通的函数，使用 new 关键字来创建对象实例。例如：

function mei(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

var nian = new mei("mao", 18, "male");
console.log(nian.age,nian.gender,nian.gender);
// 18 male male
console.log(new mei("mao", 18, "male"));
// mei { name: 'mao', age: 18, gender: 'male' }

Object.create() 方法：使用 Object.create() 方法创建一个新对象，以现有对象作为原型。例如：

var bian = Object.create(null);
bian.name = "mao";
bian.age = 30;
bian.gender = "male";

console.log( bian.name);
// mao

ES6 类（Class）语法：使用类来创建对象。类是一种特殊的构造函数，使用 class 关键字定义，并使用 new 关键字来创建对象实例。例如：

class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

var person = new Person("John", 30, "male");

常用方法

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join(‘+’)，seq是连接符	将数组元素连接成字符串
.concat(val, …) #连个数组合并,得到一个新数组，原数组不变	连接数组
.sort()	排序
.forEach() #讲了函数再说	将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
.map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

【3】对象的调用

在 JavaScript 中，你可以通过以下几种方式来调用对象的属性和方法：

点符号（.）：使用对象名后跟一个点和属性或方法名的方式来调用。例如：

var person = {
  name: "John",
  age: 30,
  gender: "male",
  sayHello: function() {
    console.log("Hello!");
  }
};

console.log(person.name);  // 输出: "John"
console.log(person.age);   // 输出: 30
person.sayHello();         // 输出: "Hello!"

方括号（[]）：使用对象名后跟方括号，内部包含属性或方法名的字符串来调用。这种方式可以动态地传递属性或方法名。例如：

var person = {
  name: "mao",
  age: 18,
  gender: "male",
  sayHello: function() {
    console.log("nimasil!");
  }
};

console.log(person["name"]);      // 输出: "mao"
console.log(person["age"]);       // 输出: 18
person["sayHello"]();              // 输出: "nimasil!"

var propertyName = "gender";
console.log(person[propertyName]); // 输出: "male"

ES6 解构赋值：使用解构赋值语法可以直接从对象中提取属性并赋值给变量。例如：

var person = {
  name: "mao",
  age: 18,
  gender: "male"
};

var { name, age, gender } = person;
console.log(name);    // 输出: "mao"
console.log(age);     // 输出: 18
console.log(gender);  // 输出: "male"

`for...of` 循环遍历数组的示例

var arr = [1, 2, 3, 4, 5];

for (var i of arr) {
  console.log(i);
}
//1
// 2
// 3
// 4
// 5

【4】日期对象Date

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  #月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  #月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

JavaScript 中的日期对象是 Date 对象，它用于处理日期和时间。你可以使用 new Date() 构造函数来创建一个日期对象。以下是一些常见的用法：

// 创建一个表示当前日期和时间的日期对象
var currentDate = new Date();

// 创建一个指定日期和时间的日期对象
var specificDate = new Date("2022-01-01");

// 创建一个指定年、月、日的日期对象
var customDate = new Date(2022, 0, 1);

// 创建一个指定年、月、日、时、分、秒的日期对象
var dateTime = new Date(2022, 0, 1, 12, 30, 0);

Date 对象提供了许多方法来获取和设置日期的各个部分，例如年、月、日、小时、分钟、秒等。以下是一些常用的方法：

var date = new Date();

var year = date.getFullYear();     // 获取年份（四位数）
var month = date.getMonth();        // 获取月份（0-11，注意是从 0 开始）
var day = date.getDate();           // 获取日期（1-31）
var day = date.getDay();			// 获取星期
var hour = date.getHours();         // 获取小时（0-23）
var minute = date.getMinutes();     // 获取分钟（0-59）
var second = date.getSeconds();     // 获取秒数（0-59）
var millisecond = date.getMilliseconds(); // 获取毫秒数（0-999）

date.setFullYear(2023);            // 设置年份
date.setMonth(11);                 // 设置月份（0-11）
date.setDate(25);                  // 设置日期
date.setHours(10);                 // 设置小时
date.setMinutes(30);               // 设置分钟
date.setSeconds(0);                // 设置秒数
date.setMilliseconds(0);           // 设置毫秒数

方法	描述
getDate()	返回月中的第几天（从 1 到 31）。
getDay()	返回星期几（0-6）。
getFullYear()	返回年份。
getHours()	返回小时（从 0-23）。
getMilliseconds()	返回毫秒（0-999）。
getMinutes()	返回分钟（从 0-59）。
getMonth()	返回月份（从 0-11）。
getSeconds()	返回秒数（从 0-59）。
getTime()	返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
getTimezoneOffset()	返回 UTC 时间与本地时间之间的时差，以分钟为单位。
getUTCDate()	根据世界时，返回月份中的第几天（从 1 到 31）。
getUTCDay()	根据世界时，返回星期几（0-6）。
getUTCFullYear()	根据世界时，返回年份。
getUTCHours()	根据世界时，返回小时（0-23）。
getUTCMilliseconds()	根据世界时，返回毫秒数（0-999）。
getUTCMinutes()	根据世界时，返回分钟（0-59）。
getUTCMonth()	根据世界时，返回月份（0-11）。
getUTCSeconds()	根据世界时，返回秒数（0-59）。
getYear()	已弃用。请改用 getFullYear() 方法。
now()	返回自 1970 年 1 月 1 日午夜以来的毫秒数。
parse()	解析日期字符串并返回自 1970 年 1 月 1 日以来的毫秒数。
setDate()	设置 Date 对象中月的某一天。
setFullYear()	设置日期对象的年份
setHours()	设置日期对象的小时。
setMilliseconds()	设置日期对象的毫秒数。
setMinutes()	设置日期对象的分钟数。
setMonth()	设置日期对象的月份。
setSeconds()	设置日期对象的秒数。
setTime()	将日期设置为 1970 年 1 月 1 日之后/之前的指定毫秒数。
setUTCDate()	根据世界时，设置 Date 对象中月份的一天。
setUTCFullYear()	根据世界时，设置日期对象的年份。
setUTCHours()	根据世界时，设置日期对象的小时。
setUTCMilliseconds()	根据世界时，设置日期对象的毫秒数。
setUTCMinutes()	根据世界时，设置日期对象的分钟数。
setUTCMonth()	根据世界时，设置日期对象的月份。
setUTCSeconds()	根据世界时，设置日期对象的秒数。
setYear()	已弃用。请改用 setFullYear() 方法。
toDateString()	将 Date 对象的日期部分转换为可读字符串。
toGMTString()	已弃用。请改用 toUTCString() 方法。
toISOString()	使用 ISO 标准将日期作为字符串返回。
toJSON()	以字符串形式返回日期，格式为 JSON 日期。
toLocaleDateString()	使用区域设置约定将 Date 对象的日期部分作为字符串返回。
toLocaleTimeString()	使用区域设置约定将 Date 对象的时间部分作为字符串返回。
toLocaleString()	使用区域设置约定将 Date 对象转换为字符串。
toString()	将 Date 对象转换为字符串。
toTimeString()	将 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，将 Date 对象转换为字符串。
UTC()	根据 UTC 时间，返回自 1970 年 1 月 1 日午夜以来的日期中的毫秒数。
valueOf()	返回 Date 对象的原始值。

格式化时间

日期对象没有内置的格式化方法，但是您可以使用各种方法将日期和时间格式化为所需的字符串格式。

var date = new Date();

var formattedDate = date.toLocaleDateString(); // 格式化为本地日期字符串
var formattedTime = date.toLocaleTimeString(); // 格式化为本地时间字符串
var formattedDateTime = date.toLocaleString(); // 格式化为本地日期和时间字符串

【5】JSON对象

【python中】

在Python中序列化和反序列化使用

dumps 序列化
loads 反序列化

   +-------------------+---------------+
    | Python            | JSON          |
    +===================+===============+
    | dict              | object        |
    +-------------------+---------------+
    | list, tuple       | array         |
    +-------------------+---------------+
    | str               | string        |
    +-------------------+---------------+
    | int, float        | number        |
    +-------------------+---------------+
    | True              | true          |
    +-------------------+---------------+
    | False             | false         |
    +-------------------+---------------+
    | None              | null          |
    +-------------------+---------------+

import json

# 将 Python 对象转换为 JSON 字符串
data = {
    'name': 'mao',
    'age': 18,
    'city': 'New York'
}
json_str = json.dumps(data)
print(json_str)

# 将 JSON 字符串转换为 Python 对象
json_str = '{"name": "mao", "age": 18, "city": "New York"}'
data = json.loads(json_str)
print(data)

【JavaScript中】

在js中也有序列化和反序列化方法
- JSON.stringify() ----> dumps 序列化
- JSON.parse() -----> loads 反序列化

// 将 JavaScript 对象转换为 JSON 字符串
var data = {
    name: 'John',
    age: 30,
    city: 'New York'
};
var jsonStr = JSON.stringify(data);
console.log(jsonStr);

// 将 JSON 字符串转换为 JavaScript 对象
var jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
var data = JSON.parse(jsonStr);
console.log(data);

【6】正则对象 RegExp

正则对象（RegExp）是在 JavaScript 中用于处理正则表达式的对象。它提供了一组方法和属性，用于执行正则表达式的匹配、替换和其他操作。

要创建一个正则对象，你可以使用字面量表示法或构造函数表示法。以下是两种创建正则对象的示例：

使用字面量表示法：

var regex = /pattern/flags;

let reg1 = /正则表达式/

使用构造函数表示法：

let reg = new RegExp(正则表达式);

var regex = new RegExp('pattern', 'flags');

其中，pattern 是正则表达式的模式，可以是简单的字符串或包含特定语法的模式。flags 是一个可选的标志，用于指定正则表达式的行为，例如全局匹配、忽略大小写等。

下面是一个示例，展示了如何使用正则对象进行匹配和替换：

var str = 'Hello, world!';
var regex = /world/i; // 不区分大小写匹配 "world"

// 使用正则对象进行匹配
var match = str.match(regex);
console.log(match); // 输出: ["world"]

// 使用正则对象进行替换
var replacedStr = str.replace(regex, 'JavaScript');
console.log(replacedStr); // 输出: "Hello, JavaScript!"

常用的正则方法的介绍：

exec(): 该方法在字符串中执行正则表达式的匹配，并返回匹配结果的数组。如果找到匹配，则返回一个数组，其中第一个元素是匹配到的文本，后续元素是捕获组的匹配结果。如果未找到匹配，则返回 null。

var str = 'Hello, world!';
var regex = /world/i;
var match = regex.exec(str);
console.log(match); // 输出: ["world", index: 7, input: "Hello, world!", groups: undefined]

test(): 该方法用于测试字符串是否匹配正则表达式。如果匹配成功，则返回 true，否则返回 false。

var str = 'Hello, world!';
var regex = /world/i;
var isMatch = regex.test(str);
console.log(isMatch); // 输出: true

match(): 该方法在字符串中执行正则表达式的匹配，并返回匹配结果的数组。如果找到匹配，则返回一个数组，其中包含所有匹配到的文本。如果未找到匹配，则返回 null。

var str = 'Hello, world!';
var regex = /o/g;
var matches = str.match(regex);
console.log(matches); // 输出: ["o", "o"]

replace(): 该方法在字符串中执行正则表达式的替换，并返回替换后的新字符串。可以使用字符串或函数作为替换值。

var str = 'Hello, world!';
var regex = /world/i;
var replacedStr = str.replace(regex, 'JavaScript');
console.log(replacedStr); // 输出: "Hello, JavaScript!"

split(): 该方法根据正则表达式将字符串分割为数组，并返回数组。可以使用正则表达式或字符串作为分隔符。

var str = 'Hello,world!';
var regex = /,/i;
var arr = str.split(regex);
console.log(arr); // 输出: ["Hello", "world!"]

这些方法只是正则对象提供的一部分功能，还有其他方法可用于更高级的正则表达式操作。如果你想了解更多细节，请查阅 JavaScript 中正则表达式的文档。

希望这些介绍对你有帮助！如果你还有其他问题，请随时提问。

DOM/BOM

【1】DOM/BOM

文档对象模型（Document Object Model, 简称 DOM）
浏览器对象模型（Browser Object Model, 简称 BOM）
是 JavaScript 与网页内容及浏览器环境进行交互的两种核心概念。

BOM（浏览器对象模型）是JavaScript提供的用于操作浏览器窗口和文档的API集合。它提供了一组对象和方法，用于访问和控制浏览器窗口、历史记录、定时器、对话框等。

BOM的核心对象是window对象，它表示浏览器中的窗口或框架。window对象提供了许多属性和方法，用于操作当前窗口的各个方面。下面是一些常用的BOM对象和其功能：

【2】window对象

window 对象是 JavaScript 在浏览器环境中的全局对象，提供了许多方法和属性，用于操作和控制浏览器窗口。下面是一些常见的 window 对象的使用方法：

打开新窗口或标签页：

window.open('https://www.example.com', '_blank');

关闭当前窗口或标签页：

window.close();

弹出警告框：

window.alert('Hello, world!');

弹出对话框，接收用户输入：

var result = window.prompt('Please enter your name:');
console.log(result);

设置定时器，延迟执行函数：

window.setTimeout(function() {
  console.log('Delayed function');
}, 2000);  // 2秒后执行

取消之前设置的定时器：

var timerId = window.setTimeout(function() {
  console.log('Delayed function');
}, 2000);

window.clearTimeout(timerId);

将窗口滚动到指定位置：

window.scrollTo(0, 0);  // 滚动到页面顶部

打印当前窗口的内容：

window.print();

获取当前窗口的 URL 信息：

var url = window.location.href;
console.log(url);

修改当前窗口的 URL：

window.location.href = 'https://www.example.com';

【3】查找标签

如果你想在 JavaScript 中查找特定的 HTML 标签，可以使用 document 对象的相关方法。document 对象表示当前窗口或标签页中的文档，提供了许多方法来访问和操作文档中的元素。

以下是一些常用的方法来查找标签：

通过标签名查找元素：

var elements = document.getElementsByTagName('tagname');

这将返回一个类似数组的对象（NodeList），包含了所有具有指定标签名的元素。你可以通过索引访问其中的元素，例如 elements[0]。

通过类名查找元素：

var elements = document.getElementsByClassName('classname');

这将返回一个类似数组的对象（NodeList），包含了所有具有指定类名的元素。

通过 ID 查找元素：

var element = document.getElementById('id');

这将返回具有指定 ID 的元素对象。由于 ID 在文档中应该是唯一的，因此返回的是单个元素对象。

通过选择器查找元素：

var element = document.querySelector('selector');

这将返回匹配指定选择器的第一个元素对象。

var elements = document.querySelectorAll('selector');

这将返回一个类似数组的对象（NodeList），包含了所有匹配指定选择器的元素。

【4】节点操作

节点操作是指在文档对象模型（DOM）中对节点进行创建、获取、修改、删除等操作。
以下是几种常见的节点操作：

【1】创建节点：

createElement(tagName): 创建一个具有指定标签名的元素节点。
createTextNode(text): 创建一个包含指定文本内容的文本节点。
createDocumentFragment(): 创建一个空的文档片段节点，可用于高效地插入多个节点。

【2】获取节点：

getElementById(id): 根据元素的id属性获取对应的元素节点。
getElementsByTagName(tagName): 根据元素的标签名获取一组元素节点。
getElementsByClassName(className): 根据元素的类名获取一组元素节点。
querySelector(selector): 使用CSS选择器获取匹配的第一个元素节点。
querySelectorAll(selector): 使用CSS选择器获取匹配的所有元素节点。

【3】修改节点

node.appendChild(childNode): 将一个节点作为父节点的最后一个子节点添加到指定节点。
parent.removeChild(childNode): 从父节点中移除指定子节点。
node.replaceChild(newNode, oldNode): 使用新节点替换旧节点。
node.insertBefore(newNode, referenceNode): 在参考节点之前插入新节点。

【4】属性操作：

element.getAttribute(attribute): 获取指定属性的值。
element.setAttribute(attribute, value): 设置指定属性的值。
element.removeAttribute(attribute): 移除指定属性。

【5】文本操作

node.textContent: 获取或设置节点的文本内容。
node.innerHTML: 获取或设置节点的HTML内容。

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1"> div
    <p id="p1"> div > p</p>
    <span> div > span </span>
</div>
</body>
</html>

（1）通过DOM操作动态的创建img标签

并且给标签加属性
最后将标签添加到文本中

这个操作只是作用域当前页面，并没有对原始文件生效

刷新后就会消失相关的效果

let imgEle = document.createElement("img");
// undefined
imgEle
// <img>

// 向标签内添加图片链接
imgEle.src="111.jpg";
// '111.jpg'
imgEle
// <img src="111.jpg">

// 向图片内设置自定义属性
imgEle.setAttribute("name","dream");
// undefined
imgEle
// <img src="111.jpg" name="dream">

// 向图片内设置默认属性
imgEle.setAttribute("title","一张图片");
// undefined
imgEle
// <img src="111.jpg" name="dream" title="一张图片">

// 向div标签下面塞入img标签
let divEle = document.getElementById("d1");
// undefined
divEle.appendChild(imgEle)
// undefined

createElement
setAttribute
appendChild

（2）创建a标签

设置属性
设置文本
添加到标签内部
- 添加到指定标签的上面

let aEle = document.createElement("a");
// undefined

aEle
// <a></a>

// 设置默认属性：链接地址
aEle.href = "https://www.mzitu.com/"
// 'https://www.mzitu.com/'

aEle
// <a href="https://www.mzitu.com/"></a>

// 设置文本内容
aEle.innerText = "点我有你好看"
// '点我有你好看'

aEle
// <a href="https://www.mzitu.com/">点我有你好看</a>

// 将a标签插入到指定位置
let divEle = document.getElementById("d1");
// undefined
let pEle = document.getElementById("p1")
// undefined
divEle.insertBefore(aEle,pEle)
// <a href="https://www.mzitu.com/">点我有你好看</a>

innerText
insertBefore

【6】Math对象（类似与Python的内置函数）

Math：不需要new来创建对象，直接使用Math.下面的方法

Math.abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    小数部分进行直接舍去。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

【7】补充innerText/innerHTML

// 只拿标签内的文本 -- 不识别 html标签
divEle.innerText
// 'div 点我有你好看\n\ndiv > p\n\ndiv > span'

// 拿标签内的全部内容和标签 -- 识别 html标签
divEle.innerHTML
/* ' div\n    <a href="https://www.mzitu.com/">点我有你好看</a><p id="p1"> div &gt; p</p>\n    <span> div &gt; span </span>\n' */

innerText和innerHTML是用于在网页中更新文本内容的两种方法。

它们都可以用于修改HTML元素中的文本，但有一些关键的区别。

（1）innerText

innerText属性用于设置或返回指定元素中的文本内容，不包括HTML标记。
当使用innerText属性时，所有HTML标记都将被视为纯文本并被直接显示在页面上。
这意味着如果在innerText中包含HTML标记，那么标记将被作为普通文本显示而不会被解析。
此外，innerText属性是只读的，即使尝试修改该属性的值也不会有任何效果。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerText); // 输出："This is bold text."
   element.innerText = "Updated text"; // 尝试修改innerText但不会生效
</script>

（2）innerHTML

innerHTML属性用于设置或返回指定元素的HTML内容，可以包含HTML标记和文本。
与innerText不同，使用innerHTML属性时，所有HTML标记都会被解析并在页面上正确渲染。
- 这意味着可以通过innerHTML属性来添加、修改或删除HTML元素及其属性。
需要注意的是，innerHTML属性可以导致代码注入攻击，因此使用时需谨慎验证并过滤用户输入。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerHTML); // 输出："This is <strong>bold</strong> text."
   element.innerHTML = "Updated <em>text</em>"; // 修改innerHTML会动态更新页面中的内容
</script>

（3）总结

innerText用于操作元素中的纯文本内容，不解析HTML标记，且是只读属性。
innerHTML用于操作元素中的HTML内容，可以包含HTML标记

【八】获取值操作

【1】获取属性值

可以使用getAttribute()方法来获取HTML元素的属性值。
该方法需要传入属性名作为参数，并返回属性对应的值。

// 示例：获取id为myElement的元素的src属性值
var element = document.getElementById("myElement");
var srcValue = element.getAttribute("src");
console.log(srcValue);

【2】获取文本内容：

可以使用innerText、innerHTML或textContent属性来获取一个元素的文本内容。
这些属性会返回元素内包含的文本，但存在一些差异：
innerText：返回元素的纯文本内容，不包括HTML标记。
innerHTML：返回元素的HTML内容，包括HTML标记。
textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。

// 示例：获取id为myElement的div元素的文本内容
var element = document.getElementById("myElement");
var textContent = element.textContent;
console.log(textContent);

【3】获取用户输入值

对于表单元素（如input、select、textarea等）
可以通过获取其value属性来获取用户输入的值。

// 示例：获取id为myInput的input元素的值
var input = document.getElementById("myInput");
var inputValue = input.value;
console.log(inputValue);

【4】获取文件

当用户选择一个或多个文件后
- 可以通过访问.files属性来获取这些文件的信息。
```
.files
```
属性返回一个FileList对象
- 其中包含了所选文件的列表。
- 可以通过遍历该列表来处理每个文件。
以下是一个简单的示例，演示如何使用.files属性获取用户选择的文件：

// 获取文件选择框的DOM元素
var fileInput = document.getElementById("fileInput");

// 添加change事件监听器，以便在用户选择文件后执行操作
fileInput.addEventListener("change", function() {
  // 获取选择的所有文件
  var files = fileInput.files;

  // 遍历文件列表，并处理每个文件
  for (var i = ; i < files.length; i++) {
    var file = files[i];
    console.log("文件名：" + file.name);
    console.log("文件类型：" + file.type);
    console.log("文件大小（字节）：" + file.size);
    console.log("最后修改时间：" + file.lastModified);
  }
});

在以上示例中，我们首先获取具有
```
id="fileInput"
```
的文件选择框的DOM元素，并为其添加了一个change事件监听器。
- 当用户选择文件后，change事件将被触发。
在事件处理程序中，我们使用
```
.files
```
属性获取选择的文件列表，并遍历该列表。
- 对于每个文件，我们输出了一些基本信息，如文件名、文件类型、文件大小和最后修改时间。

需要注意的是，.files属性在非IE浏览器中提供了广泛的支持

但在IE浏览器中需要使用.value属性来获取文件路径并进行相关处理。

【九】属性操作

【1】class属性操作

（1）介绍

.classList() 是JavaScript中用于获取HTML元素的类名列表的方法。
它返回一个DOMTokenList对象，该对象包含了元素的所有类名。

（2）使用示例

var element = document.getElementById("myElement");
var classList = element.classList;

// 检查是否包含某个类名
if (classList.contains("myClass")) {
  console.log("myElement包含myClass类名");
}

// 添加类名
classList.add("newClass");

// 移除类名
classList.remove("oldClass");

// 切换类名（如果存在则移除，否则添加）
classList.toggle("active");

（3）注意事项

classList是只读的，不能直接赋值。
classList是一个动态的列表，会实时反映元素的当前类名状态。
可以通过遍历classList来访问每个类名，或者使用length属性获取类名数量。
classList方法在大多数现代浏览器中都得到了支持。
如果需要兼容旧版浏览器，可以考虑使用polyfill库来模拟classList功能。

【2】标签样式

看案例

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }

        .bg_red {
            background-color: red;
        }

        .bg_green {
            background-color: green;
        }


    </style>
</head>
<body>
<div id="d1" class="d1 bg_green bg_red"></div>
</body>
</html>

类属性操作

let divEle = document.getElementById("d1");
// undefined

// （1） 查看当前类标签下的所有属性
divEle.classList
/* DOMTokenList(3) ['d1', 'bg_green', 'bg_red', value: 'd1 bg_green bg_red'] */ 

// 移除当前类标签下的某个属性
divEle.classList.remove("bg_green")
// undefined

// 添加当前类标签下的某个属性
divEle.classList.add("bg_green")
// undefined

// 校验当前标签下是否包含某个属性
divEle.classList.contains("d1")
true
divEle.classList.contains("d2")
false

// 当前标签下有这个属性则移除，没有这个属性则添加
divEle.classList.toggle("bg_red");
// false
divEle.classList.toggle("bg_red");
// true
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }

        .bg_red {
            background-color: red;
        }

        .bg_green {
            background-color: green;
        }


    </style>
</head>
<body>
<div id="d1" class="d1 bg_green bg_red"></div>
<p>花天酒地，花前月下</p>
</body>
</html>

标签样式

let pEle = document.getElementsByTagName("p")[0]
// undefined

// 修改标签样式中的颜色
pEle.style.color = "red";
// 'red'

// 修改标签样式中的字体大小
pEle.style.fontSize = "28px"
// '28px'

// 修改标签样式中的背景颜色
pEle.style.backgroundColor = "green"
// 'green'

【十】事件

在计算机编程中
- 事件（Event）是指在程序执行期间发生的特定操作或状态变化。
- 事件可以来自用户的交互操作（如点击、鼠标移动等），也可以是其他元素或系统发出的通知（如定时器到期、网络请求完成等）。
- 事件触发后，程序可以执行相应的处理函数来响应事件并做出相应的操作。

【1】鼠标事件：

click：鼠标点击事件。
mouseover：鼠标悬停在元素上的事件。
mouseout：鼠标离开元素的事件。
mousedown：鼠标按下事件。
mouseup：鼠标松开事件。
mousemove：鼠标移动事件。

【2】键盘事件

keydown：键盘按下事件。
keyup：键盘松开事件。
keypress：键盘按键被按下并松开事件。

【3】表单事件：

submit：表单提交事件。
change：表单值改变事件。
focus：表单元素获取焦点事件。
blur：表单元素失去焦点事件。

【4】文档加载事件：

load：页面完全加载完成事件。
unload：页面关闭或离开事件。

【5】定时器事件

setTimeout：在指定的延迟时间后触发事件。
setInterval：每隔一定时间触发事件。

【6】自定义事件：

开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

【7】示例代码：

var button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  alert("按钮被点击了！");
});

以上示例代码中，当id为"myButton"的按钮被点击时，会触发点击事件，并弹出一个提示框。

【十一】绑定事件的两种方式

【1】传统的事件属性绑定

这种方式是通过在HTML标签中直接添加事件属性来实现事件绑定。
- 例如，我们可以在一个按钮的onclick属性中指定一个JavaScript函数，当按钮被点击时，该函数会被调用。
示例代码：

<button onclick="myFunction()">点击我</button>

<script>
  function myFunction() {
    alert("按钮被点击了！");
  }
</script>

在上述示例中，当按钮被点击时，会调用名为myFunction的JavaScript函数，并弹出一个提示框。
这种方式简单直观，适用于简单的事件绑定需求，但对于复杂的交互场景，建议使用下面介绍的现代事件监听绑定方式。

【2】现代的事件监听绑定

这种方式是通过JavaScript代码动态地选择元素，并以编程方式绑定事件监听器。
- HTML和JavaScript代码会分离，提高了代码的可读性和可维护性。
示例代码：

<button id="myButton">点击我</button>

<script>
  var button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("按钮被点击了！");
  });
</script>

在上述示例中，通过
```
getElementById
```
方法获取id为"myButton"的按钮元素，然后使用
```
addEventListener
```
方法绑定了一个点击事件监听器。
- 当按钮被点击时，会执行回调函数，并弹出一个提示框。
使用现代的事件监听绑定方式，可以更灵活地添加、移除或修改事件监听器，同时也可以实现多个事件监听器同时响应一个事件的目的。

【3】小结

无论选择哪种事件绑定方式，都应根据具体情况来确定使用哪种方法。
传统的事件属性绑定简单易用，适合简单的事件绑定场景；
现代的事件监听绑定更加灵活和可控，适用于复杂的交互需求。

m0_58310590

关注

27
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
javaScript【2】

* 函数在 JavaScript 中非常重要，它们使得代码可以模块化、可重用，并提供了一种组织和结构化代码的方式。您可以定义自己的函数来执行所需的任务，并根据需要调用它们。**在js中传多了只拿对应的数据在js中传少了也不会报错js中的对象是无序的属性集合我们可以把js中的对象想象成键值对，其中值可以是数据或者函数特征-在对象中属性表示行为-在对象中用方法表示。
复制链接

扫一扫