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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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/07/02 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
js select常用操作控制代码
2010/03/16 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
Zabbix实现微信报警功能
2016/10/09 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
详解python数据结构和算法
2019/04/18 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
2015年销售助理工作总结
2015/05/11 职场文书
地道战观后感300字
2015/06/04 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL