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 相关文章推荐
12种不宜使用的Javascript语法整理
Nov 04 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
javascript数组排序汇总
2015/07/07 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python中的yield浅析
2014/06/16 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
简单了解python中的与或非运算
2019/09/18 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
python跨文件使用全局变量的实现
2020/11/17 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
外科实习自我鉴定
2013/10/06 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
清洁工岗位职责
2014/01/29 职场文书
给学校的建议书
2014/03/12 职场文书
党员大会主持词
2014/04/02 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
详解php中流行的rpc框架
2021/05/29 PHP