原生js底层基础(十五)JavaScript 数组、类数组详解

mac2024-05-27  30

1.数组定义

创建数组的两种方式:
( 1)字面量(推荐)
( 2)new

两种方式的区别

var arr = new Array(10) //创建一个长度为10的数组,只能写整数 var arr2 = [10] //创建了数组,里面只有一个数10

var arr3 = [1,2,3,4,5]; //创建了数组,里面有五个数 var arr4 = new Array[1,2,3,4,5 ] //与上同

2.数组读取

数组的方法容错性好 一般不会报错,但是要注意越界问题

arr[num] //不能越界(溢出数组长度)读取,返回undefined arr[num] = “xxx” //可以越界写入

3. 数组操作的常用方法

数组操作的常用方法分为两种:改变原数组的和不改变原数组的

( 1)改变原数组

包括push 、pop、 shift 、unshift 、sort 、reverse、splice

1) push()

在数组后面添加数据,可以添加多个,返回数组长度

利用原型可以自己封装push方法:

Array.prototype.myPush = function(){ //不知道别人传几个,所以不用写形参,用arguments实参数组 //遍历每一个传进来的实参 for(var i = 0 ;i<arguments.length;i++){ //this指的是调用这个函数的数组 this[this.length] = arguments[i]; //this.length表示在数组最后一位加属性值 } } var arr = []; arr.myPush(1,2,3)
2)pop()

把数组 的最后一位删除,并返回删掉的值,相当于剪切,不能传参。 例如

var arr = [1,2,3] var a = arr.pop(); //把3从数组中删掉,并返回 a //3
3)shift()

把数组中的第一位删掉,并返回删掉的值, 和pop相反,也不能传参

var arr = [1,2,3] var a = arr.shift(); //把3从数组中删掉,并返回 a //1
4)unshift()

在最前面添加值,可以多个,与shift正好相反。与push一个加头一个加尾

5) reverse()

把数组的内容逆序,返回新数组(不同版本浏览器可能不同,有些是返回原数组)

6) splice(index,howmany,item)

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 各个参数的意思: index为 开始的位置, howmany为删除的长度, item为在指定位置要添加的新数据,可以有0到多个,不写即为删除。

删除:从索引为1的位置删除2个元素

var arr = [1,2,3,6,7,5] var r = arr.splice(1,2); r [2,3] arr [1,6,7,5]

**结果

添加:在索引为2的位置插入一个元素

var arr = [1,2,3,4,5,6] var r = arr.splice(2,0,'a') //第二个参数写0 即为不删除 r [] //不删除,所以返回一个空数组 arr [1, 2, "a", 3, 4, 5, 6]

替换:用新元素替换删除了的元素

var arr = [1,2,3,4,5,6] var r = arr.splice(4,2,'a','b') arr [1, 2, 3, 4, "a", "b"] r [5, 6]

第一个参数是负数的话,就负数加数组长度,即索引位置为倒数第XX位

var arr = [1,2,3,4,5,6] var r = arr.splice(-1,1,'a') arr [1, 2, 3, 4, 5, "a"] r [6]
7) sort()

排序的方法,但是需要自己重写它的方法,否则两位以上的数排序不准确,因为它按照ascall码排序的 ,系统留的接口参数是函数引用,因此,可以这么重写 规则: 1.必须写两个形参 2.把实参的内容按照冒泡排序规则访问,怎么对比我们自己写,系统只看返回值,决定怎么做 1)返回值为负数,前面的数在前面。 2)返回值为正数,后面的数在前. 3)返回值为0,不动

arr.sort(function(a,b){ //满足升序 return a-b; }) arr.sort(function(a,b){ //满足降序 return b-a; })

以下解释自定义的函数是怎么得出的,当然此部分可以不看,记住上面的就可以

var arr = [1,4,3,8,10] arr.sort(function(a,b){ if(a>b){ //按照这个规则结果系统的响应可以满足升序排列 return 1; }else{ return -1; } }) arr.sort(function(a,b){ if(b>a){ //按照这个规则结果系统的响应可以满足降序排列 return 1; }else{ return -1; } }) //简化: arr.sort(function(a,b){ if(a-b>0){ //无论啥时候返回a-b都可以满足升序 return a-b; }else{ return a-b; } }) arr.sort(function(a,b){ if(b-a>0){ //无论啥时候返回b-a都可以满足降序 return b-a; }else{ return b-a; } }) //最终 arr.sort(function(a,b){ //满足升序 return a-b; }) arr.sort(function(a,b){ //满足降序 return b-a; })

扩展面试题: 1.如何把一个有序数组打乱

var arr= [1,2,3,4] arr.sort(function(){ return Math.random()-0.5; }) arr [4, 2, 1, 3]

2.把对象按照age属性排序

var wt= { name:'wt', age:18 } var ly = { name:'ly', age:10 } var arr=[wt,ly]; arr.sort ( function(a,b){ return a.age-b.age; }); arr 0: {name: "ly", age: 10} 1: {name: "wt", age: 18}

3.按数组内值的长度排序 arr=[‘wer’, ‘dd’, ‘teujtjwtl’ ;‘jwltj’, ‘abcde’]; arr.sort(function(a,b){ return a.length-b.length; }); 4.按数组内值的字节长度排序(中文占两个字节,英文一个) //自己封装一个转换成字节的方法 str.charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。如果大于255即为中文。

function retByte(str){ var num = str.length; for(var i = 0;i<arr.length;i++ ){ if(str.charCodeAt(i)>255){ num++; } } return num; } arr=[ '灯teujtjwtl','张wer','刘美美dd','jwltj' ]; arr.sort(function(a,b){ return retByte(a) - retByte(b); }); arr ["张wer", "jwltj", "刘美美dd", "灯teujtjwtl"]

( 2)不改变原数组

concat, join,split,toString,slice

1)concat()

拼接到原数组上,形成新数组,原数组不改变

var arr=[1,2,3]; var arr2 = [4,5,6,7]; var newArr = arr.concat(arr2); newArr [1, 2, 3, 4, 5, 6, 7]
2)toString()

把数组变成字符串

newArr = [1, 2, 3, 4, 5, 6, 7] newArr.toString() newArr "1,2,3,4,5,6,7"
3)slice(start,end)

返回一个新的数组,包含从 start 到 end (不包括该元素)的 数组元素。原数组不变,如果要删除就用splice()

var arr=[1,2,3,5,8]; var newarr = arr.slice(1,3);//2,3被截取出来赋值给新数组 newarr (2) [2, 3] arr (5) [1, 2, 3, 5, 8]
4)join(符号)

把数组按照指定符号连接成字符串

var arr=[1,2,3,5,8]; var newArr = arr.join("-"); newArr "1-2-3-5-8" arr (5) [1, 2, 3, 5, 8] //原数组不变
5)split(符号)

把字符串按照给的符号分割,返回一个新数组

var str = "1-2-3-5-8"; var newArr = str.split("-"); newArr (5) ["1", "2", "3", "5", "8"] str "1-2-3-5-8" //原字符串不变

4.类数组

类数组是一个对象,模拟成一个数组的样子,需要满足以下规则

1.属性要为索引(数字)属性 2.一定要有属性 3.最好加上push,加上splice之后就完全变成数组的样子了

var obj ={ "0": "a", "1": "b", "2":"c", length:3, push :Array.prototype.push, splice:Array.prototype.splice } obj--> 系统中的类数组重写了push Array.prototpe.push = function(target){ this[this.length] = target; this.length;//上面的obj调用的话this变成obj }

阿里巴巴面试题:

var obj= { "2":'a', "3":'b', "length":2, "push" :Array.prototype.push } obj.push("c","d"); obj-->{2: "c", 3: "d", length: 4, push: ƒ}
最新回复(0)