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实现Sleep函数的代码
Mar 04 Javascript
js变换显示图片的实例
Apr 16 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 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验证码函数的使用示例
2013/05/03 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
javascript数组定义的几种方法
2017/10/06 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
Python中除法使用的注意事项
2014/08/21 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python 专题一 函数的基础知识
2017/03/16 Python
python爬虫实例详解
2018/06/19 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
娱乐地球:Entertainment Earth
2020/01/08 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
模具专业毕业推荐信
2014/03/08 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
房地产端午节活动方案
2014/08/24 职场文书
教师演讲稿开场白
2014/08/25 职场文书
2015元旦标语横幅
2014/12/09 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
慰问信(范文3篇)
2019/10/23 职场文书