JS编程语法之数组

一、常用操作:

1、unshift：将参数添加到原数组开头，会返回数组的长度 ，改变原数组

（注:在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的返回值不可靠，需要用返回值时可用splice代替本方法来使用。）

var a = [1,2,3,4,5];   
var b = a.unshift(-2,-1);
// a输出
(7) [-2, -1, 1, 2, 3, 4, 5]
// b输出
7

2、shift:删除原数组第一项，并返回删除元素的值（如果数组为空则返回undefined），改变原数组

var a = [1,2,3,4,5];   
var b = a.shift(); 
// a输出
(4) [2, 3, 4, 5]
// b输出: 如果数组a为空执行，返回undefined
1

3、pop：删除原数组最后一项，并返回删除元素的值（如果数组为空则返回undefined），改变原数组

var a = [1,2,3,4,5];   
var b = a.pop();
// a输出
(4) [1, 2, 3, 4]
// b输出: 如果数组a为空执行，返回undefined
5

4、push:将参数添加到原数组末尾，并返回数组的长度，改变原数组

var a = [1,2,3,4,5];   
var b = a.push(6,7);
// a输出
(7) [1, 2, 3, 4, 5, 6, 7]
// b输出
7

5、concat:返回一个新数组，是将参数添加到原数组中构成的，原数组不变

var a = [1,2,3,4,5];   
var b = a.concat(6,7);
// a输出
(5) [1, 2, 3, 4, 5]
// b输出
(7) [1, 2, 3, 4, 5, 6, 7]

6、splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项，并从该位置起插入val1,val2,... ，并返回被删除的元素，改变原数组

var a = [1,2,3,4,5];   
var b = a.splice(2,2,7,8,9); // 从index==2开始，删除2项（即3，4），并在该位置插入7、8、9元素
// a输出
(6) [1, 2, 7, 8, 9, 5]
// b输出
(2) [3, 4]

7、reverse:将数组反序 ，并返回新的数组，同时改变原数组

var a = [1,2,3,4,5];   
var b = a.reverse();
// a 输出
(5) [5, 4, 3, 2, 1]
// b 输出
(5) [5, 4, 3, 2, 1]

8、sort(sortby):按指定的参数对数组进行排序，并返回新的数组，同时改变原数组

1>默认排序顺序：是根据字符串Unicode码点。

// 默认排序
var a = [10,5,40,25,1000,1];   
var b = a.sort()
// a输出
(6) [1, 10, 1000, 25, 40, 5]
// b输出
(6) [1, 10, 1000, 25, 40, 5]

2>按照指定的标准进行排序，需要提供比较函数，比较函数需要具备两个参数 a 和 b

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

// 按照数值大小进行排序，实现排序函数
function sortNumber(a,b)
{
return a - b // 升序排列
 // return b - a // 降序排列
}

var a = [10,5,40,25,1000,1];   
var b = a.sort(sortNumber)
// a输出
(6) [1, 5, 10, 25, 40, 1000]
// b输出
(6) [1, 5, 10, 25, 40, 1000]

9、slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 ，不改变原数组

start值为负数时，则从数组的尾部开始截取

end值为可选的,没有规定时，则默认选取从start到数组尾部的所有元素

var a = [1,2,3,4,5];   
var b = a.slice(2,5);
// a输出
(5) [1, 2, 3, 4, 5]
// b输出
(3) [3, 4, 5]

10、join(separator):数组转化成字符串，返回新的字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符 

var a = [1,2,3,4,5];   
var b = a.join("|");
// a输出
(5) [1, 2, 3, 4, 5]
// b输出
"1|2|3|4|5"

var a = [1,2,3,4,5];   
var b = a.join(); // 不插入分隔符，默认为逗号分隔开
// a输出
(5) [1, 2, 3, 4, 5]
// b输出
"1,2,3,4,5"

11、split(separator):字符串转化成数组，返回新的数组，按separator为分隔符，切割成若干个字符串

var a = "abc,abcd,aaa";
var b = a.split(",");
// a输出
"abc,abcd,aaa"
// b输出
(3) ["abc", "abcd", "aaa"]

二、数组循环

<一>、数组循环遍历的方式以及性能分析对比

1、for循环（性能最高）

for循环的计数器，很合适使用let命令。

1>常用版for循环

 var array = ["George", "John", "Thomas", "James", "Adrew", "Martin"];
        for (i = 0; i < array.length; i++) {
            console.log(array[i], i);
        }

2>优化版for循环

说明：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

 for (i = 0, len = array.length; i < len; i++) {
            console.log(array[i], i);
        }

2、使用for...in...

说明： 效率比较低（不建议使用）

for (var index in array) {
            console.log(array[index], index)
        }

3、使用for...of...

说明： 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环

 for (var value of array) {
            console.log(value, array.indexOf(value))
        }

 4、使用forEach

说明：使用频率较高，实际上性能比普通for循环弱

 array.forEach(function (item, index) {
            console.log(item, index)
        })

 5、使用map

使用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

array.map(function (item, index) {
            console.log(item, index)
        })

// 以上遍历均可以输出
George 0
John 1
Thomas 2
James 3
Adrew 4
Martin 5

<二>、判断语句，跳出for循环

1、使用for...break..可以跳出整个for循环，这个循环不再执行

for(var i=1;i<=7;i++) { 
    if(i==4) { 
        break; 
    } 
    console.log(i)
}
VM19912:5 1
VM19912:5 2
VM19912:5 3

使用循环标签跳出多层循环

其中lable2：，lable1：两个循环标签，分别表示外部循环和内部循环

   testfunction = () => {
        lable2:
        for (int i = 0; i < 3; i++) {
            lable1:
            for (int j = 0; j < 3; j++) {
                if (j == 1) {
                    break lable2; // 跳出外部循环
                }
            }
        }
    }

2、使用for...continue... 当i==4时，跳出本次for循环，下次继续执行

for(var i=1;i<=7;i++) { 
    if(i==4) { 
        continue; 
    } 
    console.log(i)
}
VM20052:5 1
VM20052:5 2
VM20052:5 3
VM20052:5 5
VM20052:5 6

3、使用forEach return false 不能跳出循环（map同）

[1,2,3,4,5,6].forEach((i) => {
    console.log(i)
    if ( i == 4) {
        return false
    }
})
VM19933:2 1
VM19933:2 2
VM19933:2 3
VM19933:2 4
VM19933:2 5
VM19933:2 6

三、ES6:数组的扩展

1、使用扩展运算符（...）将某些数据结构转为数组

var a = 'love'
var b = [...a]
// a输出
(4) ["l", "o", "v", "e"]

2、Array.of()， 将一组值转化成数组

Array.of(3, 11, 8)
// 输出
(3) [3, 11, 8]

3、find()

数组实例的find方法，用于找出第一个符合条件的数组成员并返回

// 空的数组输出时
[].find((n) => n < 0)
// 输出
undefined


var a = [1, 4, -5, 10]
var b = a.find((value) => value > 0)
// b输出
1

// find方法的回调函数带的三个参数：当前的值、当前的位置和原数组。
var c = a.find(function(value, index, array){
            console.log(value, index, array);
            return value < 0;
        })
// 输出
1  0 (4) [1, 4, -5, 10]
4  1 (4) [1, 4, -5, 10]
-5 2 (4) [1, 4, -5, 10]

// c输出
-5

4、findIndex()

返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

var a = [1, 4, -5, 10]
var b = a.findIndex((value) => value < 0)
// b输出
2

indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

[NaN].indexOf(NaN)
-1
[NaN].findIndex(y => Object.is(NaN, y))
0

5、fill(value, startIndex, endIndex)

参数：要填充的值，起始位置（可选）、结束位置（可选） 会改变原数组的值

var a = [1, 4, -5, 10]
var b = a.fill(7) // 不指定起始位置和结束位置时，会全部覆盖
// b输出
(4) [7, 7, 7, 7]
// a输出
(4) [7, 7, 7, 7]

a.fill(7,1,2) // 从 1 号位开始，向原数组填充 7，到 2 号位之前结束
// 输出
(4) [1, 7, -5, 10]

6、includes(searchElement, formValue?)

返回一个布尔值，判断某个数组是否包含某个值

var a = [1, 4, -5, 10]
a.includes(10)
// 输出
true

7、flat()

返回一个新数组，对原数据没有影响，将嵌套的数组变成一维数组

对于多层嵌套的，用Infinity关键字作为参数

var a = [1, 2, [3, 4]]
var b = a.flat()
// b输出
(4) [1, 2, 3, 4]
// a输出
(3) [1, 2, Array(2)]


[1, [2, [3]]].flat(Infinity)
// 输出
(3) [1, 2, 3]

8、flatMap()

对原数组的每个成员执行一个函数，然后对返回值执行flat()参数。会返回一个新数组，不改变原数组

var a = [1, 2, 3, 4]
var b = a.flatMap((x) => x*2)
// b输出
(4) [2, 4, 6, 8]
// a输出
(4) [1, 2, 3, 4]