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的常规数组和关联数组对比小结
May 24 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
详解React 条件渲染
Jul 08 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
python发送arp欺骗攻击代码分析
2014/01/16 Python
python 基础教程之Map使用方法
2017/01/17 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
护理专科自荐书范文
2014/02/18 职场文书
社区工作感言
2014/02/21 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2014年调度员工作总结
2014/11/19 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
新年祝酒词大全
2015/08/11 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server