084学习js-数组

超、凢脫俗 2022-09-09 12:50 3阅读 0赞

参考教程:[【尚硅谷】JavaScript基础&实战丨JS入门到精通全套完整版  
][JavaScript_JS_]  
参考文章:Han\_python的博客的[JavaScript][]专栏9.10

### 文章目录 ###

*   *   *  使用构造函数Array()来创建数组
         *   *  构造函数也可以直接传入数组元素
         *  Array类的方法
         *   *  分类一下:
             *  \`forEach()\`方法
             *  \`slice(),splice()\`函数
             *  \`sort()\`函数
         *  字符串

### 使用构造函数Array()来创建数组 ###

使用`数组[索引] = 值`来为对象添加元素。使用`数组[索引]`来访问对象。  
数组中的元素可以是**任何数据类型**。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 构造函数也可以直接传入数组元素 ####

arr2 = new Array(1, 2, 3);
    console.log("arr2 : " + arr2);
    console.log(arr2.length)        // 3
    
    arr3 = new Array(3);
    console.log("arr3 : " + arr3);
    console.log(arr3.length)        // 3

![在这里插入图片描述][71b9bba2ada148298bc5759c8dfbc66a.png]  
可以看到

> 创建`arr2`中，传入多个元素，它们都正常躺进了数组中。  
> 创建`arr3`时，只传入了一个整数`3`，构造函数会创建一个长度为3的**空数组**。

探索: 如果传入单个元素时,该元素不是数字,是不是就可以创建一个元素的数组了?

var obj = new Object(3)
    arr4 = new Array(obj);
    console.log("arr4 : " + arr4);  // arr4 : 3
    console.log(arr4.length)    	// 1
    console.log(arr4[0])        	// 3

是的,可以!

### Array类的方法 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_18_color_FFFFFF_t_70_g_se_x_16]

#### 分类一下: ####

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>方法介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>头尾操作</td> 
   <td>pop(),删除并返回数组的最后一个元素 <br>push(),向数组的末尾添加一个或更多元素，并返回新的长度。 <br>shift(),删除并返回数组的第一个元素<br> unshift(),向数组的开头添加一个或更多元素，并返回新的长度。</td> 
  </tr> 
  <tr> 
   <td>部分操作</td> 
   <td>slice()从某个已有的数组返回选定的元素 <br>splice()删除元素，并向数组添加新元素。</td> 
  </tr> 
  <tr> 
   <td>整体操作</td> 
   <td>reverse()颠倒数组中元素的顺序。 <br>sort()对数组的元素进行排序 <br>join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。</td> 
  </tr> 
  <tr> 
   <td>数组间操作</td> 
   <td>concat()连接两个或更多的数组，并返回结果。</td> 
  </tr> 
  <tr> 
   <td>其他</td> 
   <td>toString() 把数组转换为字符串，并返回结果。 <br>toSource() 返回该对象的源代码。 <br>valueOf() 返回数组对象的原始值</td> 
  </tr> 
 </tbody> 
</table>

此外,使用`属性prototype`,可以向对象添加属性和方法。

#### `forEach()`方法 ####

该方法需要一个函数作为参数，函数有一个形参，会依次将遍历到的元素作为实参的形式传递进来。IE8及以下的浏览器不兼容。

var arr = ["赵", "周", "李", "孙", "钱"];
    	arr.forEach(function (a) {
        
    	console.log(" 姓氏 = " + a);
    })

![在这里插入图片描述][f52d14ffc5104c7390fad41826e1a0f2.png]

#### `slice(),splice()`函数 ####

参考W3school:[JavaScript slice() 方法][JavaScript slice_]

*  取一段  
    `arrayObject.slice(start,end)`  
    读取数组的索引`start到end(不含)`元素并返回。不改变原数组。

> start或end，如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。  
>   
>   
> end 如果没有指定，那么切分的数组包含从 start 到数组结束的所有元素。

使用： `var result = arr.slice(开始索引，结束索引);`

*  删一段，或者添一段，或者先删后添  
    函数原型： `arrayObject.splice(index,howmany,item1,.....,itemX)`

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

var arr = new Array(6)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    arr[3] = "James"
    arr[4] = "Adrew"
    arr[5] = "Martin"
    
    arr.splice(2,0,"William") 
    // 若只写这句,效果是添加: George,John,William,Thomas,James,Adrew,Martin
    
    arr.splice(2,1)
    // 若只写这句,效果是删除: George,John,James,Adrew,Martin
    
    arr.splice(2,1,"William")
    // 若只写这句,效果是替换: George,John,William,James,Adrew,Martin
    
    arr.splice(2,3,"William")
    // 若只写这句,效果是替换: George,John,William,Martin

#### `sort()`函数 ####

sort()对于纯数组进行排序时，也是按照Unicode编码来排序。  
我们可以通过传入一个回调函数来指定排序规则：

> 回调函数需要定义两个形参  
> 浏览器会分别使用数组中的元素作为实参去调用回调函数  
> 浏览器会根据回调函数的返回值来决定元素的顺序  
> 如果返回值大于0，则元素会交换位置，否则不变。

arr = [5,4,2,1,6,6,2,3];
    arr.sort(function(a,b){
        
    	return a-b;		// 升序排列(非递减序列,且相等的值未改变先后次序)
    });
    
    console.log(arr);

如果需要降序排列，则返回`b-a`

### 字符串 ###

[JavaScript_JS_]: https://www.bilibili.com/video/BV1YW411T7GX
[JavaScript]: https://blog.csdn.net/han_python/category_10692377.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/2751d05892b0462d8f90d140824da57e.png
[71b9bba2ada148298bc5759c8dfbc66a.png]: /images/20220829/d9de1ca4fca24c0caba933769d254bb4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/9331a3bb74d646adad6ea1156fb6f27d.png
[f52d14ffc5104c7390fad41826e1a0f2.png]: /images/20220829/c59264c47dd84b1a82aa997181edacfd.png
[JavaScript slice_]: https://www.w3school.com.cn/jsref/jsref_slice_array.asp