javaScript数组的属性和方法(示例和解析)

Array 对象属性	描述
constructor	返回对创建此对象的数组函数的引用。
length	设置或返回数组中元素的数目。
prototype	使您有能力向对象添加属性和方法。

Array 对象方法	描述
concat()	连接两个或更多的数组，并返回结果
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或更多元素，并返回新的长度
splice()	删除元素，并向数组添加新元素
reverse()	颠倒数组中元素的顺序
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
toString()	把数组转换为字符串，并返回结果
toLocaleString()	把数组转换为本地数组，并返回结果
toSource()	返回该对象的源代码(只有Gecko内核的FireFox支持)
valueOf()	返回数组对象的原始值

属性

1. constructor

   描述：返回对创建此对象的数组函数的引用。
   语法：object.constructor

   function Mymsg(name,job,born)
   {
   this.name=name;
   this.job=job;
   this.born=born;
   }
   
   var msg=new Mymsg("shimh","javaScript",1991);
   
   document.write(msg.constructor);
   

   返回结果

   function Mymsg(name, job, born)
   {this.name = name; this.job = job; this.born = born;}
   

   个人理解

   我个人认为constructor这个属性返回引用方法的原始函数体，如果是一个单纯的数组（如 [11,22]）或单纯的json对象（如 {aa:11}）,返回的也会是一个由Array或Object为名的函数体，虽然是一个函数体但是你可以直接拿这个结果作为一个最后结论来进行条件判断，如果和其函数名相等则返回true

   例如

   var test=new Array();
   console.log(test.constructor);
   /** 结果
   	function Array() { [native code] }
   */
   console.log(test.constructor==Array);
   /** 结果
   	true
   */
   

   起初我以为只有 new Array() 或 new Object() 可以这样做，但是后来发现普通函数也可以用对应名字做逻辑判断，比如：

   function Test1(val) {
   	var val1 = val+1
   	return val
   }
   console.log(new Test1().constructor);
   /** 结果
   	function Test1(val) { var val1 = val+1 return val }
   */
   console.log(new Test1().constructor == Test1);
   /** 结果
   	true
   */
   
   // 还有一种情况就是不使用new,返回的 constructor 跟new Array()的一样
   // 拿其名字做判断的时候结果是 Function 而不是 Test1
   console.log(Test1.constructor);
   /** 结果
   	function Function() { [native code] }
   */
   console.log(Test1.constructor == Function);
   /** 结果
   	true
   */
   console.log(Test1.constructor == Test1);
   /** 结果
   	false
   */
   

   我在逛网站的时候发现 这里 也专门对constructor进行了详细的讲解

2. length

   描述：length 属性可设置或返回数组中元素的数目。
   语法：arrayObject.length

   var arr = new Array(3)
   arr[0] = "aaa"
   arr[1] = "bbb"
   arr[2] = "ccc"
   console.log(arr.length) // 3
   arr.length = 5
   console.log(arr.length) // 5
   // 还有下面这种直接拿到数组的方式
   var arr2 = [11,'aa',true]
   console.log(arr2.length) // 3
   

   简单说 length 就是返回数组的长度

3. prototype

   描述：prototype 属性使您有能力向对象添加属性和方法。
   语法：object.prototype.name=value

       function FunPro(name) {
           this.name = name
           this.age = 18
       }
       var newpro = new FunPro('shimh')
       console.log(newpro) // FunPro {name: "shimh", age: 18}
       // console.log(FunPro.prototype.height = 180)
       FunPro.prototype.height = 180
       console.log(newpro) // FunPro {name: "shimh", age: 18}
       console.log(newpro.height)  // 180
       FunPro.prototype.num = function () {
           return 2000
       }
       FunPro.prototype.obj = {
           job: 'web',
           ev: function (val) {
               return val
           }
       }
       console.log(newpro.num()) // 2000
       console.log(newpro.obj.job) // web
       console.log(newpro.obj.ev(888)) // 888
   

   prototype 和 constructor 一样，虽然在平时开发页面的时候比较少用到，但是在一些框架，大型插件里经常能看到，深入理解有助于对公共库的封装和扩展有帮助

方法

1. concat()

   描述：concat() 方法用于连接两个或多个数组。该方法 **不会改变现有的数组 **，而仅仅会返回被连接数组的一个副本。

   语法：arrayObject.concat(arrayX,arrayX,…,arrayX)

   参数	描述
   arrayX	必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

   返回值：返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

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

   还可以2个数组合并

   var arr = new Array(2)
   arr[0] = "George"
   arr[1] = "John"
   
   var arr2 = new Array(2)
   arr2[0] = "James"
   arr2[1] = "Adrew"
   console.log(arr.concat(arr2)) // George,John,James,Adrew
   

   多个数组混合合并

   var arr = new Array(2)
   arr[0] = "George"
   arr[1] = "John"
   
   var arr2 = ['aa', 'bb']
   console.log(arr.concat(arr2, 111)) // ["George", "John", "aa", "bb", 111]
   console.log(arr)	// ["George", "John"]
   

   所以说concat允许任何不同形式的值合并成数组，现有的数组不会被破坏，看 arr 变量就知道了,但是一定要确保arr本身是一个数组，后面可以是任何类型的值进行合并，不信来看下面例子

   var a1 = 'shimh'
   var arr1 = ['aa', 'bb']
   console.log(a1.concat(arr1, 111)) // shimhaa,bb111
   console.log(typeof a1.concat(arr1, 111)) // string
   
   var a2 = true
   var arr2 = ['aa', 'bb']
   console.log(a2.concat(arr2, 111)) // Uncaught TypeError: a1.concat is not a function
   

   很明显，以上都不是我们想要的结果，所以切记，conact的点对象也就是需要合并的首个变量的数据类型一定得是数组

2. join()

   描述：join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分 隔符进行分隔的。

   语法：arrayObject.join(separator)

   参数	描述
   separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

   返回值：返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

   var arr = [18,'shimh',true]
   console.log(arr.join())	// 18,shimh,true
   console.log(typeof arr.join())	// string
   

   join方法将转换成字符串的数组项默认用逗号分隔开，当然也可以传入任何指定的 字符串 标识来分隔

   var arr = [18,'shimh',true]
   console.log(arr.join('.'))	// 18.shimh.true
   console.log(arr.join('_'))	// 18_shimh_true
   console.log(arr.join('$'))	// 18$shimh$true
   console.log(arr.join(' '))	// 18 shimh true
   console.log(arr.join('vv'))	// 18vvshimhvvtrue
   

3. pop()

   描述：pop() 方法用于删除并返回数组的最后一个元素。

   语法：arrayObject.pop()

   返回值：arrayObject 的最后一个元素。
   说明：pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

   var arr = [18,'shimh',"haha"]
   console.log(arr)	// [18, "shimh","haha"]
   console.log(arr.pop())	// haha
   console.log(arr)	// [18, "shimh"]
   

   注意：pop方法的括号中并不需要传参

4. push()

   描述：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

   语法：arrayObject.push(newelement1,newelement2,…,newelementX)

   参数	描述
   newelement1	必需。要添加到数组的第一个元素。
   newelement2	可选。要添加到数组的第二个元素。
   newelementX	可选。可添加多个元素。

   返回值：把指定的值添加到数组后的新长度。
   说明：push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

   var arr = [18,'shimh','haha']
   console.log(arr)	// [18, "shimh", "haha"]
   console.log(arr.push(true))	// 4	(返回push后的数组长度)
   console.log(arr)	// [18, "shimh", "haha", true]
   

   当然你也可以同时push多个元素

   var arr = [18,'shimh','haha']
   console.log(arr.push('123','web','age'))	// 6	(返回push后的数组长度)
   console.log(arr)	// [18, "shimh", "haha", "123", "web", "age"]
   

   注意：如果push数组的话与concat不同，push进来的数组是作为当前数组的子数组来添加，而并不是合并成同级数组

5. shift()

   描述：shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

   语法：arrayObject.shift()

   返回值：数组原来的第一个元素的值。
   说明：如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

   var arr = [18,'shimh',"haha"]
   console.log(arr)	// [18, "shimh","haha"]
   console.log(arr.shift())	// 18
   console.log(arr)	// ["shimh", "haha"]
   

   注意：shift方法的括号中并不需要传参

6. unshift()

   描述：unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

   语法：arrayObject.shift()

   参数	描述
   newelement1	必需。向数组添加的第一个元素
   newelement2	可选。向数组添加的第二个元素
   newelementX	可选。可添加若干个元素

   返回值：arrayObject 的新长度。
   说明：unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以 便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
   请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。

   var arr = [18,'shimh','haha']
   console.log(arr)	// [18, "shimh", "haha"]
   console.log(arr.unshift(true))	// 4	(返回unshift后的数组长度)
   console.log(arr)	// [true, 18, "shimh", "haha"]
   arr.unshift('aa','bb')
   console.log(arr)	// ['aa', 'bb', true, 18, "shimh", "haha"]
   

   注意：shift方法的用法和push一样，也可以传多个元素，区别是一个详情添加，一个向后添加

7. splice()

   描述：splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
   注释：该方法会改变原始数组。

   语法：arrayObject.splice(index,howmany,item1,…,itemX)

   参数	描述
   index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
   howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
   item1, …, itemX	可选。向数组添加的新项目。

   返回值

   类型	描述
   Array	包含被删除项目的新数组，如果有的话。

   说明：splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

   const arr = [18,'shimh','haha','web','js',true]
   // splice(开始删除的位置,删除数量,添加的元素1,添加的元素2)
   const sp = arr.splice(1,2,['aa','bb'],'cc')
   console.log(sp) // ["shimh","haha"]
   console.log(JSON.stringify(arr)) 
   // [18,["aa","bb"],"cc","web","js",true]
   

   可以只删除不添加，或者只在指定位置添加但不删除元素，如果只添加元素，第二个位置填0就可以了

   注意：shift方法的用法和push一样，也可以传多个元素，区别是一个详情添加，一个向后添加

8. reverse()

   描述：reverse() 方法用于颠倒数组中元素的顺序。
   语法：arrayObject.reverse()

   说明：该方法会改变原来的数组，而不会创建新的数组。

   const arr = [1,true,'a',null]
   const re = arr.reverse()
   console.log(re)	// [null,"a",true,1]
   console.log(arr) // [null,"a",true,1]
   

   这个方法没什么好说的，也不需要传参，单纯只是颠倒原数组顺序，它自身也返回颠倒顺序后的数组

9. slice()

   描述：slice() 方法可从已有的数组中返回选定的元素。
   语法：arrayObject.slice(start,end)

   参数	描述
   start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
   end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

   返回值：返回一个 新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
   说明：请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

   您可使用负值从数组的尾部选取元素。
   如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

   var sl = [1,2,3,4,5,6]
   var newsl = sl.slice(3)
   console.log(sl)	// [1, 2, 3, 4, 5, 6]
   console.log(newsl)	// // [4, 5, 6]
   

   可见，slice并不会改变原数组，如果不指定结尾就默认选取后面所有元素

   var sl = [1,2,3,4,5,6,7,8,9]
   var newsl = sl.slice(3,6)	// 3和6都是数组的角标
   console.log(sl)	// [1, 2, 3, 4, 5, 6, 7, 8, 9]
   console.log(newsl)	// [4, 5, 6]
   

   实践证明，截取的数组并不包含结尾选定的位置

10. sort()

    描述：sort() 方法用于对数组的元素进行排序。
    语法：arrayObject.sort(sortby)

    参数	描述
    sortby	可选。规定排序顺序。必须是函数。

    返回值：对数组的引用。请注意，数组在 原数组上进行排序，不生成副本。
    说明：
    如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
    如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 若 a 等于 b，则返回 0。
• 若 a 大于 b，则返回一个大于 0 的值。

var arr2 = ['break','object','commit','array','destroyed']
console.log(arr2.sort()) // ["array", "break", "commit", "destroyed", "object"]
console.log(arr2) // ["array", "break", "commit", "destroyed", "object"]

sort方法将原数组改变了顺序，从小到达排列，但是字母是 区分大小写 的，如果大小写都有，就优先排大写首字母的顺序，再排列消协的顺序，然后排序后的所有大写在前面，所有小写字母排序后在数组后面，请看下面例子

var arr2 = ['break','object','Commit','array','destroyed','Error','Fun']
console.log(arr2.sort()) 
// ["Commit", "Error", "Fun", "array", "break", "destroyed", "object"]
console.log(arr2) 
// ["Commit", "Error", "Fun", "array", "break", "destroyed", "object"]

所以排列前要统一大小写（全大写或全小写）,以上是字母排序，接下来的是数字排序

var arr2 = ['3','4','31',6,'22','7','1']
console.log(arr2.sort()) 
// ["1", "22", "3", "31", "4", 6, "7"]
console.log(arr2) 
// ["1", "22", "3", "31", "4", 6, "7"]

仔细看上面的例子，数字排序是不区分Number类型还是String类型的，可以放一起进行排序，但是如果直接sort只按第一位排列，十以上的数字就会出问题了，这时候我们需要添加一个函数来辅助它

var arr2 = ['3','4','31',6,'22','7','1']
function sortNumber(a,b){
	return a-b
}
console.log(arr2.sort(sortNumber)) 
// [["1", "3", "4", 6, "7", "22", "31"]
console.log(arr2) 
// ["1", "3", "4", 6, "7", "22", "31"]

这样就可以实现不限位数的数字排序了，如果是倒序呢？当然我们可以再调用reverse()方法来进行数组颠倒顺序，但是数字的话还有一种方法，请看例子

var arr2 = ['3','4','31',6,'22','7','1']
function sortNumber(a,b){
	return b-a
}
console.log(arr2.sort(sortNumber)) 
// ["31", "22", "7", 6, "4", "3", "1"]
console.log(arr2) 
// ["31", "22", "7", 6, "4", "3", "1"]

只要将sortNumber函数里的 a-b改为b-a 就能轻松实现数字倒序了

11. toString()

    描述：toString() 方法可把数组转换为字符串，并返回结果。
    语法：arrayObject.toString()

    说明：该方法 不会 改变原来的数组

    var arr3 = [1,'2',true,'a']
    console.log(typeof arr3.toString() + '--', arr3.toString())
    // string-- 1,2,true,a
    console.log(typeof arr3 + '--', arr3)
    // object-- (4) [1, "2", true, "a"]
    

    这个也是一个不需要传参的方法，单纯将数组转成字符串，不会改变原数组

12. toLocaleString()

    描述：toLocaleString() 把数组转换为本地字符串。
    语法：arrayObject.toLocaleString()
    返回值：arrayObject 的本地字符串表示。
    说明：首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

    var arr3 = [1,'2',true,'a']
    console.log(typeof arr3.toLocaleString() + '--', arr3.toLocaleString())
    // string-- 1,2,true,a
    console.log(typeof arr3 + '--', arr3)
    // object-- (4) [1, "2", true, "a"]
    

    这里好像和toString()方法并没有什么区别，仔细看上面说明加粗的字体，结合说明看下面一个例子

    var arr3 = [1,'2',true,'a',new Date()]
    console.log(arr3.toLocaleString())
    // 1,2,true,a,2019/3/21 下午3:47:16
    console.log(typeof arr3 + '--', arr3)
    // [1, "2", true, "a", Thu Mar 21 2019 15:47:16 GMT+0800 (中国标准时间)]
    

    看，除了把数组转换成字符串之外，也把new Date()返回的时间格式化了，而toString()就不能做到这点，toLocaleString方法一般只针对时间的格式化，如果你还知道有别的用途可以给我留言，大家可以一起学习，感激不尽！

13. toSource()

    定义和用法：

• toSource() 方法表示对象的源代码。

• 该原始值由 Array 对象派生的所有对象继承。

• toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中

  语法：object.toSource()
  浏览器支持:只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均 不支持 该方法。

  function employee(name,job,born)
  {
  this.name=name;
  this.job=job;
  this.born=born;
  }
  
  var bill=new employee("Bill Gates","Engineer",1985);
  
  document.write(bill.toSource());
  // ({name:"Bill Gates", job:"Engineer", born:1985}) 
  

  这个方法连谷歌都不支持，这里就不过多讲了

14. valueOf()

    定义和用法：

• valueOf() 方法返回 Array 对象的原始值。
• 该原始值由 Array 对象派生的所有对象继承。
• valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

这个方法在W3School里讲的不多，连例子都没举，于是我找到了一些讲的不错的帖子，帖子里讲的比较详细，但是官方还说了可以重新封装这个方法，我理解valueOf只是一个思想，是一个实现思路的关键字，不一定非要用原有的，我抛个传送门大家可以看一下：MDN:Object.prototype.valueOf() 、手记:JavaScript对象的valueOf()方法

本文参考来源 W3School:JavaScript Array 对象 我把我学习过程中的思路和遇到的一些问题总结了一下，希望对看到这篇文章的你也有帮助，也希望资深的大佬能提些意见，指出些问题！