DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
        • Prototype
          • attr
          • concat
          • each
          • filter
          • forEach
          • indexOf
          • join
          • map
          • pop
          • push
          • replace
          • reverse
          • shift
          • slice
          • splice
          • unshift
        • Static
          • Map
          • extend
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-namespace
      • can-reflect
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

splice

  • Edit on GitHub

Insert and remove elements from a List.

list.splice(index[, howMany[, ...newElements]])

Parameters

  1. index {Number}:

    where to start removing or inserting elements

  2. howMany {Number}:

    the number of elements to remove If howMany is not provided, splice will remove all elements from index to the end of the List.

  3. newElements {*}:

    elements to insert into the List

Returns

{Array}:

the elements removed by splice

splice lets you remove elements from and insert elements into a List.

This example demonstrates how to do surgery on a list of numbers:

 var list = new List([0, 1, 2, 3]);

 // starting at index 2, remove one element and insert 'Alice' and 'Bob':
 list.splice(2, 1, 'Alice', 'Bob');
 list.attr(); // [0, 1, 'Alice', 'Bob', 3]

Events

splice causes the List it's called on to emit change events, add events, remove events, and length events. If there are any elements to remove, a change event, a remove event, and a length event will be fired. If there are any elements to insert, a separate change event, an add event, and a separate length event will be fired.

This slightly-modified version of the above example should help make it clear how splice causes events to be emitted:

 var list = new List(['a', 'b', 'c', 'd']);
 list.bind('change', function(ev, attr, how, newVals, oldVals) {
     console.log('change: ' + attr + ', ' + how + ', ' + newVals + ', ' + oldVals);
 });
 list.bind('add', function(ev, newVals, where) {
     console.log('add: ' + newVals + ', ' + where);
 });
 list.bind('remove', function(ev, oldVals, where) {
     console.log('remove: ' + oldVals + ', ' + where);
 });
 list.bind('length', function(ev, length) {
     console.log('length: ' + length + ', ' + this.attr());
 });

 // starting at index 2, remove one element and insert 'Alice' and 'Bob':
 list.splice(2, 1, 'Alice', 'Bob'); // change: 2, 'remove', undefined, ['c']
                                    // remove: ['c'], 2
                                    // length: 5, ['a', 'b', 'Alice', 'Bob', 'd']
                                    // change: 2, 'add', ['Alice', 'Bob'], ['c']
                                    // add: ['Alice', 'Bob'], 2
                                    // length: 5, ['a', 'b', 'Alice', 'Bob', 'd']

More information about binding to these events can be found under [can.List.attr attr].

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 3.14.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news