วิธีรับองค์ประกอบแรกของอาร์เรย์

คุณจะได้รับองค์ประกอบแรกจากอาร์เรย์ดังนี้:

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

ฉันลองสิ่งนี้:

alert($(ary).first());

[object Object]แต่มันก็จะกลับมา 'first'ดังนั้นผมจึงจำเป็นต้องได้รับองค์ประกอบแรกจากอาร์เรย์ที่ควรจะเป็นองค์ประกอบ

แบบนี้

alert(ary[0])

เหตุใดคุณจึง jQuery-ifying อาเรย์ของวนิลา JavaScript ใช้ JavaScript มาตรฐาน!

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
alert(ary[0]);

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array

นอกจากนี้

แหล่งที่มามารยาทของbobince

บางวิธีด้านล่างสำหรับสถานการณ์ที่แตกต่างกัน

ในกรณีปกติส่วนใหญ่วิธีที่ง่ายที่สุดในการเข้าถึงองค์ประกอบแรกคือโดย

yourArray[0]

แต่สิ่งนี้ต้องการให้คุณตรวจสอบว่ามีจริง [0] อยู่หรือไม่

มีกรณีในโลกแห่งความจริงที่คุณไม่สนใจเกี่ยวกับอาเรย์ดั้งเดิมและไม่ต้องการตรวจสอบว่ามีดัชนีอยู่หรือไม่คุณต้องการเพียงแค่รับองค์ประกอบแรกหรืออินไลน์ที่ไม่ได้กำหนด

ในกรณีนี้คุณสามารถใช้shift ()วิธีการรับองค์ประกอบแรก แต่ต้องระมัดระวังว่าวิธีนี้จะปรับเปลี่ยนอาร์เรย์เดิม (ลบรายการแรกและส่งกลับ) ดังนั้นความยาวของอาร์เรย์จึงลดลงหนึ่งรายการ วิธีนี้สามารถใช้ในกรณีแบบอินไลน์ที่คุณเพียงแค่ต้องได้รับองค์ประกอบแรก แต่คุณไม่สนใจเกี่ยวกับอาร์เรย์เดิม

yourArray.shift()

สิ่งสำคัญที่ควรทราบคือทั้งสองข้างต้นเป็นเพียงตัวเลือกถ้าอาร์เรย์ของคุณเริ่มต้นด้วยดัชนี [0]

มีหลายกรณีที่องค์ประกอบแรกถูกลบออกตัวอย่างเช่นลบ yourArray [0] โดยปล่อยให้อาร์เรย์ของคุณมี "หลุม" ตอนนี้องค์ประกอบที่ [0] ไม่ได้ถูกกำหนด แต่คุณต้องการรับองค์ประกอบ "ที่มีอยู่" เป็นครั้งแรก ฉันได้เห็นกรณีของโลกแห่งความเป็นจริงมากมาย

ดังนั้นสมมติว่าเราไม่มีความรู้เกี่ยวกับอาเรย์และคีย์แรก (หรือเรารู้ว่ามีรู) เรายังสามารถรับองค์ประกอบแรกได้

คุณสามารถใช้find ()เพื่อรับองค์ประกอบแรก

ข้อดีของ find () คือประสิทธิภาพเมื่อออกจากลูปเมื่อค่าแรกเป็นไปตามเงื่อนไข (เพิ่มเติมเกี่ยวกับเรื่องนี้ด้านล่าง) (คุณสามารถกำหนดเงื่อนไขเพื่อแยกค่า Null หรือค่าว่างอื่น ๆ ด้วย)

var firstItem = yourArray.find(x=>x!==undefined);

ฉันต้องการรวมตัวกรอง ()ที่นี่เป็นตัวเลือกในการ "แก้ไข" อาเรย์แรกในการคัดลอกแล้วรับองค์ประกอบแรกในขณะที่รักษาอาเรย์เดิมที่ไม่เปลี่ยนแปลง (ไม่แก้ไข)

อีกเหตุผลที่จะรวม filter () ที่นี่ก็คือมันมีอยู่ก่อน find () และโปรแกรมเมอร์จำนวนมากได้ใช้ไปแล้ว (เป็น ES5 เทียบกับ find () เป็น ES6)

var firstItem = yourArray.filter(x => typeof x!==undefined).shift();

คำเตือนว่าตัวกรอง () ไม่ใช่วิธีที่มีประสิทธิภาพ (ตัวกรอง () ไหลผ่านองค์ประกอบทั้งหมด) และสร้างอาร์เรย์อื่น มันเป็นเรื่องดีที่จะใช้กับอาร์เรย์ขนาดเล็กเนื่องจากผลกระทบต่อประสิทธิภาพจะต่ำกว่าใกล้กับการใช้ forEach ตัวอย่างเช่น

(ฉันเห็นบางคนแนะนำให้ใช้สำหรับ ... ในลูปเพื่อรับองค์ประกอบแรก แต่ฉันอยากจะแนะนำกับวิธีนี้สำหรับ ... ในไม่ควรใช้เพื่อทำซ้ำในอาร์เรย์ที่ลำดับดัชนีมีความสำคัญเพราะมันไม่ได้ ' ไม่รับประกันการสั่งซื้อแม้ว่าคุณจะสามารถโต้แย้งได้ว่าเบราว์เซอร์ส่วนใหญ่เคารพคำสั่งซื้อ แต่สำหรับแต่ละไม่ได้แก้ปัญหาเป็นจำนวนมากแนะนำเพราะคุณไม่สามารถทำลายมันและมันจะทำงานผ่านองค์ประกอบทั้งหมดคุณจะดีกว่าการใช้ง่ายสำหรับ วนรอบและโดยการตรวจสอบคีย์ / ค่า

ทั้ง find () และ filter () รับประกันลำดับขององค์ประกอบดังนั้นจึงปลอดภัยที่จะใช้ดังกล่าว

องค์ประกอบของดัชนี 0 อาจไม่มีอยู่หากองค์ประกอบแรกถูกลบ:

let a = ['a', 'b', 'c'];
delete a[0];

for (let i in a) {
  console.log(i + ' ' + a[i]);
}

วิธีที่ดีกว่าในการรับองค์ประกอบแรกโดยไม่มี jQuery:

function first(p) {
  for (let i in p) return p[i];
}

console.log( first(['a', 'b', 'c']) );

ใช้การทำลายล้าง ES6

let [first] = [1,2,3];

ซึ่งเป็นเช่นเดียวกับ

let first = [1,2,3][0];

หากคุณต้องการที่จะรักษาreadibilityคุณก็สามารถเพิ่มฟังก์ชั่นแรกที่Array.protoype:

Array.prototype.first = function () {
    return this[0];
};

จากนั้นคุณสามารถดึงองค์ประกอบแรกได้อย่างง่ายดาย:

[1, 2, 3].first();
> 1

คุณสามารถใช้find():

let first = array.find(Boolean);

หรือถ้าคุณต้องการองค์ประกอบแรกแม้ถ้ามันเป็นfalsy :

let first = array.find(e => true);

ไปไมล์พิเศษ:

หากคุณสนใจเกี่ยวกับความสามารถในการอ่าน แต่ไม่ต้องการพึ่งพาเหตุการณ์ที่เป็นตัวเลขคุณสามารถเพิ่มfirst()-function ได้Array.protoypeโดยการกำหนดด้วยวิธีObject​.define​Property()ที่ช่วยลดข้อผิดพลาดของการปรับเปลี่ยนต้นแบบวัตถุในตัว Array โดยตรง ( อธิบายไว้ที่นี่ )

ประสิทธิภาพค่อนข้างดี ( find()หยุดหลังจากองค์ประกอบแรก) แต่ไม่สมบูรณ์หรือเข้าถึงได้ในระดับสากล (ES6 เท่านั้น) สำหรับพื้นหลังมากขึ้นอ่านคำตอบ @Selays

Object.defineProperty(Array.prototype, 'first', {
  value() {
    return this.find(e => true);     // or this.find(Boolean)
  }
});

จากนั้นเพื่อดึงองค์ประกอบแรกที่คุณสามารถทำได้:

let array = ['a', 'b', 'c'];
array.first();

> 'a'

ตัวอย่างเพื่อดูการทำงาน:

Object.defineProperty(Array.prototype, 'first', {
  value() {
    return this.find(Boolean);
  }
});

console.log( ['a', 'b', 'c'].first() );

หากอาร์เรย์ของคุณไม่ได้รับประกันว่าจะได้รับการเติมจากดัชนีศูนย์คุณสามารถใช้Array.prototype.find():

var elements = []
elements[1] = 'foo'
elements[2] = 'bar'

var first = function(element) { return !!element }    
var gotcha = elements.find(first)

console.log(a[0]) // undefined
console.log(gotcha) // 'foo'

array.find(e => !!e);  // return the first element 

ตั้งแต่ "ค้นหา" ให้ส่งคืนองค์ประกอบแรกที่ตรงกับตัวกรอง && !!eจับคู่องค์ประกอบใด ๆ

หมายเหตุ นี้จะทำงานเฉพาะเมื่อองค์ประกอบแรกไม่ได้เป็น "Falsy": null, false, NaN, "", 0,undefined

ลองalert(ary[0]);ดู

เฉพาะในกรณีที่คุณใช้ underscore.js ( http://underscorejs.org/ ) คุณสามารถทำได้:

_.first(your_array);

ฉันรู้ว่าคนที่มาจากภาษาอื่นสู่ JavaScript มองหาสิ่งที่ต้องการhead()หรือfirst()รับองค์ประกอบแรกของอาร์เรย์ แต่คุณจะทำอย่างไร

ลองนึกภาพคุณมีอาร์เรย์ด้านล่าง:

const arr = [1, 2, 3, 4, 5];

ใน JavaScript คุณสามารถทำได้:

const first = arr[0];

หรือผู้ชนะวิธีที่ใหม่กว่าคือ:

const [first] = arr;

แต่คุณสามารถเขียนฟังก์ชั่นอย่างเช่น ...

function first(arr) {
   if(!Array.isArray(arr)) return;
   return arr[0];
}

หากใช้ขีดล่างมีรายการฟังก์ชันที่ทำสิ่งเดียวกันกับที่คุณค้นหา:

_.first 

_.head

_.take

วิธีการที่ทำงานร่วมกับอาร์เรย์และทำงานกับวัตถุด้วยเช่นกัน (ระวังวัตถุไม่มีคำสั่งที่รับประกัน!)

ฉันชอบวิธีนี้มากที่สุดเพราะอาร์เรย์ดั้งเดิมไม่ได้ถูกแก้ไข

// In case of array
var arr = [];
arr[3] = 'first';
arr[7] = 'last';
var firstElement;
for(var i in arr){
    firstElement = arr[i];
    break;
}
console.log(firstElement);  // "first"

// In case of object
var obj = {
    first: 'first',
    last: 'last',
};

var firstElement;

for(var i in obj){
    firstElement = obj[i];
    break;
}

console.log(firstElement) // First;

ใน ES2015 ขึ้นไปให้ใช้การทำลายอาร์เรย์:

const arr = [42, 555, 666, 777]
const [first] = arr
console.log(first)

อีกหนึ่งสำหรับผู้ที่เกี่ยวข้องกับองค์ประกอบความจริงเท่านั้น

ary.find(Boolean);

ค้นหาองค์ประกอบแรกในอาร์เรย์โดยใช้ตัวกรอง:

ใน typescript:

function first<T>(arr: T[], filter: (v: T) => boolean): T {
    let result: T;
    return arr.some(v => { result = v; return filter(v); }) ? result : undefined;
}

ในจาวาสคริปต์ธรรมดา:

function first(arr, filter) {
    var result;
    return arr.some(function (v) { result = v; return filter(v); }) ? result : undefined;
}

และในทำนองเดียวกัน indexOf:

ใน typescript:

function indexOf<T>(arr: T[], filter: (v: T) => boolean): number {
    let result: number;
    return arr.some((v, i) => { result = i; return filter(v); }) ? result : undefined;
}

ในจาวาสคริปต์ธรรมดา:

function indexOf(arr, filter) {
    var result;
    return arr.some(function (v, i) { result = i; return filter(v); }) ? result : undefined;
}

เมื่อมีการแข่งขันหลายรายการจะใช้. .first () ของ JQuery สำหรับดึงองค์ประกอบ DOM แรกที่ตรงกับตัวเลือก css ที่กำหนดให้กับ jQuery

คุณไม่จำเป็นต้องใช้ jQuery เพื่อจัดการกับอาร์เรย์ของ JavaScript

ทำไมไม่คิดว่าอาเรย์ของคุณจะว่างเปล่า?

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
first = (array) => array.length ? array[0] : 'no items';
first(ary)
// output: first

var ary = [];
first(ary)
// output: no items

เพียงแค่ใช้ ary.slice(0,1).pop();

ใน

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

console.log("1º "+ary.slice(0,1).pop());
console.log("2º "+ary.slice(0,2).pop());
console.log("3º "+ary.slice(0,3).pop());
console.log("4º "+ary.slice(0,4).pop());
console.log("5º "+ary.slice(0,5).pop());
console.log("Last "+ary.slice(-1).pop());

array.slice (ที่ START END) .pop ();

คุณสามารถใช้. get (0):

alert($(ary).first().get(0));

เพื่อรับองค์ประกอบแรกของอาร์เรย์

ใช้สิ่งนี้เพื่อแยกตัวอักษรในจาวาสคริปต์

var str = "boy, girl, dog, cat";
var arr = str.split(",");
var fst = arr.splice(0,1).join("");
var rest = arr.join(",");

ตัวอย่างก่อนหน้านี้ทำงานได้ดีเมื่อดัชนีอาร์เรย์เริ่มต้นที่ศูนย์ คำตอบของ thomaxไม่ได้ขึ้นอยู่กับดัชนีที่เริ่มต้นที่ศูนย์ แต่ขึ้นอยู่Array.prototype.findกับสิ่งที่ฉันไม่สามารถเข้าถึงได้ วิธีแก้ปัญหาต่อไปนี้โดยใช้jQuery $ .eachทำงานได้ดีในกรณีของฉัน

let haystack = {100: 'first', 150: 'second'},
    found = null;

$.each(haystack, function( index, value ) {
    found = value;  // Save the first array element for later.
    return false;  // Immediately stop the $.each loop after the first array element.
});

console.log(found); // Prints 'first'.

คุณสามารถทำได้โดยlodash _.headอย่างง่ายดาย

var arr = ['first', 'second', 'third', 'fourth', 'fifth'];
console.log(_.head(arr));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

@NicoLwk คุณควรลบองค์ประกอบที่มีรอยต่อที่จะเปลี่ยนอาร์เรย์ของคุณกลับ ดังนั้น:

var a=['a','b','c'];
a.splice(0,1);
for(var i in a){console.log(i+' '+a[i]);}

ประกาศต้นแบบเพื่อรับองค์ประกอบอาร์เรย์แรกเป็น:

Array.prototype.first = function () {
   return this[0];
};

จากนั้นใช้เป็น:

var array = [0, 1, 2, 3];
var first = array.first();
var _first = [0, 1, 2, 3].first();

หรือเพียงแค่ (:

first = array[0];

หากคุณกำลังผูกมัดฟังก์ชันมุมมองให้กับอาร์เรย์เช่น

array.map(i => i+1).filter(i => i > 3)

และต้องการองค์ประกอบแรกหลังจากฟังก์ชั่นเหล่านี้คุณสามารถเพิ่ม.shift()มันไม่ได้ปรับเปลี่ยนต้นฉบับarrayมันเป็นวิธีที่ดีกว่าarray.map(i => i+1).filter(=> i > 3)[0]

หากคุณต้องการองค์ประกอบแรกของอาร์เรย์โดยไม่ต้องแก้ไขต้นฉบับคุณสามารถใช้array[0]หรือarray.map(n=>n).shift()(ไม่มีแผนที่คุณจะแก้ไขต้นฉบับในกรณีนี้ btw ฉันจะแนะนำ..[0]รุ่น

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

console.log(Object.keys(ary)[0]);

สร้างอาร์เรย์วัตถุใด ๆ ( req) จากนั้นเพียงObject.keys(req)[0]เลือกคีย์แรกในอาร์เรย์วัตถุ

คำตอบของ @thomax ค่อนข้างดี แต่จะล้มเหลวหากองค์ประกอบแรกในอาร์เรย์เป็นเท็จหรือเท็จ -y (0, สตริงว่าง ฯลฯ ) ดีกว่าที่จะแค่คืนความจริงให้กับสิ่งอื่นที่ไม่ได้กำหนด:

const arr = [];
arr[1] = '';
arr[2] = 'foo';

const first = arr.find((v) => { return (typeof v !== 'undefined'); });
console.log(first); // ''

ง่าย ES6:

let a = []
a[7] = 'A'
a[10] = 'B'

let firstValue = a.find(v => v)
let firstIndex = a.findIndex(v => v)