数组，对象，字符串常用方法集结

luofei_create

墨衍会员 · AI 创作全网分发码龄6年

关注

原创最新推荐文章于 2026-04-16 10:06:26 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

js处理字符串、数组、对象常用方法汇总 js常用方法汇总阅读详情

数组，对象，字符串常用方法集结

一、数组常用方法汇总

（一）最原始的方法：

1.转成字符串

把数组转换为字符串：JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串
join() 方法也可将所有数组元素结合为一个字符串。

2.增删

pop() 方法从数组中删除最后一个元素：
push() 方法（在数组结尾处）向数组添加一个新的元素：
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串：
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素unshift() 方法返回新数组的长度。
length 属性提供了向数组追加新元素的简易方法：var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Kiwi"; // 向 fruits 追加 "Kiwi"
既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：var fruits = ["Banana", "Orange", "Apple", "Mango"]; delete fruits[0]; // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

3.拼接数组

splice() 方法可用于向数组添加新项：var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

使用 splice() 来删除元素
通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素
//第一个参数（0）定义新元素应该被添加（接入）的位置。
//第二个参数（1）定义应该删除多个元素。
//其余参数被省略。没有新元素将被添加。

4.合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组：
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
//concat() 方法也可以将值作为参数：
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

5.裁剪数组

slice() 方法用数组的某个片段切出新数组。
slice() 方法创建新数组。它不会从源数组中删除任何元素。
slice() 可接受两个参数，比如 (1, 3),该方法会从开始参数选取元素，直到结束参数（不包括）为止。
如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3); 

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

6.自动 toString()

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：
所有 JavaScript 对象都拥有 toString() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

(二)比较常用且重要的方法

1.排序

sort() 方法是最强大的数组方法之一

//sort() 方法以字母顺序对数组进行排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();     
//reverse() 方法反转数组中的元素。您可以使用它以降序对数组进行排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序  
/*默认地，sort() 函数按照字符串顺序对值进行排序。不过，如果数字按照字符串来排序，则 "25" 大于
 "100"，因为 "2" 大于 "1"。正因如此，sort() 方法在对数值排序时会产生不正确的结果。我们通过一
 个比值函数来修正此问题： */
 var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 
//使用相同的技巧对数组进行降序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); 
//比值函数:比较函数的目的是定义另一种排序顺序。比较函数应该返回一个负，零或正值，这取决于参数：
function(a, b){return a-b}
//当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

//以随机顺序排序数组
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
//查找最高（或最低）的数组值:JavaScript 不提供查找数组中最大或最小数组值的内建函数。不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。升序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

//降序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// 现在 points[0] 包含最高值
// 而 points[points.length-1] 包含最低值 

//您可以使用 Math.max.apply 来查找数组中的最高值：
function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}
//您可以使用 Math.min.apply 来查找数组中的最低值：
function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}

排序对象数组

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];
//即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。解决方法是通过比较函数来对比属性值：
cars.sort(function(a, b){return a.year - b.year});
//比较字符串属性会稍复杂：
cars.sort(function(a, b){
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

1.Array.map()方法

此方法是将数组中的每一个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

let arr = [1,2,3,4]
let newArr = arr.map(x => x*2) //返回新数组[2,4,6,8]

2.Array.forEach()方法

此方法是将数组中的每个元素执行传进提供的函数，没有返回值，等同于for循环，改变原来的数组，注意和map方法的区分

let arr = [1,2,3,4]
	arr.forEach(function(item,index,val){
		item = item*2
		//因为没有返回值，所以可以在这里执行想要的方法
	})

3.Array.filter()方法

这个方法是将所有的元素进行判断，将满足条件的元素作为一个新的数组返回

let arr =[1,2,3,4,5]
const isBig = function (value) {
            value = value >= 3
            return value
        }
 const isBig = value => value >=3 //一样的
let arr2 = array.filter(isBig)
console.log(arr2);

4.Array.every()方法

这个方法是将所有元素进行判断返回一个布尔值，如果所有的元素都满足条件就会返回true ,否则为false

let arr = [1, 2, 3, 4, 5]
    const isLessThan4 = value => value < 4
    const isLessThan6 => value => value < 6
    arr.every(isLessThan4 ) //false
    arr.every(isLessThan6 ) //true

5.Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。
reduce() 方法不会减少原始数组。
这个例子确定数组中所有数字的总和：
var numbers1 = [45, 4, 9, 16, 25]; var sum = numbers1.reduce(myFunction); function myFunction(total, value, index, array) { return total + value; }

请注意此函数接受 4 个参数：

总数（初始值/先前返回的值）
项目值
项目索引
数组本身

//上例并未使用 index 和 array 参数。可以将它改写为：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}
//reduce() 方法能够接受一个初始值：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

二、关于对象的问题

(一) 项目遇到的方法：

将对象直接拷贝到数组可以使用扩展运算符

form.applyForm.push({ …serviceInfo })

将数组拷贝到对象中，并且将数组转化成对象

this.serviceInfo = { …applyForm[index] } 这里的applyForm就是一个数组，index表示索引值

将对象值清空

Object.keys(serviceInfo).map(item => { serviceInfo[item] = ’ '; })

添加和删除属性

1.为对象添加动态属性
obj.userName = “admin”;
obj.passWord = “123456”;
2.移除属性
delete obj.passWord;
console.log(obj);

(一) 最原始的方法：

1.原型链上方法：

//1. hasOwnProperty():返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）
let object1 = new Object();
object1.property1 = 42;
object1.hasOwnProperty('property1'); // true
object1.hasOwnProperty('toString'); // false
//2. isPrototypeOf():用于测试一个对象是否存在于另一个对象的原型链上
function Foo() {}
function Bar() {}
function Baz() {}
Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);
let baz = new Baz();
Baz.prototype.isPrototypeOf(baz); // true
Bar.prototype.isPrototypeOf(baz); // true
Foo.prototype.isPrototypeOf(baz); // true
Object.prototype.isPrototypeOf(baz); // true

2.常用的对象方法

1.toString(): 返回一个表示对象的字符串

let o = new Object();
o.toString(); // '[objdec object]' 当对象需要调用toString()方法时会被自动调用.

2.valueOf(): 返回指定对象的原始值

let b = {name:'小明', age:18}
b.valueOf() //{name:'小明', age:18}

3.Object.assign(): 用于将所有可枚举性的值从一个或多个源对象复制到目标对象。它将返回目标对象

let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };

let returnedTarget = Object.assign(target, source);

target; // { a: 1, b: 4, c: 5 }
returnedTarget; // { a: 1, b: 4, c: 5 }

4.Object.create()：创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。即创建一个以指定的对象为原型的子对象。
5.Object.setPrototypeOf()：设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或null。
6.Object.getPrototypeOf()：返回指定对象的原型（内部[[Prototype]]属性的值)。
7.Object.defineProperties()：直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

let obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
});

obj.property1; // true
obj.property2; // 'Hello'

8.Object.defineProperty()：会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象

let o = {};
let bValue = 1;
Object.defineProperty(o, "b", {
  get : function(){
    return bValue;
  },
  set : function(newValue){
    bValue = newValue;
    console.log('bValue变了');
    
  },
  enumerable : true,
  configurable : true
});

console.log(o.b); //1
o.b = 2; //'bValue变了'

9.Object.keys()：会返回一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for…in循环遍历该对象时返回的顺序一致
10.Object.values()：返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )
11.Object.entries()：返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for…in循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）
12.Object.fromEntries()：把键值对列表转换为一个对象，是Object.entries()的逆操作

let obj = { a: 1, b: 2, c: 3 };
let keys = Object.keys(obj);
let values = Object.values(obj);
let entries = Object.entries(obj);
keys; // ['a','b','c']
values; // [1,2,3]
entries; // [['a',1],['b',2],['c',3]]

let fromEntries = Object.fromEntries(entries);
fromEntries; // {a: 1, b: 2, c: 3}

13.Object.is()：判断两个值是否是相同的值

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false

Object.is(null, null);       // true

// 特例
Object.is(0, -0);            // false
Object.is(0, +0);            // true
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true