JS数组的常用方法

45、数组的常用方法

⑴.push

 * 语法：数组.push(数据)
 * 作用：向数组末尾添加数据
 * 返回值：追加数据后，数组最新的长度(length)
 ```js
     var arr = [1, 2, 3]
     console.log('原始数组:', arr)
     
     var len = arr.push(500)
     console.log(len) //4
     console.log(arr) // [1, 2, 3, 500]
 ```

⑵.pop

 * 语法：数组.pop()
 * 作用：删除数组最后一条数据
 * 返回值：被删除的数据(被删除的数组中的数据)
 ```js
     var arr = [1, 2, 3]
     console.log('原始数组:', arr)
     
     var po = arr.pop()
     console.log(po) //3 被删除的数组的值
     console.log(arr) //[1, 2]
 ```

⑶.unshift

 * 语法：数组.unshift(数据)
 * 作用：向数组开头添加数据
 * 返回值：添加数据后，数组最新的长度(length)
 ```js
     var arr = [1, 2, 3]
     console.log('原始数组:', arr)
     
     var len = arr.unshift(666)
     console.log(len) //4
     console.log(arr) //[666, 1, 2, 3]
 ```

⑷.shift

 * 语法：数组.shift()
 * 作用：删除数组第一条数据
 * 返回值：被删除的数据(被删除的数组中的数据)
 ```js
     var arr = [1, 2, 3]
     console.log('原始数组:', arr)
     
     var st = arr.shift()
     console.log(st) //1 被删除的数组的值
     console.log(arr) //[2, 3]
 ```

⑸.reverse

 * 语法：数组.reverse()
 * 作用：反转数组
 * 返回值：反转后的数组
 ```js
     var arr = [1, 2, 3]
     console.log('原始数组:', arr)
     
     var newArr = arr.reverse()
     console.log('newArr', newArr) //[3, 2, 1]
     console.log('arr', arr) //[3, 2, 1]
 ```

⑹.sort

 * 语法1：数组.sort()
 *      * 作用：会将数据转化为字符串后，一位一位的对比
 * 语法2：数组.sort(function(a, b) {return a - b})
 *      * 作用：会按照数字大小的升序排列
 * 语法3：数组.sort(function(a, b) {return b - a})
 *      * 作用：会按照数字大小的降序排列
 * 返回值：排序后的数组
 ```js
     var arr = [100, 101, 200, 10001, 100002, 1000003, 10]
     console.log('原始数组:', arr)
     
     var newArr = arr.sort()
     console.log('newArr', newArr)//[10, 100, 1000003, 100002, 10001, 101, 200]
     console.log('arr', arr)//[10, 100, 1000003, 100002, 10001, 101, 200]
     
     var newArr = arr.sort(function (a, b) {return a - b})
     console.log('newArr', newArr)//[10, 100, 101, 200, 10001, 100002, 1000003]
     console.log('arr', arr)//[10, 100, 101, 200, 10001, 100002, 1000003]
     
     var arr = [100, 101, 200, 10, '999', '123abc', 'qwe']
     console.log('原始数组:', arr)
     
     var newArr = arr.sort(function (a, b) {return b - a})
     console.log('newArr', newArr)//['999', 200, 101, 100, 10, '123abc', 'qwe']
     console.log('arr', arr) //['999', 200, 101, 100, 10, '123abc', 'qwe']
 ```

⑺.splice

 * 语法1：数组.splice(开始索引(下标)，多少个(数组中的数据))
 *      * 作用：截取数组部分内容
 * 语法2：数组.splice(开始索引,多少个,插入的数据1,插入的数据2,插入的数据3...)
 *      * 作用：截取数组部分内容，并插入新的数据
 * 返回值：截取出来的部分内容 组成的数组
 ```js
     var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        //      0  1  2  3  4  5  6  7  8
     console.log('原始数组：', arr)
     
     //语法1
     var newArr = arr.splice(3, 4) //从下标3开始截取，截取4个
     console.log('newArr', newArr)//[4, 5, 6, 7]
     console.log('arr', arr) //[1, 2, 3, 8, 9]
     
     // 语法2
     var newArr = arr.splice(3, 4, '我是新插入进来的数据1', '我是新插入进来的数据2') 
     //从下标3开始截取，截取4个，在截取的数据之后插入新的数据
     console.log('newArr', newArr)//[4, 5, 6, 7]
     console.log('arr', arr) //[1, 2, 3, '我是新插入进来的数据1', 8, 9]
 ```

* 数组的方法能够改变原数组的就只有上边说的7个

⑻.slice

 * 语法：数组.slice(开始索引(下标), 结束索引(下标))
 * 参数：
 *     + 包前不包后：包含开始索引位置的数据，不包含结束索引位置的数据
 *                 (包含前边下标截取的数据，不包含后边下标截取的数据)
 *     + 不写开始索引，默认是0;不写结束索引，默认是数组的length (数组下标个数的和)
 *     + 参数支持写负数，表示倒数第几个，其实就是length + 负数
 * 作用：截取数组部份内容
 * 返回值：截取出来的部分内容组成的新数组
 ```js
     var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        //      0  1  2  3  4  5  6  7  8
     console.log('原始数组：', arr)
     
     var newArr = arr.slice(3, 4) //从下标3开始截取，截取到下标4
     console.log('newArr', newArr)//[4]
     console.log('arr', arr) //[1, 2, 3, 4, 5, 6, 7, 8, 9]
     
     var newArr = arr.slice(5) 
     //不写结束索引，相当于写了数组.length, 所以这里相当于写了slice(5, arr.length)
     console.log('newArr', newArr)//[6, 7, 8, 9]
     console.log('arr', arr) //[1, 2, 3, 4, 5, 6, 7, 8, 9]
     
     var newArr = arr.slice() 
     //此时开始索引和结束索引都没写，开始索引相当于写了0，结束索引相当于写了数组.length, 所以arr.slice()相当于写了arr.slice(0, 9)
     console.log('newArr', newArr)//[1, 2, 3, 4, 5, 6, 7, 8, 9]
     console.log('arr', arr) //[1, 2, 3, 4, 5, 6, 7, 8, 9]
     
     var newArr = arr.slice(3, -2) 
     // 写负数的时候，就相当于写了length + 负数 ----> 相当于写了9 - 2 = 7
     console.log('newArr', newArr)//[4, 5, 6, 7]
     console.log('arr', arr) //[1, 2, 3, 4, 5, 6, 7, 8, 9]
 ```

* *面试题:数组中有两个方法，splice 与slice,你能描述一下他们两个的区别吗?

 * 1.参数含义不同，然后介绍一下 参数哪里不同
 *             参数不同: 数组.splice(开始索引(下标)，多少个(数组中的数据))
 *                      数组.slice(开始索引(下标), 结束索引(下标))
 * 2.splice 会改变原数组，而slice不会

⑼.concat

 * 语法：原始数组.concat(数组1,数组2..., 数据1, 数据2, 数据3...)
 * 作用：进行数据拼接，把数组...数据之类的小括号里的内容，拼接在原始数组里
 * 返回值：拼接好的数组
 ```js
     var arr= [1, 2, 3]
     console.log('原始数组：', arr)
     
     var newArr = arr.concat([4, 5, 6], [20, 30], ['a', 'b', 'c'], 'qwer')
     console.log('newArr',newArr)// [1, 2, 3, 4, 5, 6, 20, 30, 'a', 'b', 'c', 'qwer']
     console.log('arr', arr)
 ```

⑽.join

 * 语法：数组.join('连接符')
 * 作用：使用"连接符",把数组内的每一个数据连接成一个字符串(不写连接符，默认使用的是逗号)
 * 返回值：连接好的字符串
 ```js
     var arr= [1, 2, 3]
     console.log('原始数组：', arr)
     
     var newArr = arr.join()//不传递连接符，默认使用的是逗号连接
     console.log(newArr) //1,2,3
     
     var newArr = arr.join('!')//不传递连接符，默认使用的是逗号连接
     console.log(newArr)//1!2!3
 ```

⑾.indexOf

 * 语法1：数组.indexOf(要检查的数据)
 *     * 作用：从前到后(从左到右)检查该数据第一次在该数组内出现的索引(下标)
 * 语法2：数组.indexOf(要检查的数据,开始索引)
 *     * 作用：在开始索引的位置按照从左到右的顺序,检查该数据第一次在该数组内出现的索引
 * 返回值：找到数据的情况下，会将数据第一次出现的下标(索引)返回
 *        没找到的情况下，会直接返回一个 -1
 * 
 * 备注：开始索引不写的时候 默认为0
 ```js
     var arr = [1, 1, 2, 2, 3, 3, 0, 4, 0]
     //         0  1  2  3  4  5  6  7  8
     
     var num = arr.indexOf(100) 
     //此时要检查的数据是数字100, 但是数组中并没有出现过数字100 所以返回值应该是-1
     console.log(num) //-1
     
     var num = arr.indexOf(0) 
     //此时要检查的数据是数字0,数字0按照从左到右的顺序,第一次出现的下标为6,所以返回值应该是 6
     console.log(num) //6
     
     var num = arr.indexOf(1) 
     //此时要检查的数据是数字1,数字0按照从左到右的顺序,第一次出现的下标为0,所以返回值应该是 0
     console.log(num) //0
     
     var num = arr.indexOf(1, 3) 
     //此时要检查的数据是数字1，但是是从下标3的位置开始按照从左往右的顺序查找
     console.log(num) //-1
 ```

⑿.lastIndexOf

 * 语法：数组.lastIndexOf(要检查的数据)
 *     * 作用：从后向前(从右向左)检查该数据第一次在该数组内出现的索引(下标)
 * 语法2：数组.lastIndexOf(要检查的数据,开始索引)
 *     * 作用：在开始索引的位置按照从右到左的顺序,检查该数据第一次在该数组内出现的索引
 * 返回值：找到数据的情况下，返回第一次出现的下标(索引)
 *         没找到的情况下，会直接返回一个 -1
 ```js
     var arr = [1, 1, 2, 2, 3, 3, 0, 4, 0]
     //         0  1  2  3  4  5  6  7  8
     
     var num = arr.lastIndexOf(3) 
     //此时按照从右向左的顺序查找，发现第一次出现的位置是下标为5的位置 所以num为5
     console.log(num) //5
     
     var num = arr.lastIndexOf(3, 2) 
     //此时在下标2的位置按照从右向左的顺序查找，但是 此时在数组中后续的位置并没有出现数字3，所以应该返回-1
     console.log(num) //-1
 ```