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游戏之优化篇
Nov 08 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
JavaScript代码实现简单计算器
Dec 27 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』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python 字符串常用方法汇总详解
2019/09/16 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
先进个人事迹材料
2014/01/25 职场文书
九年级数学教学反思
2014/02/02 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
自我评价优缺点范文
2015/03/11 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python