js基础整理——数组

猫328

已于 2023-11-29 11:11:30 修改

阅读量81

点赞数

分类专栏： js基础文章标签： javascript 前端开发语言

于 2023-11-28 15:18:06 首次发布

本文链接：https://blog.csdn.net/weixin_56274002/article/details/134638714

版权

js基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（1）数组基本方法

1.jion()

数组分隔符改变；实现重复字符串 返回改变后的数组 原数组不会改变

join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组不变）

通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：

function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi

2、push()和pop()

push(): 在数组后添加返回修改后数组的长度原数组会改变
pop()：在数组后删除返回删除后的项原数组会改变

push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

3.shift() 和 unshift()

unshift(): 在数组前添加返回修改后数组的长度原数组会改变
shift()：在数组前删除返回删除后的项原数组会改变

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头，并返回数组的长度。

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

4.sort()

sort()：升序排列数组项返回排序后的数组原数组会改变

在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

如果需要通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可：

function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]

5、reverse()

reverse()：反转数组项的顺序返回反转后的数组会改变原数组

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

6、concat

concat() ：将参数添加到原数组中返回拼接后的新数组不会改变原数组

这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

传入的数组中--有数组则就会产生一个二维数组

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

7、slice()

删除数组中的项返回删除后的新数组原数组不会改变

slice()：返回从原数组中指定开始下标到结束下标（不包括结束位置的项）之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

8、splice()

可以实现删除、插入和替换返回删除的项原数组会改变

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组，返回从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

插入和删除起始位置不一样删除起始位置从0 插入的起始位置是1

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

二，数组遍历

1.for循环

let arr = ['a','b','c','d','e'];
for (let i = 0, len = arr.length; i < len; i++) {
console.log(i); // 0 1 2 3 4
console.log(arr[i]); //a b c d e
}

2.for...in循环

for...in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历json

let obj = {
name: '王大锤',
age: '18',
weight: '70kg'
}
for(var key in obj) {
  console.log(key); // name age weight
  console.log(obj[key]); // 王大锤 18 70kg
}
let arr = ['a','b','c','d','e'];
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // a b c d e
}

3.for...of循环

for...of提供了三个新方法：
key()是对键名的遍历；
value()是对键值的遍历；
entries()是对键值对的遍历；

let arr = ['科大讯飞', '政法BG', '前端开发'];
for (let item of arr) {
  console.log(item); // 科大讯飞 政法BG 前端开发
}
// 输出数组索引
for (let item of arr.keys()) {
console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {
  console.log(item + ':' + val); // 0:科大讯飞 1：政法BG 2：前端开发
}

4.forEach()循环

不会生成新数组不会改变原数组

第一个参数为数组元素(必选)，第二个参数为数组元素索引值(可选)，第三个参数为数组本身(可选)

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
console.log(item); // a b c d e
console.log(index); // 0 1 2 3 4
console.log(arr); // ['a','b','c','d','e']
})

5.map循环

会生成新数组，不会改变原数组

第一个参数为数组元素(必选)，第二个参数为数组元素索引值(可选)，第三个参数为数组本身(可选)

var arr = [
{name:'a',age:'18'},
{name:'b',age:'19'},
{name:'c',age:'20'}
];
arr.map(function(item,index) {
  if(item.name == 'b') {
    console.log(index) // 1
  }
})

6.filter()

返回新数组，原数组不会改变

遍历数组，过滤出符合条件的元素并返回一个新数组。

将满足条件的过滤出来放入一个新的数组,不会影响原数组

var arr = [
{ id: 1, text: 'aa', done: true},
{ id: 2, text: 'bb', done:false}
]
console.log(arr.filter(item => item.done))

7.find()

返回新数组，原数组不会改变

返回符合条件的元素

当数组中的元素在测试条件时返回true，之后的值不会再执行函数；如果没有符合条件的元素则返回undefined

注意:：find() 对于空数组，函数是不会执行的。

let arr = [1, 2, 3, 4];
let newArr1 = arr.find(item => {
    return item > 2;
});
let newArr2 = arr.find(item => {
    return item > 5;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr1); // 3  返回第一个符合条件的元素
console.log(newArr2); // undefined  没有符合条件的元素则返回undefine

8.findIndex()

遍历数组，找到第一个符合条件的元素，并返回该元素；否则，返回-1。不会改变原数组


let fruits= ['苹果', '梨子', '桃子', '西瓜', '哈密瓜'];
let vegetables= [
{ id: 1,name: '花椰菜'},
{id: 2,name: '青椒'},
{id: 3,name: '土豆'},
{id: 4,name: '西红柿'}
];
 
// fruits 需要遍历的数组
// item 数组的元素
// index 元素对应的下标
// arr 数组本身
let findIndexFru = fruits.findIndex(function(item, index, arr){
  return index > 5;
});
console.log(findIndexFru); // -1
 
let findIndexVeg = vegetables.findIndex(function(item, index, arr){
  // 返回 遍历子对象
  console.log(item.name);
  // // 返回 遍历索引值
  console.log(index);
  // 返回 所有子对象
  console.log(arr);
  return item.id> 2;
});
console.log(findIndexVeg);

9.indexOf()

从前往后遍历数组，找到第一个符合条件的项，并返回该项。否则返回-1。不会改变原数组

字符串也有此方法，功能类似。


let fruits= ['苹果', '梨子', '桃子', , '西瓜', '哈密瓜'];
 
// fruits 需要遍历的数组
// item 需要搜索的值
// index 数组中的的索引值，可以为负数，代表相对数组末尾的偏移量
let indexOfFru = fruits.indexOf('桃子');
console.log(indexOfFru); // 2

10.lastIndexOf()

如果所有元素都满足判断条件，则返回true，否则为false。

注意：every() 不会对空数组进行检测。

let fruits= ['苹果', '梨子', '桃子', '西瓜', '哈密瓜'];
 
// fruits 需要遍历的数组
// item 需要搜索的值
// index 数组中的的索引值，可以为负数，代表相对数组末尾的偏移量
let lastIndexOfFru = fruits.lastIndexOf('西瓜');
console.log(lastIndexOfFru); // 3

11.every()

将所有元素进行判断，返回一个布尔值，原数组不变。不会对空数组进行检测

有返回值，检测数组里的每一个值是否满足指定条件，如果有一个值不满足，返回false，剩余的值不再进行检测；如果所有的值都满足，则返回true

如果所有元素都满足判断条件，则返回true，否则为false。

注意：every() 不会对空数组进行检测。

// arrObj 需要遍历的数组
// item 遍历出的每一个元素
// index 元素对应的下标
// self 数组本身
// 有返回值，检测数组里的每一个值是否满足指定条件，如果有一个值不满足，返回false，剩余的值不再进行检测；如果所有的值都满足，则返回true
arrObj.every(function(item,index,self) {
  return item < 3;
});
 
let arr = [1, 2, 3, 4];
let newArr1 = arr.every(item => {
    return item > 2;
});
let newArr2 = arr.every(item => {
    return item < 5;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr1); // false

12.some()

将所有元素进行判断, 返回一个布尔值, 原数组不变。

如果存在元素满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false。

判断条件注意和every方法区分。

// arrObj 需要遍历的数组
// item 遍历出的每一个元素
// index 元素对应的下标
// self 数组本身
// 有返回值，检测数组里的每一个值是否满足指定条件，如果有一个值满足，返回true，剩余的值不再进行检测；如果所有的值都不满足，则返回false
arrObj.some(function(item,index,self) {
  return item < 4;
});
 
let arr = [1, 2, 3, 4];
let newArr1 = arr.some(item => {
    return item > 2;
});
let newArr2 = arr.some(item => {
    return item > 5;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr1); // true

13.reduce高阶函数（迭代（累加器））


// arrObj 需要遍历的数组
// total 初始值或计算结束后的返回值
// item 遍历出的每一个元素
// index 元素对应的下标
// self 数组本身
// 有返回值，返回计算结束后的total值
arrObj.reduce(function(total,item,index,self){
 
},初始值);

数组的元素是一个一维数组

把一个数组当另一个数组的元素就是二维数组，多位数组类推。