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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 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 5.3.0 安装分析心得
2009/08/07 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
django 环境变量配置过程详解
2019/08/06 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
有关打架的检讨书
2014/01/25 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
责任书格式
2015/01/29 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android