如何允许数组作为HTML中javascript函数的输入



所以我最近开始学习html/css/js,我知道我的最终目标是能够现实地应用它,而使用IDE只是觉得多余,因为我现在更好奇如何在html文档中以有用的方式应用所有js代码。

话虽如此,我正在研究一些基本的js算法,但我希望能够将问题转换为网页,而不是使用IDE,我目前面临的问题是:

编写一个函数,该函数采用两个或多个数组,并按原始数组的顺序返回一个新的唯一值数组。

例如:

uniteUnique([1,3,2],[5,2,1,4],[2,1](应返回[1,3,2,5,4]

对于我的HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/styles.css">
<title>MFW</title>
</head>
<body>
<p>Click the button to enter values.</p>
<button onclick="myFunction()">Try it</button>
<script src="js/script.js"> 
</script>
</body>
</html>

对于我的js代码:

function myFunction() {
let arr = [];
let arr2 = [];
var args = prompt("Please enter number of arrays");
for(let i=0; i<args; i++){
let realI = Number(i);
let currentArr = prompt('Enter elements for array ' + (realI+1));
arr[i] = currentArr;
}
for(let i=0; i<arr.length; i++){
let currentArr = arr[i];
for(let j=0; j<currentArr.length; j++){

if(arr2.includes(currentArr[j])){
arr2=arr2;
}
else{
arr2.append(currentArr[j]);
}
}
}
alert(arr2);
}

我一直在测试的每一步,以确保警报方法有效但由于某种原因,当我编写最后一个for语句时,警报不会显示我的结果。有人能帮忙吗?此外,如果有一些资源可以让我更好地了解我想完成什么,那将是很棒的。

您可以利用以下函数和语法来显著缩短代码。

休息参数

排列操作员

减少、过滤并包括

uniteUnique函数将接受任意数量的参数,并返回一个具有唯一值的新数组:

function uniteUnique(...arrs) {
return arrs.reduce((a, c) => [...a, ...c.filter(i => !a.includes(i))], []);
}
let r = uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1])
console.log(r)

在您的代码中发现了两个问题。

  1. 您使用了一个名为append的函数。您需要使用push函数JavaScript数组才能将值附加到数组中
  2. 逗号也被推送到第二个数组。您可以通过添加if条件来删除它们

function myFunction() {
let arr = [];
let arr2 = [];
var args = prompt("Please enter number of arrays");
for(let i=0; i<args; i++){
let realI = Number(i);
let currentArr = prompt('Enter elements for array ' + (realI+1));
arr[i] = currentArr;
}
for(let i=0; i<arr.length; i++){
let currentArr = arr[i];

for(let j=0; j<currentArr.length; j++){

if(arr2.includes(currentArr[j])){
arr2=arr2;
}
else{
if (currentArr[j] !== ","){
arr2.push(currentArr[j]);
}

}
}
}
alert(arr2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/styles.css">
<title>MFW</title>
</head>
<body>
<p>Click the button to enter values.</p>
<button onclick="myFunction()">Try it</button>
<script src="js/script.js"> 
</script>
</body>
</html>

相关内容

  • 没有找到相关文章

最新更新