js基础数组Array的一些特性及方法

数组Array的一些特性及方法"/>

js基础数组Array的一些特性及方法

js基础数组Array的一些特性及方法

• • 数据类型
  • • js数据类型
    • 基本类型
    • 引用类型
  • 数组的方法
  • • 1. Array.concat()
    • 2. Array.join()
    • 3. Array.pop()
    • 4. Array.push()
    • 5. Array.reverse()
    • 6. Array.shift()
    • 7. Array.unshift()
    • 8. Array.slice()
    • 9. Array.splice()
    • 9. Array.sort()
    • 最后数组方法的扩展
    • • every()
      • • 例子:
      • some()
      • • 例子:

前言: 工作业务数据乱，数据转换用得繁，对接交流竟无语，全靠数组方法换；

数据类型

js数据类型

• 在js基础中，我都们知道数据类型有两大类:原始类型(基本类型)、引用类型

基本类型

js有5 种原始类型，即 Undefined、Null、Boolean、Number 和 String。其中Undefined和Null也称作特殊类型

console.log(typeof undefined) // undefined
console.log(typeof null)   // object
console.log(typeof true)  // boolean
console.log(typeof 1)     // number
console.log(typeof '1')   // string

总结:基本类型，笔者就不作过多介绍具体详情可以查阅w3school，这里解释一下为何typeof null得出来的是object类型而不是null，因为null是一个只有一个值的特殊类型，它被认为是对象的占位符，表示一个空对象引用。

• 在js中null == undefined 得到是真(true)，尽管这两个值相等，但它们的含义不同。 undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

引用类型

js中 基本类型的值基本是不可变的，但引用类型的值是动态可变的；基本类型的变量是存放在栈内存中，而引用类型的值是同时保存在栈内存和堆内存中的对象；

• 引用类型一般指的是对象和方法;
• 引用类型其实是在栈内存中存储了一个指针，这个指针指向堆内存中相应的存储地址

举例说明:

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

如上代码：按照我们常规的想法是 arr = [1,2,3,4,5,6]，arr1 = [1,2,3,4,5,6,1]的；

但实际输出如下:

解释: 上面对引用类型的定义引用类型其实是在栈内存中存储了一个指针，这个指针指向堆内存中相应的存储地址有讲到指针的这个词，实际上上面代码的操作 let arr1 = arr;并不是把arr重新拷贝了一份给arr1,而是把arr存储在堆内存的存储地址给了arr1, 对arr1的修改，会对该地址指向的堆内存的数据进行修改，而arr和arr1指向堆内存的地址是相同的，所以打印结果一致；并且都改变了；

上述换成Object对象依然是一致的，不相信的同学可以私下试试~

数组的方法

从w3school中我们可以知道数组有许多的方法，并且有些是我们经常用到且混淆不清的，接下来我们将对数组的方法进行详解；

1. Array.concat()

Array.concat() 的作用是连接两个或更多的数组，并返回结果。
使用

let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let arrAll =  arrNum.concat(arrStr).concat(arrObj)console.log(arrAll)

输出结果如下:

此时因为concat()返回的是一个新的实例对象，对原数组操作(arrNum、arrStr)并不会影响到arrAll的值变化，但假如对arrObj进行改变,由于arrObj里面的对象属于引用类型，arrAll相应的值的地址指针依然是同一个堆内存，假如对arrObj进行改变，arrAll也会相应改变；而arrNum、arrStr里面的值是基本类型，则不影响；

2. Array.join()

Array.join() 把数组的所有元素放入一个字符串并返回。元素通过指定的分隔符进行分隔。

  let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let	arrArr = [[1,2],['1','2']]console.log(arrNum.join('|'))console.log(arrStr.join(','))console.log(arrObj.join('-'))console.log(arrArr.join('='))

• 返回的字符串均没问题，但假如数组里面是object，则返回[object Object] 字符串；

3. Array.pop()

Array.pop() 向数组的末尾添加一个或更多元素，并返回新的长度。注意！！！文档上没写明会改变原数组; 但实际上会改变

  let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let	arrArr = [[1,2],['1','2']]console.log(arrNum.pop())console.log(arrStr.pop())console.log(arrObj.pop())console.log(arrArr.pop())console.log(arrObj,arrArr)

输出结果:

4. Array.push()

Array.push() 向数组的末尾添加一个或更多元素，并返回新的长度。

本来觉得用的最多，不想作介绍了但为了加以证明引用类型引用是的存储地址，修改原数组会导致引用相应地址的值也改变；
代码如下:

  let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let	arrArr = [[1,2],['1','2']]let  arrAll = []console.log(arrAll.push(arrNum))console.log(arrAll.push(arrStr))console.log(arrAll.push(arrObj))console.log(arrAll.push(arrArr))console.log('改变前===',arrAll)arrNum[0] = 10000arrStr[0] = 10000arrObj[0] = 10000arrArr[0] = 10000console.log('改变后===',arrAll)

总结:再次证明引用类型的特点；

5. Array.reverse()

Array.reverse() 颠倒数组中元素的顺序。

  let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let	arrArr = [[1,2],['1','2']]console.log(arrNum.reverse())console.log(arrStr.reverse())console.log(arrObj.reverse())console.log(arrArr.reverse())

常规使用，毫无问题

6. Array.shift()

Array.shift() 删除并返回数组的第一个元素,具体表现和上面的 3. Array.pop() 完全类似，同样会改变原数组，不作过多介绍；

7. Array.unshift()

Array.unshift()向数组的开头添加一个或更多元素，并返回新的长度。

用法:

arrayObject.unshift(val1,val2,....,valn)

参数解释:

• val1 必需。向数组添加的第一个元素。
• val2 可选。向数组添加的第二个元素。
• valn 可选。向数组添加的第n个元素。

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

	let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let	arrArr = [[1,2],['1','2']]console.log(arrNum.unshift(1,2,3,4,5,6))console.log(arrStr.unshift('1','2','3','4','5','6'))console.log(arrObj.unshift({a:1},{b:'2'}))console.log(arrArr.unshift([1,2],['1','2']))console.log(arrNum,arrStr,arrObj,arrArr)

输出:

8. Array.slice()

Array.slice() 方法可从已有的数组中返回选定的元素。

用法:

arrayObject.slice(start,end)

参数解释:

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

  let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let	arrArr = [[1,2],['1','2']]console.log(arrNum.slice(0,1))console.log(arrStr.slice(0,1))console.log(arrObj.slice(0,1))console.log(arrArr.slice(0,1))console.log(arrNum,arrStr,arrObj,arrArr)

输出如下：

注意: 该方法并不会修改原数组，而是返回一个子数组

9. Array.splice()

Array.splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

用法：

arrayObject.splice(index,delLong,item1,.....,itemN)

参数解释:

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

注意： splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

使用:

  let	arrNum = [1,2,3,4,5,6]let	arrStr = ['1','2','3','4','5','6']let	arrObj = [{a:1},{b:'2'}]let	arrArr = [[1,2],['1','2']]console.log(arrNum.splice(-1,1,10000))console.log(arrStr.splice(0,0,'10000'))console.log(arrObj.splice(0,1))console.log(arrArr.splice(0,1))console.log(arrNum,arrStr,arrObj,arrArr)

结果如下:

注意: 该方法会修改原数组，而是返回一个子数组。如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。如果未删除，则返回空数组；

总结: slice()和splice()容易混淆，不过这样记就好:单词长的参数也长，参数长的功能大，可加可减可改变

9. Array.sort()

Array.sort() 方法用于对数组的元素进行排序。

用法：

arrayObject.sort(sortby)

参数解释:

• sortby ： 可选。规定排序顺序。必须是函数。

使用:

let	arrNum = [6,2,1,3,4,5]let	arrStr = ['6','2','1','3','4','5']let	arrObj = [{b:'2'},{a:1}]let	arrArr = [['2','1'],[2,1]]console.log(arrNum.sort())console.log(arrStr.sort())console.log(arrObj.sort())console.log(arrArr.sort())console.log(arrNum,arrStr,arrObj,arrArr)var arr = [1,2,4,3,2,1]console.log(arr.sort(function (m,n) {if (m < n) return -1if (m > n) return 1if (m == n)return 0}))

结果如下：

总结：实际上上面代码写的方法就是sort()默认的方法；方法可以自定义；

最后数组方法的扩展

从字面认知:every是每一个都，some是都有一些就~~
即:

1. every():方法用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false；
2. some():方法用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false；

every()

// every():方法用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false,且程序不会继续往下执行；
array.every(function(item,index,array）{// item:当前元素的值；// index:当前元素的索引；// array:当前元素的数组对象；})

例子:

//es6
let age = [10,20,30,40,50,22,26]// 所有都满足才会返回true,否则返回false;let result = age.every((item,index,array)=>{console.log(item) // 10console.log(index) // 0console.log(array) //[10,20,30,40,50,22,26]return item > 22;})// es5
// let result = age.every(function(item,index,array){
//     return item > 22;
// 	})console.log(result) // false

some()

// some():方法用于检测数组中是否有元素符合指定条件，若有符合的返回true，且程序不会继续往下执行；否则返回false；
array.some(function(item,index,array）{// item:当前元素的值；// index:当前元素的索引；// array:当前元素的数组对象；})

例子:

//es6
let age = [10,20,30,40,50,22,26]// 所有都满足才会返回true,否则返回false;let result = age.some((item,index,array)=>{console.log(item) // 10 20 30console.log(index) // 0 1 2console.log(array) //[10,20,30,40,50,22,26]return item > 22;})// es5
// let result = age.some(function(item,index,array){
//     return item > 22;
// 	})console.log(result) // true

以上就是js基础中 数组常用的方法，特别要注意的是splice和slice容易混淆，其他的话，用过几次就基本没有问题了，此次代码已经上传到github，有兴趣可以去下载实现一波喔@王一诺wLove-c/JavaScript-demo，如果对你有帮助，请点个赞吧；

更多内容请转作者博客@王一诺的博客，多多交流~