Detailed explanation of JavaScript objects and arrays_javascript skills-JS Tutorial-php.cn

Many high-level programming languages are object-oriented, such as C, C# and Java and other high-level programming languages. So what are the basic requirements for an object-oriented language? Now let's talk about some object-oriented knowledge.
An object-oriented language needs to provide developers with four basic capabilities:

(1) Encapsulation: the ability to store relevant information (whether data or methods) in an object
(2) Aggregation: The ability to store one object within another object
(3) Inheritance: The ability to obtain the attributes and methods of a class from another class (or multiple classes)
(4) Polymorphism: The ability to write functions or methods that can be run in multiple ways

Since ECMAScript supports these requirements, it can be regarded as object-oriented. In ECMAScript, you cannot access the physical representation of an object, only its reference. Every time an object is created, what is stored in the variable is a reference to the object, not the object itself. Therefore, JavaScript is a weakly typed web script language based on object-oriented.
1. Object type
The Object type contains properties (also called fields) and methods (also called functions). Therefore, there are key points that must be explained when creating the Object type. There are generally two ways to create Object type numbers:
(1) Use new operator

var box=new Object(); 
box.name="张三";//创建属性以及初始化 
box.age=23; 
box.run=running();//创建方法 
function running(){ 
   return "我是中国人！"; 
} 
document.write(typeof box+"<br/>"); 
document.write(box.name+"<br/>"); 
document.write(box.age+"<br/>"); 
document.write(box.run);

Copy after login

Output: object
Zhang San
23
I am Chinese!
(2) Literal representation

var box={ 
 name:"张三", 
 age:23, 
 run:function(){  
   return "我是中国人！"; 
 } 
}; 
document.write(typeof box+"<br/>"); 
document.write(box.name+"<br/>"); 
document.write(box.age+"<br/>"); 
document.write(box.run());

Copy after login

Output: Same as above
(3) Comprehensive use
When we pass multiple parameters, we need to enter them in order. In order to solve this cumbersome process, we can encapsulate multiple parameters
To an Object type, use the Object type as a parameter. We can also judge the non-existent or extra parameters, which makes it easier to call the function
Count and pass parameters.

function box(obj){ 
  if(obj.name!=undefined)document.write(obj.name+"<br/>"); 
  if(obj.age!=undefined)document.write(obj.age+"<br/>"); 
  if(obj.love!=undefined)document.write(obj.love+"<br/>"); 
} 
var obj={ 
  name:"张三", 
  age:23 
}; 
box(obj);

Copy after login

Output: Zhang San
23
2. Array type
Arrays in ECMAScript are very different from other languages. The elements in an array in JS can be of any data type, and the size of the array is also
It can be adjusted. It reflects from the side that JS is a weakly typed language. There are two ways to create Array type numbers:
(1) Use new operator (new can be omitted)

var box=new Array(1,2,3,4); 
document.write(typrof box+"<br/>");//Array属于Object类型 
document.write(box);//输出1,2,3,4

Copy after login

Index subscripts start from 0

var box=new Array(1,2,3,4); 
document.write(box[0]+box[1]+box[2]+box[3]);//输出1,2,3,4

Copy after login

Create an array with ten elements

var box=new Array(10);//创建数组默认必须是数字，必须是一位数字 
box[3]=4;//初始化数组中的元素 
box[5]=6; 
document.write(box);//输出,,,4,,6,,,,

Copy after login

(2) Use literals to create arrays

var box=[1,2,3,4]; 
document.write(typrof box+"<br/>");//输出Object 
document.write(box.length+"<br/>");//输出数组的长度为4 
document.write(box);//输出1,2,3,4

Copy after login

Create a complex array (can be of various types)

var box=[ 
  { 
   name:"张三", 
   age:23 
  },//Object类型 
  [1,2,3,4],//Array类型 
  "JS",//String类型 
  25+25,//Number类型 
  new Array(1,2,3)//Array类型 
]; 
document.write(typeof box+"<br/>"); 
document.write(box[0].name+"<br/>"); 
document.write(box[3]);

Copy after login

The output result of the page is:

3. Methods in objects
(1)Conversion method
Objects or arrays have toLocaleString(), toString() and valueOf() methods. Among them, toString() and valueOf() will return
no matter who is overridden. return the same value. The array concatenates each value in string form, separated by commas.

var box=[1,2,3,4]; 
document.write(box+"<br/>");//输出1,2,3,4 
document.write(box.toString()+"<br/>");//输出1,2,3,4 
document.write(box.valueOf()+"<br/>");//输出1,2,3,4 
document.write(box.toLocaleString());//输出1,2,3,4

Copy after login

By default, array strings are separated by commas. If you use the join() method, you can use different delimiters to build this string

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
document.write(typeof box+"<br/>"); 
document.write(box.join("-")+"<br/>"); 
document.write(typeof box.join("-"));

Copy after login

页面输出的结果为：

(2)栈方法
ECMAScript数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说，可以让数组像栈一样，可以限
制插入和删除想的数据结构。栈是一种后进先出的数据结构，也就是最新添加的元素最早被移除。而栈元素的插入和
移除，只发生在栈的顶部。ECMAScript为数组专门提供了push()和pop()方法。
栈操作数组元素的图片：

push()方法可以接受任意数量的参数，把它们逐个添加到数组的末尾，并返回修改数组的长度。而pop()方法则从
数组末尾移除最后一个元素，减小数组的length值，然后返回移除的元素。

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.push(5,6);//在数组末尾添加元素 
document.write(box+"<br/>"); 
document.write(box.push(7,8)+"<br/>");//在数组末尾添加元素，并返回添加元素后数组的长度 
document.write(box+"<br/>"); 
box.pop();//移除数组末尾的元素 
document.write(box+"<br/>"); 
document.write(box.pop()+"<br/>");//移除数组末尾的元素，并返回移除的元素 
document.write(box);

Copy after login

输出：

(3)队列方法
栈方法是后进先出，队列方法是先进先出。队列在数组的末端添加元素，从数组的前端移除元素。通过push()向
数组末端添加一个元素，然后通过shift()方法从数组的前端移除一个元素。
队列操作数组元素的图片

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.push(5,6);//在数组末尾添加元素 
document.write(box+"<br/>"); 
document.write(box.push(7,8)+"<br/>");//在数组末尾添加元素，并返回添加元素后数组的长度 
document.write(box+"<br/>"); 
box.shift();//移除数组前端的一个元素 
document.write(box+"<br/>"); 
document.write(box.shift()+"<br/>");//移除数组前端的一个元素，并返回移除的元素 
document.write(box);

Copy after login

输出：

ECMAScript还为数组提供了一个unshift()方法，它和shift()方法的功能完全相反。unshift()方法为数组的前端添加
一个元素。

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.unshift(0);//在数组的前端添加一个元素 
document.write(box+"<br/>"); 
document.write(box.unshift(-1)+"<br/>");//在数组的前端添加一个元素，并返回添加元素会数组的长度 
document.write(box+"<br/>"); 
box.pop();//在数组末尾移除元素 
document.write(box+"<br/>"); 
document.write(box.pop()+"<br/>");//在数组末尾移除元素，并返回移除元素后数组的长度 
document.write(box);

Copy after login

输出：

(4)重排序方法
数组中已经存在两个直接用来排序的方法：reverse()和sort()。
reverse()：逆向排序

var box=[1,2,3,4,5]; 
box.reverse(); 
document.write(box+"<br/>");//输出54321 
document.write(box.reverse());//再次进行逆序，输出12345

Copy after login

sort():从小到大排序

var box=[3,2,6,4,1,5]; 
box.sort(); 
document.write(box+"<br/>");//输出1,2,3,4,5,6 
document.write(box.sort());//再次从小到大进行排序

Copy after login

如果我们实验次数多的话可能回遇到这样的问题，

var box=[0,15,10,1,5]; 
box.sort(); 
document.write(box);//输出0,1，10，15,5

Copy after login

我们从结果可以看出，这违背了我们想要的结果，解决方法：

function compare(value1,value2){ 
  if(value1<value2){ 
   return -1; 
  } 
  else if(value1>value2){ 
   return 1; 
  } 
  else{ 
   return 0;  
  }  
} 
var box=[0,15,10,1,5]; 
box.sort(compare); 
document.write(box);//输出0,1,5,10,15

Copy after login

(5)操作方法
JS为操作已经包含在数组中的元素提供了许多的方法。concat()方法可以基于当前数组创建一个新数组。slice()方
法可以基于当前数组获取指定区域元素并创建一个新数组。splice()方法主要用途是向数组的中部插入元素。
a

var box=[1,2,3,4,5]; 
var box1=box.concat(6);//创建新数组，并添加新元素 
document.write(box1+"<br/>");//输出1,2,3,4,5,6， 
document.write(box);//原数组不变化

Copy after login

var box=[1,2,3,4,5]; 
var box1=box.slice(2);//取出索引为2以后的元素组成新的数组 
document.write(box1+"<br/>");//输出3,4,5 
document.write(box);//原数组不变化

Copy after login

var box=[1,2,3,4,5]; 
var box1=box.slice(2,3);//取出索引为2到3之间的元素组成新的数组 
document.write(box1+"<br/>");//输出3 
document.write(box);//原数组不变化

Copy after login

splice中的删除功能

var box=[1,2,3,4,5]; 
var box1=box.splice(0,2);//截取索引为0开始的两个元素组成新的数组 
document.write(box1+"<br/>");//返回截取的元素1,2 
document.write(box);//当前数组被截取的元素被删除，输出3,4,5

Copy after login

splice中的插入功能

var box=[1,2,3,4,5]; 
var box1=box.splice(4,0,6);//索引为4的位置插入了一个元素 
document.write(box1+"<br/>");//返回新的数组为空，并没有截取元素 
document.write(box);//当前数组索引为4的位置插入一个元素1,2,3,4，6，5

Copy after login

splice中的替换功

var box=[1,2,3,4,5]; 
var box1=box.splice(4,1,6);//索引为4的元素被替换，替换下来的元素组成新数组 
document.write(box1+"<br/>");//返回新的数组5 
document.write(box);//被替换后的原数组1,2,3,4,6

Copy after login

以上就是关于JavaScript对象和数组的详细介绍，希望对大家的学习有所帮助。