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 相关文章推荐
JS跨域总结
Aug 30 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 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传输数据的代码
2007/11/13 PHP
基于php判断客户端类型
2016/10/14 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript replace方法与正则表达式
2008/02/19 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python实现TF-IDF算法解析
2018/01/02 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
中学生个人自我评价
2014/02/06 职场文书
给校长的建议书400字
2014/05/15 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
nginx实现动静分离的方法示例
2021/11/07 Servers