JS数组

刺骨的言语ヽ痛彻心扉 2021-09-07 06:03 543阅读 0赞

### 目录 ###

*  一、什么是数组
 *  二、数组的书写
 *   *  1.通过构造函数创建
     *  2.字面量创建
 *  三、数组的操作
 *   *  1.数组的添加
     *  2.数组的删除
     *  3.数组的判断
     *  4.数字和字符串之间的操作
     *  5.数组的截取
     *  6.数组的删除splice和替代
     *  7.数组的拼接
     *  8.翻转数组
     *  9.数组的排序
     *  10.查找数组中指定元素的索引
     *  11.判断元素是否在数组内
 *  四、数组的遍历/迭代
 *   *  1.every
     *  2.filter()
     *  3.forEach()
     *  4.map()
     *  5.some()
     *  5、迭代的使用情况
 *  五、伪数组
 *   *  1.什么是伪数组
     *  2.arguments
     *  3..伪数组的操作

# 一、什么是数组 #

数组就是保存多个单独基础数据和引用类型的集合，可以混合存放不同的数据类型。

# 二、数组的书写 #

## 1.通过构造函数创建 ##

在js中一班函数名第一个字母大写的就是构造函数

var arr = new Arrry();

参数：当放一个数字时，表示数组的长度，当放多个数值时表示数组的元素

var a = new Array(3);
    var b = new Array(3,'元素');
    console.log(a) ;//打印的是一个空数组，但长度为3，值是undefined
    console.log(b); //打印的是一个含有两个元素的数组，第一个是3，第二个是'元素'

## 2.字面量创建 ##

var a = [];   //[]就等同于new Arrry()
    var b = [3,'元素'];//等同于new Array(3,'元素');

# 三、数组的操作 #

在进行数组的操作时，我们需要注意的是  
1.方法的作用  
2.是否参数，几个参数，参数的作用  
3.是否会对原数组产生影响  
4.是否有返回值，返回值是什么

## 1.数组的添加 ##

**1.按索引赋值**  
数组的长度是数组元素的个数，而数组元素的位置，是从左往右，从0开始算起，a\[0\]表示数组的第一个元素，所以赋值的时候需要注意从0 开始。

var  a= []
    a[3] = 'hello'
    a[1] = 'world'
    console.log(a)

上述可以知道赋值并不一定要以0开始赋值，如果是一个空数组，在a\[3\]位置赋值，会自动补全前面的3个元素，但是值为undefined。但长度还是4。

**2.push方法**

var  a= [1,2,3]
        var b = a.push(4)
        
        console.log(a)  //[1,2,3,4]
        console.log(b)  //4

push方法  
1.向原数组组最后添加元素  
2.参数可以放一个或多个，逗号隔开，表示放进去的是什么  
3.会对原数组产生影响  
4.有返回值，是新数组的长度

**3.unshift方法**

var  a= [1,2,3]
        var b = a.unshift(4)
        
        console.log(a)  //[4，1,2,3]
        console.log(b)  //4

unshift方法  
1.向原数组最前面添加元素  
2.参数可以放一个或多个，逗号隔开，表示放进去的是什么  
3.会对原数组产生影响  
4.有返回值，是新数组的长度

## 2.数组的删除 ##

**1.pop()删除数组最后一个元素**

var  a= [1,2,3]
        var b = a.pop()
        
        console.log(a)  //[1,2]
        console.log(b)  //3

pop方法  
1.删除原数组最后一个元素  
2.无参数，直接使用  
3.会对原数组产生影响  
4.有返回值，是删除的那一个元素

**2.shift()删除数组第一个元素**

var  a= [1,2,3]
        var b = a.shift()
        
        console.log(a)  //[2,3]
        console.log(b)  //1

shift方法  
1.删除原数组第一个元素  
2.无参数，直接使用  
3.会对原数组产生影响  
4.有返回值，是删除的那一个元素

## 3.数组的判断 ##

判断是不是数组用instanceof

var  a= [1,2,3]
         var b = a instanceof Array
         console.log(a)  // [1,2,3]
         console.log(b)  // true

instanceof 关键字 检测Array.prototype是否存在于参数a的原型链上，即判断a是否是数组。

## 4.数字和字符串之间的操作 ##

**1.数组转换字符串**  
①将每一项转换字符串形式，还是数组形式

②将数组变成一串字符串

var  a = [1,2,3,[{ 1:2},[1,2]]]
          var  b = a.toString()
          console.log(a)//(4) [1, 2, 3, Array(2)]
          console.log(b)//1,2,3,[object Object],1,2

toString:  
1.将数组变成一串字符串打印出来，里面的嵌套数组也会拍扁打印出来，对象会变成\[object Object\]对象的toString  
2.无参数  
3.不会改变原数组  
4.有返回值，是变成字符串后的数组

③将数组劈开，以指定字符连接

var a = [1,2,3]
             var b = a.join('-')
             console.log(a)//[1, 2, 3]
             console.log(b)// 1-2-3

join：  
1.将数组以指定字符劈开。  
2.有参数，参数就是连接各个元素的字符。  
3.不会改变原数组  
4.有返回值，返回值就是以以参数连接的一串字符串。

## 5.数组的截取 ##

var a = [1,2,3,4,5]
             var b = a.slice(0,2)
             var c = a.slice(3)
             var d = a.slice(-1)
             var e = a.slice(-2)
             console.log(a) //[1,2,3]
             console.log(b) //[1,2]
             console.log(c) //[4, 5]
             console.log(d) //[5]
             console.log(e) //[4, 5]

slice:  
1.截取数组中的元素。  
2.不会改变原数组  
3.当参数为一个值时，表示从哪儿开始截取，一直到最后，当参数为两个值时，第一个值表示从哪儿开始截取，第二个值是截取的结束位置，但是不包括这个位置的值。即包左不包右。  
当参数为复数时，表示从右边开始截取。此时参数为一个值时，表示截取的长度。  
4.有返回值，是截取下来的数组。是一个新数组。不受原来的数组改变影响。

## 6.数组的删除splice和替代 ##

var a = [1,2,3,4,5]
             var b = a.splice(0,3,'11','22','33')
          
             console.log(a) //["11", "22", "33", 4, 5]
             console.log(b) //[1, 2, 3]

var a = [1,2,3,4,5]
           var c = a.splice(0,3,'11','22')
           console.log(a)//["11", "22", 4, 5]
           console.log(c)//[1, 2, 3]

var a = [1,2,3,4,5]
         var d = a.splice(0,3,'11','22','33','44')
          console.log(a)//["11", "22", "33", "44", 4, 5]
          console.log(d)//[1, 2, 3]

splice:  
1.替换数组指定位置的的元素。  
2.会改变原数组。  
3.有参数，第一个是开始替换的位置，第二个是结束的位置。包左不包右，往后的元素是替换选择的元素，一一对应替换，要是少于指定的元素组，指定的位置元素会被删除没有东西替代。要是替换的元素多余指定的元素组，会依次往后添加，后面的元素往后移。  
4.有返回值，返回值被修改的原数组。

## 7.数组的拼接 ##

var a = [1,2,3]
    var b= [4,5,6]
    var d= [4,5,6]
    var c =a.concat(b,d)
    console.log(c) // [1, 2, 3, 4, 5, 6]

1.拼接数组。  
2.不会改原数组  
3.参数可以放多个，会按顺序拼接起来。  
4.有返回值，返回值是拼接好的新数组。

## 8.翻转数组 ##

var a = [1,2,3]
    var b =a.reverse()
    console.log(a)  //[3,2,1]
    console.log(b)  //[3,2,1]

1.翻转数组，  
2.会改变原数组。  
3.无参数  
4.有返回值，是被修改后的原来的数组，

## 9.数组的排序 ##

var a = [8,2,3,5,4,7,6]
    var b =a.sort(function(a,b){ return a-b;})
    console.log(a)  //[2, 3, 4, 5, 6, 7, 8]
    console.log(b)//[2, 3, 4, 5, 6, 7, 8]

1.将数组元素排序  
2.会改变原数组。  
3.无参数：按照数组元素的首字符对应的Unicode编码值从小到大排列数组元素，即有可能字符串数字比实际的小  
有参数:a-b表示从小到大排序,相当于不填.  
b-a表示从大到小排序.  
4.有返回值，是被修改后的原来的数组，

## 10.查找数组中指定元素的索引 ##

var a = [1,2,3,4]
            var b = a.indexOf(1)
            console.log(a) // [1,2,3,4]
            console.log(b) //0

1.查找元素在数组中位置  
2.不会改变原数组。  
3.参数就是要找的指定的元素  
4.有返回值，存在的话返回在数组中的指定位置,不存在的话会返回-1  
5.这个也能判断元素是否在数组内

## 11.判断元素是否在数组内 ##

var arr= [1,1,2,2];
        var a = 0  in  arr;
        var b = '0' in  arr
        console.log(a) //true
        console.log(b) //true

1.in关键字判断元素是否在数组内。  
2.会把元素进行隐式转换，判断相当于==，只判断数据内容，不判断数据类型。

# 四、数组的遍历/迭代 #

在使用数组时,经常用到遍历数组每个元素来执行某种方法,一般都时for循环遍历,js封装好了几种2不同情况下遍历数组的方法,使用时需要注意  
1.方法的作用  
2.是否参数，几个参数，参数的作用  
3.是否会对原数组产生影响  
4.是否有返回值，返回值是什么  
5.注意点

## 1.every ##

var a =  [1,2,3,4]
    var b = a.every(function(val,index,arr){ 
           return val>3
    })
    console.log(a)//[1, 2, 3, 4]
    console.log(b) //false

1.every对数组的每一个元素进行一个判断，并返回这个结果，要是所有的元素判断返回的都是ture，那么every方法就返回true,要是一个返回false，整个every就返回false。用来判断数组是否满足某个条件。  
2.有参数，参数是回调函数，回调函数里还有参数，val表示元素，index表示索引，arr表示这个数组。  
3.不会改变原数组  
4.有返回值，true或者false,true只有在数组元素都满足条件时，才会返回，false是只要有一个不满足就返回false，并且不会继续执行后面的元素判断。  
5.every不会对空数组进行判断。

## 2.filter() ##

var a [1,2,3,4]
    var b = a.filter(function(val,index,arr){ 
           return val>3
    })
    console.log(a)//[1, 2, 3, 4]
    console.log(b) //[4]

1.filter()函数是也是对数组的每个元素进行判断，可以返回满足一个条件的元素数组，不会因为return而终结循环。  
2.有参数，参数是回调函数，回调函数里还有参数，val表示元素，index表示索引，arr表示这个数组。  
3.不会改变原数组  
4.有返回值，是满足条件的元素组成的一个新数组。  
5.filter()不会对空数组进行判断，

## 3.forEach() ##

var a [1,2,3,4]
    var b = a.foreach(function(val,index,arr){ 
            return val*3
    })
    console.log(a)//[1, 2, 3, 4]
    console.log(b) //undefined

1.forEach()函数一般用来遍历数组，进行某种操作，它不能返回表达式，也不能return值，他不会终止迭代，一直会遍历完。  
2.有参数，参数是回调函数，回调函数里还有参数，val表示元素，index表示索引，arr表示这个数组。  
3.不会改变原数组  
4.无返回值  
5.可以使用return来阻止某类元素的遍历。

## 4.map() ##

var a =  [1,2,3,4]
        var b = a.map(function(val,index,arr){ 
            return val*3
        })
        console.log(a)//[1,2,3,4]
        console.log(b)// [3, 6, 9, 12]

1.map()函数一般用来遍历数组，返回每个元素进行操作后的结果，也能拿返回表达式  
2.有参数，参数是回调函数，回调函数里还有参数，val表示元素，index表示索引，arr表示这个数组。  
3.不会改变原数组  
4.有返回值，是一个新数组，是每个元素进行操作后的结果。  
5.map() 不会对空数组进行检测。

## 5.some() ##

var a [1,2,3,4]
    var b = a.some(function(val,index,arr){ 
           return val>3
    })
    console.log(a)//[1, 2, 3, 4]
    console.log(b) //false

1.some对数组的每一个元素进行一个判断，并返回这个结果，要是所有的元素判断返回的都是false，那么some方法就返回false,要是一个返回true，整个some就返回true。用来判断数组是否满足某个条件,只要有一个满足就行。  
2.有参数，参数是回调函数，回调函数里还有参数，val表示元素，index表示索引，arr表示这个数组。  
3.不会改变原数组  
4.有返回值，true或者false,true只要有一个元素满足条件时，就会返回true,并且不会继续执行后面的元素判断。全不满足就会返回false。和every刚好相反  
5.some不会对空数组进行判断。

## 5、迭代的使用情况 ##

查找一个使用some,只要return true就能停止循环，效率高。  
查找多个使用filter  
遍历操作使用map

# 五、伪数组 #

## 1.什么是伪数组 ##

就是假数组，数据类型是对象，但是一定有length属性，值是实参的个数。

var a = { 
         0:1,
         1:2,
         length:2
    }

## 2.arguments ##

一般我们说的伪数组都是函数里的argumearnts,它是用来接受实参的。不管函数有没有形参，它都是存在的。

function  test(a){ 
    
         console.log(arguments)// {0：1，length:1}
          console.log(test.length)//1
          console.log(arguments.callee)//打印的是整个函数
     }
      test(1);

\{0：1，length:1\}就是伪数组，伪数组不能改变长度，但是可以改变元素值。  
arguments.length是实参个数  
test.length是形参个数  
arguments.callee是整个函数

## 3…伪数组的操作 ##

**1.伪数组转换成真数组**

①

var a = { 
            0:1,
            1:2,
            length:2
        }
        var b =[].concat.apply([],a)
     
          console.log(b) // [1, 2]

是利用数组的concat方法,将一个空数组和伪数组拼接起来.  
这样就得到了一个数组

**②Array.from()**

var a = { 
            0:1,
            1:2,a
            length:2
        }
    var newArr=Array.from(a)
     console.log(a)//{0: 1, 1: 2, length: 2}
        console.log(b)//[1, 2]

es6新语法