Javascript의 배열에서 빈 요소 제거
JavaScript의 배열에서 빈 요소를 제거하려면 어떻게합니까?
간단한 방법이 있습니까, 아니면 반복해서 수동으로 제거해야합니까?
편집 : 이 질문은 거의 9 년 전에 Array.prototype.
이제 확실히 filter방법 을 사용하는 것이 좋습니다 .
이 메서드는 제공하는 콜백 함수의 기준을 전달하는 요소가 포함 된 새 배열 을 반환 합니다.
예를 들어 null또는 undefined값 을 제거하려는 경우 :
var array = [0, 1, null, 2, "", 3, undefined, 3,,,,,, 4,, 4,, 5,, 6,,,,];
var filtered = array.filter(function (el) {
return el != null;
});
console.log(filtered);예를 들어 문자열을 처리하는 경우 위의 함수는 빈 문자열 인 요소를 제거하지 않습니다.
내가 자주 사용 참조하는 것이 하나 개의 전형적인 패턴이 요소를 제거하는 것입니다 falsy 빈 문자열을 포함, "", 0, NaN, null, undefined,와 false.
filter메서드, Boolean생성자 함수에 전달하거나 필터 기준 함수에서 동일한 요소를 반환 할 수 있습니다 . 예를 들면 다음과 같습니다.
var filtered = array.filter(Boolean);
또는
var filtered = array.filter(function(el) { return el; });
두 가지 방법 모두 filter첫 번째 경우 메서드가 Boolean생성자를 함수로 호출 하여 값을 변환하고 두 번째 경우 filter메서드가 내부적으로 콜백의 반환 값을 Boolean.
희소 배열로 작업하고 "구멍"을 제거하려는 filter경우 true를 반환하는 콜백을 전달하는 메서드를 사용할 수 있습니다. 예를 들면 다음과 같습니다.
var sparseArray = [0, , , 1, , , , , 2, , , , 3],
cleanArray = sparseArray.filter(function () { return true });
console.log(cleanArray); // [ 0, 1, 2, 3 ]이전 답변 : 이러지 마세요!
이 메서드를 사용하여 네이티브 Array 프로토 타입을 확장합니다.
Array.prototype.clean = function(deleteValue) {
for (var i = 0; i < this.length; i++) {
if (this[i] == deleteValue) {
this.splice(i, 1);
i--;
}
}
return this;
};
test = new Array("", "One", "Two", "", "Three", "", "Four").clean("");
test2 = [1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,];
test2.clean(undefined);
또는 단순히 기존 요소를 다른 배열로 푸시 할 수 있습니다.
// Will remove all falsy values: undefined, null, 0, false, NaN and "" (empty string)
function cleanArray(actual) {
var newArray = new Array();
for (var i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i]);
}
}
return newArray;
}
cleanArray([1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,]);
간단한 방법 :
var arr = [1,2,,3,,-3,null,,0,,undefined,4,,4,,5,,6,,,,];
arr.filter(n => n)
// [1, 2, 3, -3, 4, 4, 5, 6]
arr.filter(Number)
// [1, 2, 3, -3, 4, 4, 5, 6]
arr.filter(Boolean)
// [1, 2, 3, -3, 4, 4, 5, 6]
또는-( "텍스트"유형의 단일 배열 항목 에만 해당 )
['','1','2',3,,'4',,undefined,,,'5'].join('').split('');
// output: ["1","2","3","4","5"]
또는-고전적인 방법 : 단순 반복
var arr = [1,2,null, undefined,3,,3,,,0,,,[],,{},,5,,6,,,,],
len = arr.length, i;
for(i = 0; i < len; i++ )
arr[i] && arr.push(arr[i]); // copy non-empty values to the end of the array
arr.splice(0 , len); // cut the array and leave only the non-empty values
arr // [1,2,3,3,[],Object{},5,6]
jQuery를 통해 :
var arr = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];
arr = $.grep(arr,function(n){ return n == 0 || n });
arr // [1, 2, 3, 3, 0, 4, 4, 5, 6]
업데이트-또 다른 빠르고 멋진 방법 (ES6 사용) :
var arr = [1,2,null, undefined,3,,3,,,0,,,4,,4,,5,,6,,,,],
temp = [];
for(let i of arr)
i && temp.push(i); // copy each non-empty value to the 'temp' array
arr = temp;
arr // [1, 2, 3, 3, 4, 4, 5, 6]
빈 값 제거
['foo', '',,,'',,null, ' ', 3, true, [], [1], {}, undefined, ()=>{}].filter(String)
// ["foo", null, " ", 3, true, [1], Object {}, undefined, ()=>{}]
모든 빈 값 ( "", null, 정의되지 않음 및 0)을 제거해야하는 경우 :
arr = arr.filter(function(e){return e});
빈 값과 줄 바꿈을 제거하려면 :
arr = arr.filter(function(e){ return e.replace(/(\r\n|\n|\r)/gm,"")});
예:
arr = ["hello",0,"",null,undefined,1,100," "]
arr.filter(function(e){return e});
반환:
["hello", 1, 100, " "]
업데이트 (Alnitak의 의견에 따라)
어떤 상황에서는 배열에 "0"을 유지하고 다른 것은 제거 할 수 있습니다 (null, undefined 및 ""). 이것은 한 가지 방법입니다.
arr.filter(function(e){ return e === 0 || e });
반환:
["hello", 0, 1, 100, " "]
라이너 1 개 :
[1, false, "", undefined, 2].filter(Boolean); // [1, 2]
또는 underscorejs.org 사용 :
_.filter([1, false, "", undefined, 2], Boolean); // [1, 2]
// or even:
_.compact([1, false, "", undefined, 2]); // [1, 2]
Javascript 1.6 Array.filter이상이있는 경우 간단한 return true콜백 함수를 사용할 수 있습니다 . 예 :
arr = arr.filter(function() { return true; });
.filter원래 배열에서 누락 된 요소를 자동으로 건너 뛰기 때문 입니다.
위에 링크 된 MDN 페이지에는 filter공식 버전을 지원하지 않는 JavaScript 인터프리터에서 사용할 수 있는 멋진 오류 검사 버전도 포함되어 있습니다 .
이것은 null명시 적 undefined값을 가진 항목이나 항목을 제거 하지 않지만 OP는 특별히 "누락 된"항목을 요청했습니다.
구멍을 제거하려면 다음을 사용해야합니다.
arr.filter(() => true)
arr.flat(0) // Currently stage 3, check compatibility before using this
구멍 제거 및 거짓 (null, 정의되지 않음, 0, -0, NaN, "", false, document.all) 값 :
arr.filter(x => x)
구멍 제거, null 및 정의되지 않음 :
arr.filter(x => x != null)
arr = [, null, (void 0), 0, -0, NaN, false, '', 42];
console.log(arr.filter(() => true)); // [null, (void 0), 0, -0, NaN, false, '', 42]
console.log(arr.filter(x => x)); // [42]
console.log(arr.filter(x => x != null)); // [0, -0, NaN, false, "", 42]그것을하는 깨끗한 방법.
var arr = [0,1,2,"Thomas","false",false,true,null,3,4,undefined,5,"end"];
arr = arr.filter(Boolean);
// [1, 2, "Thomas", "false", true, 3, 4, 5, "end"]
간단한 ES6
['a','b','',,,'w','b'].filter(v => v);
밑줄 / Lodash 사용 :
일반적인 사용 사례 :
_.without(array, emptyVal, otherEmptyVal);
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
용기 포함 :
_.without(['foo', 'bar', '', 'baz', '', '', 'foobar'], '');
--> ["foo", "bar", "baz", "foobar"]
without에 대한 lodash 문서를 참조하십시오 .
그냥 ES6이상 버전 방법, 배열 아래 가정 :
const arr = [1,2,3,undefined,4,5,6,undefined,7,8,undefined,undefined,0,9];
간단한 방법 :
const clearArray = arr.filter( i => i );
라이브러리를 사용하는 것이 옵션이라면 underscore.js에는 compact () http://documentcloud.github.com/underscore/ 라는 함수가 있다는 것을 알고 있으며 배열 및 컬렉션과 관련된 몇 가지 다른 유용한 함수도 있습니다.
다음은 해당 문서에서 발췌 한 내용입니다.
_.compact (배열)
모든 거짓 값이 제거 된 배열의 복사본을 반환합니다. JavaScript에서 false, null, 0, "", undefined 및 NaN은 모두 거짓입니다.
_.compact ([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
뿡뿡
실제로 Array.filter는 추가 코드를 추가하면 모든 브라우저에서 작동합니다. 아래를 참조하십시오.
var array = ["","one",0,"",null,0,1,2,4,"two"];
function isempty(x){
if(x!=="")
return true;
}
var res = array.filter(isempty);
document.writeln(res.toJSONString());
// gives: ["one",0,null,0,1,2,4,"two"]
이것은 IE에 추가해야하는 코드이지만 필터 및 기능 프로그래밍은 가치가 있습니다.
//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license
if (!Array.prototype.filter)
{
Array.prototype.filter = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
{
var val = this[i]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
아무도 언급하지 않았고 대부분의 사람들이 프로젝트에 밑줄이 포함되어 있으므로 _.without(array, *values);.
_.without(["text", "string", null, null, null, "text"], null)
// => ["text", "string", "text"]
ES6: let newArr = arr.filter(e => e);
루프하는 동안 배열의 길이를 수정하기 때문에 제안 된대로 루프 및 스플 라이스를 시도하는 것보다 배열에서 유지하려는 항목에서 새 배열을 만드는 것이 더 쉽습니다. 이상은 문제를 일으킬 수 있습니다.
다음과 같이 할 수 있습니다.
function removeFalsyElementsFromArray(someArray) {
var newArray = [];
for(var index = 0; index < someArray.length; index++) {
if(someArray[index]) {
newArray.push(someArray[index]);
}
}
return newArray;
}
실제로 여기에 더 일반적인 솔루션이 있습니다.
function removeElementsFromArray(someArray, filter) {
var newArray = [];
for(var index = 0; index < someArray.length; index++) {
if(filter(someArray[index]) == false) {
newArray.push(someArray[index]);
}
}
return newArray;
}
// then provide one or more filter functions that will
// filter out the elements based on some condition:
function isNullOrUndefined(item) {
return (item == null || typeof(item) == "undefined");
}
// then call the function like this:
var myArray = [1,2,,3,,3,,,,,,4,,4,,5,,6,,,,];
var results = removeElementsFromArray(myArray, isNullOrUndefined);
// results == [1,2,3,3,4,4,5,6]
아이디어를 얻었습니다. 그러면 다른 유형의 필터 기능을 사용할 수 있습니다. 아마도 당신이 필요로하는 것보다 더 많을 것입니다. 그러나 나는 관대함을 느꼈습니다 ...;)
이건 어때 (ES6) : 배열에서 거짓 값을 제거합니다.
var arr = [0,1,2,"test","false",false,true,null,3,4,undefined,5,"end"];
arr.filter((v) => (!!(v)==true));
//output:
//[1, 2, "test", "false", true, 3, 4, 5, "end"]
빈 요소없이 배열을 얻으려면 필터를 사용해야합니다. ES6의 예
const array = [1, 32, 2, undefined, 3];
const newArray = array.filter(arr => arr);
나는 단순히 "ES5의 호출 위의 내 목소리를 추가 해요 Array..filter()글로벌 생성자"골프 해킹,하지만 난 사용하는 것이 좋습니다 Object대신 String, Boolean또는 Number위의 제안.
특히 ES5는 filter()이미 undefined배열 내의 요소에 대해 트리거하지 않습니다 . 따라서 모든 요소 적중 true을 반환 하는 보편적으로 반환하는 함수 는 반드시 비 요소 만 반환 합니다.filter()undefined
> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(function(){return true})
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]
그러나 쓰는 ...(function(){return true;})것은 쓰는 것보다 깁니다 ...(Object). Object생성자 의 반환 값은 어떤 상황에서도 일종의 객체가 될 것입니다. 원시 - 권투 생성자 상기 제안과는 달리, 어떤 가능한 객체 값 falsey없고, 따라서 부울 설정에 Object대한 쇼트 핸드이다 function(){return true}.
> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(Object)
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]
위의 가장 많이 득표 한 답변을 사용할 때 첫 번째 예는 1보다 긴 문자열 길이에 대해 개별 문자를 얻었습니다. 아래는 그 문제에 대한 나의 해결책입니다.
var stringObject = ["", "some string yay", "", "", "Other string yay"];
stringObject = stringObject.filter(function(n){ return n.length > 0});
정의되지 않은 경우 반환하지 않는 대신 길이가 0보다 크면 반환합니다. 이것이 도움이되기를 바랍니다.
보고
["some string yay", "Other string yay"]
var data = [null, 1,2,3];
var r = data.filter(function(i){ return i != null; })
console.log(r)
[1,2,3]
그게 어때 :
js> [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,].filter(String).join(',')
1,2,3,3,0,4,4,5,6
이것은 작동합니다. AppJet 에서 테스트했습니다 (IDE에 코드를 복사하여 붙여넣고 "다시로드"를 눌러 작동하는지 확인할 수 있습니다. 계정을 만들 필요가 없습니다)
/* appjet:version 0.1 */
function Joes_remove(someArray) {
var newArray = [];
var element;
for( element in someArray){
if(someArray[element]!=undefined ) {
newArray.push(someArray[element]);
}
}
return newArray;
}
var myArray2 = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];
print("Original array:", myArray2);
print("Clenased array:", Joes_remove(myArray2) );
/*
Returns: [1,2,3,3,0,4,4,5,6]
*/
이를 수행하는 또 다른 방법은 배열의 길이 속성을 활용하는 것입니다. 배열의 '왼쪽'에 널이 아닌 항목을 패킹 한 다음 길이를 줄이십시오. 그것은 내부 알고리즘입니다-메모리를 할당하지 않고 가비지 수집기에 너무 나쁩니다-그리고 아주 좋은 최고 / 평균 / 최악의 행동을 가지고 있습니다.
이 솔루션은 여기에있는 다른 솔루션에 비해 Chrome에서 2 ~ 50 배, Firefox에서 5 ~ 50 배 더 빠릅니다. http://jsperf.com/remove-null-items-from-array
아래 코드는 열거 할 수없는 'removeNull'메서드를 Array에 추가하여 데이지 체인 방식에 대해 'this'를 반환합니다.
var removeNull = function() {
var nullCount = 0 ;
var length = this.length ;
for (var i=0, len=this.length; i<len; i++) { if (!this[i]) {nullCount++} }
// no item is null
if (!nullCount) { return this}
// all items are null
if (nullCount == length) { this.length = 0; return this }
// mix of null // non-null
var idest=0, isrc=length-1;
length -= nullCount ;
while (true) {
// find a non null (source) slot on the right
while (!this[isrc]) { isrc--; nullCount--; }
if (!nullCount) { break } // break if found all null
// find one null slot on the left (destination)
while ( this[idest]) { idest++ }
// perform copy
this[idest]=this[isrc];
if (!(--nullCount)) {break}
idest++; isrc --;
}
this.length=length;
return this;
};
Object.defineProperty(Array.prototype, 'removeNull',
{ value : removeNull, writable : true, configurable : true } ) ;
foo = [0, 1, 2, "", , false, 3, "four", null]
foo.filter(function(e) {
return e === 0 ? '0' : e
})
보고
[0, 1, 2, 3, "four"]
for ... in (object-member) 루프 '오용'. => 루프 본문에는 진실 값만 나타납니다.
// --- Example ----------
var field = [];
field[0] = 'One';
field[1] = 1;
field[3] = true;
field[5] = 43.68;
field[7] = 'theLastElement';
// --- Example ----------
var originalLength;
// Store the length of the array.
originalLength = field.length;
for (var i in field) {
// Attach the truthy values upon the end of the array.
field.push(field[i]);
}
// Delete the original range within the array so that
// only the new elements are preserved.
field.splice(0, originalLength);
이것은 당신을 도울 것입니다 : https://lodash.com/docs/4.17.4#remove
var details = [
{
reference: 'ref-1',
description: 'desc-1',
price: 1
}, {
reference: '',
description: '',
price: ''
}, {
reference: 'ref-2',
description: 'desc-2',
price: 200
}, {
reference: 'ref-3',
description: 'desc-3',
price: 3
}, {
reference: '',
description: '',
price: ''
}
];
scope.removeEmptyDetails(details);
expect(details.length).toEqual(3);
scope.removeEmptyDetails = function(details){
_.remove(details, function(detail){
return (_.isEmpty(detail.reference) && _.isEmpty(detail.description) && _.isEmpty(detail.price));
});
};
var data= {
myAction: function(array){
return array.filter(function(el){
return (el !== (undefined || null || ''));
}).join(" ");
}
};
var string = data.myAction(["I", "am","", "working", "", "on","", "nodejs", "" ]);
console.log(string);
산출:
나는 nodejs에서 일하고 있습니다.
배열에서 빈 요소를 제거하고 다른 요소를 표시합니다.
정규식으로 유효하지 않은 항목 필터링
array = array.filter(/\w/);
filter + regexp
빈 요소를 제거하는 가장 좋은 방법 Array.prototype.filter()은 다른 답변에서 이미 언급했듯이을 사용하는 것입니다.
불행히도 Array.prototype.filter()IE <9에서는 지원되지 않습니다. 여전히 IE8 또는 이전 버전의 IE를 지원해야하는 경우 다음 polyfill 을 사용하여 Array.prototype.filter()이러한 브라우저에 대한 지원을 추가 할 수 있습니다 .
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
누군가가 전체 어레이 또는 객체를 청소하려는 경우 도움이 될 수 있습니다.
var qwerty = {
test1: null,
test2: 'somestring',
test3: 3,
test4: {},
test5: {
foo: "bar"
},
test6: "",
test7: undefined,
test8: " ",
test9: true,
test10: [],
test11: ["77","88"],
test12: {
foo: "foo",
bar: {
foo: "q",
bar: {
foo:4,
bar:{}
}
},
bob: {}
}
}
var asdfg = [,,"", " ", "yyyy", 78, null, undefined,true, {}, {x:6}, [], [2,3,5]];
function clean_data(obj) {
for (var key in obj) {
// Delete null, undefined, "", " "
if (obj[key] === null || obj[key] === undefined || obj[key] === "" || obj[key] === " ") {
delete obj[key];
}
// Delete empty object
// Note : typeof Array is also object
if (typeof obj[key] === 'object' && Object.keys(obj[key]).length <= 0) {
delete obj[key];
}
// If non empty object call function again
if(typeof obj[key] === 'object'){
clean_data(obj[key]);
}
}
return obj;
}
var objData = clean_data(qwerty);
console.log(objData);
var arrayData = clean_data(asdfg);
console.log(arrayData);
산출:
제거 아무것도입니다 null, undefined, "", " ", empty object또는empty array
여기 jsfiddle
참고 URL : https://stackoverflow.com/questions/281264/remove-empty-elements-from-an-array-in-javascript
'Programing' 카테고리의 다른 글
| HashMap을 직접 초기화하는 방법 (문자 그대로)? (0) | 2020.09.28 |
|---|---|
| 문서에서 줄을 세는 방법은 무엇입니까? (0) | 2020.09.28 |
| 목록과 튜플의 차이점은 무엇입니까? (0) | 2020.09.28 |
| Access-Control-Allow-Origin 다중 원본 도메인? (0) | 2020.09.28 |
| docx, pptx 등에 대한 올바른 MIME 유형은 무엇입니까? (0) | 2020.09.28 |