Javascript数组及类数组相关原理详解


Posted in Javascript onOctober 29, 2020

数组创建方式有两种

1. var arr = []

2. var arr = new Array()

如果只有一个参数会指定数组的长度,当一个参数时只能是整形,如下例子

var arr = new Array(10)
var arr = new Array(10.2) //会报错
var arr = new Array(1, 2, 3) //arr = [1, 2, 3]

数组常用方法

改变原数组 push pop shift unshift sort reverse splice

不改变原数组 concat join ---> split toString slice

比如 push 函数,看一下例子

var arr = [1, 2, 3]
arr.push(4, 5) //arr = [1, 2, 3, 4, 5] 向数组最后一位添加元素,参数可以多个
//实现原理
Array.prototype.push = function() {
for(var i = 0; i < arguments.length; i++) {


this[this.length] = arguments[i]

}
}

其中函数功能,如下

arr.pop()  //arr = [1, 2, 3, 4] 删除数组最后一位
arr.unshift(-1, 0) //arr = [-1, 0, 1, 2, 3, 4] 向数组最前面一位添加元素, 参数也可以多个
arr.shift() //arr = [0, 1, 2, 3, 4] 删除数组最前面一位
arr.reverse() //arr = [4, 3, 2, 1, 0] 数组取反,倒序
arr.splice(0, 3, 2, 2) //arr = [2, 2, 1, 0] 参数1(可以为负数, 从倒数第几位起),从第参数1位开始,参数2,删除参数2位, 参数3后面的, 从删除处添加参数3及后面的参数数据
arr.sort(function(a, b) { //排序 参数时一个函数,函数参数1为数组前一个,参数2为数组后一个, 返回 小于0,前面数放前面 返回大于0,前面数放后面 返回0,不用动
return a > b //升序
  // return a < b //降序
})

看以下例子是实现一个数组乱序

var arr = [1, 2, 3, 4, 5, 6, 7]
arr.sort(function(a, b) {
return Math.random() - 0.5
})
console.log(arr)

看一下例子是求一串字符串的字节数

function retBytes(str) {
var num = str.length

for(var i = 0; i < str.length; i++) {


if(str.charCodeAt(i) > 255) num++

}

return num
}

再看以下例子

var arr = [1, 2, 3]
console.log(arr.concat(4, 5))
console.log(arr.concat([4, 5])) //一样 ,拼接两个数组返回新的数组,不改变原数组

console.log(arr.toString()) //1, 2, 3 字符串化

console.log(arr.slice(0, 2)) //[1, 2] 参数1,从参数1截取, 参数2,截取到参数2位
console.log(arr.slice(1))  //从第1位开始截取到最后一位

console.log(arr.slice()) //不变, 但是用于将一个类数组截取为一个数组, 比如arguments

console.log(arr.join(',')) //1,2,3 以参数1相连形成字符串

var str = '1,2,3'
console.log(str.split(',')) //[1,2,3] 以参数1分割成数组,与join互逆

var arr = [str, str1, str2, str3] //多个str相连 散列
arr.join('')

类数组

例如arguments

看一个类数组的例子

var obj = {
'0': 'a',

'1': 'b',

'2': 'c',

'length': 3,

'push': Array.prototype.push,

'splice': Array.prototype.splice
}
//属性要为索引(数字)属性,必须有length属性,最好有push方法

看一个类数组操作例子

var obj = {
'2': 'a',

'3': 'b',

'length': 2,

'push': Array.prototype.push
}
obj.push('c')   //obj[obj.length] = 'c' -> 此时 属性'2'的值被覆盖为 'c', length变成3
obj.push('d')
 //obj[obj.length] = 'd' -> 此时 属性'3'的值被覆盖为 'd', length变成4
console.log(obj) //{2: 'c', 3: 'd', length: 4, push: Array.prototype.push}

类数组也能添加其他属性,如下

var obj = {
'0': 'a',

'1': 'b',

'2': 'c',

'length': 3,

'push': Array.prototype.push,

'splice': Array.prototype.splice,

'name': 'lyj',

'age': 18
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
javascript数组去重小结
Mar 07 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
如何编写jquery插件
Mar 29 jQuery
webpack实现热加载自动刷新的方法
Jul 30 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 #Javascript
node.js如何操作MySQL数据库
Oct 29 #Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 #Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 #Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 #Javascript
JavaScript实现随机点名小程序
Oct 29 #Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 #Javascript
You might like
php 引用(&amp;)详解
2009/11/20 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python实现简单登录验证
2016/04/13 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python ini文件常用操作方法解析
2020/04/26 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
生物学学生自我评价
2014/01/17 职场文书
鲜花方阵解说词
2014/02/13 职场文书
质检部经理岗位职责
2014/02/19 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
运动会演讲稿200字
2014/08/25 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
给朋友的赠语
2015/06/23 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python