【 JavaScript 】数组方法

最新推荐文章于 2023-08-10 16:48:56 发布

zwj、

最新推荐文章于 2023-08-10 16:48:56 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/Twisted_/article/details/117125719

版权

在这里插入图片描述

🎈 常用方法

concat

会返回一个新的数组
不传参数，返回当前数组副本
传递一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中
传递非数组参数，这些参数就会被直接添加到结果数组的末尾

const number = [1, 2, 3];
const number1 = [4, 5]
const number2 = [6, 7, 8]
// 不传递参数
console.log(number.concat()); // [ 1, 2, 3 ]
// 传递数组参数
console.log(number.concat(number1, number2)); // [ 1, 2, 3, 4, 5, 6, 7, 8]
// 传递非数组参数
console.log(number.concat('xixi')); // [ 1, 2, 3, 'xixi' ]

slice

slice(start , end)
返回新数组
不影响原数组
截取元素
不包括end位置元素
不带参数直接复制数组

const arrays = [1, 2, 3, 4, 5, 6]

// 不带参数 直接复制数组
console.log(arrays.slice());// [ 1, 2, 3, 4, 5, 6 ]

// 带参数(无法取值到end位置)
console.log(arrays.slice(1, 3));// [ 2, 3 ]

// 不影响原数组
console.log(arrays); // [ 1, 2, 3, 4, 5, 6 ]

splice

splice(start,deleteCount,item…)
删除/添加元素
对原数组有影响
参数详解 :
- start 需要操作元素的起始位置
- deleteCount 需要删除元素的个数
- item 需要添加的元素
返回删除/添加操作之后的数组
原数组会去掉/添加进行操作之后的数组


const arrays = [1, 2, 3, 4, 5, 6];

// 删除 (删除元素的初始位置,需要删除元素的个数)
console.log(arrays.splice(1, 1)); // [ 2 ]
console.log(arrays); // [ 1, 3, 4, 5, 6 ]

// 直接删除元素 1 
console.log(arrays.splice(1)); // [ 2, 3, 4, 5, 6 ]

// 添加元素 (添加元素的位置,0,需要添加的元素)
arrays.splice(1, 0, 11, 111, 1111);
console.log(arrays); // [ 1, 11, 111, 1111, 2,  3,  4,  5, 6 ]

indexOf

返回查找到的第一个元素的索引号
如果没有查找到就返回 -1
从数组的开头（位置0）开始向后查找

const number = [1, 2, 5, 1, 5, 6];

console.log(number.indexOf(1)); // 0
console.log(number.indexOf(100)); // -1

lastIndexOf

lastIndexOf(item,start)
返回指定的字符在字符串最后出现的位置
如果没有找到返回 -1
两个参数
- ( 需查找的字符 , 从哪个下标开始查找)
- 默认从最后一个字符处开始查找
  - item 想要查找的元素（必选）
  - start 设置起始位置（选填）
  - start 需要 + 1 否则就会直接返回start位置的元素

const number = [1, 2, 5, 1, 5, 6];
console.log(number.lastIndexOf(5)); // 4
console.log(number.lastIndexOf(100)); // -1

toString

返回一个字符串。
进制转换

var num = 16;
// 数字转字符串
var a = num.toString();
// 进制转换
var b = num.toString(2);
var c = num.toString(8);
var d = num.toString(16);
console.log('原始数据:' + a);
console.log('二进制:' + b);
console.log('八进制:' + c);
console.log('十六进制:' + d);
/*
原始数据: 16
二进制: 10000
八进制: 20
十六进制: 10
*/

includes

判断一个数组是否包含一个指定的值
如果包含则返回 true
否则返回false

const numbers = [1, 2, 3, 4, 5, 6]
console.log(numbers.includes(5)); // true
console.log(numbers.includes(555)); // false

sort

数组的元素进行排序，并返回数组
元素按照转换为的字符串的各个字符的Unicode位点进行排序。
需要设置回调函数来进行升序或者降序
- 十位数的十位会比一些各位数小所以可能十位数的大小无法精确的进行比较

const number = [9, 5, 8, 2, 16, 3, 4, 1, 7]
// 升序
console.log(number.sort(function (x, y) { return x - y }));
[
    1, 2, 3,  4, 5,
    7, 8, 9, 16
]
// 降序
console.log(number.sort(function (x, y) { return y - x }));
[
    16, 9, 8, 7, 5,
     4, 3, 2, 1
]

reverse

将数组中元素的位置颠倒，并返回该数组。
数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。
该方法会改变原数组

const number = [5, 4, 3, 2, 1]
console.log(number.reverse());//[ 1, 2, 3, 4, 5 ]

join

将一个数组 / 类数组对象的所有元素连接成一个字符串并返回这个字符串。
如果数组只有一个项目，那么将返回该项目而不使用分隔符。
自己设置分隔符

const number = [1, 2, 3, 4, 5]
console.log(number.join('-')); // 1-2-3-4-5
console.log(number.join('')); // 12345

find

返回数组中满足提供的测试函数的第一个元素的值
否则返回 undefined。

const number = [1, 2, 3, 4, 5]
var result = number.find(function (num) {
    return num > 1
})
console.log(result); // 2

findIndex

返回数组中满足提供的测试函数的第一个元素的索引。
若没有找到对应元素则返回-1。

const number = [1, 2, 3, 4, 5]
var result = number.findIndex(function (num) {
    return num > 1
})
console.log(result); // 1

🚀 堆栈方法

var arrays = [1, 3, 5, 7, 9, 15];
// push 尾部插入元素
arrays.push('尾部插入元素');
console.log(arrays);// [ 1, 3, 5, 7, 9, 15, '尾部插入元素' ]

// pop 尾部取出元素
console.log(arrays.pop()); // 尾部插入元素
console.log(arrays);

// unshift 头部插入元素
arrays.unshift('头部插入元素')
console.log(arrays); // [ '头部插入元素', 1, 3, 5, 7, 9, 15 ]

// shift 头部取出元素
console.log(arrays.shift()) // '头部插入元素'
console.log(arrays); // [ 1, 3, 5, 7, 9, 15 ]

🕵️ 迭代方法

forEach()
		没有返回值，与for循环用法基本一致
every()
		测试数组的所有元素是否都符合指定函数的条件
		只要有有一个元素不符合，返回的都会是false
some()
		和every()方法类似，
		不同的是，some()方法只要遇到符合条件的就会返回true，不符合则返回false。
filter()
		将满足条件的元素返回到新数组中
map()
		每次调用都会记录上一次的结果 
		返回每次函数调用的结果组成一个新数组

在这5个数组中，前三个不会生成新的数组，而后两个会生成一个新的数组。
以上的方法都不会修改数组中包含的值。

forEach方法

不改变原数组
forEach 解决 for 循环问题

const colors = ["red", "pink", "green"];

// ES6 以前
for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

// ES6 迭代器函数
colors.forEach(function (color) {
    console.log(color);
});

// 将函数抽离出来
function getColor(color) {
    console.log(color);
}
// 调用函数
colors.forEach(getColor);

filter方法

过滤方法
返回满足条件的数据
过滤掉不满足条件的数据
将过滤后的数组返回
- 返回 true 表示该元素通过测试，保留该元素
- false 则不保留。
返回一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

const arrays = [1, 2, 3, 4, 5, 6, 7, 8]
var results = arrays.filter(function (array) {
    return array > 5;
})
console.log(results);// [ 6, 7, 8 ]

map方法

创建一个新数组
其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
一个由原数组每个元素执行回调函数的结果组成的新数组。

// 将数组A中的值以双倍的形式放到B数组
var numbers = [1, 2, 3];

// ES6 以前
const doubleNumbers = [];
for (let i = 0; i < numbers.length; i++) {
    doubleNumbers.push(numbers[i] * 2);
}
console.log(doubleNumbers);
// [ 2, 4, 6 ]

// ES6
var double = numbers.map(function (number) {
    return number * 2;
})
console.log(double);
// [ 2, 4, 6 ]

// 打印cars对象里面的price
var cars = [
    { model: "BMW", price: "cheap" },
    { model: "QQ", price: "expensive" }
];

var price = cars.map(function (car) {
    return car.price;
})
console.log(price);
// [ 'cheap', 'expensive' ]

every方法

全真为真 true
一假即假 false
第一个是假的就不会继续执行后查找
- 通过迭代器函数 return 的进行 && 取值
- true && true ====> true
- true && false ====> false

const computers = [
    { name: "MAC", ram: "16" },
    { name: "IBM", ram: "32" },
    { name: "ABM", ram: "64" }
];
computers.every(function (computer) {
    console.log(computer.name, computer.ram);
    return computer.ram > 15;
})
/*
MAC 16
IBM 32
ABM 64
*/

some方法

一真即真 true
当查找到一个为真就返回真
通过迭代器函数 return 的进行 || 取值

const computers = [
    { name: "MAC", ram: "16" },
    { name: "IBM", ram: "32" },
    { name: "ABM", ram: "64" }
];

computers.some(function (computer) {
    console.log(computer.name, computer.ram);
    return computer.ram > 15;
})
/*
MAC 16
*/

参数详解

五个迭代方法的参数基本一致

var newArray = arr.xxxx(callback(element , index , array){
	// coding
} , thisArg )
callback()
	回调函数接收三个传值
		元素的值
		元素的索引
		被遍历的数组本身
thisArg 
	执行callback时，用于this的值。

zwj、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【 JavaScript 】数组方法

通用方法concat( )会返回一个新的数组不传参数，返回当前数组副本传递一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中传递非数组参数，这些参数就会被直接添加到结果数组的末尾const number = [1, 2, 3];const number1 = [4, 5]const number2 = [6, 7, 8]// 不传递参数console.log(number.concat()); // [ 1, 2, 3 ]// 传递数组参数console.log(nu
复制链接

扫一扫