JavaScript 数组、字符串方法全解析与 JSON 入门指南

JavaScript 中的 数组(Array)字符串(String) 是最常用的数据类型之一。它们都提供了丰富的内置方法,用于操作和处理数据。此外,JSON(JavaScript Object Notation) 是现代 Web 开发中数据交换的标准格式。

本文将带你系统掌握:

  • 数组常用方法
  • 字符串常用方法
  • JSON 的基本语法与使用技巧

📌 一、数组(Array)

数组用于有序存储多个值,支持增删改查、排序、映射等操作。

1. 创建数组

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);

2. 常用数组方法(精华整理)

方法作用是否修改原数组返回值
push()添加元素到末尾✅ 是新长度
pop()删除最后一个元素✅ 是被删除元素
unshift()添加元素到开头✅ 是新长度
shift()删除第一个元素✅ 是被删除元素
slice(start, end)截取子数组❌ 否新数组
splice(start, deleteCount, ...items)删除或添加元素✅ 是被删除的元素数组
join(separator)将数组转为字符串❌ 否字符串
indexOf(value)查找元素索引❌ 否索引或 -1
includes(value)判断是否包含❌ 否true / false
reverse()反转数组顺序✅ 是反转后的数组
sort()排序(默认按字符串排序)✅ 是排序后的数组
map(fn)映射新数组❌ 否新数组
filter(fn)过滤符合条件的元素❌ 否新数组
reduce(fn, initialValue)累计处理❌ 否累计结果
forEach(fn)遍历数组❌ 否无返回值
find(fn)查找符合条件的第一个元素❌ 否元素或 undefined
findIndex(fn)查找符合条件的第一个索引❌ 否索引或 -1
some(fn)是否有元素满足条件❌ 否true / false
every(fn)所有元素是否满足条件❌ 否true / false

示例:

let nums = [1, 2, 3, 4, 5];

let doubled = nums.map(n => n * 2); // [2,4,6,8,10]
let even = nums.filter(n => n % 2 === 0); // [2,4]
let sum = nums.reduce((acc, n) => acc + n, 0); // 15

📌 二、字符串(String)

字符串是不可变的数据类型,但 JavaScript 提供了多种方法用于操作字符串。

1. 创建字符串

let str1 = "Hello";
let str2 = new String("World");

2. 常用字符串方法(精华整理)

方法作用返回值
charAt(index)获取指定位置字符字符
charCodeAt(index)获取字符 Unicode 编码Unicode
indexOf(str)查找子串位置索引或 -1
lastIndexOf(str)最后一次出现位置索引或 -1
includes(str)是否包含子串true / false
startsWith(str)是否以某字符串开头true / false
endsWith(str)是否以某字符串结尾true / false
slice(start, end)截取子字符串新字符串
substring(start, end)截取子字符串新字符串
substr(start, length)截取子字符串(已不推荐)新字符串
toUpperCase()转为大写新字符串
toLowerCase()转为小写新字符串
trim()去除前后空格新字符串
split(separator)分割为数组数组
replace(oldStr, newStr)替换第一个匹配项新字符串
replaceAll(oldStr, newStr)替换所有匹配项(ES2021)新字符串
repeat(times)重复字符串新字符串
padStart(length, str)前面填充新字符串
padEnd(length, str)后面填充新字符串

示例:

let text = "hello world";

console.log(text.toUpperCase()); // "HELLO WORLD"
console.log(text.split(" ")); // ["hello", "world"]
console.log(text.replace("hello", "hi")); // "hi world"
console.log(text.repeat(2)); // "hello worldhello world"

📌 三、JSON(JavaScript Object Notation)

JSON 是一种轻量级的数据交换格式,广泛用于前后端通信、配置文件、API 接口等。

1. JSON 的基本结构

  • 对象(Object):键值对集合,用 {} 包裹。
  • 数组(Array):有序值集合,用 [] 包裹。
  • 值类型:字符串、数字、布尔值、null、对象、数组。
{
    "name": "Alice",
    "age": 25,
    "isStudent": false,
    "hobbies": ["reading", "coding"],
    "address": {
        "city": "Beijing",
        "zip": "100000"
    }
}

2. JSON 的常用方法

方法作用示例
JSON.stringify(obj)将 JavaScript 对象转为 JSON 字符串JSON.stringify({name: "Tom"}) → "{\"name\":\"Tom\"}"
JSON.parse(str)将 JSON 字符串转为 JavaScript 对象JSON.parse("{\"name\":\"Tom\"}") → {name: "Tom"}

示例:

let user = {
    name: "Bob",
    age: 30
};

let jsonStr = JSON.stringify(user);
console.log(jsonStr); // {"name":"Bob","age":30}

let parsed = JSON.parse(jsonStr);
console.log(parsed.name); // Bob

✅ 总结:核心知识点一览

类型常用方法
数组pushpopmapfilterreduceforEachfindslicesplice
字符串toUpperCasetoLowerCasesplitreplaceincludesslicetrimrepeat
JSONJSON.stringify()JSON.parse()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玖程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值