ความแตกต่างระหว่างspliceและsliceคืออะไร?

$scope.participantForms.splice(index, 1);
$scope.participantForms.slice(index, 1);

splice()เปลี่ยนอาเรย์ดั้งเดิมโดยที่slice()ไม่เปลี่ยน แต่ทั้งคู่ส่งคืนออบเจ็กต์อาร์เรย์

ดูตัวอย่างด้านล่าง:

var array=[1,2,3,4,5];
console.log(array.splice(2));

[3,4,5]นี้จะกลับ อาร์เรย์เดิมได้รับผลกระทบที่เกิดขึ้นในความเป็นอยู่array[1,2]

var array=[1,2,3,4,5]
console.log(array.slice(2));

[3,4,5]นี้จะกลับ อาร์เรย์ต้นฉบับไม่ได้รับผลกระทบที่มีผลในการเป็นอยู่array[1,2,3,4,5]

ด้านล่างเป็นซอง่าย ๆ ซึ่งยืนยันสิ่งนี้:

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);

ทั้ง Splice และ Slice เป็นฟังก์ชัน Javascript Array

Splice vs Slice

1. วิธีการ splice () ส่งคืนรายการที่ถูกลบในอาร์เรย์และวิธี slice () ส่งคืนองค์ประกอบที่เลือกในอาร์เรย์เป็นวัตถุอาร์เรย์ใหม่

2. วิธีการประกบกัน () เปลี่ยนอาร์เรย์เดิมและวิธีการแบ่ง () จะไม่เปลี่ยนอาร์เรย์เดิม

3. วิธีการ splice () สามารถรับจำนวนอาร์กิวเมนต์ได้ n และวิธี slice () ใช้เวลา 2 ข้อโต้แย้ง

ต่อด้วยตัวอย่าง

อาร์กิวเมนต์ 1: ดัชนี, จำเป็น จำนวนเต็มที่ระบุตำแหน่งที่จะเพิ่ม / ลบรายการใช้ค่าลบเพื่อระบุตำแหน่งจากจุดสิ้นสุดของอาร์เรย์

อาร์กิวเมนต์ 2: ไม่บังคับ จำนวนรายการที่จะลบ หากตั้งค่าเป็น 0 (ศูนย์) จะไม่มีการลบรายการใด ๆ และหากไม่ผ่านรายการทั้งหมดจากดัชนีที่ระบุจะถูกลบออก

อาร์กิวเมนต์ 3 … n: ไม่บังคับ รายการใหม่ที่จะเพิ่มลงในอาร์เรย์

var array=[1,2,3,4,5];
console.log(array.splice(2));
// shows [3, 4, 5], returned removed item(s) as a new array object.
 
console.log(array);
// shows [1, 2], original array altered.
 
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// shows [8]
 
console.log(array2.splice(2,0));
//shows [] , as no item(s) removed.
 
console.log(array2);
// shows [6,7,9,0]

ฝานพร้อมตัวอย่าง

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

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

var array=[1,2,3,4,5]
console.log(array.slice(2));
// shows [3, 4, 5], returned selected element(s).
 
console.log(array.slice(-2));
// shows [4, 5], returned selected element(s).
console.log(array);
// shows [1, 2, 3, 4, 5], original array remains intact.
 
var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// shows [8, 9]
 
console.log(array2.slice(-2,4));
// shows [9]
 
console.log(array2.slice(-3,-1));
// shows [8, 9]
 
console.log(array2);
// shows [6, 7, 8, 9, 0]

ชิ้น ()วิธีการส่งกลับสำเนาส่วนหนึ่งของอาร์เรย์ลงในวัตถุแถวใหม่

$scope.participantForms.slice(index, 1);

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

ประกบกัน ()วิธีการเปลี่ยนแปลงเนื้อหาของอาร์เรย์โดยการเอาองค์ประกอบที่มีอยู่และ / หรือการเพิ่มองค์ประกอบใหม่

$scope.participantForms.splice(index, 1);

สิ่งนี้จะลบองค์ประกอบหนึ่งจากparticipantFormsอาร์เรย์ที่indexตำแหน่ง

นี่คือฟังก์ชั่นพื้นฐานของ Javascript, AngularJS ไม่มีส่วนเกี่ยวข้องกับพวกเขา

นี่คือเคล็ดลับง่าย ๆ ในการจดจำความแตกต่างระหว่างslicevssplice

var a=['j','u','r','g','e','n'];

// array.slice(startIndex, endIndex)
a.slice(2,3);
// => ["r"]

//array.splice(startIndex, deleteCount)
a.splice(2,3);
// => ["r","g","e"]

Trick to remember:

คิดว่า"spl" (first 3 letters of splice)สั้นสำหรับ "ความยาว specifiy" ว่าอาร์กิวเมนต์ที่สองควรมีความยาวไม่ใช่ดัชนี

Splice - การอ้างอิง MDN - ข้อกำหนดของ ECMA-262

วากยสัมพันธ์
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

พารามิเตอร์

• start: จำเป็น ดัชนีเริ่มต้น
  ถ้าstartเป็นลบก็จะถือว่าเป็น"Math.max((array.length + start), 0)"ตามสเป็ค (ตัวอย่างด้านล่าง) arrayได้อย่างมีประสิทธิภาพจากปลาย
• deleteCount: ไม่จำเป็น. จำนวนองค์ประกอบที่จะลบ (ทั้งหมดจากstartหากไม่ได้ระบุ)
• item1, item2, ...: ไม่จำเป็น. องค์ประกอบที่จะเพิ่มลงในอาร์เรย์จากstartดัชนี

คืนค่า : อาร์เรย์ที่มีองค์ประกอบที่ถูกลบ (อาร์เรย์ว่างถ้าไม่มีการลบ)

กลายพันธุ์อาร์เรย์เดิม : ใช่

ตัวอย่าง:

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

// Remove first element
console.log('Elements deleted:', array.splice(0, 1), 'mutated array:', array);
// Elements deleted: [ 1 ] mutated array: [ 2, 3, 4, 5 ]

// array = [ 2, 3, 4, 5]
// Remove last element (start -> array.length+start = 3)
console.log('Elements deleted:', array.splice(-1, 1), 'mutated array:', array);
// Elements deleted: [ 5 ] mutated array: [ 2, 3, 4 ]

ตัวอย่างเพิ่มเติมในตัวอย่างMDN Splice

Slice - การอ้างอิง MDN - ข้อมูลจำเพาะ ECMA-262

พารามิเตอร์ไวยากรณ์
array.slice([begin[, end]])

• begin: ไม่จำเป็น. ดัชนีเริ่มต้น (0 เริ่มต้น)
  ถ้าbeginเป็นลบก็จะถือว่าเป็น"Math.max((array.length + begin), 0)"ตามสเป็ค (ตัวอย่างด้านล่าง) arrayได้อย่างมีประสิทธิภาพจากปลาย
• end: ไม่จำเป็น. ดัชนีสุดท้ายสำหรับการแยก แต่ไม่รวม (ค่าเริ่มต้น array.length) ถ้าendเป็นลบก็จะถือว่าเป็น"Math.max((array.length + begin),0)"ตามสเป็ค (ตัวอย่างด้านล่าง) arrayได้อย่างมีประสิทธิภาพจากปลาย

คืนค่า : อาร์เรย์ที่มีองค์ประกอบที่แยกออกมา

กลายพันธุ์เดิม : ไม่

ตัวอย่าง:

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

// Extract first element
console.log('Elements extracted:', array.slice(0, 1), 'array:', array);
// Elements extracted: [ 1 ] array: [ 1, 2, 3, 4, 5 ]

// Extract last element (start -> array.length+start = 4)
console.log('Elements extracted:', array.slice(-1), 'array:', array);
// Elements extracted: [ 5 ] array: [ 1, 2, 3, 4, 5 ]

ตัวอย่างเพิ่มเติมในตัวอย่างMDN Slice

การเปรียบเทียบประสิทธิภาพ

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

Splice และ Slice เป็นคำสั่งในตัวของ Javascript - ไม่ใช่เฉพาะคำสั่ง AngularJS Slice ส่งคืนองค์ประกอบอาร์เรย์จาก "เริ่มต้น" จนถึงก่อนหน้าตัวระบุ "สิ้นสุด" Splice จะทำการปิดอาร์เรย์จริงและเริ่มต้นที่ "start" และเก็บจำนวนองค์ประกอบที่ระบุไว้ Google มีข้อมูลมากมายเพียงแค่ค้นหา

splice()วิธีการส่งกลับรายการที่ถูกลบในอาร์เรย์ slice()วิธีการส่งกลับองค์ประกอบที่เลือก (s) ในอาร์เรย์เป็นวัตถุแถวใหม่

splice()วิธีการเปลี่ยนแปลงอาร์เรย์เดิมและslice()วิธีการไม่เปลี่ยนอาร์เรย์เดิม

• Splice() เมธอดสามารถรับจำนวนอาร์กิวเมนต์ได้ n:

  อาร์กิวเมนต์ 1:ดัชนี, จำเป็น

  อาร์กิวเมนต์ 2:ไม่บังคับ จำนวนรายการที่จะลบ หากตั้งค่าเป็น 0 (ศูนย์) จะไม่มีการลบรายการใด ๆ และหากไม่ผ่านรายการทั้งหมดจากดัชนีที่ระบุจะถูกลบออก

  อาร์กิวเมนต์ 3..n:ไม่บังคับ รายการใหม่ที่จะเพิ่มลงในอาร์เรย์

• slice() วิธีการสามารถใช้เวลา 2 ข้อโต้แย้ง:

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

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

ประกบกันและลบรายการอาร์เรย์โดยดัชนี

ดัชนี = 2

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];
//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

console.log("----before-----");
console.log(arr1.splice(2, 1));
console.log(arr2.slice(2, 1));

console.log("----after-----");
console.log(arr1);
console.log(arr2);

let log = console.log;

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];

//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

log("----before-----");
log(arr1.splice(2, 1));
log(arr2.slice(2, 1));

log("----after-----");
log(arr1);
log(arr2);

ตัวอย่างอื่น:

[2,4,8].splice(1, 2) -> returns [4, 8], original array is [2]

[2,4,8].slice(1, 2) -> returns 4, original array is [2,4,8]

ชิ้นไม่เปลี่ยนอาร์เรย์เดิมมันกลับอาร์เรย์ใหม่ แต่ประกบกันเปลี่ยนอาร์เรย์เดิม

example: var arr = [1,2,3,4,5,6,7,8];
         arr.slice(1,3); // output [2,3] and original array remain same.
         arr.splice(1,3); // output [2,3,4] and original array changed to [1,5,6,7,8].

อาร์กิวเมนต์ที่สองวิธีที่แตกต่างจากวิธีการชิ้น อาร์กิวเมนต์ที่สองใน splice แทนการนับองค์ประกอบที่จะลบและในชิ้นมันเป็นตัวแทนดัชนีปลาย

arr.splice(-3,-1); // output [] second argument value should be greater then 
0.
arr.splice(-3,-1); // output [6,7] index in minus represent start from last.

-1 หมายถึงองค์ประกอบสุดท้ายจึงเริ่มจาก -3 เป็น -1 ข้างต้นเป็นข้อแตกต่างที่สำคัญระหว่างการต่อรอยและวิธีฝาน

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

        // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.slice(index)
        // result=4  
        // after slicing=>  array =[1,2,3,4,5]  (same as original array)

แต่ในกรณีที่ประกบกัน () มันมีผลต่ออาร์เรย์เดิม; ชอบ,

         // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.splice(index)
        // result=4  
        // after splicing array =[1,2,3,5]  (splicing affects original array)

Splice Array JavaScript () วิธีการตามตัวอย่าง

ตัวอย่างที่ 1 โดย tutsmake - ลบ 2 องค์ประกอบจากดัชนี 1

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(1,2);

 console.log( arr ); 

ตัวอย่าง -2 โดย tutsmake - เพิ่มองค์ประกอบใหม่จากดัชนี 0 JavaScript

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(0,0,"zero");

 console.log( arr );  

ตัวอย่าง -3 โดย tutsmake - เพิ่มและลบองค์ประกอบใน Array JavaScript

var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // add at index 1

console.log(months); 

months.splice(4, 1, 'May'); // replaces 1 element at index 4

console.log(months);

https://www.tutsmake.com/javascript-array-splice-method-by-example/