一、改变原数组的方法(变异方法)
改变原数组的方法,即执行完这个方法之后,原来的数组会跟着改变;
- push():向数组的末尾添加一个或者多个元素,并返回新的长度
let arr = [1,2,3,4,5];
let length = arr.push(6,7);
console.log(arr); // [1,2,3,4,5,6,7]
console.log(length); // 7
- pop():删除并返回数组的最后一个元素;
let arr = [1,2,3,4,5];
let result = arr.pop();
console.log(arr); // [1,2,3,4]
console.log(result); // 5
- unshift():向数组的开头添加一个或多个元素,并返回新的长度。
let arr = [1,2,3,4,5];
let result = arr.unshift(0);
console.log(arr); // [0,1,2,3,4,5]
console.log(result); // 6
- shift():删除并返回数组的第一个元素。
let arr = [1,2,3,4,5];
let result = arr.shift();
console.log(arr); // [2,3,4,5]
console.log(result); // 1
- reverse():颠倒数组中元素的顺序。
let arr = [1,2,3,4,5];
let result = arr.reverse();
console.log(arr); // [5,4,3,2,1]
console.log(result); // [5,4,3,2,1]
- sort():对数组的元素进行排序。
let arr = [2,5,3,1,4];
let result = arr.sort();
console.log(arr); // [5,4,3,2,1]
console.log(result); // [5,4,3,2,1]
注:这里的sort方法是简单的举例,在实际应用中,sort排序是一个比较重要的点,使用的方式方法可以按照自己的需求对应使用,后面会有对应的sort的使用场景;
- splice()通过删除、替换现有元素或者添加新元素来修改数组,并以数组形式返回被修改的内容。
这个方法有三个参数,有返回值,第一个参数(必填),规定从何处添加/删除,该参数是开始插入和(或)删除的数组元素的下标,必须是数字。第二个参数(可选),规定应该删除多少元素,必须是数字,如果没有规定此参数,则删除从index开始到原数组结尾的所有元素
let arr = [2,5,3,1,4];
let result = arr.splice(2);
console.log(arr); // [2,5]
console.log(result); // [3,1,4]
实例:移除数组的第三个元素,并在数组第三个位置添加新元素
let arr = [2,5,3,1,4];
// 从索引2开始,移除一个,并添加元素6和7
let result = arr.splice(2,1,6,7);
console.log(arr); // [2,5,6,7,1,4]
console.log(result); // [3]
二、不改变原数组的方法
- concat():用于连接两个或多个数组,并返回一个新数组。
let arr = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
let result = arr.concat(arr2,arr3);
console.log(arr); // [ 1, 2, 3 ]
console.log(arr2); // [ 4, 5, 6 ]
console.log(arr3); // [ 7, 8, 9 ]
console.log(result);// [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
- join():将数组的所有元素按照某个标准(根据传入的参数来决定)连接到一个字符串中
let arr = ['你','好','帅'];
let a = arr.join('-');
let b = arr.join('*');
console.log(arr); // [ '你', '好', '帅' ]
console.log(a); // 你-好-帅
console.log(b); // 你*好*帅
- slice(start,end):方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
let arr = [1,2,3,4,5,6,7,8,9,10];
let result = arr.slice(5,9);
console.log(arr); // [1,2,3,4,5,6,7,8,9,10]
console.log(result);// [ 6, 7, 8, 9 ]
三、ES6新增的数组方法
- forEach():用于遍历数组,对数组中的每个元素执行一次提供的函数。
注:此方法没有返回值,原数组不会改变;
let arr = [1, 2, 3, 4];
arr.forEach(item => {
item = item + 1
console.log(item); // 2 3 4 5
})
console.log(arr); // [ 1, 2, 3, 4 ]
- map():创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
// 对数组的每一个元素都增加 1
let arr = [1, 2, 3, 4];
let newArr = arr.map(item=>{
item = item + 1
return item
})
console.log(arr); // [ 1, 2, 3, 4 ]
console.log(newArr); // [ 2, 3, 4, 5 ]
- filter():创建一个新数组,其包含通过所提供函数实现的测试的所有元素。(可以理解为根据自己指定的方式方法过滤某些元素,留下自己想要的元素)
// 筛选出成年人
class Person{
constructor(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
}
let person1 = new Person('张三',15,'男');
let person2 = new Person('李四',22,'女');
let person3 = new Person('王五',28,'男');
let personArr = [];
personArr.push(person1,person2,person3);
console.log(personArr); //创建一个人的集合
// [
// Person { name: '张三', age: 15, gender: '男' },
// Person { name: '李四', age: 22, gender: '女' },
// Person { name: '王五', age: 28, gender: '男' }
// ]
let haveEighth = personArr.filter(item=>{
// 返回年龄大于18岁的人
return item.age > 18
})
console.log(haveEighth);
/*
[
Person { name: '李四', age: 22, gender: '女' },
Person { name: '王五', age: 28, gender: '男' }
]
*/
- find():返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。
// 找到未成年人
class Person{
constructor(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
}
let person1 = new Person('张三',15,'男');
let person2 = new Person('李四',22,'女');
let person3 = new Person('王五',28,'男');
let personArr = [];
personArr.push(person1,person2,person3);
let target = personArr.find(item=>{
return item.age < 18
})
console.log(target); // Person { name: '张三', age: 15, gender: '男' }
- findIndex():返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
// 找到未成年人所在的位置
class Person{
constructor(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
}
let person1 = new Person('张三',15,'男');
let person2 = new Person('李四',22,'女');
let person3 = new Person('王五',28,'男');
let personArr = [];
personArr.push(person1,person2,person3);
let target = personArr.findIndex(item=>{
return item.age < 18
})
console.log(target); // 0
- seme():测试数组中是否至少有一个元素通过由提供的函数实现的测试。
// 判断是否有未成年人
class Person{
constructor(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
}
let person1 = new Person('张三',15,'男');
let person2 = new Person('李四',22,'女');
let person3 = new Person('王五',28,'男');
let personArr = [];
personArr.push(person1,person2,person3);
let target = personArr.some(item=>{
return item.age < 18
})
console.log(target); // true
- every():测试数组的所有元素是否都通过了由提供的函数实现的测试。
// 判断所有人是否都成年
class Person{
constructor(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
}
let person1 = new Person('张三',15,'男');
let person2 = new Person('李四',22,'女');
let person3 = new Person('王五',28,'男');
let personArr = [];
personArr.push(person1,person2,person3);
let target = personArr.every(item=>{
return item.age > 18
})
console.log(target); // false
- reduce():对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个输出值。
注:reduce接收两个参数,第一个参数是一个函数(第一个参数是必填,是初始值,第二个参数是当前元素,也是必填,第三个参数是当前元素的索引,第四个元素是当前元素的所属的数组对象), 第二个参数是传递给函数的初始值(这个初始值并没有规定数据类型)
// 求和案例
let arr = [1, 2, 3, 4,700,80,4]
let result = arr.reduce((total,current)=>{
return total + current
},520); //这里我给了初识值为 520
console.log(arr); // [ 1, 2, 3, 4, 700, 80, 4 ]
console.log(result); // 1314
三、其他常用的方法
indexOf()和lastIndexOf()用于查找数组中某个元素的位置,前者从前往后查找,后者从后往前查找。如果不存在,返回-1;如果存在,返回位置。
// 查找'zhangsan'的位置(索引)
let arr = ['lixue','hanleilie','zhangsan','houzi','qitongwie'];
let targetIndex = arr.indexOf('zhangsan');
console.log(arr); // [ 'lixue', 'hanleilie', 'zhangsan', 'houzi', 'qitongwie' ]
console.log(targetIndex); // 2
除了上述方法外,JavaScript的数组还提供了其他一些方法和属性,如length属性用于获取或设置数组的长度,isArray()函数用于检测一个对象是否为数组等。
需要注意的是,这些方法在使用时可能会对原数组进行修改(改变原数组的方法),也可能不会修改原数组(不改变原数组的方法)。因此,在使用这些方法时,需要根据实际需求选择合适的方法,并注意处理返回值和原数组的关系。
另外,JavaScript的数组操作还可以通过其他方式实现,如使用for循环、while循环、do...
while循环等结构来遍历和处理数组元素。因为上面的大部分方法都是基于for循环来实现的,感兴趣的小伙伴可以自己使用for循环来实现上面的方法。