一文彻底解决JavaScript数组
作者：I'mxx
数组对于程序语言的重要性自不必多说,而在使用javascript的时候难免也会需要用到数组操作,这篇文章主要介绍了JavaScript数组的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、数组的原生方法
| 原生方法 | 描述 | 返回值说明 |
|---|---|---|
push() | 数组末尾添加元素 | 返回数组新的长度 |
pop() | 删除并返回数组的最后一个元素 | 返回被删除的最后一个元素 |
unshift() | 在数组开头添加一个或多个元素 | 返回数组新的长度 |
shift() | 删除并返回数组的第一个元素 | 返回被删除的第一个元素 |
splice() | 截取或删除数组中的某些内容，可插入新元素 | 返回被删除的元素组成的数组 |
slice() | 截取数组中的一部分，不改变原数组 | 返回新数组 |
reverse() | 反转数组 | 返回反转后的数组 |
sort() | 对数组进行排序 | 返回排序后的数组 |
concat() | 多个数组进行拼接 | 返回拼接后的新数组 |
join() | 将数组的每一项连接成一个字符串 | 返回拼接后的字符串 |
let arr = [1, 2, 3];
let newArr = arr.xxx();
console.log(arr);
console.log(newArr);//返回的值
arr.push(4); // arr => [1, 2, 3, 4]
arr.pop(); // arr => [1, 2]，返回 3
arr.unshift(0); // arr => [0, 1, 2, 3] 返回 4
arr.shift(); // arr => [2, 3]，返回 1
arr.splice(1, 1); // arr => [1, 3]，返回 [2]
arr.splice(1, 2, 'a', 'b');//arr =>[1, 'a', 'b', 2] ，返回[2,3]
arr.slice(0, 1); // arr 不变，返回 [1]
arr.reverse(); // arr => [3,2,1],返回[3,2,1]
arr.sort(); // arr => [1,2,3] ,返回[1,2,3]
arr.concat([4, 5]); // arr => [1,2,3] ,返回 [1, 2, 3, 4, 5]
arr.join('-'); // arr =>[1,2,3] 返回 1-2-3
| 原生方法 | 描述 | 返回值说明 |
|---|---|---|
toString() | 将数组转化为字符串 | 返回字符串 |
toLocalString() | 使用本地化字符串表示数组 | 返回本地化格式的字符串 |
let arr = [1, 2, 3]
let newArr = arr.toString();
console.log(newArr);//1,2,3
console.log(arr);//[1, 2, 3]
| 原生方法 | 描述 | 返回值说明 |
|---|---|---|
indexOf() | 从前往后查某个元素第一次出现的位置 | 返回该元素索引，未找到返回-1 |
lastIndexOf() | 从后往前查某元素最后一次出现的位置 | 返回该元素索引，未找到返回-1 |
let arr = [1, 2, 3, 2];
let newArr = arr.indexOf(2);
console.log(newArr);//1
console.log(arr);//[1, 2, 3, 2]
let newArr2 = arr.indexOf(2);
console.log(newArr2);//3
| 原生方法 | 描述 | 返回值说明 |
|---|---|---|
every() | 检查数组中是否所有元素都满足条件 | 返回布尔值 |
some() | 检查数组中是否有至少一个元素满足条件 | 返回布尔值 |
filter() | 过滤出符合条件的元素 | 返回符合条件的新数组 |
forEach() | 对数组的每个元素执行一次提供的函数 | 没有返回值（返回 undefined） |
map() | 对数组每个元素调用函数，生成新数组 | 返回新数组 |
let arr = [1, 2, 3];
// every()
//arr.every(function (item, index, arr) {})
let allPositive = arr.every(n => n > 0);
console.log(allPositive);//true
// some()
let hasBig = arr.some(n => n > 2);
console.log(hasBig);//true
let arr = [1, 2, 3];
// forEach()
arr.forEach(n => console.log(n));
// 输出 1 2 3
// map()
let doubled = arr.map(n => n * 2);
console.log(doubled);// doubled => [2, 4, 6]
// filter() 符合条件的被留下来
let even = arr.filter(n => n % 2 === 0);
console.log(even);// even => [2]
| 原生方法 | 描述 | 返回值说明 |
|---|---|---|
reduce() | 从左到右依次对数组元素执行累积操作（如求和、合并） | 返回最终的累积结果 |
reduceRight() | 从右到左依次对数组元素执行累积操作 | 返回最终的累积结果 |
let arr = [1, 2, 3];
// reduce()
//语法
//arr.reduce(function (prev, item, index, arr) {}, 初始值)
let sum = arr.reduce((acc, n) => acc + n, 0);
console.log(sum); // sum => 6
// reduceRight()
let sumRight = arr.reduceRight((acc, n) => acc + n);
console.log(sumRight);// sumRight => 6
二、数组去重
1. Array.from(new Set)
// 1.利用set去重
// Set是es6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合
// Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是ES6的新增方法
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',]
//let newList = new Set(list);
let newList = Array.from(new Set(list));
console.log(newList);//[8,1,2,6,7,'你是最棒的']
2. includes
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',];
let newList2 = []
list.forEach((item) => {
if (!newList2.includes(item)) {
newList2.push(item)
}
})
console.log('newList2', newList2);
3. map去重
//3.利用map去重
//map数据结构是es6中新出的语法，其本质也是键值对，只是其键不局限于普通对象的字符串
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',];
let newList3 = [];
let map = new Map()
list.forEach((item) => {
if (!map.has(item)) {
map.set(item, true)
newList3.push(item)
}
})
console.log('newList3', newList3);
4. indexOf去重
//4.利用indexOf去重
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',];
let newList4 = [];
list.forEach((item) => {
if (newList4.indexOf(item) === -1) {
newList4.push(item)
}
})
console.log('newList4', newList4);;
5. 利用Array.filter和map对象数组去重
{} === {}
// false 引用地址不一样
//5.利用filter加map去重
let map = new Map();
let list3 = [{
name: '学生1',
id: 1
},
{
name: '学生1',
id: 2
},
{
name: '学生2',
id: 3
},
{
name: '学生3',
id: 3
}
]
function unique(list3, key) {
return list3.filter(item => {
const val = item[key].toString();
if (!map.has(val)) {
map.set(val, true);
return true;
} else {
return false;
}
})
}
console.log(unique(list3, 'name'));
三、数组的遍历方法
| 方法 | 是否改变原数组 | 特点 |
|---|---|---|
forEach() | 否 | 数组方法，不改变原数组，没有返回值 |
map() | 否 | 数组方法，不改变原数组，有返回值，可链式调用 |
filter() | 否 | 数组方法，过滤数组，返回包含符合条件的元素的数组，可链式调用 |
for...of | 否 | for…of遍历具有Iterator迭代器的对象的属性，返回的是数组的元素、对象的属性值，不能遍历普通的obj对象，将异步循环变成同步循环 |
every() 和 some() | 否 | 数组方法，some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false |
find() 和 findIndex() | 否 | 数组方法，find()返回的是第一个符合条件的值；findIndex()返回的是第一个返回条件的值的索引值 |
reduce() 和 reduceRight() | 否 | 数组方法，reduce()对数组正序操作；reduceRight()对数组逆序操作 |
四、forEach 和 map 方法
这方法都是用来遍历数组的，两者区别如下：
- forEach()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组，该方法没有返回值；
- map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值
五、字符串和数组的转换
1. 数组转字符串
| 方法 | 描述 |
|---|---|
toString() | arr.toString() |
join() | join(‘’)可以传入自定义的分隔符 |
2. 字符串转数组
| 方法 | 描述 |
|---|---|
split() | string.split(‘’)，可以传入自定义分隔符 |
ES6展开运算符 | [ …string ] |
ES6解构赋值 | |
Array.from() | Array.from(string) |
六、类数组对象定义？理解？如何转换为数组？如何遍历类数组？
1. 类数组对象的定义
类数组对象，就是指可以通过索引属性访问元素并且拥有length属性的对象。它没有 Array的 内置方法。
2. 常见的类数组对象
- 函数里面的参数对象arguments
什么是arguments?
（1）在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面
（2）一个特殊的对象，属性名按照传入参数的序列来。第一个参数的属性名是’0’，第二个参数的属性名是’1’
<script>
function example() {
console.log(arguments); // { '0': 'a', '1': 'b', length: 2 }
}
example('a', 'b');
</script>
- DOM方法的返回结果
document.querySelectorAll() //返回一个 NodeList，它是一个类数组对象。 document.getElementsByTagName() //返回一个 HTMLCollection，也是一个类数组对象。
3. 类数组转换为数组的方法
（1）通过 call 调用数组的 slice 方法来实现转换
Array.prototype.slice.call(arrayLike);
（2）通过 call 调用数组的 splice 方法来实现转换
Array.prototype.splice.call(arrayLike, 0);
（3）通过 apply 调用数组的 concat 方法来实现转换
Array.prototype.concat.apply([], arrayLike);
（4）通过 Array.from 方法来实现转换
Array.from(arrayLike);
4. 遍历类数组
（1）将数组的方法应用到类数组上，这时候就可以使用call和apply方法
（2）使用Array.from方法将类数组转化成数组
（3）使用展开运算符将类数组转化成数组
总结
到此这篇关于JavaScript数组的文章就介绍到这了,更多相关js数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！