Javascript数组及类数组相关原理详解

 更新时间:2020年10月29日 14:47:03   作者:杰哥之家  
这篇文章主要介绍了Javascript数组及类数组相关原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

数组创建方式有两种

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 页面只自动刷新一次

    记得meta标签当中有一个refresh的功能吗?这是让浏览的页面刷新并可以转到相应的页面,如果刷新本页的话就会造成重复的刷新,现在我们就试试用脚本来实现只让页面刷新一次.
    2009-07-07
  • 微信小程序如何获取图片宽度与高度

    微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript Proxy基本用法详解

    JavaScript Proxy基本用法详解

    这篇文章主要介绍了JavaScript Proxy基本用法,Proxy对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义,如属性查找、赋值、枚举、函数调用等
    2022-12-12
  • 微信小程序开发之组件设计规范

    微信小程序开发之组件设计规范

    这篇文章主要给大家介绍了关于微信小程序开发之组件设计规范的相关资料,对刚入门学习微信小程序的同学们还是挺有帮助的,需要的朋友可以参考下
    2021-05-05
  • JS ListBox的简单功能实现代码

    JS ListBox的简单功能实现代码

    这段时间在项目组都是做静态页面,都是些复制粘贴的活,难得碰到个稍微有点难度的页面。后来看到这个页面还不错,可以自己做做看,虽然公司已经有这样的组件,但不想用,反正没什么事,就当多学学JS好了。
    2008-10-10
  • js实现砖头在页面拖拉效果

    js实现砖头在页面拖拉效果

    这篇文章主要为大家详细介绍了js实现砖头在页面拖拉效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 利用JS解决ie6不支持max-width,max-height问题的方法

    利用JS解决ie6不支持max-width,max-height问题的方法

    本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 离开当前页面前使用js判断条件提示是否要离开页面

    离开当前页面前使用js判断条件提示是否要离开页面

    这篇文章主要介绍了离开当前页面前如何使用js判断条件提示是否要离开页面,需要的朋友可以参考下
    2014-05-05
  • JavaScript之自定义类型

    JavaScript之自定义类型

    在JavaScript中,创建一个具有自定义属性和方法的对象有很多种模式,下面一一进行介绍
    2012-05-05
  • 12行javascript代码绘制一个八卦图

    12行javascript代码绘制一个八卦图

    本文给大家分享的是使用有限的代码绘制八卦图,算是考核下自己对于javascript的理解,这里推荐给大家,有需要的小伙伴参考下。
    2015-04-04

最新评论