JavaScript (ES5)+ES6+jQuery 核心对象方法大全

在前端开发中，JavaScript 原生方法 、ES6+ 新增语法方法 、jQuery 封装方法 是日常开发的三大核心基石。原生 JS 是前端的根基，ES6+ 让原生语法更优雅高效，jQuery 则简化了 DOM 操作、兼容处理等繁琐工作。

本文将系统性整理 原生 JS (ES5) 内置对象核心方法 、ES6 及更高版本新增对象 / 语法方法 、jQuery 核心对象与工具方法，全部按「高频优先、分类清晰、简洁易懂」的原则整理，附核心用法说明和特点，无冗余内容，既是新手入门的学习手册，也是开发中随查随用的实用宝典，建议收藏备查！

一、原生 JavaScript (ES5) 核心内置对象方法（必掌握）

原生 JS 的内置对象方法是前端的基础，无任何依赖、兼容性最好，所有浏览器原生支持，是我们编写前端逻辑的核心，以下均为开发中高频必用方法，按需记忆 + 熟练使用即可。

✅ 1. String 字符串对象核心方法

字符串是不可变数据类型，以下所有方法均不会修改原字符串，执行后都会返回一个新的字符串 / 结果值

str.charAt(index)：返回字符串指定索引位置的单个字符，索引越界返回空字符串
str.indexOf(val, start)：从 start 索引开始，查找指定字符 / 子串首次出现 的索引，找不到返回 -1
str.lastIndexOf(val)：查找指定字符 / 子串最后一次 出现的索引，找不到返回 -1
str.slice(start, end)：字符串截取，start 起始索引，end 结束索引（含头不含尾），支持负数索引（倒序截取）
str.substring(start, end)：字符串截取，与 slice 功能一致，不支持负数索引，会自动修正不合理的索引顺序
str.substr(start, length)：按「起始索引 + 长度」截取字符串，start 支持负数，length 为截取长度
str.toUpperCase()：把字符串全部转为大写
str.toLowerCase()：把字符串全部转为小写
str.split(sep, limit)：将字符串按指定分隔符 sep 转为数组，limit 可选，限制返回数组的长度
str.replace(oldVal, newVal)：替换字符串中第一个匹配的内容，仅替换一次
str.trim()：去除字符串首尾的空格 / 换行符，中间的空格保留
str.concat(str1, str2...)：拼接多个字符串，等价于 + 拼接符，多字符串拼接时可读性更好
str.match(regexp)：匹配正则表达式 / 指定字符串，返回匹配结果的数组，无匹配则返回 null

✅ 2. Array 数组对象核心方法（ES5）

数组方法是开发中使用频率最高的方法，ES5 数组方法分为「会修改原数组 」和「不会修改原数组」两类，这是核心重点，一定要牢记！

✔ 会改变原数组的方法（7 个）

arr.push(val1, val2...)：向数组末尾添加一个 / 多个元素，返回新的数组长度
arr.pop()：删除数组最后一个元素，返回被删除的元素
arr.unshift(val1, val2...)：向数组开头添加一个 / 多个元素，返回新的数组长度
arr.shift()：删除数组第一个元素，返回被删除的元素
arr.sort(fn)：数组排序，默认按字符编码升序，传入排序函数可实现数字排序 / 自定义排序
arr.reverse()：反转数组中元素的顺序，直接倒序重排
arr.splice(start, num, val...)：万能增删改，从 start 索引开始，删除 num 个元素，再插入 val 元素，返回被删除的元素数组

✔ 不会改变原数组的方法（9 个，高频）

arr.slice(start, end)：截取数组，含头不含尾，支持负数索引，返回截取的新数组
arr.concat(arr1, arr2...)：拼接多个数组 / 元素，返回拼接后的新数组
arr.join(sep)：将数组转为字符串，元素之间用 sep 分隔，不传参默认用「,」分隔
arr.indexOf(val)：查找元素首次出现的索引，找不到返回 -1
arr.lastIndexOf(val)：查找元素最后一次出现的索引，找不到返回 -1
arr.forEach((item, index, arr) => {})：遍历数组，无返回值，纯循环执行回调逻辑
arr.map((item, index, arr) => {})：遍历数组，返回一个新数组，新数组元素是回调的返回值（核心：映射处理）
arr.filter((item, index, arr) => {})：过滤数组，返回符合条件的元素组成的新数组（核心：筛选）
arr.some((item)=>{})：判断数组中是否有至少一个元素满足条件，返回布尔值（只要有一个满足就返回 true）
arr.every((item)=>{})：判断数组中所有元素是否都满足条件，返回布尔值（全部满足才返回 true）
arr.reduce((prev, curr, index)=>{}, initVal)：数组归并，累计处理数组元素，返回最终的累计值（求和、求最值、扁平化数组常用）

✅ 3. Number 数字对象核心方法

num.toString(radix)：将数字转为字符串，radix 可选，指定进制（2/8/10/16）
num.toFixed(n)：保留 n 位小数，四舍五入，返回字符串格式的数字
num.toPrecision(n)：保留 n 位有效数字，返回格式化后的数字
Math.abs(num)：返回数字的绝对值
Math.ceil(num)：向上取整（天花板）
Math.floor(num)：向下取整（地板）
Math.round(num)：四舍五入取整
Math.max(n1, n2...)：返回一组数字中的最大值
Math.min(n1, n2...)：返回一组数字中的最小值
Math.random()：返回 0~1 之间的随机小数（含 0 不含 1）

✅ 4. Object 对象核心方法（ES5）

JS 中「万物皆对象」，对象方法主要用于处理键值对、遍历、属性操作，均为高频方法

Object.keys(obj)：返回对象中所有可枚举的属性名组成的数组
Object.values(obj)：返回对象中所有可枚举的属性值组成的数组
Object.hasOwnProperty(key)：判断对象自身是否包含指定属性（不包含原型链上的属性），返回布尔值
for(var key in obj)：遍历对象的所有可枚举属性（含原型链），结合 hasOwnProperty 可只遍历自身属性

✅ 5. 其他常用内置方法（ES5）

JSON.stringify(obj)：将 JS 对象 / 数组转为 JSON 格式的字符串
JSON.parse(str)：将 JSON 字符串转为 JS 对象 / 数组
Date()：日期构造函数，处理时间 / 日期的核心，如 new Date().getTime() 获取时间戳

二、ES6 (ES2015) 及 ES7-ES13 新增核心方法 / 语法（重中之重）

ES6 是 JavaScript 的一次重大升级，ES6+（ES7 至 ES13）是持续的增强，这些语法和方法极大简化了开发代码、提升开发效率 ，也是现在企业开发的标配要求，兼容性上现代浏览器均原生支持，项目中配合 Babel 可兼容所有浏览器。

说明：以下统称为「ES6+」，整理的均为开发必用、高频核心的新增内容，无冷门语法。

✅ 1. ES6+ 字符串新增方法

所有新增方法均不修改原字符串，返回新结果

str.includes(val, start)：判断字符串中是否包含指定子串，返回布尔值（替代 indexOf !== -1，可读性更高）
str.startsWith(val, start)：判断字符串是否以指定子串开头，返回布尔值
str.endsWith(val, len)：判断字符串是否以指定子串结尾，返回布尔值
str.repeat(n)：将字符串重复 n 次，返回新字符串
str.padStart(len, padVal)：字符串补全，在开头补全指定内容，直到字符串长度为 len
str.padEnd(len, padVal)：字符串补全，在结尾补全指定内容，直到字符串长度为 len
模板字符串：${变量名} 替代字符串拼接，支持换行、变量嵌入、表达式嵌入，如：let str = 姓名：，年龄：{age+1}``

✅ 2. ES6+ 数组新增方法（核心高频，全部不修改原数组）

ES6+ 对数组的增强是最大的，新增了大量实用方法，解决了 ES5 的诸多痛点，全部高频必用

Array.from(obj)：将「类数组对象 / 可遍历对象」转为真正的数组（如 DOM 节点集合、arguments）
Array.of(val1, val2...)：创建数组，解决 new Array(n) 传数字时的歧义问题
arr.find((item)=>{})：查找数组中第一个满足条件的元素，找到返回元素本身，找不到返回 undefined
arr.findIndex((item)=>{})：查找数组中第一个满足条件 的元素的索引，找不到返回 -1
arr.includes(val)：判断数组中是否包含指定元素，返回布尔值（替代 indexOf !== -1）
arr.fill(val, start, end)：用指定值 val 填充数组，start/end 可选，填充指定区间
arr.flat(n)：数组扁平化，将多维数组转为一维数组，n 为扁平化深度，传 Infinity 可扁平化任意维度
arr.flatMap(fn)：先执行 map 映射，再执行 flat (1) 扁平化，返回新数组
arr.at(index)：根据索引获取数组元素，支持负数索引（arr.at (-1) 获取最后一个元素，超好用！）

✅ 3. ES6+ 对象新增方法 / 语法（核心）

对象是 JS 的核心数据类型，ES6+ 对对象的增强非常全面，语法糖 + 实用方法双升级

✔ 核心新增语法糖（开发必备）

对象属性简写：当属性名和变量名一致时，可只写属性名 → { name, age } 等价于 { name:name, age:age }
对象方法简写：方法可省略 function 关键字 → { fn() { console.log(1) } } 等价于 { fn:function(){ console.log(1) } }
计算属性名：属性名可以是变量 / 表达式，用中括号包裹 → { [key]: val }
对象解构赋值：快速从对象中提取属性值 → const { name, age } = obj

✔ 核心新增方法

Object.assign(target, obj1, obj2...)：浅拷贝，将多个对象的属性合并到 target 对象中，返回合并后的对象
Object.is(a, b)：判断两个值是否严格相等，修复了 NaN === NaN 为 false、+0 === -0 为 true 的问题
Object.entries(obj)：返回对象的「键值对数组」，格式：[[key1, val1], [key2, val2]]，遍历对象超好用
Object.fromEntries(arr)：将「键值对数组」转为对象，是 Object.entries 的逆操作

✅ 4. ES6+ 其他核心新增（高频）

箭头函数：(a,b) => a+b 替代普通函数，简化写法，不绑定 this，this 指向外层作用域的 this
解构赋值：数组解构 const [a,b] = arr、对象解构 const {name} = obj，快速提取数据
扩展运算符：...，数组展开 [...arr1, ...arr2]、对象展开 {...obj1, ...obj2}，浅拷贝 / 合并的最优解
Set/Map 数据结构：Set 实现去重 [...new Set(arr)]，Map 支持任意类型作为键，解决对象键只能是字符串的问题
可选链操作符：obj?.name?.age，判断属性是否存在，避免「Cannot read property of undefined」报错
空值合并运算符：a ?? b，仅当 a 为 null/undefined 时返回 b，比 || 更精准

三、jQuery 核心对象方法大全（完整版，高频优先）

jQuery 是前端经典的库，核心理念是 Write Less, Do More （写的更少，做的更多），封装了原生 JS 的 DOM 操作、事件绑定、Ajax、动画等，解决了原生 JS 的兼容性问题、简化了繁琐的语法，至今在后端模板、快速开发中依然广泛使用。

核心前提：jQuery 中所有方法分为两类 → jQuery工具方法($.xxx) 和 jQuery对象方法($('选择器').xxx)，以下全部整理，按需查阅即可。

✅ 1. jQuery 核心选择器（基础，必掌握）

jQuery 的核心是「选择器」，通过选择器获取 DOM 节点，返回 jQuery 对象，才能调用对象方法

复制代码

$('div') // 选中所有div元素
$('#box') // 选中id为box的元素
$('.list') // 选中所有class为list的元素
$('ul li') // 后代选择器
$('ul>li') // 子代选择器
$('input[type=text]') // 属性选择器

✅ 2. jQuery DOM 操作核心方法（高频）

✔ 文本 / 内容操作

$('selector').html()：获取 / 设置元素的innerHTML（含标签），无参获取，传参设置
$('selector').text()：获取 / 设置元素的innerText（纯文本），无参获取，传参设置
$('selector').val()：获取 / 设置表单元素的 value 值（input/select/textarea 专用）

✔ 属性操作

$('selector').attr('attrName')：获取元素的指定属性值
$('selector').attr('attrName', 'attrVal')：设置元素的指定属性
$('selector').removeAttr('attrName')：删除元素的指定属性
$('selector').prop('propName')：获取元素的原生属性（如 checked、disabled）
$('selector').prop('propName', true/false)：设置元素的原生属性

✔ 样式操作

$('selector').css('styleName')：获取元素的指定样式值
$('selector').css('styleName', 'styleVal')：设置单个样式
$('selector').css({style1:val1, style2:val2})：批量设置样式
$('selector').addClass('className')：添加类名
$('selector').removeClass('className')：移除类名
$('selector').toggleClass('className')：切换类名（有则删，无则加）
$('selector').hasClass('className')：判断是否包含指定类名，返回布尔值

✔ DOM 增删改查

$('selector').append(content)：在元素内部末尾添加内容 / 节点
$('selector').prepend(content)：在元素内部开头添加内容 / 节点
$('selector').after(content)：在元素外部后面添加兄弟节点
$('selector').before(content)：在元素外部前面添加兄弟节点
$('selector').remove()：删除元素本身及所有子节点，返回被删除的 jQuery 对象
$('selector').empty()：清空元素的所有子节点，保留元素本身
$('selector').clone(true)：克隆元素，true 表示克隆事件绑定

✅ 3. jQuery 事件绑定核心方法

jQuery 封装了所有原生事件，解决了事件绑定的兼容性问题，写法统一，以下均为高频

$('selector').click(fn)：绑定点击事件
$('selector').hover(fn1, fn2)：鼠标移入执行 fn1，鼠标移出执行 fn2
$('selector').on('eventName', fn)：万能事件绑定，支持绑定任意事件（click/mouseover/change 等），推荐使用
$('selector').off('eventName', fn)：解绑指定事件
$('selector').trigger('eventName')：手动触发指定事件
$(document).ready(fn)：DOM 加载完成后执行函数，等价于 $(fn)，替代原生 window.onload

✅ 4. jQuery 遍历方法（高频）

jQuery 封装了原生的数组遍历、DOM 节点遍历，语法简洁，无需考虑兼容性

$('selector').each((index, item) => {})：遍历 jQuery 对象中的每一个 DOM 节点
$.each(arr/obj, (index, item) => {})：jQuery 工具方法，遍历数组 / 对象，万能遍历
$('selector').parent()：获取元素的直接父节点
$('selector').parents('selector')：获取元素的所有祖先节点，可指定筛选条件
$('selector').children('selector')：获取元素的直接子节点
$('selector').siblings('selector')：获取元素的所有兄弟节点（排除自身）
$('selector').find('selector')：查找元素的所有后代节点，精准筛选

✅ 5. jQuery 常用工具方法（$.xxx）

jQuery 不仅有对象方法，还有大量工具方法，无需获取 DOM 节点即可调用，非常实用

$.trim(str)：去除字符串首尾空格（原生 ES5 有 str.trim ()，兼容低版本浏览器）
$.each(arr/obj, fn)：遍历数组 / 对象
$.inArray(val, arr)：查找数组中指定值的索引，找不到返回 -1
$.extend(target, obj1, obj2)：合并对象，浅拷贝；第一个参数传 true 为深拷贝
$.ajax({})：封装的 Ajax 请求，核心参数：url、type、data、success、error、dataType
$.get(url, data, success)：简化的 GET 请求
$.post(url, data, success)：简化的 POST 请求

✅ 6. jQuery 动画方法（常用）

$('selector').show()：显示元素
$('selector').hide()：隐藏元素
$('selector').toggle()：切换元素的显示 / 隐藏状态
$('selector').fadeIn()：淡入动画
$('selector').fadeOut()：淡出动画
$('selector').slideDown()：下滑展开动画
$('selector').slideUp()：上滑收起动画

总结

本文整理了前端开发中所有高频核心的 JS (ES5)、ES6+、jQuery 方法，三者的定位和使用场景清晰区分：

原生 JS (ES5)：前端根基，所有语法和方法的源头，兼容性最好，是必学的基础；
ES6+：原生 JS 的增强版，语法更优雅、代码更简洁、效率更高，现代开发的标配，能极大提升开发体验；
jQuery：封装后的工具库，简化原生 JS 的繁琐操作，解决兼容性问题，适合快速开发、后端模板开发，核心是「DOM 操作 + 事件 + Ajax」。

三者并非对立关系，而是相辅相成：原生 JS 是基础，ES6 + 优化原生，jQuery 简化原生。掌握好这些方法，能轻松应对日常前端开发的绝大多数场景 !

👉 **觉得有用的点点关注谢谢~**