JavaScript-数组常用方法
🐤如下代码是示例中所需要使用到的变量数据提前贴出来放在这。
let arr = [1, 2, 3, 4, 5];
清空数组
方式一。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
arr = [];
console.log(arr);
</script>
</head>
<body>
</body>
</html>
方式二。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log(arr);
</script>
</head>
<body>
</body>
</html>
方式三。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length)
console.log(arr);
</script>
</head>
<body>
</body>
</html>
将数组转换为字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
let str = arr.toString();
console.log(str);
console.log(typeof str);
</script>
</head>
<body>
</body>
</html>
将数组转换成指定格式字符串
join方法默认情况下如果没有传递参数, 就是调用toString();join方法如果传递了参数, 就会将传递的参数作为元素和元素之间的连接符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
let str = arr.join("+");
console.log(str);
console.log(typeof str);
</script>
</head>
<body>
</body>
</html>
将两个数组拼接为一个数组
🐤注意点: 数组 不能够使用加号 进行拼接, 如果使用 加号 进行拼接会先转换成字符串再拼接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arrOne = [1, 3, 5];
let arrTwo = [2, 4, 6];
let res = arrOne + arrTwo;
console.log(res);
</script>
</head>
<body>
</body>
</html>
不使用加号的方式进行拼接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arrOne = [1, 3, 5];
let arrTwo = [2, 4, 6];
let res = arrOne.concat(arrTwo);
console.log(res);
</script>
</head>
<body>
</body>
</html>
🐤注意点
扩展运算符在解构赋值中 (等号的左边) 表示将剩余的数据打包成一个新的数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arrOne = [1, 3, 5];
let arrTwo = [2, 4, 6];
let [...res] = [arrOne, arrTwo];
console.log(res);
console.log(typeof res);
</script>
</head>
<body>
</body>
</html>
扩展运算符在等号 右边, 那么表示将数组中所有的数据解开, 放到所在的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arrOne = [1, 3, 5];
let arrTwo = [2, 4, 6];
// let res = [1, 3, 5, 2, 4, 6];
let res = [...arrOne, ...arrTwo];
console.log(res);
console.log(typeof res);
</script>
</head>
<body>
</body>
</html>
不会修改原有的数组, 会生成一个新的数组返回给我们。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arrOne = [1, 3, 5];
let arrTwo = [2, 4, 6];
let res = [...arrOne, ...arrTwo];
console.log(res);
console.log(typeof res);
console.log(arrOne);
console.log(arrTwo);
</script>
</head>
<body>
</body>
</html>
对数组中的内容进行反转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
// [1, 2, 3, 4, 5]-[5, 4, 3, 2, 1]
let res = arr.reverse();
console.log(res);
// 注意点: 会修改原有的数组
console.log(arr);
</script>
</head>
<body>
</body>
</html>
截取数组中指定范围内容
slice 方法是包头不包尾 (包含起始位置, 不包含结束的位置) 不会改变原有数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
// 0 1 2 3
// [1, 2, 3, 4, 5]
let res = arr.slice(1, 3)
console.log(res);
console.log(arr);
</script>
</head>
<body>
</body>
</html>
查找元素在数组中的位置
indexOf方法如果找到了指定的元素, 就会返回元素对应的位置indexOf方法如果没有找到指定的元素, 就会返回-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 0 1 2 3 4 5
let arr = [1, 2, 3, 4, 5, 3];
let resOne = arr.indexOf(3);
let resTwo = arr.indexOf(6);
console.log(resOne);
console.log(resTwo);
</script>
</head>
<body>
</body>
</html>
🐤注意点
indexOf 方法默认是 从左至右 的查找, 一旦找到就会立即停止查找。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 0 1 2 3 4 5
let arr = [1, 2, 3, 4, 5, 3];
let res = arr.indexOf(3);
console.log(res);
</script>
</head>
<body>
</body>
</html>
还可以指定开始的查找位置进行查找指定的元素如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 0 1 2 3 4 5
let arr = [1, 2, 3, 4, 5, 3];
// 参数1: 需要查找的元素
// 参数2: 从什么位置开始查找
let res = arr.indexOf(3, 4);
console.log(res);
</script>
</head>
<body>
</body>
</html>
lastIndexOf 方法默认是 从右至左 的查找, 一旦找到就会立即停止查找。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 0 1 2 3 4 5
let arr = [1, 2, 3, 4, 5, 3];
let resOne = arr.lastIndexOf(3);
let resTwo = arr.lastIndexOf(3, 4);
console.log(resOne);
console.log(resTwo);
</script>
</head>
<body>
</body>
</html>
判断数组中是否包含某个元素
我们可以通过 indexOf 和 lastIndexOf 的结果, 判断是否是 -1 即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
let resOne = arr.indexOf(8);
let resTwo = arr.lastIndexOf(2);
console.log(resOne === -1 ? "不存在" : "存在");
console.log(resTwo === -1 ? "不存在" : "存在");
</script>
</head>
<body>
</body>
</html>
也可以通过 includes 函数来进行判断，返回值为 true、false，true 代表存在，false 反之。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5];
let res = arr.includes(4);
console.log(res === true ? "存在" : "不存在");
</script>
</head>
<body>
</body>
</html>
