Js引用数据类型和ES6新特性

数组(Array)

• 有序, 可以包含不同类型的元素，长度可变

创建数组

let fruits = ['apple', 'banana', 'orange'];
let numbers = new Array(1, 2, 3, 4, 5);

数组的属性,方法

• length : 数组的长度,可以变化

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 输出: 3//访问"越界",也不会报错
var array = ["a", "b", "c"];  
array[4] = 1;  //改变类型,也不会报错
alert(array[4]);//1

• slice(start,end) : 截取元素,包头不包尾

• sort() : 排序

• push()：尾插一个或多个元素, 并返回插入后的长度。

• pop()：删除并返回数组末尾的元素。

• forEach()：遍历有值的元素,undefined除外.

fruits.forEach((fruit) => {console.log(fruit);
});

• splice(): 删除元素,返回一个数组，包含所有被删除的元素.

array.splice(1, 4);//从1索引位置开始,删除4个元素.

• join()：将数组元素连接成一个字符串。

console.log(fruits.join(', ')); 

• indexOf() : 获取元素的索引

• reverse(): 反转数组

• concat() : 在数组后追加数组,不改变原来的数组

let arr=[1,9,3,4];  
arr.concat([6,6,6]);  
//仍然输出1,9,3,4for (const number of arr) {  console.log(number);  }

• unshift() : 头插

• shift() : 头删

函数

声明:

最常用声明:

function functionName(参数1,参数2...){}

• 形参不需要类型,返回值也不需要类型,直接return即可`

使用函数表达式声明函数:

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

使用箭头函数:

var multiply = (a, b) => a * b;

函数的作用域

• 在函数内部定义的变量,无法在函数外部访问。

function example() {let l = "s";console.log(l); // 输出: I'm local!
}
example();
// console.log(l); // 报错: localVar is not defined

匿名函数: 通常用作回调函数 (在特定事件或条件发生时被调用的函数,通常用于异步编程)

    let sub = function (x, y) { return x - y}console.log("sub", sub(30, 5))//箭头函数let plus = (a, b) => {return a + b}

对象(Object):

var objectName={
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名: function(形参列表){}
};

• 调用属性: 对象名.属性名; 对象名.函数名( )

• 可以动态的添加属性: 如 user.name = "Alice";

• 对象中的所有键都是字符串, 值是任意对象检查对象是否直接拥有某个属性（而不是继承自原型链的属性)的方法 : person.hasOwnProperty("age"), 键名用引号包裹.

    //使用for...in循环遍历对象 for (let key in person) {console.log("for...in", key, person[key])}

Set

• 无序, 元素唯一
• 可迭代，可以使用 forEach、for...of 遍历

基本用法

let mySet = new Set();let fruits = new Set(['apple', 'orange', 'banana']) //创建一个包含初始值的Set集合mySet.add(1);
mySet.add(2);
mySet.add(2); //  不会添加重复的 2
mySet.add("Hello");
mySet.add({ name: "Alice" });console.log(mySet); 
// Set(4) { 1, 2, 'Hello', { name: 'Alice' } }

方法	作用
add(value)	添加
delete(value)	删除指定值
has(value)	检查是否包含该值
clear()	清空set
size	获取长度

遍历

forEach():

let set = new Set(["apple", "banana", "orange"]);set.forEach(value => {console.log(value);
});
// apple
// banana
// orange

for...of:

for (let item of set) {console.log(item);
}

扩展运算符

• 将一个可迭代对象（如字符串,数组、Set、Map ）“展开”，将其元素逐个放入新的数组中

• 只能用于可迭代对象

• 对于数组是浅拷贝：如果数组元素是对象，复制的是对象引用（修改对象内容会影响原数组）

• 复制数组

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 复制 arr1 到 arr2

• 合并数组

const arrA = [1, 2];
const arrB = [3, 4];
const merged = [...arrA, ...arrB]; // [1, 2, 3, 4]

Map

• 键值对存储（类似 Object）
• 键的类型不限，可以是 Object、Array 等（Object 只能用 string 或 symbol 作为键）。

基本用法

let myMap = new Map();let person = new Map([["name", "warren"],["gender", "男"],["web", "111.com"]
])myMap.set("name", "Alice");
myMap.set(123, "Number key");
myMap.set({ a: 1 }, "Object key");console.log(myMap);
// Map(3) { 'name' => 'Alice', 123 => 'Number key', { a: 1 } => 'Object key' }

常用方法

方法	作用
set(key, value)	添加键值对
get(key)	根据key获取值
has(key)	检查是否包含该键
delete(key)	删除指定键
clear()	清空所有键值对
size	获取长度

遍历

forEach():

let map = new Map([["name", "Alice"],["age", 25],
]);map.forEach((value, key) => {console.log(key, value);
});
// name Alice
// age 25

for...of:

for (let [key, value] of map) {console.log(key, value);
}
// name Alice
// age 25

日期对象Date

创建:

new:

  const now = new Date();

使用时间戳创建:

   const dateFromMilliseconds = new Date(1633072800000); // 例如，表示特定日期和时间

使用日期字符串：

  const dateFromString = new Date("2025-03-14T16:44:14");```##### 常用方法：- 获取日期和时间：```javascriptconst year = now.getFullYear(); // 获取年份const month = now.getMonth(); // 获取月份（0-11）const date = now.getDate(); // 获取日期（1-31）const hours = now.getHours(); // 获取小时（0-23）const minutes = now.getMinutes(); // 获取分钟（0-59）const seconds = now.getSeconds(); // 获取秒数（0-59）```- 设置日期和时间：```javascriptnow.setFullYear(2026); // 设置年份为 2026 年now.setMonth(5); // 设置月份为六月now.setDate(20); // 设置日期为 20 日```- 格式化日期：```javascriptconst dateString = now.toDateString(); // 获取可读的日期字符串const timeString = now.toTimeString(); // 获取可读的时间字符串```#### 模板字符串
- 必须用反引号包裹，不能用单引号或双引号
- 只能放表达式，不能放语句（如 `if`、`for` 等）```javascript
const name = "warren";
const web = "code";// 模板字符串
const str2 = `姓名:${name} 个人网站:${web}`;

get和set

• 在属性名前加 # 符号, 声明为私有属性
• 外部无法直接访问（通过 person['#name'] 也不行）
• 子类也无法访问父类的私有属性

    class Person {name#web //私有属性是指仅在类内部可访问和操作的属性, 外部无法直接访问和修改constructor(name, web) {this.name = namethis.#web = web}//使用存取器 getter 获取私有属性get web() {return this.#web}//使用存取器 setter 设置私有属性set web(value) {this.#web = value}info() {return `姓名:${this.name} 个人网站:${this.web}`}}let person = new Person("warren", "111")console.log("person", person)console.log("web", person.web) //使用存取器 getter 获取私有属性console.log("info", person.info())person.web = "222" //使用存取器 setter 设置私有属性console.log("web", person.web)

解构

• 数组解构: 通过位置匹配提取值

let [x, y] = [1, 2];
console.log("x:", x, "y:", y);

• 跳过元素: 用逗号 , 跳过不需要的元素

let [, , c] = [10, 20, 30];
console.log("c:", c); 

• 扩展运算符（…）收集剩余元素: 只能放在最后一个变量位置

//A 接收第 1 个元素, B 收集剩余所有元素
let [A, ...B] = [1, 2, 3, 4, 5, 6];
console.log("A:", A, "B:", B); // 输出：A: 1 B: [2,3,4,5,6]

• 默认值（处理解构失败的情况）

let [x2, y2 = 200] = [100];
console.log("x2:", x2, "y2:", y2); // 输出：x2: 100 y2: 200

右侧数组只有 1 个元素，x2 正常接收 100
y2 没有对应的值，使用默认值 200
若右侧对应位置有值（即使是 undefined），默认值不生效

• 快速交换变量值

let x3 = 10;
let y3 = 20;
[x3, y3] = [y3, x3]; // ; 不能省略
console.log("x3:", x3, "y3:", y3); // 输出：x3: 20 y3: 10

• 对象解构: 通过属性名匹配来提取值，用 {} 包裹变量

let person = { name: 'warren', gender: '男', web: '111.com' };
let { name } = person;
console.log("name:", name); // 输出：name: warren

Promise

用于处理异步操作, 处理需要等待的操作,比如登录

• 三种状态：

  • pending（待处理）：初始状态
  • fulfilled（已履行）：成功
  • rejected（被驳回）：失败

• 当异步操作成功时，调用 resolve(结果值)，状态从 pending 变为 fulfilled

• 当异步操作失败时，调用 reject(错误信息)，状态从 pending 变为 rejected

初始状态:

let promise = new Promise((resolve, reject) => {// 未调用 resolve 或 reject，状态为 pending
});
console.log(promise); // 输出：Promise { <pending> }

let promise = new Promise((resolve, reject) => {//resolve("邮件发送成功")reject("邮件发送失败")}).then(result => {console.log("result:", result)// 输出 resolve的结果}).catch(error => {console.log("error:", error)// Promise { <rejected> '邮件发送失败' }}).finally(() => {console.log("异步执行结束")})

Fetch

用于发起网络请求的内置 API，与服务器交互

• response.json()：解析为 JSON 格式（最常用）

• response.text()：解析为纯文本

• response.blob()：解析为二进制数据（如图片）

• 只有网络故障时才会触发 catch()；HTTP 错误状态（如 404、500）不会直接进入 catch

    //get请求fetch('http://127.0.0.1/get').then(response => {//返回的解析后的json数据会传递给下一个 then() 方法中的回调函数作为参数,这个参数就是 datareturn response.json() //response.json() 用于将响应数据解析为json格式的数据}).then(data => { //data 解析后的json数据console.log("get.data:", data)}).catch(error => {console.log("get.error:", error.message)}).finally(() => {console.log("get.finally")})

    //post请求 postJsonfetch('http://127.0.0.1/postJson', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({//JSON.stringify 用于将对象转换为json字符串name: 'warren',web: '111.com',}),}).then(response => {return response.json()}).then(data => {console.log("postJson.data:", data)}).catch(error => {console.log("postJson.error:", error.message)}).finally(() => {console.log("postJson.finally")})

Axios

基于 Promise 的HTTP 客户端库,提供了更简洁的 API 和更丰富的功能

// 发起 GET 请求
axios.get('https://api.example.com/data').then(response => {console.log('数据：', response.data); // 直接获取解析后的 JSON 数据}).catch(error => {console.error('错误：', error);});// 发起 POST 请求
axios.post('https://api.example.com/login', {username: 'admin',password: '123'
})
.then(response => {console.log('登录结果：', response.data);
})
.catch(error => {console.error('登录失败：', error);
});

主要区别:

	Axios	Fetch
本质	第三方库（需引入）	浏览器原生 API（无需引入）
返回值处理	自动解析 JSON 数据（response.data 直接使用）	需手动调用 response.json() 解析
错误处理	HTTP 错误状态（404、500 等）会直接进入 catch	仅网络错误进入 catch，HTTP 错误需手动判断 response.ok
拦截器	支持请求 / 响应拦截器（全局处理请求头、错误等）	无内置拦截器，需自行封装

模块化开发

export: 导出

const age = 18;
function greet() {console.log("hello");
}
export { age, greet }; // 注意：这里用 {} 包裹，不是对象

import:导入

import { version, add, Person } from './utils.js';console.log(version); // 1.0.0
console.log(add(2, 3)); // 5
const p = new Person("Alice");

可通过 as 重命名:

// 重命名导入（避免名称冲突）
import { age as userAge, greet as sayHello } from './utils.js';
console.log(userAge); // 18
sayHello(); // hello

两个关键字

• async：用于修饰函数，表明该函数是一个异步函**，返回值会封装成一个 Promise 对象
• await：只能在 async 函数内部使用，用于等待一个 Promise 完成，并获取其成功的结果

async function fetchUser() {// 假设 getUser() 返回一个 Promiseconst user = await getUser(); // 等待 Promise 完成，获取结果console.log(user); // 直接使用结果，无需 .then()
}

继承

• 原型链:st (实例) → smallStudent.prototype → Student.prototype → Object.prototype

"use strict";  
class Student {  constructor(name) {  this.name=name;  }  hello(){  return("hello!"+this.name);  }  
}  
//  
// let s=new Student("warren");  
//  
// s.hello();  
class smallStudent extends Student{  }  
var st=new smallStudent("jim");  
console.log(st.hello());