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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
晶体管单管来复再生式收音机
2021/03/02 无线电
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python入门教程之识别验证码
2017/03/04 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python字符串反转的四种方法详解
2019/12/02 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
应届毕业生求职信范文
2014/07/07 职场文书
项目投资合作意向书
2014/07/29 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
十月围城观后感
2015/06/08 职场文书
企业培训简报范文
2015/07/20 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python