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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 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获取数组最大值下标的方法
2015/05/12 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Python类属性与实例属性用法分析
2015/05/09 Python
Python编程中的异常处理教程
2015/08/21 Python
python查看微信好友是否删除自己
2016/12/19 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
什么是View State?
2013/01/27 面试题
升学宴演讲稿
2014/09/01 职场文书
休学证明范本
2015/06/19 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android