js 중의 배열 각 방법 총화
1. 배열 만 들 기
// :
// ，
var a = [3, 11, 8]; // [3,11,8];
// :
// new Array === Array, new 。
var a = Array(); // []
var a = Array(3); // [undefined,undefined,undefined]
var a = Array(3,11,8); // [ 3,11,8 ]
// ES6 Array.of()
// ： ， ， 。
// ：Array.of() ， 。
let a = Array.of(3, 11, 8); // [3,11,8]
let a = Array.of(3); // [3]
// ES6 Arrar.from()
： （ ， ）。
// ：
// ( ): 。
// ( ): map ， ， 。 ( ): this。
// 1. length
let obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr = Array.from(obj); // ['a','b','c'];
// 2. Iterator : 、Set、NodeList
let arr = Array.from('hello'); // ['h','e','l','l']
let arr = Array.from(new Set(['a','b'])); // ['a','b']
2. 원래 배열 을 바 꾸 는 방법 (9 개):
let a = [1,2,3];
ES5:
a.pop()
a.shift()
a.push()
a.unshift()
a.reverse()
a.splice()
a.sort()
ES6:
a.copyWithin()
a.fill
2.1. pop () 한 배열 의 마지막 요 소 를 삭제 합 니 다.
// : pop() ， 。
// : 。
let a = [1,2,3];
let item = a.pop(); // 3
console.log(a); // [1,2]
2.2. shift () 배열 의 첫 번 째 요 소 를 삭제 합 니 다.
// : shift() ， 。
// : 。
let a = [1,2,3]
let item = a.shift() // 1
console.log(a) // [2,3]
2.3. push () 는 배열 의 끝 에 요 소 를 추가 합 니 다.
// ：push() ， 。
// : item1, item2, …, itemX ,
let a = [1,2,3]
let item = a.push('4') // 4(a.length)
console.log(a) // [1,2,3,4]
2.4. unshift () 는 배열 의 시작 에 요 소 를 추가 합 니 다.
// ：unshift() ， 。
// : item1, item2, …, itemX ,
let a = [1,2,3]
let item = a.unshift(4) // 4(a.length)
console.log(a) // [4,1,2,3]
2.5. reverse () 는 배열 의 요소 의 순 서 를 뒤 바 꿉 니 다.
// : reverse() 。
// :
let a = [1,2,3]
a.reverse()
console.log(a) // [3,2,1]
2.6. splice () 배열 요소 추가 / 삭제
// ： splice() / / ，
// ： array.splice(index,howmany,item1,.....,itemX)
// :
// index： 。 ， / ， 。
// howmany： 。 。 0， 。
// item1, …, itemX： 。 。
// : , 。
// eg1:
let a = [1,2,3,4,5,6,7]
// 1 3
let item = a.splice(1,3) // [2,3,4]
console.log(a) // [1,5,6,7]
// 3 ， ， 7
let item = a.splice(-1,3) // [7]
console.log(a) // [1,5,6]
// eg2:
let a = [1, 2, 3, 4, 5, 6, 7];
// 0 ， 3 ， ' '
let item = a.splice(0,3,' '); // [1,2,3]
console.log(a); // [' ',4,5,6,7]
// ， 3 ， ' 1'、' 2'
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2,3,' 1',' 2'); // [6,7]
console.log(b); // [1,2,3,4,5,' 1',' 2']
// eg3:
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,0,' 1',' 2'); // [] ，
console.log(a); // [' 1',' 2',1,2,3,4,5,6,7]
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1,0,' 1',' 2'); // [] ，
console.log(b); // [1,2,3,4,5,6,' 1',' 2',7]
2.7. sort () 배열 정렬
// : sort() ， 。
// : 。
// sort() ， ， ， toString() Unicode( ) ， 。
//
var a = ["Banana", "Orange", "Apple", "Mango"];
a.sort(); // ["Apple","Banana","Mango","Orange"]
// Unicode ，
var a = [10, 1, 3, 20,25,8];
console.log(a.sort()) // [1,10,20,25,3,8];
sort 정렬 일반적인 용법: 2.7.1, 배열 요 소 는 숫자의 오름차, 내림차 입 니 다.
var array = [10, 1, 3, 4,20,4,25,8];
// a-b < 0 a b ， a
// a 10， 20 10-20 < 0 a(10) b(20)
array.sort(function(a,b){
return a-b;
});
console.log(array); // [1,3,4,4,8,10,20,25];
// 20-10>0 b(20) a(10)
array.sort(function(a,b){
return b-a;
});
console.log(array); // [25,20,10,8,4,4,3,1];
2.7.2 배열 다 중 조건 정렬
var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
array.sort(function(a,b){
if(a.id === b.id){// id ， age
return b.age - a.age
}else{ // id ， id
return a.id - b.id
}
})
// [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}]
2.7.3 사용자 정의 비교 함수
var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}];
array.sort(function(a,b){
if(a.name === 'Koro1'){// name 'Koro1' -1 ，-1<0 a b
return -1
}else{ // ，a b
return 1
}
})
// [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}]
2.8. ES6: copy Within () 지정 한 위치 에 있 는 구성원 을 다른 위치 로 복사 합 니 다.
// : ， , 。
// : array.copyWithin(target, start = 0, end = this.length)
// : ， ， .
// target（ ）： 。 ， 。
// start（ ）： ， 0。 ， 。
// end（ ）： ， 。 。
// (MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE
// -2 3 ，-1 4
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5']
// 2 ,3 5
a.copyWithin(2,3,5)
// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]
2.9. ES6: fill () 배열 채 우기
// : ， 。
// :
// ( ):
// ( ): , 0
// ( )： ， this.length
['a', 'b', 'c'].fill(7) // [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
3. 원래 배열 을 바 꾸 지 않 는 방법 (8 개):
ES5：
join
toLocateString
toStrigin
slice
cancat
indexOf
lastIndexOf
ES7：
includes
3.1. join () 배열 변환 문자열
// : join() ， 。
// :array.join(str)
// :str( ): ， 。
let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+world'
3.2. toLocaleString () 배열 변환 문자열
// : 。 toLocaleString() join() （ ） 。
// :array.toLocaleString()
// ： 。
let a=[{name:'OBKoro1'},23,'abcd',new Date()];
let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 1:52:20
// ： toLocaleString ， toLocaleString ， toLocaleString,Date Date toLocaleString。
3. toString () 배열 변환 문자열 은 추천 하지 않 습 니 다.
// : toString() 。
// :array.toString()
// : 。
// join ， ， join ， ， 。
// ： ，js
let b= [ 'toString',' '].toString(); // toString,
let a= [' toString',' ']+' '; // toString,
3.4. slice () 얕 은 복사 배열 의 요소
// ： （ ） ， 。
// ： slice() ， 。
// :array.slice(begin, end);
// :
// begin( ): , ， , 0。
// end( ): ( ), ， ， ( )。
let a= ['hello','world'];
let b=a.slice(0,1); // ['hello']
a[0]=' ';
console.log(a,b); // [' ','world'] ['hello']
b[0]=' ';
console.log(a,b); // [' ','world'] [' ']
3.5.cancat
// ： ， 。
// ：var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)
// ：
// arrayX（ ）： ， 。 。
let a = [1, 2, 3];
let b = [4, 5, 6];
//
let newVal=a.concat(b); // [1,2,3,4,5,6]
//
let c = [7, 8, 9]
let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
//
let newVal3 = a.concat(' ',b, c,' ');
// [1,2,3," ",4,5,6,7,8,9," "]
//
let d = [1,2];
let f = [3,[4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]
ES6 확장 연산 자... 병합 배열: ES6 의 문법 이 더욱 간결 하고 알 기 쉬 우 므 로 지금 은 배열 을 합 쳐 서 저 는 대부분.....................................................................
let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]
3.6. index Of () 배열 에 어떤 요소 가 있 는 지 찾 아 다음 표 시 를 되 돌려 줍 니 다.
// : ， ， -1。
// :array.indexOf(searchElement,fromIndex)
// :
// searchElement( ):
// fromIndex( ): ( ， -1)， ， 0。
// :
// indexOf indexOf , indexOf === ， 。
// ：indexOf() NaN
let a=[' ',2,4,24,NaN]
console.log(a.indexOf(' ')); // -1
console.log(a.indexOf('NaN')); // -1
console.log(a.indexOf(' ')); // 0
3.7. lastIndex Of () 지정 한 요소 가 배열 의 마지막 위 치 를 찾 습 니 다.
// : , ， -1。（ ）
// : arr.lastIndexOf(searchElement,fromIndex)
// : searchElement( ):
// fromIndex( ): ， -1， 。
// fromIndex :
// 。 ， 。
// 。 。( -2， )
// 。 ， -1， 。
let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 10
// let b=a.lastIndexOf('Koro1',4); // 4 2
// let b=a.lastIndexOf('Koro1',100); // 9
// let b=a.lastIndexOf('Koro1',-11); // -1
let b=a.lastIndexOf('Koro1',-9); // 4 ， -1
3.8. ES7 includes () 배열 에 어떤 요 소 를 포함 하고 있 는 지 찾 습 니 다.
// ： ，
// ：array.includes(searchElement,fromIndex=0)
// ：
// searchElement( ):
// fromIndex( ): 0， ， 。 ， ， false。 ， 0 。
// includes indexOf :
let a=['OB','Koro1',1,NaN];
// let b=a.includes(NaN); // true NaN
// let b=a.includes('Koro1',100); // false
// let b=a.includes('Koro1',-3); // true
// let b=a.includes('Koro1',-100); // true ，
4. 배열 옮 겨 다 니 는 방법 (12 개):
ES5：
forEach、every 、some、 fliter、map、reduce、reduceRight、
ES6：
find、findIndex、keys、values、entries
4.1.forEach
4.1.1. 빈 배열 에 대해 서 는 리 셋 함수 의 4.1.2 를 실행 하지 않 습 니 다. 교체 과정 에서 삭 제 된 요소 나 빈 요 소 는 리 셋 함수 4.1.3 을 건 너 뜁 니 다. 리 셋 횟수 는 첫 번 째 순환 전에 확인 되 고 배열 에 추 가 된 요 소 는 옮 겨 다 니 지 않 습 니 다.4.1.4. 존재 하 는 값 이 바 뀌 면 콜 백 에 전 달 된 값 은 그들 에 게 전 달 된 값 입 니 다.4.1.5 순환 을 중간 에 종료 할 수 없고 return 으로 이번 리 턴 을 종료 하고 다음 리 턴 을 진행 할 수 있 습 니 다.4.1.6 값 을 반환 하 더 라 도 undefined 값 을 되 돌려 줍 니 다.
// : 。
// ：array.forEach(function(currentValue, index, arr), thisValue)
// :
// function( ): 。
//
// 1. currentValue( ),
// 2. index( ),
// 3. arr( ),
// thisValue( ): this ， undefined
let a = [1, 2, ,3]; // ， (undefined、null )
let obj = { name: 'OBKoro1' };
let result = a.forEach(function (value, index, array) {
a[3] = ' ';
a.push(' ， ')
console.log(value, 'forEach '); // 1 ,2 ,
console.log(this.name); // OBKoro1 this obj
// break; // break
return value; // return
console.log(' ， return ')
}, obj);
console.log(result); // return , undefined
//
4.2. every 검 측 배열 의 모든 요소 가 판단 조건 에 부합 되 는 지 여부
// :
// ：array.every(function(currentValue, index, arr), thisValue)
// :( ， )
// function( ): 。
//
// 1. currentValue( ),
// 2. index( ),
// 3. arr( ),
// thisValue( ): this ， undefined
// :
// ， false， 。
// ， true。
function isBigEnough(element, index, array) {
return element >= 10; // 10
}
let result = [12, 5, 8, 130, 44].every(isBigEnough); // false
let result = [12, 54, 18, 130, 44].every(isBigEnough); // true
//
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true
4.3. some 배열 에 판단 조건 을 만족 시 키 는 요소 가 있 는 지 여부
// ：
// ：array.some(function(currentValue, index, arr), thisValue)
// :( ， )
// function( ): 。
//
// 1. currentValue( ),
// 2. index( ),
// 3. arr( ),
// thisValue( ): this ， undefined
// ：
// ， true, 。
// ， false。
function isBigEnough(element, index, array) {
return (element >= 10); // 10
}
let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
let result = [12, 5, 8, 1, 4].some(isBigEnough); // true
4.4. fliter 는 원본 배열 을 걸 러 내 고 새 배열 로 돌아 갑 니 다.
// : , 。
// ：let new_array = arr.filter(function(currentValue, index, arr), thisArg)
// : ( ， )
// function( ): 。
//
// 1. currentValue( ),
// 2. index( ),
// 3. arr( ),
// thisValue( ): this ， undefined
let a = [32, 33, 16, 40];
let result = a.filter(function (value, index, array) {
return value >= 18; // a 18
});
console.log(result,a);// [32,33,40] [32,33,16,40]
4.5. map 는 배열 의 모든 요 소 를 처리 하고 새로운 배열 로 돌아 갑 니 다.
// ： ， 。
// ：let new_array = arr.map(function(currentValue, index, arr), thisArg)
// :( ， )
// function( ): 。
//
// 1. currentValue( ),
// 2. index( ),
// 3. arr( ),
// thisValue( ): this ， undefined
let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
return value + ' '
});
console.log(result, a);
// ["1 ","2 ","3 ","4 "] ["1","2","3","4"]
4.6. reduce 는 배열 에 누적 기 를 제공 하고 하나의 값 으로 합 친다.
// ：reduce() （ ） ， 。
// ：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// ：
// function( ): 。
//
// 1. total( )， ,
// 2. currentValue( ),
// 3. index( ),
// 4. arr( ),
// initialValue( ): 。
첫 번 째 실행 시: initialValue 가 reduce 를 호출 할 때 제공 되면 첫 번 째 totalk 은 initialValue 와 같 습 니 다. 이때 currentValue 는 배열 의 첫 번 째 값 과 같 습 니 다.initialValue 가 제공 되 지 않 으 면 totalk 은 배열 의 첫 번 째 값 이 고 currentValue 는 배열 의 두 번 째 값 입 니 다.이 때 배열 이 비어 있 으 면 TypeError 를 던 집 니 다.배열 에 하나의 요소 만 있 고 initialValue 를 제공 하지 않 거나 initialValue 를 제공 하지 않 았 으 나 배열 이 비어 있 으 면 리 셋 이 실행 되 지 않 고 배열 의 유일한 값 이 되 돌아 갑 니 다.
//
let sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// 6
//
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
(a, b) => a.concat(b),
[]
);
// [0, 1, 2, 3, 4, 5]
4.7. reduceRight 는 오른쪽 에서 왼쪽으로 누적 되 고 reduce 의 집행 방향 과 반대 되 며 다른 것 은 완전히 일치 하 므 로 상기 reduce 방법 을 참고 하여 소개 하 시기 바 랍 니 다.4.8. ES6: find () & findIndex () 조건 에 따라 그룹 구성원 찾기
// find() ： ， ， ， undefined。
// findIndex() ： ， ， -1。
// ：let new_array = arr.find/findIndex(function(currentValue, index, arr), thisArg)
// ：
// function( ): 。
//
// 1. currentValue( ),
// 2. index( ),
// 3. arr( ),
// thisValue( ): this ， undefined
// find
let a = [1, 4, -5, 10].find((n) => n < 0); // -5
let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n)); // NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 2
let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n)); // 4
4.9. ES6 keys () & values () & entries () 키, 키, 키 + 키 주의: 현재 Safari 9 만 지원 되 며, 기타 브 라 우 저 는 구현 되 지 않 았 으 며, babel 디코더 도 구현 되 지 않 았 습 니 다.
// ： Array Iterator ， 。
// ：
// array.keys()
// array.values()
// array.entries()
// ： 。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
for. of 에서 중간 에 종료 하려 면 break 를 사용 하여 순환 을 종료 할 수 있 습 니 다.for... of 순환 을 사용 하지 않 으 면 스 트 리밍 대상 의 next 방법 을 수 동 으로 호출 하여 스 트 리밍 할 수 있 습 니 다.
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
