这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战
前面文章学习了操作数组的一些方法(forEach()/map()/reduce()等)也是高阶函数 相关更文 JavaScript 并不完美但是不影响其运行的一些神奇"bug"直达列表
在项目开发中对于请求后端的数据多为数组, 经常需要对这个大数组进行处理, 本篇继续学习 JavaScript 数组的一些相关方法 Array.prototype.slice()
JavaScript -slice()
Array.prototype.slice() 这个方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end）。
slice() 语法
arr.slice([begin[, end]])
返回值: 一个含有被提取元素的 新数组。故不会改变原数据.
小例子:
const dataList = ['小阿天', 'pear', 'apple', 'string3', 'str4']
dataList.slice(0, -1) // 获取除最后一个元素以外的所有元素
console.log(dataList.slice(2))
// output-> Array ["apple", "string3", "str4"]
console.log(dataList.slice(2, 4))
// output-> Array ["apple", "string3"]
console.log(dataList.slice(1, 5))
// output-> Array ["pear", "apple", "string3", "str4"]
console.log(dataList.slice(-2))
// output-> Array ["string3", "str4"]
console.log(dataList.slice(2, -1))
// output-> Array ["apple", "string3"]
使用 slice() 方法, 原始数组不会被改变。 要注意与 splice()方法的区别, 别记混淆了.
slice() 方法的应用
slice()方法的使用还是挺多的
- 使用
slice()方法将一个伪数组或集合转换为一个新数组: 通过将slice()方法绑定到这个对象上.
如下将一个函数的参数 arguments 这个类数组对象进行转换:
fucntion changeArgumentsToArray(){
return Array.prototype.slice.call(arguments)
}
let argLists = changeArgumentToArray(1, 3, 5, 7, 9) // [1, 3, 5, 7, 9]
使用 Array.prototype.slice.call(arguments) 来书写还是有点太长了, 可以使用简洁的书写方法: [].slice.call(arguments)来代替
// 先来简写方法:
let unboundSlice = Array.prototype.slice
let slice = Function.prototype.call.bind(unboundSlice)
// 使用 `slice`来封装函数
function changeArgumentsToArray() {
return slice(arguments)
}
let argLists = changeArgumentToArray(1, 3, 5, 7, 9) // [1, 3, 5, 7, 9]
注意上面的将类数组转化为数组的方案是ES5的方法, 在 ES6 给我们提供了更加方便的方法API: Array.from()
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的 slice 方法
let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// 使用 ES6的方法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
- 数据处理: 在开发中经常用来对请求的数据进行处理操作.
