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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
js轮播图代码分享
Jul 14 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
node创建Vue项目步骤详解
Mar 06 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
附件名前加网站名
2008/03/23 PHP
php对称加密算法示例
2014/05/07 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
Javascript 面向对象特性
2009/12/28 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
服务生自我鉴定
2014/01/22 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
辩论赛主持词
2014/03/18 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
情况说明书怎么写
2015/10/08 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android