javascript Array.prototype.slice的使用示例


Posted in Javascript onNovember 14, 2013

经常的,可以看到Array.prototype.slice(arguments, 0); 这个写法可以用于function() {} 内,这样可以将函数的参数列表转换成一个真正的数组。请看一个例子:

var slice = Array.prototype.slice;
var toString = Object.prototype.toString;
(function() {
  var args = arguments;
  console.log(args, toString.call(args)); // [1, 2, 3] "[object Arguments]" 
  var argsArr = slice(args, 0);
  console.log(argsArr, toString.call(argsArr)); // [1, 2, 3] "[object Array]" 
}(1,2,3))

我们可以看到函数的参数列表arguments通过slice调用以后,一秒钟变Array了。
同样的,也可以将选中的DOM元素转换成数组:
slice.call(document.querySelectorAll("div"));

顺藤摸瓜,我们想想,slide方法是否可以将对象转换成数组呢?请看例子:
console.log(slice.call('string')); // ["s", "t", "r", "i", "n", "g"] 
console.log(slice.call(new String('string'))); // ["s", "t", "r", "i", "n", "g"]

每次,字符串会直接被转换成了一个数组。
但是,数字,布尔值的会转换成一个空的数组:
console.log(slice.call(33)); 
console.log(slice.call(true));

普通的对象也会被转换成空数组,除非你给它加上一个length属性:
console.log(slice.call({name: 'obj'})); // []
console.log(slice.call({0: 'zero', 1: 'one'})); // []
console.log(slice.call({0: 'zero', 1: 'one', name: 'obj', length: 2}));  // ["zero", "one"]

还有,它还可以用来clone数组:
var srcArr = [1,2,3];
var newArr = srcArr.slice(0);
console.log(srcArr, newArr);    // [1,2,3] [1,2,3]
console.log(srcArr == newArr);  // false
Javascript 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
详解Javascript继承的实现
Mar 25 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
js取消单选按钮选中示例代码
Nov 14 #Javascript
js实现目录定位正文示例
Nov 14 #Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 #Javascript
javascript间隔刷新的简单实例
Nov 14 #Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 #Javascript
js中prototype用法详细介绍
Nov 14 #Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 #Javascript
You might like
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
yii添删改查实例
2015/11/16 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
javascript jQuery插件练习
2008/12/24 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
python 项目目录结构设置
2020/02/14 Python
python 瀑布线指标编写实例
2020/06/03 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
2015年护理工作总结范文
2015/04/03 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
python识别围棋定位棋盘位置
2021/07/26 Python
A22国内电台短波广播频率表
2022/05/10 无线电