VUE。JavaScript学习笔记：数组的concat（）、slice（）和
splice（）
JavaScript为操作已经包含在数组中的项提供了很多⽅法。⽐如、。今天学习操作数组的其他⽅法：concat()、slice()和splice()。concat()⽅法
concat()⽅法可以简单的将其理解为合并数组。基于当前数组中的所有项创建⼀个新数组。简单的说，concat()先给当前数组创建⼀个副本，然后将接收到的参数添加到这个副本（数组）的末尾，最后返回⼀个新的数组。来看个简单的⽰例：
var arr = [`⼤漠`,'30','W3cplus'];
console.log(arr); // ["⼤漠", "30", "W3cplus"]
var arr2 = at('Blog','2014');
console.log(arr2); // ["⼤漠", "30", "W3cplus", "Blog", "2014"]
上⾯代码演⽰的concat()⽅法传递的值不是数组，这些值就会简单添加到结果数组(arr2)的末尾。
除此之外，concat()传递的值还有其他的使⽤⽅法：同时传递⼀个或多个数组，如下所⽰：
var arr = ["⼤漠","30"];
console.log(arr); // ["⼤漠", "30"]
var arr2 = at(1,["blog","w3cplus"],["a","b","c"]);
console.log(arr2); // ["⼤漠", "30", 1, "blog", "w3cplus", "a", "b", "c"]
另外,concat()还可以传递空值（也就是说没有传递参数），此时它只是复制当前数组，并且返回⼀个副本。如下所⽰：
var arr = [1,2];
console.log(arr); // [1, 2]
var arr2 = at();
console.log(arr2); // [1, 2]
从上⾯⼏个⽰例，不难看出：concat()⽅法是在数组的副本上进⾏操作并返回新构建的数组，所以并不会影响到原来的数组。
concat() vs. push()
前⾯说过可以也可以给数组传参数，同样是在数组的末尾添加⼀个或多个值（数组）。那么与concat()有什么不同之处呢？别的先不多说，先来看⼀个⽰例：
// push()⽅法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.push('c','d');
console.log(arr); // ["a", "b", "c", "d"]
// concat()⽅法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
console.log(arr); // ["a", "b"]
var arr2 = at('c','d');
console.log(arr2); // ["a", "b", "c", "d"]
Chrome输出的结果告诉我们：push()和concat()⽅法都可以将传的参数添加到数组的后⾯，只不过push()是在原数组上操作（改变的是原数组），concat()不会改变原数组，创建原数组的副本，并且把传的参数添加到新数组后⾯。
如果传的是数组⼜将是⼀个什么情形呢？还是看实例吧。
// push()⽅法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.push(['c','d'],[1,2,3]);
console.log(arr); // ["a", "b", Array[2], Array[3]]
// concat()
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
var arr2 = at(['c','d'],[1,2,3]);
console.log(arr2); // ["a", "b", "c", "d", 1, 2, 3]
Chrome输出的结果（push() vs. concat()）:
push()传递的参数是数组时，将整个数组传给原数组末尾，如⽰例中得到的结果["a", "b", Array[2], Array[3]]，⽽concat()传递的参数是数组时，将参数中数组的每⼀个数组项添加到原数组的末尾，如⽰例中得到的结果["a", "b", "c", "d", 1, 2, 3]。
slice()⽅法
concat()⽅法可以在原数组基础上创建⼀个副本数组，其实slice()⽅法它也能基于当前数组创建⼀个新数组，⽽且对原数组也并不会有任何影响。
slice()接受⼀个或两个参数，即要返回项的起始和结束位置。当只给slice()传递⼀个参数时，该⽅法返回从该参数指定位置开始到当前数组末尾的所有项。如下⾯⽰例：
// 测试数组函数，将输出数组的length和第个key:value
var test = function(array) {
console.log('length:'+ array.length);
array.forEach(function(element, index, array) {
console.log(index + ':' + element);
});
};
var arr = [0,1,2,3,4,5,6];
test(arr);
var arr2 = arr.slice(3);
test(arr);
test(arr2);
Chrome输出的结果如下：
假设将数组arr的每个数组项存放在⼀个⼩格⼦中，并且按数组的索引号从左向右存放。slice()⽅法执⾏之后，将会按传递的参数之前的值从格⼦中移除，如下图所⽰：
slice()还可以传两个参数，该⽅法返回起始和结束位置之间的项，但不包括结束位置的项，如：
var arr = [0,1,2,3,4,5,6];
test(arr);
var arr2 = arr.slice(2,5);
test(arr);
学javascript前要学什么test(arr2);
Chrome输出的结果如下：
同样使⽤⼩格⼦存放的⽅式来演⽰整个处理过程：
slice()传递的参数还可以是负值。当参数中有⼀个负值时，则⽤数组长度加上该数来确定相应的位置。
⽐如传递的值是-3，数组的length为6，此时slice(-3)对应的就是slice(3)。或者可以从数组的末尾开始计算起，最末尾的是-1。来看看⽰例：
var arr = [0,1,2,3,4,5,6];
test(arr);
var arr2 = arr.slice(-3);
test(arr);
test(arr2);
Chrome输出的结果如下：
同样使⽤⼩格⼦存放的⽅式来演⽰整个处理过程：
当然第⼆个参数也可以是负数，⽽且还可以正数和负数混合使⽤。但有⼀点需要特别注意：slice()传递的两个参数时，第⼀个参数和第⼆个参数位置相同或者第⼀个参数在第⼆个参数之后时，得到的新数组是⼀个空值（负值也是类似，但负值与数值长度之和再作对⽐）。简⾔之，结束位置⼩于或等于开始位置，将返回⼀个空数组。如下⾯的⽰例：
var arr = [0,1,2,3,4,5,6];
test(arr);
var arr2 = arr.slice(-3,4);
test(arr);
test(arr2);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。