javascript教程(4)——对象基础知识和数组的属性,方法

1.对象基础知识

1.1 对象的概念

什么是对象，很多人其实比较难回答。其实生活中什么都是对象，比如一个人就是一个对象，这个人有年龄，性别，身高等等属性，同时他还有很多的功能或者说方法，比如说走路，跑，跳等等。 在ECMA中把对象定义为：“无序属性的集合，其属性可以包含基本值、对象、或者函数。”      

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。  

在经典的面向对象语言中，对象是指数据和在这些数据上进行的操作的集合。与 C++ 和 Java 不同，JavaScript 是一种基于原型的编程语言，并没有 class 语句，而是把函数用作类。    

 

1.2 对象的分类

在我们的JS中有内置对象和自定义对象的区分。

内置对象：  JS语言中已经提供的好的对象，这些对象有自己的属性和方法。JS里面内置对象包含了 Number,String,Boolean,Date,Math,RegExp,Array,Global 等等。有了这些内置 对象我们可以很方便的操作JS中很多的一些特定的元素，比如时间，数学计算等。

自定义对象：  JS我们可以自己去根据对象的定义的方法去自定义一个对象。

 

1.3 对象的定义

1.3.1 字面量方式

语法：var obj = {};

var obj1 = {};//没有任何属性的对象
console.log(typeof obj);        //object

 

1.3.2 通过new关键字创建

语法：var obj = new Object();

var obj = new Object();//创建一个空对象
var arr = new Array();//创建一个空数组对象
var date = new Date();//创建一个空时间对象   

 

1.3.3 通过构造函数的形式创建对象

语法：function Person(){};或者var Person=function(){};

var obj=new Test();
function Test(num1,num2){
    this.n1=num1;
    this.n2=num2;
}
var obj=new Test(5,6); // 实例化

a.使用的时候通过new操作符得到对象var person1=new Person()  

b.用构造器创建对象的时候可以接收参数  

c.构造器函数的首字母最好大写，区别其他的一般函数  

 

1.3.4 通过Object.create()创建对象

 var obj = Object.create(null); // 创建一个空对象
 var obj2 = Object.create({age:20})  // 创建一个内容的对象

 

1.4 对象的属性

所谓的属性就是描述这个元素的某个特征的名称。比如人有很多属性，如年龄，身高，姓名，电话，家庭住址等等。我们的属性都有对应的值，它的值可以是一个也可以多个，这些值得数据类型没有固定，可以是字符，数字，布尔，或者对象等等

 

1.4.1 设置属性

我们设置属性的方法是使用.号或者中括号的方式去设置。对象的属性是动态的。可以定义的时候就添加，也可以后面再去添加。

动态属性  

我们的对象在定义的时候可以设置属性，也可以后来添加。所以它的属性是动态的，而且它的属性值可以是不同的数据类型。如果它的属性值是一个匿名函数，那我们这个时候一般称这个属性名为方法。那我们设置属性的方法一般也会使用两种方式，如下

语法:
对象.属性名 = 属性值
对象['属性名'] = 属性值

var person = {};
person.name = "张三";
person['age'] =20;
person.go = function(){
  console.log("我走了")
}

 

1.4.2 获取属性

我们获取属性的方法是使用点号或者中括号的方式去获取

语法：
对象.属性名 【方法一】
对象[属性名]   【方法二】

var obj = {
    age:20,
    sex:"男"
}
console.log(obj.age);  // 输出 20
console.log(obj['sex']) // 输出 "男"

注意：我们的中括号里面是一个字符串，如果不是字符串就变成了变量，会出现错误。

 

1.4.3 遍历对象

由于我们的对象的属性都是动态的可以不断的添加，这个时候我们如果想获得一个对象的所有属性名和属性值的时候就尤为重要。JS里面给我们提供了for in 的循环方法来获取对象里的内容

语法：
for(var 变量 in 对象){
   // 变量    就是属性名
   // 对象[变量]   就是属性值
}

var obj = {
  age:20,
  sex:"男"
}
for(var i in obj){
  console.log(i)  // 会输出age,sex 注意返回的是字符串
  console.log(obj[i])  // 会输出  20, "男"
}

 

2.数组的基础知识

2.1 数组的概念

首先我们要注意，数组的本质还是对象，而且它是我们JS里面内置对象的一种。初学者会将数组和对象分开，其实要注意数组本身就是一个对象。那我们数组到底是什么，其实数组是存储一系的值得集合。它的作用就在于能够使用单独的变量名来存储一系列的值，打破了我们原来一个变量只能存储一个值的思路。  

1、数组内可以存放任意类型的数据  2、数组元素不赋值，则为undefined  3、打印数组时，如果某个元素没有赋值，则为“”  4、访问数组范围以外的元素时，不会出现越界异常，为undefined  5、定义的数组大小，依然可以添加更多的元素  

var arr = ['你好',20,{name:"张三"}]

2.2 定义数组的方法

方法一：

var arr = [];   // 定义一个空数组
var arr2 = [20,30,40]  // 定义一个有值得数组

方法二：

var arr = new Array();  // 定义一个空数组
var arr = new Array(20,40,"男");  // 定义一个有值的数组
var arr = new Array(10); // 定义一个长度为10的空数组

注意：当我们使用new Array()方法去创建一个数组的时候，里面传入一个数字代表这个数组的长度是多少。虽然每个值都是空的。但是如果传入的内容超过两个，那么这些元素就是数组里的元素。

 

2.3 数组的取值，改值和赋值

2.3.1 赋值

语法：
数组名[下标] = 值

var arr = [];
arr[0] = "javascript";
arr[1] = 20; 

 

2.3.2 改值

语法：
数组名[下标] = 值

var arr = ['美女','学JS'];
arr[0] = "帅哥"; 
console.log(arr);

 

2.3.3 取值

语法：
数组名[下标]

var arr = ['型男','来学javascript'];
console.log(arr[1]); // 输出 "来学javascript"

我们的数组的赋值，改值，取值都是通过下标来的。我们的索引数组的下标是从0开始的。你懂滴，也就是我们数组还是有分类的。对后面我们马上介绍。    注意如下代码有点意思：

var arr= [10,20,40];
arr[10] = "你好";
console.log(arr); // 中间会有很多是空的

上面的代码初学者可能认为数组的元素个数是4个，其实错了，数组的元素个数是11个，只不过中间很多很多是空的。数组的长度是由最大的那个下标决定的。

 

2.4 数组的分类

在我们的JS里面我们的数组分为索引数组和关联数组    

索引数组：下标是数字的数组  关联数组：下标是自定义的一些字符

var arr = [];
arr['age'] = 10;
arr['name'] = "张三"
console.log(arr)

什么？这不是给对象添加属性吗。其实，这是在给关联数组添加元素，记住我们的关联数组下标不是数字，并且我们的关联数组不能够在定义的时候就赋值。必须先定义一个空的数组，再赋值。它的赋值，改值，访问也都是通过下标，只不过不再是数字而是字符，如

var arr = [];
arr['age'] = 10;
arr['name'] = "张三"  // 赋值
arr['age'] =30;  //改值
console.log(arr['name'])  // 取值

当然我们数组里面还有一位数组和多维数组之分：

一维数组：我们上面的案例中的数组都是一维数组    

**多维数组**： 数组里面的元素还是数组

二维数组：    

从整体看，它是一个数组，只是其中每个元素又都是一个数组，即数组中的数组 ；例如：

var arr = [
  [101,"Mary",95,"1988-11-20"],
  [102,"Tom",97,"1989-03-10"],
  [103,"Json",99,"1988-07-22"]
];

创建二维数组    

1)定义一个规整的二维数组

var arr1 =[ [1,3,5,7], [2,4,6,8] ,[3,6,9,12] ];

2)定义一个不规整的二维数组；  

var arr2 = new Array(); 
arr2[0] = [1,2];
arr2[1] = [3,4,5];
arr2[2] = [6,7,8,9];

使用二维数组

1） 访问二维数组

var arr =[ [1,3,5,7], [2,4,6,8] ,[3,6,9,12] ];
console.log(arr[1][0])  // 输出 2
arr[0][3] = 100  // 将7改为100

2） 循环二维数组  

外层循环控制行，内层循环控制列

var arr =[ [1,3,5,7], [2,4,6,8] ,[3,6,9,12] ];
for(var i=0; i<arr.length; i++>){
  for(var j=0; j<arr[i].length; j++){
    console.log(arr[i][j])
  }
}

3） 多维数组

var arr = [
  [
    [ [1,3,5,7], [2,4,6,8] ,[3,6,9,12] ],
    ["aa","dd"]
  ]
]

 

2.5 数组的属性

数组的常见属性是我们的length属性，当然这个属性是索引数组的，因为我们的索引数组下标是数字。而我们的关联数组下标都是字符类型，所以并没有长度。正式由于这个原因，导致后面的遍历使用的循环有点不同。

var arr = [10,20,40];
console.log(arr.length); // 获取索引数组的长度
arr[arr.length] = 20; // 在索引数组的末尾添加了一个新元素。 因为发现索引数组的最后一个下标永远是长度-1

 

2.6 数组的遍历

这里我们需要主意，我们的索引数组可以使用for循环或者 for in 循环遍历，但是我们的关联数组只能使用 for in 循环。

var arr = ["javascript","很牛逼！","嗯，说的很对"];
for(var i=0; i<arr.length; i++){
  console.log(arr[i])
}

我们索引数组的遍历是利用了它的下标正好是数字的这个特点。我们用变量i 去不断增加。 i 就是下标， arr[i] 就是值

var arr = [];
arr['age'] = 20;
arr['name'] = "javascript";
arr['sex'] = 'man';
for(var a in arr){
   console.log(a); // 输出下标
   console.log(arr[a]); // 输出对应的值
}

由于我们的关联数组下标不是规则的数字，并且它没有长度属性，所以我们不能使用for循环去遍历，而只能使用 for in 循环。当然我们的索引数组也可以使用 for in 来循环。

 

2.7 数组的常用API

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数。 数组的常用API 翻译的意思就是数组常用的一些方法,我们可以利用这些方法很方便的操作数组。

方法： 我们学习这些API需要注意从三点掌握，非常重要。第一，这个函数的作用是什么；第二，这个函数的参数和返回值是什么； 第三，这个函数有没有改变他原来的东西。这三点出发时学习常用的API的不二之法。

concat    

concat()连接l两个或者更多的数组，并返回结果；（不修改原数组）

var newArr=arr1.concat(值1,值2,arr2,...)
//不修改原数组，而是返回新数组，必须用变量接住新数组；
var arr1 = [1,2,3]; 
var arr2 = [7,8,9]; 
var newArr = arr1.concat(11,22,33);
console.log(newArr); //[1, 2, 3, 11, 22, 33];
var newArr = arr1.concat(arr2); 
console.log(newArr); //[1, 2, 3, 7, 8, 9];  

join  

join()把数组打散成字符串，并且通过指定的连接符进行分割；

var str=arr.join("连接符");    
var arr = ["Mary","Json","Tom"];
var str = arr.join("-");    
console.log(str); // Mary-Json-Tom

toString  

toString();把数组打散成字符串，并且通过指定的","进行分割；

var n = ["a","b","c","d"];
var m = n.toString();
console.log(m); //a,b,c,d  

slice  

slice(): 从已有数组中返回选定的元素（不修改原数组）;

var subArr=Arr.slice(starti,endi);    
starti: 开始位置的下标    
endi:结束位置的下标,含头不含尾；
如果不写默认到最后一个；        
slice支持负数参数，如果参数为负，则自动用length-参数 

var Arr = [1,2,3,4,5,6,7,8,9];	
var subArr = Arr.slice(2,4);
console.log(subArr); //[3, 4]
console.log(Arr);  //[1, 2, 3, 4, 5, 6, 7, 8, 9]	

splice

splice()：删除 插入 —— 直接修改原数组;  

删除：  
var deleted=del.splice(starti,n)；    
deleted表示被删除的元素，临时组成的子数组；    
starti表示开始删除的位置,    
n表示删除（n）个；   

var del = [1,2,3,4,5,6,7,8];	
var deleted = del.splice(3,5);
console.log(deleted); //[4, 5, 6, 7, 8]	
console.log(del);  //[1, 2, 3]；	

插入：   
arr.splice(starti,n,值1,值2,值3...)；    
starti表示开始插入的位置，   
0表示一个都不删除   
值1,...:要在starti位置插入的新值。

var d = [11,12,13,14,15];	
d.splice(2,0,22,33,44);
console.log(d); //[11, 12, 22, 33, 44, 13, 14, 15]

push  

push()向数组末尾添加一个或多个新元素并返回最后一个元素(直接修改原数组)

var arr = [1,2,3];
var p = arr.push(4);
console.log(arr); //[1, 2, 3, 4]
console.log(p); //4	

pop  

pop()删除并返回最后一个元素(直接修改原数组)

var str = [11,22,33,44];
var s = str.pop();
console.log(str); //[11, 22, 33]
console.log(s);	//44	

shift

shift()删除并返回第一个元素(直接修改原数组)

var n = [1,2,3,4];
var h = n.shift();
console.log(n); //[2, 3, 4]
console.log(h); //1

unshift  

unshift()向数组首位添加一个或多个新元素(直接修改原数组)

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

reverse  

reverse()颠倒数组中元素的位置

var r = [1,2,3,4,5];
r.reverse();
console.log(r); //[5, 4, 3, 2, 1]

sort    

sort()对数组中的元素 进行排序；

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

如果该方法没有参数，将按字母编码顺序对数组进行排序，如果需要按照其他标准就需要提供比较函数 ；

sort方法：默认将每个元素转为字符串，再按升序排列 arr.sort();

var u = ["tom","mary","lilei","taotao","anly"];
//a-指数组前一个参数；b-指后一个参数
u.sort(function(a,b){
 	return a>b；	
});
console.log(u); //["anly", "lilei", "mary", "taotao", "tom"]；

自定义排序：2步：  

1. 定义比较器函数:    比较器函数：专门比较任意两值大小的函数    规定：必须有两个参数,分别代表要比较的两个值；    通过返回数值，说明两个参数值的大小关系比如: a>b，就返回正数    a<b，就返回负数a=b，就返回0   

function compare(a,b){ 
    return a-b;
}

1. 将比较器函数作为参数传入sort方法arr.sort(compare);    

原理：js中函数也是对象，函数也可作为参数传递      

何时需要将函数作为参数？一项任务的执行过程出现不确定性时。就只能在运行时，临时传入执行步骤。降序：颠倒比较器的正负号，可改升序为降序

 

 

 

 

PS：纯属本人原创，如有错误 欢迎指点  不才会及时更正  互相学习