JavaScript 배열 인스턴스를 요약하는 9가지 방법

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 JavaScript 배열 인스턴스의 9가지 방법을 소개합니다. 해당 주제에 대한 자세한 소개는 필요한 참조 가치가 없습니다.

[관련 추천 : javascript video tutorial, web front-end]

머리말

손으로 쓴 JS 네이티브 API는 요즘 인터뷰에서 아주 흔하게 접하게 되었습니다. MDN 기사 배열 인스턴스 메소드에 관한 부분에서는 그냥 심심해서 재미삼아 몇 가지 인스턴스 메소드를 작성하고, 기본적인 내용을 검토하고 기록해 두었습니다.

아직 배열 인스턴스의 반복 방법 간의 차이점을 모르는 경우 아래 그림을 보면 됩니다.

map

이 방법은 새 배열을 반환하며, 각 요소는 배열 항목은 모두 map에서 제공하는 콜백 함수를 실행한 결과입니다. map提供的回调函数结果。

实现代码如下：

const map = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')

  // 定义一个空数组，用于存放修改后的数据
  let res = []
  for (let i = 0; i < array.length; i++) {
    res.push(fun(array[i]))
  }
  return res
}
// 测试
let res = map([1, 2, 3], item => {
  return item * 2
})
console.log(res) // [ 2, 4, 6 ]

filter

这个方法会返回一个新的数组，数组中的值是满足filter提供的回调函数的值，

实现代码如下：

const filter = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')

  // 定义一个空数组，用于存放符合条件的数组项
  let res = []
  for (let i = 0; i < array.length; i++) {
    // 将数组中的每一项都调用传入的函数，如果返回结果为true，则将结果push进数组，最后返回
    fun(array[i]) && res.push(array[i])
  }
  return res
}
// 测试
let res = filter([1, 2, 3], item => {
  return item > 2
})
console.log(res) // [ 3 ]

some

该方法会判断数组中的每一项，如果有一项满足回调函数中条件就返回true都不满足则返回false。

实现代码如下：

const some = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  let flag = false
  for (let i of array) {
    if (fun(i)) {
      flag = true
      break
    }
  }
  return flag
}
let res = some([1, 2, 3], item => {
  return item > 2
})
console.log(res) // true

every

该方法会判断数组中的每一项，如果所有项满足回调函数中条件就返回true否则返回false

구현 코드는 다음과 같습니다.

const every = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
  let flag = true
  for (let i of array) {
    if (!fun(i)) {
      flag = false
      break
    }
  }
  return flag
}
let res = every([1, 2, 3], item => {
  return item > 0
})
console.log(res) // true

filter

이 메서드는 새로운 배열을 반환합니다. 배열의 값은 filter에서 제공하는 콜백 함수를 만족하는 값입니다. <p><strong></strong>구현 코드는 다음과 같습니다. ：</p> <h2><pre class='brush:php;toolbar:false;'>const reduce = (array, fun, initialValue) =&gt; { // 类型约束 if (Object.prototype.toString.call(array) !== &amp;#39;[object Array]&amp;#39;) throw new TypeError(array + &amp;#39; is not a array&amp;#39;) if (typeof fun !== &amp;#39;function&amp;#39;) throw new TypeError(fun + &amp;#39; is not a function&amp;#39;) let accumulator = initialValue for (let i = 0; i &lt; array.length; i++) { accumulator = fun(accumulator, array[i], i, array) } return accumulator } const arr = [1, 2, 3] console.log(arr.reduce(v =&gt; v + 10, 10)) // 40 console.log(reduce(arr, v =&gt; v + 10, 10)) // 40</pre></h2>some<p><strong>이 메서드는 콜백 함수의 조건에 맞는 항목이 있으면 <code>를 반환합니다. true. 조건을 충족하지 않으면 false를 반환합니다.

구현 코드는 다음과 같습니다.

const forEach = (array, fun) => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')

  for (let i of array) {
    fun(i)
  }
}
let res = forEach([1, 2, 3], item => {
  console.log(item)
})

every

이 방법은 모든 항목이 콜백 함수의 조건을 충족하면 true를 반환하고 그렇지 않으면 true를 반환합니다. false를 반환합니다. <h2></h2> <p>구현 코드는 다음과 같습니다. </p> <p><pre class='brush:php;toolbar:false;'>const myFind = (array, fun) =&gt; { // 类型约束 if (Object.prototype.toString.call(array) !== &amp;#39;[object Array]&amp;#39;) throw new TypeError(array + &amp;#39; is not a array&amp;#39;) if (typeof fun !== &amp;#39;function&amp;#39;) throw new TypeError(fun + &amp;#39; is not a function&amp;#39;) let res for (let i = 0; i &lt; array.length; i++) { if (fun(array[i])) { res = array[i] } } return res } // 测试 let res = myFind([1, 2, 3], item =&gt; { return item &gt; 2 }) console.log(res) // 3</pre><strong>reduce</strong></p> <p>이 메소드는 배열의 각 요소가 우리가 제공하는 콜백 함수를 실행하고 결과를 요약하여 반환하도록 합니다. <a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程"> </a><pre class='brush:php;toolbar:false;'>const join = (array, separator = &amp;#39;,&amp;#39;) =&gt; { // 类型约束 if (Object.prototype.toString.call(array) !== &amp;#39;[object Array]&amp;#39;) throw new TypeError(array + &amp;#39; is not a array&amp;#39;) if (typeof separator !== &amp;#39;string&amp;#39;) throw new TypeError(separator + &amp;#39; is not a string&amp;#39;) let res = array[0].toString() for (let i = 0; i &lt; array.length - 1; i++) { res += separator + array[i + 1].toString() } return res } // 测试 let res = join([1, 2, 3], &amp;#39;-&amp;#39;) console.log(res) // 1-2-3</pre><a href="https://www.php.cn/course/list/1.html" target="_blank">forEach</a></p>🎜 이 방법은 비교적 간단합니다. 배열의 각 항목이 콜백 함수를 실행하는 것입니다. 🎜🎜rrreee🎜find 및 findIndex🎜🎜🎜이 두 가지입니다. 메서드는 상대적으로 비슷합니다. 하나는 요소를 반환하고 다른 하나는 요소의 인덱스를 반환합니다. 여기에 하나를 작성하세요. 구현 코드는 다음과 같습니다. 🎜🎜rrreee🎜join🎜🎜이 메서드는 배열의 모든 요소를 ​​배열에 따라 연결할 수 있습니다. 지정된 문자열, 그리고 이어진 문자열을 반환합니다. 🎜🎜🎜구현 코드 다음과 같습니다: 🎜🎜rrreee🎜[관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜web front-end🎜]🎜

위 내용은 JavaScript 배열 인스턴스를 요약하는 9가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!