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
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript引用类型之时间Date和数组Array

    javascript引用类型之时间Date和数组Array

    Javascript引用类型之时间Date JavaScript中的Date类型是在早期Java中的java.util.Date类基础上构建的.为此,Date类型使用自UTC 1970年1月1日零时开始经过的毫秒数来保存日期.在使用这种数据存储格式的条件下,Date类型保存的日期能够精确到1970年1月1日之前或之后的285 616年. 创建日期对象 在javascript中,可以使用Date()构造函数来创建日期对象,如: 复制代码 代码如下: var date=new Date(); 当没有

  • JavaScript判断数组类型的方法

    前言 JavaScript中关于数组的判定问题,一直都是一个必须要掌握的点,那么,运用知识,如何判断一个类型是数组,就需要有对JavaScript使用有着深入的了解. 判断方法 一.Array.isArray ES5新增的数组方法,Array.isArray应该是我们最先想到的判定方式,现在应用的也比较广泛. const arr = [1,2,3,4] Array.isArray(arr) // true 如果是在支持ES5的浏览器中,用这样的方式自然没什么问题,但是如果是在IE9以下版本,这个

  • JS检测数组类型的方法小结

    1.instanceof 当只有一个全局执行环境时适用,如果包含多个框架,就存在两个以上不同版本的Array构造函数,如果从一个框架向另一个框架传递数组,传入的数组与在第二个框架中原生创建的数组分别具有不同的构造函数,即为不同类型 if (value instanceof Array) { //对数组执行某项操作 } 2. Array.isArray() 方法 因为是ES5新增的,只支持IE9+.Firefox 4+.Safari 5+.Opera 10.5+和Chrome if (Array.

  • JS求Number类型数组中最大元素方法

    如何使用JS,在一个Number类型的数组里,查找最大(或最小)数呢? 以下介绍四个方法. 1. 不使用任何库函数 代码如下: function findMax1 (arr) { let result = 0; if (Array.isArray(arr)) { for (let i = 0; i < arr.length; i++) { result = arr[i] > result ? arr[i] : result; } return result; } else { console.

  • JavaScript类数组对象转换为数组对象的方法实例分析

    本文实例分析了JavaScript类数组对象转换为数组对象的方法.分享给大家供大家参考,具体如下: 1.类数组对象: 拥有length属性,可以通过下标访问: 不具有数组所具有的方法. 2.为什么要将类数组对象转换为数组对象? 数组对象Array有很多方法:shift.unshift.splice.slice.concat.reverse.sort,ES6又新增了一些方法:forEach.isArray.indexOf.lastIndexOf.every.some.map.filter.redu

  • Javascript如何判断数据类型和数组类型

    这么基础的东西实在不应该再记录了,不过嘛,温故知新~就先从数据类型开始吧 js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number:什么整数啊浮点数啊都叫数字,你懂的~ Boolean: 就是true和false啦 undefined:未定义,就是你创建一个变量后却没给它赋值~ null: 故名思久,null就是没有,什么也不表示 object: 这个我也很难解释的

  • JavaScript中的类数组对象介绍

    JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法.而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为"类数组对象".以下是一个简单的类数组对象: 复制代码 代码如下: var o = {0:42,

  • JS数组实现分类统计实例代码

    将水果数组中同类的水果合并为一条并求出总数 var fruits = [{ name: 'apple', value: 1 }, { name: 'apple', value: 2 }, // 总计3个苹果 { name: 'banana', value: 2 }, { name: 'banana', value: 3 }]; // 总计5个香蕉 var fruitTotal = []; // 存最终数据结果 // 数据按照水果名称进行归类 var nameContainer = {}; //

  • JavaScript原型继承和原型链原理详解

    这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造

  • 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 不改变原数组

  • Java中Arrays数组工具类的基本使用详解

    Java中Arrays数组工具类的基本使用详解

    目录 方法一览表 快速定位详细操作 asList() toString() 和 deepToString() sort() 和 parallelSort() binarySearch() compare() 和 compareUnsigned() copyOf() 和 copyOfRange() equals() deepEquals() 比较equals()和deepEquals()方法  fill() mismatch() parallelPrefix() setAll() 和 parall

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • JavaScript滚动轮播图制作原理详解

    本文实例为大家分享了JavaScript滚动轮播图制作原理,供大家参考,具体内容如下 滚动轮播图 滚动轮播图布局关键:是所有图片并排在一起,所以unit的宽要足够宽.克隆第一张图片追加到最后一张右按钮拉动策略:先拉动,再瞬移左按钮拉动策略:先瞬移,再拉动与呼吸轮播图一样,需要做防流氓策略 复制代码:将我代码中的图片更换为你的图片,注意图片路径,还需要引入js库,我引入的是jquery-1.12.3.min.js的版本,引入的时候注意路径 举例: <!DOCTYPE html> <html

  • JVM内存区域划分相关原理详解

    学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段,数据段包括堆.栈以及静态数据区.那么在Java语言当中,内存又是如何划分的呢? 由于Java程序是交由JVM执行的,所以我们在谈Java内存区域划分的时候事实上是指JVM内存区域划分.在讨论JVM内存区域划分之前,先来看一下Java程序具体执行的过程: 如上图所示,首先Java源代码文件(.java后缀)会被Java编译器编译为字节码文件(.class后缀),然后由JVM中的类加载器加载各个类的字节码文件,加

  • python里 super类的工作原理详解

    super 的工作原理如下: def super(cls, inst): mro = inst.__class__.mro() return mro[mro.index(cls) + 1] 其中,cls 代表类,inst 代表实例,上面的代码做了两件事: 获取 inst 的 MRO 列表 查找 cls 在当前 MRO 列表中的 index, 并返回它的下一个类,即 mro[index + 1] 当你使用 super(cls, inst) 时,Python 会在 inst 的 MRO 列表上搜索

  • JavaScript设计模式之策略模式实现原理详解

    俗话说,条条大路通罗马.在现实生活中,我们可以采用很多方法实现同一个目标.比如我们先定个小目标,先挣它一个亿.我们可以根据具体的实际情况来完成这个目标. 策略模式的定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 举个例子:表单校验 在一个Web项目中,注册.登录等功能的实现都离不开表单提交.表单校验也是前端常常需要做的事.假设我们正在编写一个注册的页面,在点击提交按钮之前,有如下几条校验逻辑: 用户名不可为空,不允许以空白字符命名,用户名长度不能小于2位. 密码长度不能小

  • Javascript中Date类型和Math类型详解

    Date类型 ECMASCript中的Date类型是在早期中Java中的java.util.Date类基础上构建的.为此Date类型使用自UTC(国际协调时间)1970年1月1日午夜(0时)开始经过的毫秒数来保存日期. 创建日期对象 1.创建当前日期.不需要传入参数 2.创建指定日期.需要传入参数,必须传入表示该日期的毫秒数(即从1970年1月1日午夜起至该日期止经过的毫秒数).为了简化这一计算过程,ECMAScript提供了两个方法:Date.parse()和Date.UTC(). var n

  • JavaScript 继承 封装 多态实现及原理详解

    面向对象的三大特性 封装 所谓封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.封装是面向对象的特征之一,是对象和类概念的主要特性. 简单的说,一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体.在一个对象内部,某些代码或某些数据可以是私有的,不能被外界访问.通过这种方式,对象对内部数据提供了不同级别的保护,以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分. 我们在vue项目中使用混入将公有代码提出来,混入到每个

随机推荐