js对象、数组知识点总结

妖狐艹你老母 2022-10-02 09:54 221阅读 0赞

1、对象  
描述一个学生信息 ： var sname=’’ sex =’’ age=’’ score=’’ …  
对象是一个**整体** ，用来描述一个事物的**所有**信息  
比如 定义一个对象 描述一个学生信息 ：  
![定义一个对象][20190617191708560.png]![定义一个对象][20190617191651561.png]  
**说明** : 键名命名方式 类似 标识符规范 值可以是**任意**数据类型  
所有的对象都可以有属性 或 方法  
**属性** ： 描述事物**特征** 名称  
**方法** ： 描述事物**行为** 动词

**获取对象的信息** ：  
属性值**获取** ： **对象.属性** 或者 **对象\[“属性”\]**  
方法的调用 ： 对象.方法名()  
![获取对象的信息][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

## **2、构造函数** ##

使用**new**关键字创建**对象**的函数 就是构造函数  
![构造函数实例][20190617192435611.png]

## 3、数组 ##

定义：数组用来存放**多个**数据 这些数据可以是**不同的数据类型**，一般一个数组中存放的数据类型是一致 数组理解一个**容器**

定义一个数组 ：  
var arr = \[\]; 是一个空数组  
var arr = \[23,5,6,7,8\];定义一个存放整数值的数组  
var arr = \[“orange”,“red”,“green”\];定义一个存放字符串值的数组  
var arr = new Array();是一个空数组  
var arr = new Array(3); 如果括号中是一个整数值，这个整数代表数组的长度  
var arr = new Array(3,6); 定义一个存放两个数值的数组

数组**长度**获取 ： length  
数组取值 ：数组名\[下标\] 下标从0开始 最大下标 数组.length-1，arr\[ i \]  
js数组的特点 ： 长度是**可变**的  
数组遍历（循环）：  
for… for( var 变量 in 对象 )\{ \}  
for…in

特点 ：  
a、只能遍历**对象**  
b、下标的类型是**string**  
c、没有循环条件 自动取出下标  
![for...in 实际运用][for...in]  
while  
do…while  
快速清空一个数组 ：  
arr = \[\];  
arr.length = 0;  
扩展关键字 ： instanceof 判断一个对象属于哪一个构造函数 例如 ： 判断一个对象是否是一个数组 数组 instanceof Array  
![判断][20190617192838449.png]  
//实例：计算学生成绩

//定义一个数组 存放6个学生成绩 计算学生平均成绩
        var arrScore = [ 89 ,96 ,82 , 72 ,66,68]
        //先计算所有成绩之和
        var sum = 0;
        for ( var i = 0 ; i < arr.length ; i++){
        	sum += arrScore[i]
        }
        var avg = ( sum / arrScore.length.toFixed(2));
        console.log("平均成绩：" + avg)

## 4、数组的操作方法 ##

数组**尾部**操作 ：  
push() 向数组的尾部添加一个或多个数据 arr.push(1,78,…) 返回数组新的长度值  
pop() 将数组尾部的数据删除 arr.pop() 返回删除的元素

数组**头部**操作 ：  
unshift() 向数组的头部添加一个或多个元素 arr.unshift(2,34,…) 返回数组新长度值  
shift() 删除数组头部元素 arr.shift() 返回删除的元素

数组**中间**数据操作（也适用于头尾） ： 可以 实现 **添加 、 删除、 替换** 操作  
splice( start , len )删除，表示从start位置处删除指定len 长度的数据  
splice( start , len , num1,num2,… ) 第三个参数的个数不固定  
如果len的值是0 实现在start位置处添加一个或多个数据  
如果len的值不为0 ，实现替换操作（替换过程 ： 先删除 后添加 ）

上面的五个方法 都会**改变**原数组  
slice(start,end) 截取从start位置到end-1 位置处的数据，返回截取后的数据

var arr = [11,22,3,4,5,6]
    var brr = arr.slice( 1,3 );  
    alert( brr ); //22,3

join( 字符 ) 将数组中的数据通过 某个 字符 连接起来 返回一个 字符串 toString（）也可以将数组转成字符串  
扩展小技巧 ： 快速计算 数组中所有数据的和

eval( arr.join("+") );

reverse() **数组**的翻转 返回的是翻转后的数组 （改变原数组）

concat() 数组连接

//数组操作方法测试  
1、join

function fnJoin(){
     	//将数组转成字符串
     	var arr = [2,3,4,5,6,7]
     	//var str = arr.toString();	//将数组转成字符串
     	var str = arr.join(""); 		//使用某个字符将一个数组拼接成一个字符串
     	//join可以快速的计算数组中数据的和
     	console.log( str );   //234567
     }
    fnJoin()

2、slice（）

function fnSlice(){
    	var arr = [2,3,4,5,6,7];
    	var res = arr.slice( 2 ,6);
    	console.log( res );     //3,4,5,6
    }
    fnSilce()

3、concat

function fnConcat(){
    	var arr = [2,3,4,5,6,7];
    	var brr = [1,9,0];
    	var crr = arr.concat( brr )
    	console.log( crr )  // 2,3,4,5,6,7,1,9,0
    }	
    fnConcat()

4、reverse

function fnReverse(){
     	var arr = [1,2,3,4,5,6];
     	arr.reverse();
     	console.log( arr );//6,5,4,3,2,1
     }
      fnReverse()

5、splice()

function fnSplice(){
    	var arr = [ 1,2,3,4,5,6,7,8]
    	//arr.splice(2,2,13,17,90);  		//替换
    	arr.splice(2,0,13,17,90);		//添加 从小标为2位置处添加数据
    	console.log( arr );		//1,2,13,17,90,3,4,5,6,7,8
    } 
    fnSplice()

6、shift、unshift

function fnShiftOrUnshift(){
    	var arr = [2,3,4,5];
    	//arr.shift();
    	arr.unshift( 45,36);
    	console.log( arr );   //45,67,2,3,4,5
    }
     fnShiftOrUnshift()

7、push

function fnPush(){
    	var arr = [2,3,4,5];
    	var res = arr.push(56,78); //返回值是新数组 res是返回的数组长度
    	console.log(res)     //2,3,4,5,56,78
    }
    fnPush()

8、pop

function fnPop(){
    	var arr = [1,2,3,4,5]
    	var res = arr.pop(78,75)
    	console.log( res ) //75,78,1,2,3,4,5
    }
    fnPop()

## 5、二维数组 由 行 与 列 组成 了解 ##

两个下标  
定义二维数组  
var arr = \[ \[ \],\[ \],\[ \] \]; 定义一个三行的二维数组 列不确定

var arr = \[ \[1,2,3\],\[,3,4,5\] \]; 两行 三列

## 6、栈 和 堆 理解 ##

当定义一个变量时，就会在计算机中开辟一块存储空间，用来存放这个变量的值，这个存储空间 就叫做 栈  
栈的特点：  
有底无顶 后进先出  
栈中存放数据的类型是基本类型的  
堆 ： 堆中存放的是 一个对象的值（多个） 可以存放多个数据

参数传递的方式 ：  
值传递：  
参数之间的改变互不影响  
地址传递：  
其中一个值发生变化，另一个值也会随之发生变化（一改全改）  
![堆和栈的详解][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]  
![函数传参][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]  
//定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出

//定义一个含有10个元素的数组，任意输入一个数，判断是否存在，如果存在，就删除这个数

function arrDelNum( arr , num )\{  
for( var i = 0 ; i < arr.length ; i++)\{  
if( arr\[i\] == num)\{  
//删除i位置处的数据  
arr.splice( i , 1)  
\}  
\}  
return arr;  
\}

//通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数，然后输出该数组的左下半三角。  
![双层循环][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]  
//去重的三种方法  
//首先定义一个函数 功能是判断某个数在数组中是否存在 存在返回true 否则返回false

方案一、  
1、定义一个空数组，取出原数组的每一个数，判断取出来的这个数在空数组中是否存在，如果不存在，将该数存入空数组

function noRepeat( arr ){
    	var  newArr = [ ];
    	for ( var i = 0 ; i < arr.length ; i++){
    		if( !has( newArr , arr[i] )){
    			newArr.push( arr[i])
    		}
    	}
    	return newArr
    }

方案二、  
数组先排序，数组相邻的两个数比较，如果前一个数不等于后一个数，就将前一个数存入到空数组中

function noRepeat( arr ){
    	var newArr = [ ];
    	for ( var i = 0 ; i < arr.length ; i++){
    		if ( arr[i] != arr[i+1]){
    			newArr.push( arr[i] )
    		}
    	}
    	return newArr;
    }

方案三、  
用数组中的每一个数和后面的作比较，如果相等，就将后面的删除

[20190617191708560.png]: https://img-blog.csdnimg.cn/20190617191708560.png
[20190617191651561.png]: /images/20220113/c384ce0331df4b1eb935527882f1db42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220113/c6e77e178c9c4b38afff0f68bd628159.png
[20190617192435611.png]: /images/20220113/ae739a09c2484e298f57df69dc2f71e1.png
[for...in]: /images/20220113/c3968e9f10b840dd8134bacd44e35a49.png
[20190617192838449.png]: /images/20220113/5f734eee255b4638ab59030901a6243a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220113/6933516ff2144914852ce8d0a13c08a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: /images/20220113/e2ee8140f13442f89eb7a9a67303f34c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]: /images/20220113/99f09b12ee3a420eb8d2020c09e39500.png