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><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div></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< /code>를 반환합니다.

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

const myFind = (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++) {
    if (fun(array[i])) {
      res = array[i]
    }
  }
  return res
}
// 测试
let res = myFind([1, 2, 3], item => {
  return item > 2
})
console.log(res) // 3

reduce

이 메소드는 배열의 각 요소가 우리가 제공하는 콜백 함수를 실행하고 결과를 요약하여 반환하도록 합니다.

const join = (array, separator = ',') => {
  // 类型约束
  if (Object.prototype.toString.call(array) !== '[object Array]')
    throw new TypeError(array + ' is not a array')
  if (typeof separator !== 'string')
    throw new TypeError(separator + ' is not a string')
  let res = array[0].toString()
  for (let i = 0; i < array.length - 1; i++) {
    res += separator + array[i + 1].toString()
  }
  return res
}
// 测试
let res = join([1, 2, 3], &#39;-&#39;)
console.log(res) // 1-2-3

forEach🎜 이 방법은 비교적 간단합니다. 배열의 각 항목이 콜백 함수를 실행하는 것입니다. 🎜🎜rrreee🎜find 및 findIndex🎜🎜🎜이 두 가지입니다. 메서드는 상대적으로 비슷합니다. 하나는 요소를 반환하고 다른 하나는 요소의 인덱스를 반환합니다. 여기에 하나를 작성하세요. 구현 코드는 다음과 같습니다. 🎜🎜rrreee🎜join🎜🎜이 메서드는 배열의 모든 요소를 ​​배열에 따라 연결할 수 있습니다. 지정된 문자열, 그리고 이어진 문자열을 반환합니다. 🎜🎜🎜구현 코드 다음과 같습니다: 🎜🎜rrreee🎜[관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜web front-end🎜]🎜

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