집 > 기사 > 웹 프론트엔드 > JavaScript의 필터 기능에 대한 자세한 소개

JavaScript의 필터 기능에 대한 자세한 소개

黄舟원래의: 2017-12-06 11:29:195636검색

Vue의 친구들은 JavaScript를 공부한 친구들은 다 알겠지만, 필터링하는 방법을 모르는 친구들이 많을 거라 믿습니다. 그래서 오늘은 한 가지를 알려드리겠습니다. JavaScript 필터 기능에 대한 자세한 소개!

예제에서 그리드 구성요소를 봤을 때 중첩된 코드 조각으로 인해 혼란스러웠습니다. 여러 소스에 도움을 요청한 후에야 이해할 수 있습니다(분할적인 질문). 후속 문의를 위해 이에 기록합니다.

모든 코드를 보려면 여기를 클릭하세요.

코드 조각의 일부:

<p style="margin-top: 5px; margin-bottom: 14px; line-height: normal;">data = data.filter(function (row) {<br/>    return <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.keys(row).some(function (key) {<br/>        return String(row[key]).toLowerCase().<br/>        indexOf(filterKey) > -1;<br/>    });<br/>});<br/><br/>data = [<br/>    { name: &#39;Chuck Norris&#39;, power: Infinity },<br/>    { name: &#39;Bruce Lee&#39;, power: 9000 },<br/>    { name: &#39;Jackie Chan&#39;, power: 7000},<br/>    { name: &#39;Jet Li&#39;, power: 8000 }<br/>]<br/></p>

참고: 여기서 filterKey는 문자열 filterKey表示的是在input中输入的字符串，这里假设输入ck

这里的row表示的是data[i]，以第一行为例执行代码，row为{ name: 'Chuck Norris', power: Infinity }，那么Object.keys(row) = ['name', 'power'], key表示name和power。首先是name，row['name'] = 'Chuck Norris', 这个字符串中包含字符串'ck'，所以返回true，不需要执行power，那么row即data[0]返回到新的数组，继续遍历下面的数据。如果row['name']不包括此字符串，那么需要遍历row['power']，如果都为false，不返回row，继续遍历。

整段代码涉及到vue的数据绑定，但是由于我还处于懵懂的状态就不记录了。

一只前端小白，如果您发现本文有什么错误或者理解不到位的地方，希望不吝赐教。

最近在正在学习vue，看到示例中网格组件的时候，被一段嵌套代码搞的晕头转向，多方求助（segmentful提问）之后才将将理解，特此记录，以备后续查询：

查看全部代码点击此处

部分代码片段：

data = data.filter(function (row) {
    return Object.keys(row).some(function (key) {
        return String(row[key]).toLowerCase().
        indexOf(filterKey) > -1;
    });
});

data = [
    { name: &#39;Chuck Norris&#39;, power: Infinity },
    { name: &#39;Bruce Lee&#39;, power: 9000 },
    { name: &#39;Jackie Chan&#39;, power: 7000},
    { name: &#39;Jet Li&#39;, power: 8000 }
]

注：在这里filterKey表示的是在input中输入的字符串，这里假设输入ck

여기에서 row가 data[i]를 나타내는 것으로 가정합니다. >, 루틴 실행 코드의 A 라인에서 row는 { name: 'Chuck Norris', power: Infinity }이고 Object.keys(row)입니다. = ['name' , 'power'], key는 name 및 power를 나타냅니다. 첫 번째는 name, row['name'] = 'Chuck Norris'입니다. 이 문자열에는 'ck' 문자열이 포함되어 있으므로 true, power를 실행할 필요가 없습니다. 그러면 row 또는 data[0]가 새 배열로 반환되고 아래의 데이터를 계속해서 탐색합니다. row['name']에 이 문자열이 포함되어 있지 않으면 row['power']가 모두 false인 경우 순회해야 합니다. , 아니요 행으로 돌아가서 계속 탐색하세요.

전체 코드에는 Vue의 데이터 바인딩이 포함되어 있지만 아직 무지한 상태이기 때문에 그렇지 않습니다. 더 이상 녹음되지 않았습니다. 저는 프론트엔드 초보자입니다. 이 글에서 잘못된 점을 발견하거나 잘 이해되지 않는 경우 언제든지 조언을 주시기 바랍니다.
최근에 Vue를 배우고 있는데 예제에서 그리드 컴포넌트를 보고 헷갈렸는데, 도움을 요청한 후(분할적인 질문) 이해하겠습니다.

보기 모든 코드를 보려면 여기를 클릭하세요.

일부 코드 조각: rrreee 참고: 여기서 filterKey는 입력에 입력된 문자열을 나타냅니다. 여기서는 ck라고 가정합니다. 여기서 row는 data[i]를 나타냅니다. 첫 번째 줄을 예로 들면 row는 입니다. >{ name: 'Chuck Norris', power: Infinity }, then Object.keys(row) = ['name', 'power'], key는 이름과 힘을 의미합니다. 첫 번째는 name, row['name'] = 'Chuck Norris'입니다. 이 문자열에는 'ck' 문자열이 포함되어 있으므로 true, power를 실행할 필요가 없습니다. 그러면 row 또는 data[0]가 새 배열로 반환되고 아래의 데이터를 계속해서 탐색합니다. row['name']에 이 문자열이 포함되어 있지 않으면 row['power']가 모두 false인 경우 순회해야 합니다. , 아니요 행으로 돌아가서 계속 탐색하세요.

전체 코드에는 Vue 데이터 바인딩이 포함되어 있지만 아직은 무지한 상태이기 때문에 기록하지 않겠습니다. 요약:

이 글은 예제 코드를 통해 JavaScript의 필터 기능을 자세히 소개하고 있으므로 여러분의 작업에 도움이 되길 바랍니다.

JavaScript의 필터 기능에 대한 자세한 소개

관련 기사