16-数组方法、类数组

valueyear

已于 2023-01-06 15:42:06 修改

阅读量570

点赞数

分类专栏： ECMAScript 文章标签： javascript 前端

于 2021-12-08 16:57:31 首次发布

本文链接：https://blog.csdn.net/qq_43714814/article/details/121795603

版权

ECMAScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

16-数组方法、类数组

(一)、数组方法

push unshift pop shift reverse splice sort 这些方法都是在原数组上做修改

下面这些方法不是在原数组上修改，而是会返回一个新的数组

1、concat

合并数组

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var arr3 = arr1.concat(arr2);
console.log(arr3);

2、toString

打印出用逗号隔开的字符串

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.toString()); //a,b,c,d

3、slice

（1）、不传参数

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var arr1 = arr.slice();
console.log(arr1);//["a", "b", "c", "d", "e", "f"]

（2）、传一个参数

从数组中下标为参数的(包含自身)截取到最后

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var arr1 = arr.slice(1); //从下标1（包含）截取到结束
console.log(arr1);//[b", "c", "d", "e", "f"]

(3)、传两个参数

前开后闭

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var arr1 = arr.slice(1,3); //前开后闭
console.log(arr1);//["b", "c"]

var arr2 = arr.slice(-3,5);
console.log(arr2); //["d", "e"]

var arr3 = arr.slice(-3,-2);
console.log(arr3); //["d"]

4、join/split

(1)、join

将数组变为字符串

var arr = ['a', 'b', 'c', 'd'];
var str1 = arr.join();
console.log(str1); //a,b,c,d  join()括号中什么都不写会用逗号,分开，和toString()实现的效果一样

var str2 = arr.join('');
console.log(str2); //abcd  空字符串连空格都没有就会挨在一起，有空格就会用空格隔开

(2)、split

将字符串变为数组

第一个参数表示用什么分割字符串

第二个参数表示长度

var arr = ['a', 'b', 'c', 'd'];
var str1 = arr.join('-');
console.log(str1);   //a-b-c-d
var arr1 = str1.split();
console.log(arr1);  //["a-b-c-d"]

var arr2 = str1.split('-');
console.log(arr1);  //["a", "b", "c", "d"]

var arr3 = str1.split(''); //填空字符串
console.log(arr1);  //["a", "-", "b", "-", "c", "-" "d"]

var arr4 = str1.split('-',3); //这里的3代表的是长度
console.log(arr4);  //["a", "b", "c"]

(二)、类数组

类数组并不是真正的数组，是类似于数组的对象

实例1:

function test(){
   //arguments.push(7);  //会报错
   //arguments并没有继承Array.prototype
   console.log(arguments);
}
test(1,2,3,4,5,6);

实例2：

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var oDiv = document.getElementsByTagName('div');
        oDiv.push(7); // 报错
        console.log(oDiv);
    </script>
</body>

类数组的原型Object.prototype
数组的原型是Array.prototype

function test(){
   console.log(arguments);
}
test(1,2,3,4,5,6);

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr);

<script type="text/javascript">
		function test(){
		   console.log(arguments);
		}
		test(1,2,3,4,5,6);
		
		var obj = {
			'0': 1,
			'1': 2,
			'2': 3,
			'3': 4,
			'4': 5,
			'5': 6,
			'length':6,
			'push': Array.prototype.push,
			'splice': Array.prototype.splice
		}
		obj.push(7);
		console.log(obj);
</script>
//length 浅紫色是系统内置生成的，深紫色是自己设置的属性
//加上'splice': Array.prototype.splice就可以变成数组的样子，没有为什么，就是这样。
----------------------------
下面这种写法是在原型上挂载方法，所有对象上都能用到
如果不想所有的对象都用到，就在对象上面去挂
var obj = {
			'0': 1,
			'1': 2,
			'2': 3,
			'3': 4,
			'4': 5,
			'5': 6,
			'length':6,
}
Object.prototype.push = Array.prototype.push;
Object.prototype.splice = Array.prototype.splice
obj.push(7);
console.log(obj);

push运行原理

Array.prototype.push = function(elem){
  this[this.length] = elem;
  this.length ++;
}

阿里题

var obj = {
  '2':3,
  '3':4,
  'length':2,
  'splice':Array.prototype.splice,
  'push':Array.prototype.push
}

obj.push(1);
obj.push(2);
console.log(obj); [empty, empty, 1, 2]
// 这道题用到了push原理
// 实际上是obj[2] = 1;
//		    obj[3] = 2;

var person = {
  '0': '张小一',
  '1': '张小二',
  '2': '张小三',
  'name': '张三',
  'weight': 140,
  'height': 180,
  'length': 3
}
Object.prototype.push = Array.prototype.push;
Object.prototype.splice = Array.prototype.splice;
//既有数组的特性又有对象的特性
console.log(person[1]);
console.log(person.weight);
//可以用对象的方式遍历
for(var key in person){
  if(person.hasOwnProperty(key)){
  	console.log(person[key]);
  }
}