如何使用 filter 方法从 JavaScript 数组中获取某些元素？
How do I use the filter method to get certain elements from a JavaScript array?
我得到一个错误，我的过滤器函数不是一个函数，我尝试将我的数组更改为一个字符串，因为 well.Ultimately 我试图从原始数组创建三个不同的数组，一百颗星，名为 starElements.
var starElements = document.querySelectorAll("[value='basicStar']");console.log(starElements);/starElements.toString();console.log(starElements)/;
starElements.filter(function (value, index, arr){return index < 33});console.log(starElements);
var xs;
var ys;
var setBasicStars;
var i;
function functionTwo() {
setTimeout(function() {
document.querySelector("#tailOne").setAttribute("transform-origin", "center"); document.querySelector("#tailOne").setAttribute("transform-box", "fill-box"); document.querySelector("#tailOne").setAttribute("transform", "rotate(45"); document.querySelector("#tailOne").style.transition = "transform 3s"; document.querySelector("#tailOne").style.visibility = "visible"; document.querySelector("#tailOne").setAttribute("transform", "translate(140 1800) scale(1.2)")
}, 1000);
setTimeout(function() { document.querySelector("#tailTwo").setAttribute("transform-origin", "center"); document.querySelector("#tailTwo").setAttribute("transform-box", "fill-box");
document.querySelector("#tailTwo").setAttribute("transform", "rotate(45");
document.querySelector("#tailTwo").style.transition = "transform 3s";
document.querySelector("#tailTwo").style.visibility = "visible";
document.querySelector("#tailTwo").setAttribute("transform", "translate(140 1800) scale(1.2)")
}, 2000);
setTimeout(function() {
document.querySelector("#tailThree").setAttribute("transform-origin", "center");
document.querySelector("#tailThree").setAttribute("transform-box", "fill-box");
document.querySelector("#tailThree").setAttribute("transform", "rotate(45");
document.querySelector("#tailThree").style.transition = "transform 3s";
document.querySelector("#tailThree").style.visibility = "visible";
document.querySelector("#tailThree").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 2000);
setTimeout(function() {
document.querySelector("#tailFour").setAttribute("transform-origin", "center");
document.querySelector("#tailFour").setAttribute("transform-box", "fill-box");
document.querySelector("#tailFour").setAttribute("transform", "rotate(45");
document.querySelector("#tailFour").style.transition = "transform 3s";
document.querySelector("#tailFour").style.visibility = "visible";
document.querySelector("#tailFour").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 3000);
setTimeout(function() {
document.querySelector("#tailFive").setAttribute("transform-origin", "center");
document.querySelector("#tailFive").setAttribute("transform-box", "fill-box");
document.querySelector("#tailFive").setAttribute("transform", "rotate(45");
document.querySelector("#tailFive").style.transition = "transform 3s";
document.querySelector("#tailFive").style.visibility = "visible";
document.querySelector("#tailFive").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 1000);
setTimeout(function() {
document.querySelector("#tailSix").setAttribute("transform-origin", "center");
document.querySelector("#tailSix").setAttribute("transform-box", "fill-box");
document.querySelector("#tailSix").setAttribute("transform", "rotate(45");
document.querySelector("#tailSix").style.transition = "transform 3s";
document.querySelector("#tailSix").style.visibility = "visible";
document.querySelector("#tailSix").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 3500);
setTimeout(function() {
document.querySelector("#tailSeven").setAttribute("transform-origin", "center");
document.querySelector("#tailSeven").setAttribute("transform-box", "fill-box");
document.querySelector("#tailSeven").setAttribute("transform", "rotate(45");
document.querySelector("#tailSeven").style.transition = "transform 3s";
document.querySelector("#tailSeven").style.visibility = "visible";
document.querySelector("#tailSeven").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 1000);
setTimeout(function() {
document.querySelector("#tailEight").setAttribute("transform-origin", "center");
document.querySelector("#tailEight").setAttribute("transform-box", "fill-box");
document.querySelector("#tailEight").setAttribute("transform", "rotate(45");
document.querySelector("#tailEight").style.transition = "transform 3s";
document.querySelector("#tailEight").style.visibility = "visible";
document.querySelector("#tailEight").setAttribute("transform", "translate(-40 1800) scale(1.2)")
}, 1000);
}
function setStars() {
document.querySelector("#button01").innerHTML = "visible warp";
document.querySelector("#button01").setAttribute("onclick", "functionTwo()")
setInterval(function() {
xs = Math.floor(Math.random() * 2000);
ys = Math.floor(Math.random() * 2000);
}, 1000);
var twoSpade = 100;
var threeSpade = "helloworld";
setBasicStars = document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');
for (i = 0; i < twoSpade; i++);
document.querySelector("#Layer_1").appendChild(setBasicStars);
setBasicStars.setAttribute("class", "cls-2");
setBasicStars.style.position = "absolute";
setBasicStars.setAttribute("rx", "12");
setBasicStars.setAttribute("ry", "15");
setBasicStars.setAttribute("cx", xs);
setBasicStars.setAttribute("cy", ys);
}
var basicStarList01;
var basicStarList02;
var basicStarList03;
setTimeout(function() {
var starElements = document.querySelectorAll("[value='basicStar']");
console.log(starElements); /*starElements.toString();console.log(starElements)*/ ;
starElements.filter(function(value, index, arr) {
return index < 33
});
console.log(basicStarList01);
}, 12000);
(function(count) {
if (count < 100) {
setStars();
var caller = arguments.callee;
window.setTimeout(function() {
setBasicStars.setAttribute("value", "basicStar");
caller(count + 1);
}, 100);
}
})(0);
<html>
<head>
<meta>
</meata>
<title>Warp 01</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="button01" onclick="setStars()">Click to set stars</button>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1346.11 2001.68"><defs><style>.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#fff;}</style></defs><rect id="IV" class="cls-1" x="669.52" y="997.1" width="676.09" height="1002.72"/><rect id="III" class="cls-1" x="3.22" y="998.46" width="676.09" height="1002.72"/><rect id="I" class="cls-1" x="666.8" y="0.5" width="676.09" height="1002.72"/><rect id="II" class="cls-1" x="0.5" y="1.86" width="676.09" height="1002.72"/><ellipse id="basicStar01" class="cls-2" cx="1008.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar02" class="cls-2" cx="30.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar03" class="cls-2" cx="300.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar04" class="cls-2" cx="700.56" cy="500.71" rx="9.24" ry="11.96"/><g style="visibility:hidden" id="tailThree"><ellipse class="cls-2" cx="1088.33" cy="1348.3" rx="32.61" ry="40.76" transform="translate(-308.77 2373.24) rotate(-87.35)"/><path class="cls-2" d="M1118,1014.81l-9.38-40.23c-1.76-102.43-60.82,364.78-60.82,364.78-.46,9.89,14.09-20.25,24-19.8l40.27,1.86c11,11.32,13,45.29,20.52,24C1132.53,1345.44,1127.85,1015.26,1118,1014.81Z"/></g><g style="visibility:hidden" id="tailTwo"><ellipse class="cls-2" cx="1200.62" cy="630.09" rx="21.74" ry="27.17" transform="translate(563.24 1826.86) rotate(-89.65)"/><path class="cls-2" d="M1211.45,407.15l-7.33-26.55c-3.9-68.18-30.76,244.62-30.76,244.62,0,6.6,8.84-13.87,15.44-13.83l26.88.17c7.64,7.24,9.9,29.82,14.31,15.45C1230,627,1218.05,407.19,1211.45,407.15Z"/></g><g style="visibility:hidden" id="tailFour"><ellipse class="cls-2" cx="835.52" cy="1525.46" rx="32.61" ry="40.76" transform="translate(-726.88 2289.67) rotate(-87.35)"/><path class="cls-2" d="M865.15,1192l-9.38-40.23C854,1049.3,795,1516.51,795,1516.51c-.46,9.89,14.09-20.25,24-19.79l40.28,1.86c11,11.32,13,45.29,20.52,24C879.72,1522.59,875,1192.42,865.15,1192Z"/></g><g style="visibility:hidden" id="tailOne"><ellipse class="cls-2" cx="1303.24" cy="679.08" rx="27.17" ry="21.74" transform="translate(-43.14 90.14) rotate(-3.9)"/><path class="cls-2" d="M1297.53,455.94,1288.26,430c-8.94-67.71-12.57,246.23-12.57,246.23.44,6.58,7.79-14.49,14.37-14.94l26.82-1.82c8.15,6.66,12.08,29,15.41,14.34C1332.29,673.82,1304.11,455.5,1297.53,455.94Z"/></g><g style="visibility:hidden" id="tailSix"><ellipse class="cls-2" cx="301.2" cy="1367.28" rx="40.76" ry="32.61" transform="translate(-62.79 15.36) rotate(-2.65)"/><path class="cls-2" d="M271.57,1033.78,281,993.55c1.75-102.43,60.82,364.79,60.82,364.79.45,9.88-14.09-20.26-24-19.8l-40.28,1.86c-11,11.32-13,45.29-20.51,24C257,1364.41,261.68,1034.24,271.57,1033.78Z"/></g><g style="visibility:hidden" id="tailSeven"><ellipse class="cls-2" cx="188.9" cy="649.07" rx="27.17" ry="21.74" transform="translate(-3.94 1.16) rotate(-0.35)"/><path class="cls-2" d="M178.08,426.13l7.32-26.55c3.91-68.18,30.77,244.62,30.77,244.62,0,6.6-8.85-13.87-15.45-13.83l-26.88.17c-7.63,7.24-9.9,29.82-14.3,15.44C159.54,646,171.48,426.17,178.08,426.13Z"/></g><g style="visibility:hidden" id="tailFive"><ellipse class="cls-2" cx="554.01" cy="1544.43" rx="40.76" ry="32.61" transform="translate(-70.7 27.22) rotate(-2.65)"/><path class="cls-2" d="M524.38,1210.94l9.38-40.23c1.75-102.43,60.82,364.78,60.82,364.78.46,9.89-14.09-20.25-24-19.79l-40.28,1.86c-11,11.32-13,45.29-20.51,24C509.81,1541.57,514.49,1211.4,524.38,1210.94Z"/></g><g style="visibility:hidden" id="tailEight"><ellipse class="cls-2" cx="86.29" cy="698.05" rx="21.74" ry="27.17" transform="translate(-616.02 736.7) rotate(-86.1)"/><path class="cls-2" d="M92,474.92,101.26,449c8.95-67.71,12.58,246.22,12.58,246.22-.45,6.59-7.79-14.48-14.38-14.93l-26.82-1.83c-8.15,6.67-12.08,29-15.41,14.35C57.23,692.8,85.41,474.47,92,474.92Z"/></g></svg>
<script>
</script>
</body>
</html>
.querySelectorAll returns 一个 HTMLCollection，它不是数组 :(
可以用Array.from转成数组：
const elements = document.querySelectorAll("something");
const elementArray = Array.from(elements);
// elementArray is now an array of elements :)
我得到一个错误，我的过滤器函数不是一个函数，我尝试将我的数组更改为一个字符串，因为 well.Ultimately 我试图从原始数组创建三个不同的数组，一百颗星，名为 starElements.
var starElements = document.querySelectorAll("[value='basicStar']");console.log(starElements);/starElements.toString();console.log(starElements)/; starElements.filter(function (value, index, arr){return index < 33});console.log(starElements);
var xs;
var ys;
var setBasicStars;
var i;
function functionTwo() {
setTimeout(function() {
document.querySelector("#tailOne").setAttribute("transform-origin", "center"); document.querySelector("#tailOne").setAttribute("transform-box", "fill-box"); document.querySelector("#tailOne").setAttribute("transform", "rotate(45"); document.querySelector("#tailOne").style.transition = "transform 3s"; document.querySelector("#tailOne").style.visibility = "visible"; document.querySelector("#tailOne").setAttribute("transform", "translate(140 1800) scale(1.2)")
}, 1000);
setTimeout(function() { document.querySelector("#tailTwo").setAttribute("transform-origin", "center"); document.querySelector("#tailTwo").setAttribute("transform-box", "fill-box");
document.querySelector("#tailTwo").setAttribute("transform", "rotate(45");
document.querySelector("#tailTwo").style.transition = "transform 3s";
document.querySelector("#tailTwo").style.visibility = "visible";
document.querySelector("#tailTwo").setAttribute("transform", "translate(140 1800) scale(1.2)")
}, 2000);
setTimeout(function() {
document.querySelector("#tailThree").setAttribute("transform-origin", "center");
document.querySelector("#tailThree").setAttribute("transform-box", "fill-box");
document.querySelector("#tailThree").setAttribute("transform", "rotate(45");
document.querySelector("#tailThree").style.transition = "transform 3s";
document.querySelector("#tailThree").style.visibility = "visible";
document.querySelector("#tailThree").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 2000);
setTimeout(function() {
document.querySelector("#tailFour").setAttribute("transform-origin", "center");
document.querySelector("#tailFour").setAttribute("transform-box", "fill-box");
document.querySelector("#tailFour").setAttribute("transform", "rotate(45");
document.querySelector("#tailFour").style.transition = "transform 3s";
document.querySelector("#tailFour").style.visibility = "visible";
document.querySelector("#tailFour").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 3000);
setTimeout(function() {
document.querySelector("#tailFive").setAttribute("transform-origin", "center");
document.querySelector("#tailFive").setAttribute("transform-box", "fill-box");
document.querySelector("#tailFive").setAttribute("transform", "rotate(45");
document.querySelector("#tailFive").style.transition = "transform 3s";
document.querySelector("#tailFive").style.visibility = "visible";
document.querySelector("#tailFive").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 1000);
setTimeout(function() {
document.querySelector("#tailSix").setAttribute("transform-origin", "center");
document.querySelector("#tailSix").setAttribute("transform-box", "fill-box");
document.querySelector("#tailSix").setAttribute("transform", "rotate(45");
document.querySelector("#tailSix").style.transition = "transform 3s";
document.querySelector("#tailSix").style.visibility = "visible";
document.querySelector("#tailSix").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 3500);
setTimeout(function() {
document.querySelector("#tailSeven").setAttribute("transform-origin", "center");
document.querySelector("#tailSeven").setAttribute("transform-box", "fill-box");
document.querySelector("#tailSeven").setAttribute("transform", "rotate(45");
document.querySelector("#tailSeven").style.transition = "transform 3s";
document.querySelector("#tailSeven").style.visibility = "visible";
document.querySelector("#tailSeven").setAttribute("transform", "translate(-400 1800) scale(1.2)")
}, 1000);
setTimeout(function() {
document.querySelector("#tailEight").setAttribute("transform-origin", "center");
document.querySelector("#tailEight").setAttribute("transform-box", "fill-box");
document.querySelector("#tailEight").setAttribute("transform", "rotate(45");
document.querySelector("#tailEight").style.transition = "transform 3s";
document.querySelector("#tailEight").style.visibility = "visible";
document.querySelector("#tailEight").setAttribute("transform", "translate(-40 1800) scale(1.2)")
}, 1000);
}
function setStars() {
document.querySelector("#button01").innerHTML = "visible warp";
document.querySelector("#button01").setAttribute("onclick", "functionTwo()")
setInterval(function() {
xs = Math.floor(Math.random() * 2000);
ys = Math.floor(Math.random() * 2000);
}, 1000);
var twoSpade = 100;
var threeSpade = "helloworld";
setBasicStars = document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');
for (i = 0; i < twoSpade; i++);
document.querySelector("#Layer_1").appendChild(setBasicStars);
setBasicStars.setAttribute("class", "cls-2");
setBasicStars.style.position = "absolute";
setBasicStars.setAttribute("rx", "12");
setBasicStars.setAttribute("ry", "15");
setBasicStars.setAttribute("cx", xs);
setBasicStars.setAttribute("cy", ys);
}
var basicStarList01;
var basicStarList02;
var basicStarList03;
setTimeout(function() {
var starElements = document.querySelectorAll("[value='basicStar']");
console.log(starElements); /*starElements.toString();console.log(starElements)*/ ;
starElements.filter(function(value, index, arr) {
return index < 33
});
console.log(basicStarList01);
}, 12000);
(function(count) {
if (count < 100) {
setStars();
var caller = arguments.callee;
window.setTimeout(function() {
setBasicStars.setAttribute("value", "basicStar");
caller(count + 1);
}, 100);
}
})(0);
<html>
<head>
<meta>
</meata>
<title>Warp 01</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="button01" onclick="setStars()">Click to set stars</button>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1346.11 2001.68"><defs><style>.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#fff;}</style></defs><rect id="IV" class="cls-1" x="669.52" y="997.1" width="676.09" height="1002.72"/><rect id="III" class="cls-1" x="3.22" y="998.46" width="676.09" height="1002.72"/><rect id="I" class="cls-1" x="666.8" y="0.5" width="676.09" height="1002.72"/><rect id="II" class="cls-1" x="0.5" y="1.86" width="676.09" height="1002.72"/><ellipse id="basicStar01" class="cls-2" cx="1008.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar02" class="cls-2" cx="30.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar03" class="cls-2" cx="300.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar04" class="cls-2" cx="700.56" cy="500.71" rx="9.24" ry="11.96"/><g style="visibility:hidden" id="tailThree"><ellipse class="cls-2" cx="1088.33" cy="1348.3" rx="32.61" ry="40.76" transform="translate(-308.77 2373.24) rotate(-87.35)"/><path class="cls-2" d="M1118,1014.81l-9.38-40.23c-1.76-102.43-60.82,364.78-60.82,364.78-.46,9.89,14.09-20.25,24-19.8l40.27,1.86c11,11.32,13,45.29,20.52,24C1132.53,1345.44,1127.85,1015.26,1118,1014.81Z"/></g><g style="visibility:hidden" id="tailTwo"><ellipse class="cls-2" cx="1200.62" cy="630.09" rx="21.74" ry="27.17" transform="translate(563.24 1826.86) rotate(-89.65)"/><path class="cls-2" d="M1211.45,407.15l-7.33-26.55c-3.9-68.18-30.76,244.62-30.76,244.62,0,6.6,8.84-13.87,15.44-13.83l26.88.17c7.64,7.24,9.9,29.82,14.31,15.45C1230,627,1218.05,407.19,1211.45,407.15Z"/></g><g style="visibility:hidden" id="tailFour"><ellipse class="cls-2" cx="835.52" cy="1525.46" rx="32.61" ry="40.76" transform="translate(-726.88 2289.67) rotate(-87.35)"/><path class="cls-2" d="M865.15,1192l-9.38-40.23C854,1049.3,795,1516.51,795,1516.51c-.46,9.89,14.09-20.25,24-19.79l40.28,1.86c11,11.32,13,45.29,20.52,24C879.72,1522.59,875,1192.42,865.15,1192Z"/></g><g style="visibility:hidden" id="tailOne"><ellipse class="cls-2" cx="1303.24" cy="679.08" rx="27.17" ry="21.74" transform="translate(-43.14 90.14) rotate(-3.9)"/><path class="cls-2" d="M1297.53,455.94,1288.26,430c-8.94-67.71-12.57,246.23-12.57,246.23.44,6.58,7.79-14.49,14.37-14.94l26.82-1.82c8.15,6.66,12.08,29,15.41,14.34C1332.29,673.82,1304.11,455.5,1297.53,455.94Z"/></g><g style="visibility:hidden" id="tailSix"><ellipse class="cls-2" cx="301.2" cy="1367.28" rx="40.76" ry="32.61" transform="translate(-62.79 15.36) rotate(-2.65)"/><path class="cls-2" d="M271.57,1033.78,281,993.55c1.75-102.43,60.82,364.79,60.82,364.79.45,9.88-14.09-20.26-24-19.8l-40.28,1.86c-11,11.32-13,45.29-20.51,24C257,1364.41,261.68,1034.24,271.57,1033.78Z"/></g><g style="visibility:hidden" id="tailSeven"><ellipse class="cls-2" cx="188.9" cy="649.07" rx="27.17" ry="21.74" transform="translate(-3.94 1.16) rotate(-0.35)"/><path class="cls-2" d="M178.08,426.13l7.32-26.55c3.91-68.18,30.77,244.62,30.77,244.62,0,6.6-8.85-13.87-15.45-13.83l-26.88.17c-7.63,7.24-9.9,29.82-14.3,15.44C159.54,646,171.48,426.17,178.08,426.13Z"/></g><g style="visibility:hidden" id="tailFive"><ellipse class="cls-2" cx="554.01" cy="1544.43" rx="40.76" ry="32.61" transform="translate(-70.7 27.22) rotate(-2.65)"/><path class="cls-2" d="M524.38,1210.94l9.38-40.23c1.75-102.43,60.82,364.78,60.82,364.78.46,9.89-14.09-20.25-24-19.79l-40.28,1.86c-11,11.32-13,45.29-20.51,24C509.81,1541.57,514.49,1211.4,524.38,1210.94Z"/></g><g style="visibility:hidden" id="tailEight"><ellipse class="cls-2" cx="86.29" cy="698.05" rx="21.74" ry="27.17" transform="translate(-616.02 736.7) rotate(-86.1)"/><path class="cls-2" d="M92,474.92,101.26,449c8.95-67.71,12.58,246.22,12.58,246.22-.45,6.59-7.79-14.48-14.38-14.93l-26.82-1.83c-8.15,6.67-12.08,29-15.41,14.35C57.23,692.8,85.41,474.47,92,474.92Z"/></g></svg>
<script>
</script>
</body>
</html>
.querySelectorAll returns 一个 HTMLCollection，它不是数组 :(
可以用Array.from转成数组：
const elements = document.querySelectorAll("something");
const elementArray = Array.from(elements);
// elementArray is now an array of elements :)