随笔记录--Array类型

前言：除了Object类型之外，Array类型恐怕是ECMAScript中最常用的类型了。而且，ECMAScript中数组与其他多数语言中的数组有很大差别，ECMAScript数组中的每一项可以保存任何类型的数据。同时，ECMAScript数组的大小也可以是动态调整的，即可以随着数据的自动增长以容纳新的数据。

　　1. 创建数组的方式有两种，第一种是用构造函数 (可以省略new关键字)

new Array('red','blue','green');

Array('red','blue','green');

　　备注：当用这种方式创建数组时，如果Array(), 里面传的是一个数字，number，则表示是该数组的长度；如果是一个字符串，则表示该数组只有一个数据，例如

let arr1 = new Array(5);
console.log(arr1.length); //5
let arr2 = new Array('red');
console.log(arr2); //['red']

　　另一种方式创建数组的方式：

let arr = ['red','blue','green'];

　　2. 检测数组

　　自从ECMAScript3做出规定以后，就出现了确定某个对象是不是数组的经典问题。对于一个网页，或者一个全局作用域而言，使用instanceof操作符能得到满意的结果。

let arr1 = new Array(5);
if(arr1 instanceof Array){
    return 1;
}else {
    return 0;
}

　　ECMAScript5 新增了Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组，不管是不是全局作用域。

let arr1 = new Array(5);
Array.isArray(arr1); //true

　　2.1 数组转换方法

　　所有对象都具有toLocalString(), toString()和 valueOf()方法. 其中, 调用数组的toString()方法会返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串. 而调用valueOf()会返回数组本身.

let colors = ['red','blue','yellow'];
alert(colors); //"red", "blue", "yellow"
console.log(colors.toString()); // "red", "blue", "yellow"
console.log(colors.valueOf());  // ["red", "blue", "yellow"]
console.log(colors.toString() instanceof Array); // false
console.log(colors.valueOf() instanceof Array);  // true

　　备注: 在把数组colors传给alert方法时, colors会自动先执行 colors.toString(), 因此弹窗是一个字符串.

　　3. 数组中常用方法总结

　　3.1 push()和pop()；

　　push()方法可以接收任意数量的参数，把他们逐个添加到数组末尾，并且返回修改后数组的长度。而pop()方法则从数组末尾移除最后一项，减少数组的length值。

　　3.2 shift()和unshift();

　　shift()能够移除数组中第一个项并且返回该数组，同时将数组长度减1。unshift()与shift()相反，它能够在数组前端添加任意个项并返回新数组的长度。

　　3.3 重排序方法

　　reverse() 和sort() 可以直接用来重排序，reverse() 是将数组反转，得到一个新数组。sort()

---恢复内容结束---

　　1. 创建数组的方式有两种，第一种是用构造函数 (可以省略new关键字)

new Array('red','blue','green');

Array('red','blue','green');

let arr1 = new Array(5);
console.log(arr1.length); //5
let arr2 = new Array('red');
console.log(arr2); //['red']

　　另一种方式创建数组的方式：

let arr = ['red','blue','green'];

　　2. 检测数组

let arr1 = new Array(5);
if(arr1 instanceof Array){
    return 1;
}else {
    return 0;
}

　　ECMAScript5 新增了Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组，不管是不是全局作用域。

let arr1 = new Array(5);
Array.isArray(arr1); //true

　　3. 数组中常用方法总结

　　3.1 push()和pop()；

　　3.2 shift()和unshift();

　　shift()能够移除数组中第一个项并且返回该数组，同时将数组长度减1。unshift()与shift()相反，它能够在数组前端添加任意个项并返回新数组的长度。

　　3.3 重排序方法

　　reverse() 和sort() 可以直接用来重排序，reverse() 是将数组反转，得到一个新数组。sort(), 在默认情况下, sort()方法默认排序顺序是根据字符串Unicode码点.

　　码点具体参考: Unicode与JavaScript详解

　 sort具体参考: MDN-Array.prototype.sort()

　　例如: 默认排序示例,

let fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); 
// ['apples', 'bananas', 'cherries']

let scores = [1, 10, 21, 2]; 
scores.sort(); 
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中"10"在"2"之前

let things = ['word', 'Word', '1 Word', '2 Words'];
things.sort(); 
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.

　　语法: arr.sort( compareFunction )

　　如果没有指明 compareFunction ，那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 "Banana" 会被排列到 "cherry" 之前。当数字按由小到大排序时，9 出现在 80 之前，但因为（没有指明 compareFunction），比较的数字会先被转换为字符串，所以在Unicode顺序上 "80" 要比 "9" 要靠前。

　　如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

　综上所述,比较函数如下

function compareFunction(a,b) {
    if(a < b){
        return -1;
    }
    if(a == b){
        return 0;
    }
    if(a > b){
        return 1;
    }
}

　　因此如果要比较的是数字,这可以简写成

 function compareFunction(a,b) {
    return a-b;
}

　　举例说明

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

也可以写成：
var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers); // [1,2,3,4,5]

　　举例说明sort排序规则:

　下述示例创建了四个数组，并展示原数组。之后对数组进行排序。对比了数字数组分别指定与不指定比较函数的结果。

let stringArray = ["Blue", "Humpback", "Beluga"];
let numericStringArray = ["80", "9", "700"];
let numberArray = [40, 1, 5, 200];
let mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b)
{
    return a - b;
}

console.log('stringArray:' + stringArray.join()); // stringArray:Blue,Humpback,Beluga
console.log('Sorted:' + stringArray.sort());  // Sorted:Beluga,Blue,Humpback

console.log('numberArray:' + numberArray.join()); // numberArray:40,1,5,200
console.log('Sorted without a compare function:'+ numberArray.sort()); // Sorted without a compare function:1,200,40,5
console.log('Sorted with compareNumbers:'+ numberArray.sort(compareNumbers)); // Sorted with compareNumbers:1,5,40,200

console.log('numericStringArray:'+ numericStringArray.join()); // numericStringArray:80,9,700
console.log('Sorted without a compare function:'+ numericStringArray.sort()); // Sorted without a compare function:700,80,9
console.log('Sorted with compareNumbers:'+ numericStringArray.sort(compareNumbers)); //Sorted with compareNumbers:9,80,700

console.log('mixedNumericArray:'+ mixedNumericArray.join()); // mixedNumericArray:80,9,700,40,1,5,200
console.log('Sorted without a compare function:'+ mixedNumericArray.sort()); // Sorted without a compare function:1,200,40,5,700,80,9
console.log('Sorted with compareNumbers:'+ mixedNumericArray.sort(compareNumbers)); //Sorted with compareNumbers:1,5,9,40,80,200,700

　　当排序非 ASCII 字符的字符串（如包含类似 e, é, è, a, ä 等字符的字符串）。一些非英语语言的字符串需要使用 String.localeCompare。这个函数可以将函数排序到正确的顺序

let items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort(function (a, b) {
  return a.localeCompare(b);
});

// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']

　 4 数组操作方法: slice() 和 splice()

　　4.1 slice(start,end),基于当前数组中的一个或多个项创建一个新数组, 该方法不会修改原数组.

　　如果slice() 方法的参数中有一个负数, 则用数组长度加上该数来确定相应的位置. 例如在一个包含6个元素的数组中, 调用slice(-2,-1) 与调用slice(4,5)相同.

　　如果结束位置小于开始位置,则数组返回空.

　　举例说明:　　

let arr = [1,2,3,4,5,6];
console.log(arr.slice()); // [1,2,3,4,5,6]
console.log(arr.slice(2)); //[3, 4, 5, 6]
console.log(arr.slice(2, 4)); // [3, 4] 相当于数学 [2,4) 包头不包尾
console.log(arr.slice(-2)); // [5,6]
console.log(arr.slice(-2, -1)); // [5]
console.log(arr.slice(-2, -4)); // []

　　4.2 splice() 的主要用途向数组中部插入项.

　　⭕️ 删除: 可以删除任意数量的项,只需要指定2个参数: 要删除的第一项的位置和要删除的项数. 例如: splice(0,2)会删除数组中的前两项.

　　⭕️ 插入: 可以向指定位置插入任意数量的项,只需提供3个参数: 起始位置,0(要删除的项数),要插入的项. 如果要插入多个项,可以再传第四, 第五项, 以至多个项. 例如: splice(2,0,"red","blue") 会从当前数组的位置2开始插入字符串“red”和“blue”.

　　⭕️ 替换: 可以向指定位置插入任意数量的项, 且同时删除任意数量的项, 只需提供3个参数: 起始位置,要删除的项数,要插入的项.

let color = ['red','blue','orange'];
let remove1 = color.splice(0,1);
console.log(remove1); // ["red"]
console.log(color); //["blue", "orange"]

let remove2 = color.splice(1,0,"green","black");
console.log(remove2); // []
console.log(color); // ["blue", "green", "black", "orange"]

let remove3 = color.splice(1,2,"pink","white","purle");
console.log(remove3); // []
console.log(color); //["blue", "pink", "white", "purle", "orange"]

　　5 迭代方法

　　⭕️ every() 对数组对每一项进行给定函数, 如果该函数对每一项返回true, 则返回true

　　⭕️ filter() 对数组对每一项进行给定函数, 返回该函数会返回true所组成对数组

　　⭕️ forEach() 对数组对每一项进行给定函数, 这个方法没有返回值

　　⭕️ map() 对数组对每一项进行给定函数, 返回每次函数调用对结果组成对数组

　　⭕️ some() 对数组对每一项进行给定函数, 如果该函数对任一项返回true, 则返回true

　　6 归并方法 reduce(prev,cur,index,array) 和 reduceRight(prev,cur,index,array)

　　这两个方法都会迭代数组都所有项, 然后构建一个最终都返回值. 其中, reduce()方法从数组都第一项开始, 挨个遍历到最后. 而reduceRight() 则从数组到最后一项开始, 向前遍历到第一项.　　

　　备注: 第一次迭代发生在数组到第二项上, 因此第一个参数是数组的第一项, 第二个参数是数组的第二项.

let arr = [12,32,4,3434,34,5];
let sum = arr.reduce(function (prev,curv,index,array) {
    return prev+curv;
});
console.log(sum); // 3521