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 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
使用javascript做在线算法编程
May 25 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP与SQL注入攻击[二]
2007/04/17 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JS简单计算器实例
2015/01/20 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
python 实现堆排序算法代码
2012/06/05 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
军训自我鉴定100字
2014/02/13 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
劳资协议书范本
2014/04/23 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书