数组的API总结
一、concat()
- 连接两个或多个数组，并返回已连接数组的副本。
// concat合并 数组
var array1 = ["S60", "S70"];
var array2 = ["XC40", "XC50", "XC60"];
var array3 = ["t140", "t250", "Xt360"];
// 把数组 3个数组 合并在一起
// (方法不会更改现有数组，而是返回一个新数组)
let newArray = array1.concat(array2,array3)
console.log('@newArray===',newArray);
二、copyWithin()
- 将数组元素复制到数组中的另一个位置，覆盖现有值
- params1 => 要改变的值的索引
- params2 => 目标值
- 会改变原数组
// copyWithin() 方法将数组元素复制到数组中的另一个位置，覆盖现有值
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// 第一个参数是 要改变的值的索引
// 第二个参数 是目标值
let newArray = fruits.copyWithin(0,3) // 以第四个值为目标 把 数组中的 第一个值改为目标
console.log('@newArray===',newArray);
三、entries()
- 返回带有键值对的 Array 迭代对象
- 通过 Object.entries() 调用
// entries() 方法返回带有键/值对的 Array Iterator 对象
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const arr2 = [{ a: 1 }, { b: 2 }, { c: 3 }];
let newArray = Object.entries(fruits)
console.log('@arr2',Object.entries(arr2))
// [['0', { a: 1 }], ['1', { b: 2 }], ['2', { c: 3 }]]
console.log('@newArray===',newArray);
// [['0', 'Banana'], ['1', 'Orange'], ['2', 'Apple'],['3', 'Mango']]
四、every()
- 如果数组中的所有元素都通过测试 返回
true
const ages = [32, 33, 16, 40];
// 数组 中的 所有item > 15 就返回 true 有一个不符合 就是 false
let flag = ages.every(item => item > 15)
console.log('@flag===',flag);
五、fill()
- 替换数组中的元素
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// 从 0 开始 到 1 结束
fruits.fill("Kiw",0,1); // 把数组中的第一个 用 Kiw 代替
console.log('@fruits',fruits);
六、filter()
- 过滤出 符合某个条件( age > 18 ) 的 值
var ages = [32, 33, 16, 40];
let newArr = ages.filter(item =>{
return item >= 18 // 过滤的条件
})
console.log('@',newArr);
七、find()
- 返回数组中第一个通过测试的元素的值
// 方法返回数组中第一个通过测试的元素的值
// 如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
// 没有找到 就 返回 undefined
var ages = [3, 10, 18, 20];
let val = ages.find(item =>{
return item > 3
})
console.log(val);
八、findIndex()
- 返回 第一个 通过 测试元素的
索引值
var ages = [3, 10, 18, 20];
let val = ages.findIndex(item =>{
return item > 3
})
console.log('@索引值',val);
九、forEach()
- 没有返回值
- forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库
- forEach()允许callback更改原始数组的元素。map()返回新的数组。
let arr =[1,2,3,4,5,6]
arr.forEach((value, key) => {
// 回调函数中直接修改arr的值
return arr[key] = value * value;
});
console.log('@arr',arr)
// [1,4,9,16,25,36]
十、from()
- ,Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。可以将两种对象转换成数组
// 1.从 String 生成数组
let arr1 = Array.from('foo');
console.log('@arr1',arr1); // [ "f", "o", "o" ]
// 2.从 Set 生成数组
let arr2 = Array.from(['foo', 'bar', 'baz', 'foo'])
console.log('@arr2',arr2); // ['foo', 'bar', 'baz', 'foo']
// 3.从 Map 生成数组
let arr3 = Array.from([[1, 2], [2, 4], [4, 8]])
console.log('@arr3',arr3); // [[1, 2], [2, 4], [4, 8]]
// 4.从map 生成数组
let arr4 = new Map([['1', 'a'], ['2', 'b']])
console.log(Array.from(arr4.values())); // 获取 数组中的 value值(数组item 中 的 第二项的值) ['a', 'b']
console.log(Array.from(arr4.keys())); // 获取 数组中的 key值(数组item 中 的 第一项的值) ['1', '2']
// 5.从类数组对象（arguments）生成数组
function f() {
return Array.from(arguments);
}
console.log('@类数组对象',f(1, 2, 3)); // [1, 2, 3]
// 6.在 Array.from 中使用箭头函数
let arr6 = Array.from([1,2,3],x => x + x) // 每一项 加本身
console.log('@arr6',arr6); // [2, 4, 6]
let arr7 = Array.from({length:5},(v,i) => i) // i 是 长度为5的索引值
console.log('@arr7',arr7); // [0, 1, 2, 3, 4]
// 7.序列生成器 (指定范围)
const range = (start, stop, step) => Array.from(
{ length: (stop - start) / step + 1},
(_,i) => start + (i * step)
);
range(0, 4, 1); // 生成 0-4 的序列 每一步 加一
console.log('@range',range(0, 4, 1)); // [0, 1, 2, 3, 4]
let zimu = range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
console.log('@zimu',zimu); // 生成 26 个字母
// 8.数组去重合并
function combine(){
let arr = [].concat.apply([],arguments) // 没有去重的新数组
return Array.from(new Set(arr)) // 返回去重后的数组 （Array.from() 是合并）
}
var m = [1,2,3,2], n = [2,3,3,4]
console.log('@去重后的数组并且合并',combine(m,n));
// 9.用set 实现数组去重
let array = [1,1,1,4,5,6,3]
console.log('@set去重',[...new Set(array)]); // [1, 4, 5, 6, 3]
// 10. 用 map 来实现数组分组
let arr10 = [
{id:1,groupCode:1,name:'test01'},
{id:2,groupCode:1,name:'test02'},
{id:3,groupCode:2,name:'test03'},
{id:4,groupCode:3,name:'test04'},
{id:5,groupCode:3,name:'test05'},
{id:6,groupCode:5,name:'test06'},
]
function groupFn(arr){
let map = {}
arr.map((item) =>{
if(!map[item.groupCode]){ // key值 不一样 重新创建一个 array
map[item.groupCode] = [item]
}else {
map[item.groupCode].push(item) // key 值一样 就 push 进当前 item.groupCode
}
})
console.log('@map',map); // 对象中包着的那几个数组
let resData = [];
Object.keys(map).forEach((key) => {
console.log('@key',key);
resData.push({
groupCode: key,
data: map[key],
});
});
console.log('@resData',resData);
// 0: {groupCode: '1', data: Array(2)}
// 1: {groupCode: '2', data: Array(1)}
// 2: {groupCode: '3', data: Array(2)}
// 3: {groupCode: '5', data: Array(1)}
}
groupFn(arr10)
十一、includes()
-
方法确定数组是否包含指定的元素。
-
arr 是 区域 （’ a '）a 是目标值
-
在 arr 中寻找 目标 是 ‘a’ 的 选项，如果找到了 返回
true -
参数1： 目标值 , 参数2: 从 数组中 的
哪个索引值开始寻找
const arr = ['小明', 'a', 'b', 'c']
arr.includes('a')//true
arr.includes('小明')//true
arr.includes('a', 1)//true
arr.includes('a', 2)//false 此时a的下标是1，从2开始查找往后就没有a这个值所以返回false
arr.includes('小明', 1)//false
arr.includes('a', -1)//true index传入负数则会查找整个数组
arr.includes('a', 100)//true index传入大于数组长度的数值直接返回false
十二、indexOf()
- 方法在数组中搜索指定项目，并返回其位置。
- 参数1：value 目标值 找到了 返回 值所在的
索引值,没有找到 返回 -1 - 参数2： index:可选参数，开始查找的下标,默认从0开始查找,如果匹配到就返回值所在的位置，没有匹配到返回-1。
const arr = ['小明', 'a', 'b', 'c']
arr.indexOf('b')//2
arr.indexOf('小美')//-1
arr.indexOf('小明')//0
arr.indexOf('a', 1)//1
arr.indexOf('小明', 2)//-1 此时小明的下标是0，从2开始查找往后就没有小明这个值所以返回-1
arr.indexOf('小明', 0)//0
arr.indexOf('c', -1)//3 index传入负数则会查找整个数组
arr.indexOf('a', 100)//true index传入大于数组长度的数值直接返回false
//也可以匹配字符串
const value="青少年都是祖国的花朵！"
value.indexOf('花朵')//8 记录第一个字符出现的位置
value.indexOf('鸟')//-1
value.indexOf('都是')//3
十三、isArray()
- isArray() 方法确定对象是否为数组。
// Array.isArray用于检测一个对象是否为数组
let arr1 = Array.isArray([]) // true
let arr2 = Array.isArray([1]) // true
let arr3 = Array.isArray(new Array()) // true
let arr4 = Array.isArray() // false
let arr5 = Array.isArray({}) // false
let arr6 = Array.isArray(null) // false
let arr7 = Array.isArray(undefined) // false
let arr8 = Array.isArray(17) // false
let arr9 = Array.isArray('Array') // false
console.log(arr1);
十四、join()
- 方法将数组作为字符串返回
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join()); // Banana,Orange,Apple,Mango
十五、keys()
- 创建一个 Array Iterator 对象，只包含对象的键，然后遍历每个键：
- 获取 对象中 每个的
key值 - 返回值 是 一个数组
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log('@@@',Object.keys(object1)); // ['a', 'b', 'c']
十六、lastIndexOf()
- // 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
var str = 'xxaxxaxxax';
var endA2 = str.lastIndexOf('a',7) //查找的是字符串前7位之内的最后一个a
console.log(endA2);
十七、map()
- map()方法会得到一个新的数组并返回。
let arr =[1,2,3,4,5,6]
let list = arr.map(value => {
return value * value;
});
console.log('@list',list)
十八、pop()
- 移除数组中最后一个元素（尾部删除）
// 方法移除数组的最后一个元素，并返回该元素。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let arr = fruits.pop()
console.log('@arr',arr); // 返回当前删除的元素 Mango
console.log('@fruits11111',fruits); // 删除后的数组 ['Banana', 'Orange', 'Apple']
十九、push()
- 方法向数组末尾添加新项目，并返回新长度。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push('张三')
console.log('@fruits',fruits); // ['Banana', 'Orange', 'Apple', 'Mango', '张三']
二十、reduce()
- reduce函数可以接受接受两个参数，一个为函数，一个为初始值，
//如下0就是传入的一个初始值
// prevalue 是 初始值
// item 是 数组中的 每一项
//在回调函数中,可以接受四个参数，第一个参数第一次的值为传入的初始值即0，
//之后每次循环的值为每次return的值
var test = [1, 2, 3, 4, 5];
var total = 0;
total = test.reduce((prevalue, item) => {
return item + prevalue;
}, 0);
console.log(total); //输出结果为15
二十一、reduceRight()
- 从数组右边往左边做累加
var arr = [0,1,2,3,4];
arr.reduceRight(function (preValue,curValue,index,array) {
return preValue + curValue;
}); // 10
二十二、shift()
- 方法删除数组的第一项
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
console.log('@fruits',fruits); // ['Orange', 'Apple', 'Mango']
二十三、slice()
- 方法以新的数组对象，返回数组中被选中的元素。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); // 截取 数组 索引 从 1 到 3 的数据
console.log('@citrus',citrus); // ['Orange', 'Lemon']
二十四、some()
- 方法检查数组中的任何元素是否通过测试
- 只要有一个 元素 符合就 返回true
var ages = [3, 10, 18, 20];
let flag = ages.some(item =>{
return item > 18
})
console.log('@flag',flag); // 只有有一个 符合条件就返回 true
二十五、sort()
- a-b 从小到大
- b-a 从大到 小
// 1.不传参数，将不会按照数值大小排序，按照字符编码的顺序进行排序；
var arr = ['General','Tom','Bob','John','Army'];
var resArr = arr.sort();
console.log(resArr);//输出 ["Army", "Bob", "General", "John", "Tom"]
var arr2 = [30,10,111,35,1899,50,45];
var resArr2 = arr2.sort(); // 按数组的第一位排序
console.log(resArr2);//输出 [10, 111, 1899, 30, 35, 45, 50]
// 2.传入参数，实现升序，降序；
var arr3 = [30,10,111,35,1899,50,45];
arr3.sort(function(a,b){
return a - b; // 升序
})
console.log(arr3);//输出 [10, 30, 35, 45, 50, 111, 1899]
var arr4 = [30,10,111,35,1899,50,45];
arr4.sort(function(a,b){
return b - a; // 降序
})
console.log(arr4);//输出 [1899, 111, 50, 45, 35, 30, 10]
// 3.根据数组中的对象的某个属性值排序；
var arr5 = [{id:10},{id:5},{id:6},{id:9},{id:2},{id:3}];
arr5.sort(function(a,b){
return a.id - b.id
})
console.log(arr5); // 按照 对象的 id 安排返回一个 数组对象
// 4.根据数组中的对象的多个属性值排序，多条件排序；
var arr6 = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
arr6.sort(function(a,b){
if(a.id === b.id){//如果id相同，按照age的降序
return b.age - a.age // 年龄大的在前面（b-a 从大到小）
}else{
return a.id - b.id
}
})
二十六、splice()
- 改变原数组
// 1.删除功能
var arr = ["aa","bb","cc","dd"]; //首先我们var一个数组
var arr1 = arr.splice(0,3); //然后我们去用splice的删除功能选取下标从0到3的内容，也就是前三个内容
console.log(arr1); //["aa","bb","cc"] 打印出我们选中的内容
console.log(arr); //["dd"] 打印出了截取完之后剩下的内容
// 2. 插入功能
var arr = ["aa","bb","cc","dd"]; //先给个数组
var arr1 = arr.splice(1,0,"ff","pp"); //然后我们在下标为1,1之后的有0个删除的，然后去插入"ff"和"pp"
console.log(arr1); // [] //然后打印我们要插入的内容，它里边什么都没，然后我们去打印arr数组看看是不是已经插入进去了
console.log(arr); //["aa","ff","pp","bb","cc","dd"] 已经实现了
// 3.替换功能
var arr = ["aa","bb","cc","dd"]; //给一个数组
var arr1 = arr.splice(1,2,"ff","pp"); //我们把下标为1，1后面的两个内容(包括1)截取删除然后替换成"ff","pp"
console.log(arr1); //["bb","cc"] //打印出我们截取出来的内容
console.log(arr); //["aa", "ff", "pp", "dd"] //然后打印出我们替换后的数组
二十七、toString()
- 转化为字符串、
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.toString();
console.log('@',x); // 数组转化为字符串
二十八、unshift()
- 数组首位添加
- 不改变原数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift('99');
console.log('@',fruits);
// ['99', 'Banana', 'Orange', 'Apple', 'Mango']
二十九、valueOf()
- valueof()方法：它就默认将对象转换为表示它的原始值。
// 数组类型
var arr = [1,2,3]
console.log(arr.valueOf()); // [1, 2, 3]
console.log(typeof arr.valueOf()); // object
console.log(arr.valueOf() instanceof Array); // true
console.log(arr.toString()); // 1,2,3
console.log(typeof arr.toString()); // string
// 原始对象
var obj ={
a:1
}
console.log('===========');
console.log(obj.valueOf()); // {a: 1}
console.log(typeof obj.valueOf()); // object
console.log(obj.valueOf() instanceof Object); // true
console.log(obj.toString()); // [object Object]
console.log(typeof obj.toString()); // string
// 日期类型
var date = new Date()
console.log('============'); // 1647750741630
console.log(date.valueOf()); // number
console.log(typeof date.valueOf()); // Sun Mar 20 2022 12:32:21 GMT+0800 (GMT+08:00)
console.log(date.toString()); // string
// 正则
var reg = new RegExp(/\d/)
console.log('=============');
console.log(reg.valueOf()); // /\d/
console.log(typeof reg.valueOf()); // object
console.log(reg.toString()); // /\d/
console.log(typeof reg.toString()); // string