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 相关文章推荐
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
Javascript var变量删除原理及实现
Aug 26 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 图片上传实现代码 带详细注释
2010/04/29 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js select option对象小结
2013/12/20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Django发送html邮件的方法
2015/05/26 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
住房公积金接收函
2014/01/09 职场文书
研修心得体会
2014/09/04 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
离婚案件上诉状
2015/05/23 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL