JavaScript 기본 배열 함수 설명
JavaScript에서는 JavaScript 기본 배열 함수 설명
생성자를 사용하여 배열을 만들거나 배열 리터럴 []
를 사용할 수 있습니다. 후자가 선호되는 방법입니다. JavaScript 기본 배열 함수 설명
개체는 Object.prototype
에서 상속되며 배열에서 typeof
연산자를 실행하면 object가 반환됩니다. 코드>배열. 그러나 [] arrayof JavaScript 기본 배열 함수 설명
도 true
를 반환합니다. 즉, strings
객체, arguments
객체, arguments
객체와 같이 배열과 유사한 객체의 구현은 JavaScript 기본 배열 함수 설명 인스턴스이지만 length
속성이 있고 인덱스를 통해 값을 가져올 수 있으므로 배열처럼 반복될 수 있습니다. JavaScript 기본 배열 함수 설명
构造函数,或者使用数组直接量[]
,后者是首选方法。JavaScript 기본 배열 함수 설명
对象继承自Object.prototype
,对数组执行typeof
操作符返回object
而不是array
。然而,[] instanceof JavaScript 기본 배열 함수 설명
也返回true
。也就是说,类数组对象的实现更复杂,例如strings
对象、arguments
对象,arguments
对象不是JavaScript 기본 배열 함수 설명
的实例,但有length
属性,并能通过索引取值,所以能像数组一样进行循环操作。
在本文中,我将复习一些数组原型的方法,并探索这些方法的用法。
循环:
.forEach
判断:
.some
和.every
区分
.join
和.concat
栈和队列的实现:
.pop
,.push
,.shift
,和.unshift
模型映射:
.map
查询:
.filter
排序:
.sort
计算:
.reduce
和.reduceRight
复制:
.slice
强大的
.splice
查找:
.indexOf
操作符:
in
走近
.reverse
循环:.forEach
这是JavaScript中最简单的方法,但是IE7和IE8不支持此方法。 .forEach
有一个回调函数作为参数,遍历数组时,每个数组元素均会调用它,回调函数接受三个参数:
value
:当前元素index
:当前元素的索引array
:要遍历的数组
此外,可以传递可选的第二个参数,作为每次函数调用的上下文(this
).
['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) { this.push(String.fromCharCode(value.charCodeAt() + index + 2)) }, out = [])out.join('')// <- 'awesome'123456
后文会提及.join
,在这个示例中,它用于拼接数组中的不同元素,效果类似于out[0] + '' + out[1] + '' + out[2] + '' + out[n]
。
不能中断.forEach
循环,并且抛出异常也是不明智的选择。幸运的事我们有另外的方式来中断操作。
判断:.some
和.every
如果你用过.NET中的枚举,这两个方法和.Any(x => x.IsAwesome)
、 .All(x => x.IsAwesome)
类似。
和.forEach
的参数类似,需要一个包含value
,index
,和array
三个参数的回调函数,并且也有一个可选的第二个上下文参数。MDN对.some的描述如下:
some
将会给数组里的每一个元素执行一遍回调函数,直到回调函数返回true
。如果找到目标元素,some
立即返回true
,否则some返回false。回调函数只对已经指定值的数组索引执行;它不会对已删除的或未指定值的元素调用。
max = -Infinity satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) { if (value > max) max = value return value < 10}) console.log(max)// <- 12satisfied// <- true1234567891011
注意,当回调函数的value < 10
时,中断函数循环。.every
的运行原理和.some
类似,但回调函数是返回false而不是true。
区分.join
和.concat
.join
和.concat
经常混淆。.join(separator)
以separator
作为分隔符拼接数组元素,并返回字符串形式,如果没有提供separator
,将使用默认的,
。.concat
会创建一个新数组,作为源数组的浅拷贝。
.concat
常用用法:array.concat(val, val2, val3, valn)
.concat
返回一个新数组
이 기사에서는 배열 프로토타입 방법 중 일부를 검토하고 사용법을 살펴보겠습니다. 🎜array.concat()
- 🎜루프:
.forEach
🎜 - 🎜판결:
.some
및 < code>.every🎜 - 🎜
.join
과.concat
🎜 - 🎜 스택과 큐 구별 구현:
.pop
,.push
,.shift
및.unshift
🎜 - 🎜모델 매핑:
.map
🎜 - 🎜쿼리:
.filter
🎜 - 🎜정렬:
.sort< /code>🎜</li><li>🎜계산: <code>.reduce
및.reduceRight
🎜 - 🎜복사:
.slice< /code>🎜</li><li>🎜강력한 <code>.splice
🎜 - 🎜찾기:
.indexOf
🎜 - 🎜연산자:
in
🎜 - 🎜 접근
.reverse
🎜
🎜
루프:
🎜JavaScript에서 가장 간단한 방법이지만 IE7, IE8에서는 이 방법을 지원하지 않습니다. 🎜.forEach
.forEach
에는 콜백 함수가 배열을 탐색할 때 각 배열 요소에 대해 호출됩니다. 콜백 함수는 🎜- 🎜
value
: 현재 요소 🎜 - 🎜
index
: 현재 요소의 인덱스 🎜 - 🎜
array
: 반복할 배열🎜또한 선택적인 두 번째 매개변수는 각 함수 호출(this
)에 대한 컨텍스트로 전달될 수 있습니다.🎜 < /ul> - 🎜
.concat
일반적인 사용법:array.concat(val, val2, val3, valn)
🎜< /li> - 🎜
.concat
새 배열을 반환합니다🎜 - 🎜
array.concat()
매개변수 없이 소스를 반환합니다. 얕은 복사본 배열의. 🎜얕은 복사는 새 배열이 원래 배열과 동일한 객체 참조를 유지한다는 것을 의미하며 이는 일반적으로 좋은 것입니다. 예: 🎜 a在b之前则返回值小于0
a和b相等则返回值是0
a在b之后则返回值小于0
🎜var a = { foo: 'bar' } var b = [1, 2, 3, a] var c = b.concat() console.log(b === c)// <- falseb[3] === a && c[3] === a// <- true123456789
로그인 후 복사로그인 후 복사.join
은 나중에 언급할 것입니다. 이 예에서는 배열의 다른 요소를 연결하는 데 사용됩니다. 효과는out[0] + '' + 출력[1] + '' + 출력[2] + '' + 출력[n]
. 🎜.forEach
루프를 중단할 수 없으며 예외를 발생시키는 것은 현명하지 않습니다. 다행스럽게도 작업을 중단할 수 있는 다른 방법이 있습니다. 🎜판단:
🎜.NET에서 열거형을 사용한 경우 이 두 가지 방법은.some
및.every
와 동일합니다. Any(x => x.IsAwesome)
와.All(x => x.IsAwesome)
은 유사합니다. 🎜.forEach
의 매개변수와 유사하며value
,index
및array</code)라는 세 가지 매개변수가 포함된 콜백이 필요합니다. > 함수이며 선택적 두 번째 컨텍스트 매개변수도 있습니다. MDN은 .some을 다음과 같이 설명합니다. 🎜<blockquote>🎜<code>some
은 콜백 함수가true
를 반환할 때까지 배열의 각 요소에 대해 콜백 함수를 실행합니다. 대상 요소가 발견되면some
은 즉시true
를 반환하고, 그렇지 않으면 일부는 false를 반환합니다. 콜백 함수는 값이 할당된 배열 인덱스에 대해서만 실행됩니다. 삭제되거나 할당되지 않은 요소에 대해서는 호출되지 않습니다. 🎜🎜콜백 함수의function Stack () { this._stack = [] } Stack.prototype.next = function () { return this._stack.pop() } Stack.prototype.add = function () { return this._stack.push.apply(this._stack, arguments) } stack = new Stack() stack.add(1,2,3) stack.next()// <- 31234567891011121314151617
로그인 후 복사로그인 후 복사값 < 10
일 때 함수 루프가 중단된다는 점에 유의하세요..every
는.some
과 유사하게 작동하지만 콜백 함수가 true 대신 false를 반환합니다. 🎜
을 구별하세요🎜.join
과.concat
.join
과.concat
는 종종 혼란스러워요..join(separator)
는separator
를 구분자로 사용하여 배열 요소를 연결하고 문자열 형식을 반환합니다.separator
가 제공되지 않으면 기본 요소입니다.,
가 사용됩니다..concat
는 소스 배열의 얕은 복사본으로 새 배열을 만듭니다. 🎜var a = { foo: 'bar' } var b = [1, 2, 3, a] var c = b.concat() console.log(b === c)// <- falseb[3] === a && c[3] === a// <- true123456789
로그인 후 복사로그인 후 복사栈和队列的实现:
.pop
,.push
,.shift
和.unshift
每个人都知道
.push
可以再数组末尾添加元素,但是你知道可以使用[].push('a', 'b', 'c', 'd', 'z')
一次性添加多个元素吗?.pop
方法是.push
的反操作,它返回被删除的数组末尾元素。如果数组为空,将返回void 0 (undefined)
,使用.pop
和.push
可以创建LIFO (last in first out)
栈。function Stack () { this._stack = [] } Stack.prototype.next = function () { return this._stack.pop() } Stack.prototype.add = function () { return this._stack.push.apply(this._stack, arguments) } stack = new Stack() stack.add(1,2,3) stack.next()// <- 31234567891011121314151617
로그인 후 복사로그인 후 복사相反,可以使用
.shift
和.unshift
创建FIFO (first in first out)
队列。function Queue () { this._queue = [] } Queue.prototype.next = function () { return this._queue.shift() } Queue.prototype.add = function () { return this._queue.unshift.apply(this._queue, arguments) } queue = new Queue() queue.add(1,2,3) queue.next()// <- 1Using .shift (or .pop) is an easy way to loop through a set of array elements, while draining the array in the process. list = [1,2,3,4,5,6,7,8,9,10]while (item = list.shift()) { console.log(item) } list// <- []123456789101112131415161718192021222324252627
로그인 후 복사模型映射:
.map
.map
为数组中的每个元素提供了一个回调方法,并返回有调用结果构成的新数组。回调函数只对已经指定值的数组索引执行;它不会对已删除的或未指定值的元素调用。JavaScript 기본 배열 함수 설명.prototype.map
和上面提到的.forEach
、.some
和.every
有相同的参数格式:.map(fn(value, index, array), thisArgument)
values = [void 0, null, false, ''] values[7] = void 0result = values.map(function(value, index, array){ console.log(value) return value })// <- [undefined, null, false, '', undefined × 3, undefined]12345678
로그인 후 복사undefined × 3
很好地解释了.map
不会对已删除的或未指定值的元素调用,但仍然会被包含在结果数组中。.map
在创建或改变数组时非常有用,看下面的示例:// casting[1, '2', '30', '9'].map(function (value) { return parseInt(value, 10) })// 1, 2, 30, 9[97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')// <- 'awesome'// a commonly used pattern is mapping to new objectsitems.map(function (item) { return { id: item.id, name: computeName(item) } })12345678910111213141516
로그인 후 복사查询:
.filter
filter
对每个数组元素执行一次回调函数,并返回一个由回调函数返回true
的元素组成的新数组。回调函数只会对已经指定值的数组项调用。通常用法:
.filter(fn(value, index, array), thisArgument)
,跟C#中的LINQ表达式和SQL中的where
语句类似,.filter
只返回在回调函数中返回true
值的元素。[void 0, null, false, '', 1].filter(function (value) { return value })// <- [1][void 0, null, false, '', 1].filter(function (value) { return !value })// <- [void 0, null, false, '']123456789
로그인 후 복사排序:
.sort(compareFunction)
如果没有提供
compareFunction
,元素会被转换成字符串并按照字典排序。例如,”80”排在”9”之前,而不是在其后。跟大多数排序函数类似,
JavaScript 기본 배열 함수 설명.prototype.sort(fn(a,b))
需要一个包含两个测试参数的回调函数,其返回值如下:[9,80,3,10,5,6].sort()// <- [10, 3, 5, 6, 80, 9][9,80,3,10,5,6].sort(function (a, b) { return a - b })// <- [3, 5, 6, 9, 10, 80]1234567
로그인 후 복사计算:
.reduce
和.reduceRight
这两个函数比较难理解,
.reduce
会从左往右遍历数组,而.reduceRight
则从右往左遍历数组,二者典型用法:.reduce(callback(previousValue,currentValue, index, array), initialValue)
。previousValue
是最后一次调用回调函数的返回值,initialValue
则是其初始值,currentValue
是当前元素值,index
是当前元素索引,array
是调用.reduce
的数组。
一个典型的用例,使用.reduce
的求和函数。JavaScript 기본 배열 함수 설명.prototype.sum = function () { return this.reduce(function (partial, value) { return partial + value }, 0) }; [3,4,5,6,10].sum()// <- 2812345678
로그인 후 복사如果想把数组拼接成一个字符串,可以用
.join
实现。然而,若数组值是对象,.join
就不会按照我们的期望返回值了,除非对象有合理的valueOf
或toString
方法,在这种情况下,可以用.reduce
实现:function concat (input) { return input.reduce(function (partial, value) { if (partial) { partial += ', ' } return partial + value }, '') } concat([ { name: 'George' }, { name: 'Sam' }, { name: 'Pear' } ])// <- 'George, Sam, Pear'123456789101112131415
로그인 후 복사复制:
.slice
和
.concat
类似,调用没有参数的.slice()
方法会返回源数组的一个浅拷贝。.slice
有两个参数:一个是开始位置和一个结束位置。JavaScript 기본 배열 함수 설명.prototype.slice
能被用来将类数组对象转换为真正的数组。JavaScript 기본 배열 함수 설명.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }) // <- ['a', 'b']12
로그인 후 복사这对
.concat
不适用,因为它会用数组包裹类数组对象。JavaScript 기본 배열 함수 설명.prototype.concat.call({ 0: 'a', 1: 'b', length: 2 }) // <- [{ 0: 'a', 1: 'b', length: 2 }]12
로그인 후 복사此外,
.slice
的另一个通常用法是从一个参数列表中删除一些元素,这可以将类数组对象转换为真正的数组。function format (text, bold) { if (bold) { text = '<b>' + text + '</b>' } var values = JavaScript 기본 배열 함수 설명.prototype.slice.call(arguments, 2) values.forEach(function (value) { text = text.replace('%s', value) }) return text}format('some%sthing%s %s', true, 'some', 'other', 'things')// <- <b>somesomethingother things</b>123456789101112131415
로그인 후 복사强大的
.splice
.splice
是我最喜欢的原生数组函数,只需要调用一次,就允许你删除元素、插入新的元素,并能同时进行删除、插入操作。需要注意的是,不同于`.concat
和.slice
,这个函数会改变源数组。var source = [1,2,3,8,8,8,8,8,9,10,11,12,13] var spliced = source.splice(3, 4, 4, 5, 6, 7) console.log(source)// <- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13]spliced// <- [8, 8, 8, 8]12345678
로그인 후 복사正如你看到的,
.splice
会返回删除的元素。如果你想遍历已经删除的数组时,这会非常方便。var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]var spliced = source.splice(9) spliced.forEach(function (value) { console.log('removed', value) })// <- removed 10// <- removed 11// <- removed 12// <- removed 13console.log(source)// <- [1, 2, 3, 8, 8, 8, 8, 8, 9]12345678910111213
로그인 후 복사查找:
.indexOf
利用
.indexOf
可以在数组中查找一个元素的位置,没有匹配元素则返回-1
。我经常使用.indexOf
的情况是当我有比较时,例如:a === 'a' || a === 'b' || a === 'c'
,或者只有两个比较,此时,可以使用.indexOf
:['a', 'b', 'c'].indexOf(a) !== -1
。
注意,如果提供的引用相同,.indexOf
也能查找对象。第二个可选参数用于指定开始查找的位置。var a = { foo: 'bar' } var b = [a, 2] console.log(b.indexOf(1))// <- -1console.log(b.indexOf({ foo: 'bar' }))// <- -1console.log(b.indexOf(a))// <- 0console.log(b.indexOf(a, 1))// <- -1b.indexOf(2, 1)// <- 11234567891011121314151617
로그인 후 복사如果你想从后向前搜索,可以使用
.lastIndexOf
。操作符:
in
在面试中新手容易犯的错误是混淆
.indexOf
和in
操作符:var a = [1, 2, 5]1 in a// <- true, but because of the 2!5 in a// <- false1234567
로그인 후 복사问题是
in
操作符是检索对象的键而非值。当然,这在性能上比.indexOf快得多。var a = [3, 7, 6]1 in a === !!a[1]// <- true1234
로그인 후 복사走近
.reverse
该方法将数组中的元素倒置。
var a = [1, 1, 7, 8]a.reverse()// [8, 7, 1, 1]1234
로그인 후 복사.reverse
会修改数组本身。译文出处:http://www.ido321.com/1568.html
本文根据@Nicolas Bevacqua的《Fun with JavaScript Native JavaScript 기본 배열 함수 설명 Functions》所译,整个译文带有我自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://modernweb.com/2013/11/25/fun-with-javascript-native-array-functions/。
- 🎜루프:
위 내용은 JavaScript 기본 배열 함수 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

인터넷 금융의 급속한 발전으로 인해 주식 투자는 점점 더 많은 사람들의 선택이 되었습니다. 주식 거래에서 캔들 차트는 주가의 변화 추세를 보여주고 투자자가 보다 정확한 결정을 내리는 데 도움이 되는 일반적으로 사용되는 기술적 분석 방법입니다. 이 기사에서는 PHP와 JS의 개발 기술을 소개하고 독자가 주식 캔들 차트를 그리는 방법을 이해하도록 유도하며 구체적인 코드 예제를 제공합니다. 1. 주식 캔들 차트의 이해 주식 캔들 차트를 그리는 방법을 소개하기 전에 먼저 캔들 차트가 무엇인지부터 이해해야 합니다. 캔들스틱 차트는 일본인이 개발했습니다.
