fifteen

一：Array（数组）

1.1 声明数组的方法

数组字面量声明方法：推荐使用。

new 系统内置 Array 构造函数声明数组：不推荐使用，太麻烦了。

直接使用 Array 构造函数声明数组：不使用，知道有这种方法就可以。

代码范例一：验证上述内容

//三种声明数组的方法
var arr1 = []; //数组字面量声明方法
var arr2 = new Array(); //new 系统内置 Array 构造函数声明数组
var arr3 = Array(); //直接使用 Array 构造函数声明数组

1.2 三种声明数组方法的原型是谁？

通过代码范例二与打印图解的结果，以及从 [constructor]（构造器）中的指向得知为 [constructor: ƒ Array()]，由此可以认为三种声明数组方

法的原型是 [Array.prototype]，为什么能认为呢？通过观察打印 Array.prototype 与 arr1.__proto__ 和Object.getPrototypeOf(arr1) 的结果对

比，可以发现 [Array.prototype] 上的属性和方法与声明数组方法上的 arr1.__proto__ 和Object.getPrototypeOf(arr1) 中的属性与方法都是一

致。由此可以确认 三种声明数组方法的原型 是Array.prototype。

代码范例二：验证上述内容

//数组字面量声明方法
var arr1 = []; 
//打印 arr1 的原型
console.log(arr1.__proto__);//ES5
console.log(Object.getPrototypeOf(arr1));//ES6

//new 系统内置 Array 构造函数声明数组
var arr2 = new Array(); 
//打印 arr2 的原型
console.log(arr2.__proto__);//ES5
console.log(Object.getPrototypeOf(arr2));//ES6

//直接使用 Array 构造函数声明数组
var arr3 = Array(); 
//打印 arr3 的原型
console.log(arr3.__proto__);//ES5
console.log(Object.getPrototypeOf(arr3));//ES6

//打印 Array.prototype ，查看它的属性与方法
console.log(Array.prototype);

打印图解：

1.3 数组的底层机制

1：对象声明的方法可以有很多种，但与数组的声明方法是有重合的，通过观察代码范例三可以得知。

2：数组的基本认知：

数组是由一系列元素构成的数据结构，其中每个元素都分配一个唯一的下标（是从0开始的整数），用于标识该元素在数组中的位置；

在 JavaScript 中，数组在书写时通常被一对中括号 [] 包裹，其内部的元素则通过逗号进行分隔；

数组元素，在 JavaScript 中，可以是任意一种数据类型，但通常是相同类型的数据或相互作用的数据类型；

下标，中文称呼。在英文中使用 [index] 表示，是从0开始的整数。通过下标，可以访问数组中的任意元素。

3：代码范例三中，通过对象来模拟数组，并使用相同的方式来打印不同的数据类型中的相同类型的值，可以发现，几乎是一毛一样的。其实，数组的底层机

制就是继承了对象而来的，也就说，数组在 JavaScript 中就是另一种对象的形式，只是写法不同而已，但它们的访问机制是一毛一样的。这也证明为什么在

网络上流传这样一句话，在 JavaScript 中，一切皆为对象的原因。

代码范例三：验证上述内容

//认识 声明对象的方法以及它的原型
var obj1 = {};
var obj2 = new Object();
var obj3 = Object();
console.log(obj1__proto__, obj2__proto__, obj2__proto__);//与1.2中的数组类似，就不罗嗦了
console.log(Object.prototype);//同上

//通过对象来模拟数组
var arr = [1, 2, 3, 4, 5]; 

var obj ={
    0: 1,
    1: 2,
    2: 3,
    3: 4,
    4: 5
}
//使用相同的方式来打印不同的数据类型中的相同类型的值
console.log(arr[2]);
console.log(obj[2]);

1.4 稀松数组

稀松数组（Sparse Array）,可以理解成，在一个数组中，有元素为空（empty）的情况下，就认为这个数组是稀松数组。

Tips：

在设置稀松数组（Sparse Array）时，空元素的位置需要在数组的起始位置和中间，这样才有效，末尾添加空元素是无效的。

代码范例四：验证上述内容

//观察以下代码的运行结果

var arr = [,,] //数组元素为空，但使用了逗号分割。
//尝试打印 arr 数组，看看是什么结果？
console.log(arr); //打印结果: ► (2) [empty × 2]，两个空元素。
//尝试打印 arr 数组的长度，看看是什么结果？
console.log(arr.length) //打印结果：2，原来空元素，在数组中的长度计算时，也被计算在内的。
//分析：正常计算应该是3，为什么会是2？

//数组的截取机制，空元素在数组的起始和末尾位置呢？
var arr = [, 1, 3, 5, 7,] //又是一个包含有空元素的数组，空元素分别在开头和末尾。
//尝试打印 arr 数组，看看是什么结果？
console.log(arr); //打印结果：► (5) [empty, 1, 3, 5, 7]，一共有 5 个元素，其中一个还是空元素。
//尝试打印 arr 数组的长度，看看是什么结果？
console.log(arr.length); //5
//分析：通过结果可以得知，它的截取机制就是，空元素在数组的起始位置则计算，在末尾则不计算，也可以理解成把末尾的空元素丢弃不计算。

//数组的截取机制，空元素在中间呢？
var arr = [, 1, 3,,,, 5, 7,] //数组在前后和中间都有空元素。
//尝试打印 arr 数组，看看是什么结果？
console.log(arr);//打印结果：► (8) [empty, 1, 3, empty × 3, 5, 7]，一共8个元素，其中有4个是空元素。
//尝试打印 arr 数组的长度，看看是什么结果？
console.log(arr.length)//打印结果：8
//分析：通过结果可以得知，它的截取机制就是，只认起始位置和中间位置的空元素，末尾元素会直接丢弃不计算在内。

//系统内置的new 构造函数，设置成稀松数组。
var arr = new Array[, 1, 3,,,, 5, 7,]; //尝试这样的传参会是一个什么情况？直接告诉我们，应该是会报错。
console.log(arr); //果然全部报错
console.log(arr.length); //同上
//分析：其实这么做，是加深理解。通过系统内置的 new Array ，其参数是不能随意传参，都是有标准的。
//可以去MDN上查看下就知道，只是了解下。因为这种方式的创建数组也不推荐使用。

//了解以下就行，系统内置的new 构造函数，设置成稀松数组。
var arr = new Array(5) //这种方式是可以的
console.log(arr); //打印结果：► (5) [empty × 5]
console.log(arr.length) //5
//分析：这种方式，就是设置数组的长度，也可以理解为占位。

1.5数组的增改查

数组中的增改查

代码范例五：验证上述内容

//数组 --- 查
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//尝试打印看看，会是什么结果？
console.log(arr[10]); //打印结果：undefined，为什么是undefined？又为什么不是其它的呢（如：报错，null等等）？
//分析：这就是在 1.3 中所说：数组，在 JavaScript 中，其实就是对象的另一种形式，也可以理解成数组的底层机制就是继承了对象而来的。
//因为在访问对象中不存在的属性时，会直接显示 undefined，所以访问数组不存在的元素时，就会显示 undefined。

//数组 --- 增加与修改
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr[10] = 'a'; //通过不存在的数组下标，来新增一个元素
arr[5] = 'b'; //通过数组下标，修改元素

二：数组中的方法

在学习数组方法之前，首先要理解一个基础性知识，那就是数组中所有的原始方法来自或继承于 [Array.prototype] 。

1、unshift() 和 push() 是在数组前后两个不同位置上添加一个或多个元素的方法，返回值为新数组的长度，具体看代码范例六。

2、shift() 和 pop() 是在数组前后两个不同位置上删除一个元素的方法并返回删除的元素，且没有参数，具体看代码范例七。

3、reverse() 方法，是操作当前数组进行就地反转，它的返回值就是发转后的数组，且不会创建新的数组，然后没有参数，具体看代码范例八。

4、splice() 方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。一句话说不清，具体看代码范例九。

5、sort() 方法默认按 UTF-16 码元对数组元素（视为字符串）进行升序排序，并返回原数组地址的引用，参数可选，类型为函数。具体看代码范例十。

上述方法为修改原数组，并不会生成新数组。

以下方法并不修改原数组，而是重新生成一个新数组。

6、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。具体看代码范例十一。

7、toString() 方法将数组转换成字符串。此方法不会更改现有数组，而是返回一个新数组。具体看代码范例十二。

8、slice() 方法无参时，原数组的浅拷贝。有参时，将按照参数截取不同位置的元素，返回一个新数组，此方法不会更改现有数组。代码范例十三。

9、join() 与 split() 方法相互补充，字符串和数组之间的转换：join() 将数组元素合并成字符串，split() 将字符串分割成数组。代码范例十四。

2.1 代码范例六：`unshift()` 和 `push()` 方法使用以及重写。

//unshift 在数组的起始元素前位置，添加一个或多个元素，并返回新数组的长度。
var arr = [2, 3, 4]; //声明一个数组字面量
var arrLength = arr.unshift(5); //使用 unshift() 方法，传入一个数值参数,并把返回值赋值给一个变量 arrlength。
console.log(arr); //打印结果：► (4) [5, 2, 3, 4]，通过结果得知，是向数组起始元素位置前新增一个数值元素。
console.log(arrLenght); //打印 arrLenght 值，其结果为：4 ，相对于操作前的数组，可以认为是返回了一个新数组的长度(length)。
//也可以添加多个元素
var arr = [2, 3, 4];
arr.unshift(5, 'a', 10);
console.log(arr); //打印结果：► (6) [5, 'a', 10, 2, 3, 4]


//push 在数组的末尾元素后位置，添加一个或多个元素，并返回新数组的长度。
var arr = [2, 3, 4]; //声明一个数组字面量
var arrLength = arr.push(5); //使用 push() 方法，传入一个数值参数,并把返回值赋值给一个变量 arrlength。
console.log(arr); //打印结果：► (4) [2, 3, 4, 5]，通过结果得知，是向数组末尾元素位置后新增一个数值元素。
console.log(arrLength); //打印 arrLength 值，其结果为：4 ，相对于操作前的数组，可以认为是返回了一个新数组的长度(length)。
//也可以添加多个元素
var arr = [2, 3, 4];
arr.push(5, 'a', 10);
console.log(arr); //打印结果：► (6) [2, 3, 4, 5, 'a', 10]

//重写 unshift() 和 push() 方法，先强行理解一波，后续整理，在深入理解。ES5 用 agruments ，ES6 用 ...args 。
//重写 unshift()
var arr = [7, 8, 9, 10];
console.log(arr);
Array.prototype.myUnshift = function(...element){
    for(var i = element.length - 1; i >= 0; i--){
        for(var j = this.length; j > 0; j--){
            this[j] = this[j - 1];
        }
        this[0] = element[i];
    }
    return this.length;
}
var arrlength = arr.myUnshift(1, 2, 3, 4, 5, 6);
console.log(arr, arrlength);
//重写 push()
var arr = [1, 2, 3, 4];
console.log(arr);
Array.prototype.myPush = function(...element){
    for(var i = 0; i < element.length; i++){
        this[this.length] = element[i];
    }
    return this.length;
}

var arrLength = arr.myPush(5, 6, 7, 8, 9, 10);
console.log(arr, arrLength);

2.2 代码范例七：`shift()` 和 `pop()` 方法使用以及重写。

//shift 删除数组第一个元素，并返回删除的元素，且没有参数。
var arr = ['a', 'b', 'c'];
var arrDelFirst = arr.shift();
console.log(arrDelFirst, arr);

//pop 删除数组最后一个元素，并返回删除的元素，且没有参数。
var arr = ['a', 'b', 'c'];
var arrDelLast = arr.pop();
console.log(arrDelLast, arr);

//先强行理解一波，后续整理，在深入理解。
//重写 shift() 和 pop() 方法，利用的原理是使用数组中的 length 属性，进行截断数组，只是修改原始数组，而不是重新创建一个新数组。
//重写 shift() 
var arr = ['a', 'b', 'c'];
console.log(arr);
Array.prototype.myShift = function () {
    if (this.length === 0) {
        return undefined;
    }
    var firstElement = this[0];

    for (var i = 1; i < this.length; i++) {
        this[i - 1] = this[i];
    }
    this.length = this.length - 1;
    return firstElement;

}
var arrDelFirst = arr.myShift()
console.log(arrDelFirst, arr);
//重写 pop()
var arr = ['a', 'b', 'c'];
console.log(arr);
Array.prototype.myPop = function(){
    if(this.length === 0){
        return undefined;
    }
    var lastElement = this[this.length - 1];
    this.length = this.length - 1;
    return lastElement;
}
var arrDelLast =arr.myPop()
console.log(arrDelLast, arr);

2.3 代码范例八：`reverse()` 方法使用以及重写。

//reverse 反转当前数组，使用的算法是 “就地”，返回值是当前反转后的数组，并不会重新创建一个数组，只是修改当前数组。
var arr = [1, 2, 3, 4, 5, 6];
var arrRev = arr.reverse();
console.log(arrRev,arr);

//先强行理解一波，后续整理，在深入理解。
//重写 reverse() 方法
var arr = [1, 2, 3, 4, 5, 6, 'a', 'b', 198];
//置换
Array.prototype.myReverse = function(){
    var left = 0;
    var right = this.length -1;
    while(left < right){
        var temp = this[left];
        this[left] = this[right];
        this[right] = temp;
        left++;
        right--;
    }
    return this;
}
var reversedArray = arr.myReverse();
console.log(reversedArray,arr);

2.4 代码范例九：`splice()` 方法使用。

//splice 两个参数的尝试
var arr = ['a', 'b', 'c'];
// 使用 splice 方法修改数组
// 第一个参数(1)：指定开始操作的起始下标。
// 第二个参数(2)：指定要从起始下标处删除的元素数量。
// 这里的意思是从数组下标 1 开始并包含它自身，删除 2 个元素，同时用一个变量接收它的返回值。
var showSplice = arr.splice(1, 2);
//从 showSplice 的打印结果来看，它的返回值就是当前数组删除的元素。
console.log(showSplice, arr); //打印结果：[ 'b', 'c' ] [ 'a' ]

//splice 三个参数的尝试
var arr = ['a', 'b', 'c'];
// 使用 splice 方法对数组进行修改：
// 第一个参数(1)：指定开始操作的起始下标。
// 第二个参数(1)：指定要从起始下标处删除的元素数量。
// 第三个参数(1, 2, 3, 4)：是要插入到数组中的新元素。从第三个参数处起始，不管有多少个参数，统一认为这就是第三个参数。
// 这里的操作是：从下标 1 (元素 'b') 起始处，删除 1 个元素，并在相同位置插入新元素 1, 2, 3, 4。
// 实质上，就意味着元素 'b' 被这些新元素替换。
arr.splice(1, 1, 1, 2, 3, 4);
console.log(arr);//打印结果：[ 'a', 1, 2, 3, 4, 'c' ]

//splice 第二参数为 0 时
var arr = ['a', 'b', 'c', 'e'];
// 使用 splice 方法对数组进行修改：
// 第一个参数(3)：指定开始操作的起始下标。
// 第二个参数(0)：指定要从起始下标处删除的元素数量。这里的 0 表示不删除任何元素。
// 第三个参数('d')：表示需要插入到数组的新元素。
// 这里的操作是：下标 3 的位置，也就是元素 'e' 的前面，插入新元素 'd'，而不删除任何现有元素。
arr.splice(3, 0, 'd');
console.log(arr); //打印结果：[ 'a', 'b', 'c', 'd', 'e' ]

//splice 第一参数为为负数(-1)时
var arr = ['a', 'b', 'c', 'e'];
// 使用 splice 方法对数组进行修改：
// 第一个参数(-1)：指定开始操作的起始下标。这里的 -1 为数组的最后一个元素。
    // 在 splice 方法内，负数下标（如 -1, -2, -3）表示从数组末尾开始计数的位置。
// 第二个参数(0)：指定要从起始下标处删除的元素数量。这里的 0 表示不删除任何元素。
// 第三个参数('d')：表示需要插入到数组的新元素。
// 这里的操作是：在数组末尾元素 'e' 之前（即倒数第一个位置）插入新元素 'd'，而不删除任何现有元素。
// 由于指定的起始下标是 -1，且删除元素数量为 0，所以 'd' 被插入在 'e' 之前。
arr.splice(-1, 0, 'd');
console.log(arr); //打印结果：[ 'a', 'b', 'c', 'd', 'e' ]


//探究 splice 第一个参数的内部是如何运行的？
//使用普通函数来模拟：
//1：正数；2：负数。
var arr = ['a', 'b', 'c', 1, 321, 'adc'];

//传入两个形参，第一个参数为：数组；第二个参数：下标（就是数组 splice 方法的第一个参数，指定下标起始处位置）。
function splice(arr, index){ 
   if(index >= 0){ //设置条件，当下标大于或等于 0 时。
    return index; //第一个参数为正数时，就直接返回下标。这个理解起来没有任何难度。
   }else{ //否则，下标为负数的时候。
    // 例如： 当前输入的下标为 -1 , 数组的长度为 6，则进行加法运算 -1 + 6 = 5，此时的 5 就是字符串 'abc' 的下标。
    // 然后通过 return 指令返回出去。
    return index + arr.length; 
    }
    //简化if else 操作，使用三元运算符
    //return index += index >= 0 ? 0 : arr.length; 
}

//打印测试 splice 函数的功能是否为预期目标
//这里是毫无疑问，没有问题，直接返回下标
console.log(splice(arr, 4)); //打印结果：4

//测试是否能通过下标打印出对应的数组元素
console.log(arr[splice(arr, 4)]); //打印结果：321

//测试负数下标是否能打印对应的数组元素
console.log(arr[splice(arr, -2)]);//打印结果：321
console.log(arr[splice(arr, -4)]);//打印结果：c
console.log(arr[splice(arr, -1)]);//打印结果：abc
//以上测试都没有问题，这样就能了解 splice 第一个参数的内部是如何运行的。

2.5 代码范例十：`sort()` 方法使用。

//观察 sort() 方法 的默认方法实例

//单数值
var arr = [-1, -5, 8, 0, 2];
arr.sort(); //使用 sort() 方法
console.log(arr); //打印结果：[ -1, -5, 0, 2, 8 ]，看起来很正常，使用的是升序排序。

//单字母
var arr = ['d', 'f', 'a', 'b', 'i'];
arr.sort(); //使用 sort() 方法
console.log(arr); //打印结果：[ 'a', 'b', 'd', 'f', 'i' ]，看起来也很正常，使用的是升序排序。

//单、双、多位数值进行排序
var arr = [24, 53, 55, 7, 22, 100];
arr.sort(); //使用 sort() 方法
console.log(arr); //打印结果：[ 100, 22, 24, 53, 55, 7 ]，这个结果就有点无语了，完全混乱，接着看下一个例子。

//单、双、多位字母进行排序
var arr = ['dbb', 'fd', 'a', 'bc', 'aaa'];
arr.sort(); //使用 sort() 方法
console.log(arr); //打印结果：[ 'a', 'aaa', 'bc', 'dbb', 'fd' ]，这个方法就有点反人类了。

//概念性知识：
//一：根据MDN上的解释是,sort() 方法是"就地"将数组中的元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序；
//二：提炼MDN解释的关键词，就地、转换为字符串、UTF-16码元值、升序排序；
//三：就地，原地算法（in-place algorithm，也称“就地算法”），可以理解成，在原数据的引用地址上直接进行操作；
//四：转换为字符串，这个好理解，就是在使用 sort() 方法时，需要把数组中的所有元素都进行转换为字符串；
//五：UTF-16，就是 Unicode 字符集的一种编码方式，并且每年还在不断的更新码元值，另外两种是 UTF-8 和 UTF-32，这里可以简单粗暴的理解成Ascii码就行；
//六：升序排序，是指将一系列值按照从小到大顺序排列。例如：数字的升序，是从小到大，字母是从最起始位到最末位(a-z)。

//分析：为什么会出现上述的排序混乱？
//1：数字排序的逻辑：[24, 53, 55, 7, 22, 100]
//   1.1：首先将每个元素转换成字符串，然后在将每个字符串的首位字符转换成 Ascii 码进行大小比对，小的排在前面，大的排在后面；
//   1.2：一般情况下，在逐个比较完每个字符串的首字符的结果后，此时的排序已经被固定下来，不会在对其它位数的字符在进行比较；
//   1.3：如果，在首字符 Ascii 码相等的情况下，才会在进行第二位或第三位字符比较，依此类推;
//   1.2：同时，在参与比较的字符串中有"[单字符串]"时，在完成第一次首字符比较后，将不在参与比较；
//   1.3：经过三条运行逻辑的解释，所以得到的结果为[ 100, 22, 24, 53, 55, 7 ]。

//2：字符串排序的逻辑 --- 同上。

//明白了 sort() 方法的默认排序逻辑，那如自定义排序呢？
//这里就需要了解 sort() 方法提供的一个可选参数，参数类型为函数，此函数可以称为比较函数。可以是任何一种的创建函数方式，也可以是函数调用(回调)。
//sort() 方法会在内部遍历数组，并多次调用这个比较函数以及按照比较函数的规则来调整元素的排序方式。
//sort() 方法的可选参数(函数)使用规则：
//一、函数的形参必须要有两个，例：`[a, b]`，形参名可以任意设置成 `[x, y]`；
//二、函数必须要有返回值：
//        2.1：负值（-1），a就排在前面 ；
//        2.2：正值 （1），b就排在前面 ；
//        2.3：0 保持不动
//尝试使用这个函数来进行升序排序

var arr = [24, 53, 55, 7, 22, 100];
//函数中的 a 和 b 两个形参分别代表什么？
//形参 a: 在每次比较中，a 是当前比较过程中数组中的一个元素。
//形参 b: 同样在每次比较中，b 是数组中另一个需要与 a 进行比较的元素。
arr.sort(function(a, b){
    // if(a > b){
    //     return 1
    // }else{
    //     return -1;
    // }

    // return (a > b) ? 1 : -1; //升序
    // return (a > b) ? -1 : 1; //降序
    // return (a < b) ? 1 : -1; //降序
    // return (a < b) ? -1 : 1; //升序

    //return a - b; //升序 
    //return b - a; //降序

})
console.log(arr);

//使用sort() 随机排序 
var arr = [1, 2, 3, 4, 5, 6];

//Math.random() -> 0 --- 1 ; 取 0 和 1 之间的数，但不包含 0 和 1，也就是区间之数的随机值，0.01 0.5 0.7等等

arr.sort(function(a, b){
//     var random = Math.random();
//     if(random - 0.5 > 0){
//         return 1;
//     }else{
//         return -1;
//     }

    return Math.random() - 0.5;
 }   
)
console.log(arr);

//使用sort() 排序数组对象 升序
var arr = [{son:'ben',age:21}, {son:'alan',age:14}, {son:'simen',age:24}, {son:'johan',age:22}];
arr.sort(function(a, b){
    // if(a.age > b.age){
    //     return 1;
    // }else{
    //     return -1;
    // }
    return a.age - b.age;
})
console.log(arr);

//使用sort() 排序字符串长度 升序
var arr = ['1234', 'fde', '87', 'ewihf876', 'jj82b'];
arr.sort(function(a, b){
    // if(a.length > b.length){
    //     return 1;
    // }else{
    //     return -1;
    // }

    return a.length - b.length;
})
console.log(arr);

2.6 代码范例十：`concat()` 方法使用。

//concat() 方法
var arr1 = [1, 2, 3, 4, 5];
var arr2 = ['a', 'b', 'c', 'd', 'e'];

//使用 concat() 方法，合并数组，此方法并不会影响原数组，而是组合成一个新的数组
arr1.concat(arr2); //一般是用一个变量来接收 concat() 方法的返回值

//打印验证是否影响原数组
console.log(arr1, arr2); //由结果可知，concat() 方法并不影响原数组

//concat() 方法调用数据位置不同，结果也不一样
var arr1 = [1, 2, 3, 4, 5];
var arr2 = ['a', 'b', 'c', 'd', 'e'];

//用变量接收 concat() 方法的返回值
var margeArr1 = arr1.concat(arr2);
var margeArr2 = arr2.concat(arr1);

//打印 concat() 方法的返回值
console.log(margeArr1, margeArr2); //由结果得知，arr1 arr2 位置不同，其返回新的数组内容也不一样

//concat() 方法,参数可以是多个
var arr1 = [1, 2, 3, 4, 5];
var arr2 = ['a', 'b', 'c', 'd', 'e'];
var arr3 = [true, false];

//用变量接收 concat() 方法的返回值
var margeArr1 = arr1.concat(arr2, arr3);

//打印 concat() 方法的返回值
console.log(margeArr1); //由结果得知，arr1 arr2 位置不同，其返回新的数组内容也不一样

2.7 代码范例十：`toString()` 方法使用。

//toString() 方法将数组转换为字符串
var arr1 = [1, 2, 3, 4, 5];

//toString() 方法没有参数，不影响原数组，而是返回一个字符串
var str = arr1.toString()

//打印验证
console.log(arr1, arr1.toString());

2.8 代码范例十：`slice()` 方法使用。

//slice() 方法
var arr = ['a', 'b', 'c', 'd', 'e', 'f', [1]];

//slice() 方法 不写参数
var arr1 = arr.slice(); //浅拷贝，返回一个新数组
arr1[6][0]= 3; //修改新数组元素中的引用类型，是否会影响原数组
console.log(arr, arr1); //由结果可知，确实会影响，所以新数组是浅拷贝。
//['a', 'b', 'c', 'd', 'e', 'f', [ 3 ]] 
//['a', 'b', 'c', 'd', 'e', 'f', [ 3 ]]

//slice() 方法 只写一个参数，参数类型为数组的下标
var arr1 = arr.slice(1);
console.log(arr1); 
//由结果可知，排除当前填写对应下标之前的元素，且截取并包含当前填写下标对应的元素，以及之后所有元素，重新组合为一个新的数组。
//[ 'b', 'c', 'd', 'e', 'f', [ 3 ] ]

var arr2 = arr.slice(2);
console.log(arr2); //同上。
//[ 'c', 'd', 'e', 'f', [ 3 ] ]

//slice() 方法 写两个参数
//[start end) 
var arr3 = arr.slice(1, 3); //由上面的注释可知，这两个参数都是数组的下标
console.log(arr3) 
//由结果可知，第一个参数为截取数组的起始位置并包含，第二个参数为结束位置，结束位置为丢弃部分，但区间的元素都会包含在内，除了结束位置。
//[ 'b', 'c' ]

//slice() 方法 负数参数表示从数组末尾开始计数的位置
var arr4 = arr.slice(-1); //start 参数为负数 (-1)
console.log(arr4); //由结果可知，返回数组元素的最后一位。
//[ [ 1 ] ]

var arr5 = arr.slice(-3); //start 参数为负数 (-3)
console.log(arr5); //由结果可知，是从数组最后一位元素先前数第三位，并包含当前的元素，返回一个新数组。
//[ 'e', 'f', [ 1 ] ]

var arr6 = arr.slice(-3, -1); // 从倒数第三个元素（'e'）开始，到倒数第一个元素之前（不包括倒数第一个元素）截取
console.log(arr6); 
//[ 'e', 'f' ]

var arr7 = arr.slice(-5, 6); // 从倒数第五个元素（'c'）开始，到下标 6（不包括索引 6 的元素）截取
console.log(arr7);
//[ 'c', 'd', 'e', 'f' ]

var arr8 = arr.slice(-5, 1); // 从倒数第五个元素（'c'）开始，到下标 1（不包括索引 1 的元素）截取
console.log(arr8);
// 输出: []

2.9 代码范例十：join()` 与 `split() 方法使用。

//join() 
var arr = ['a', 'b', 'c', 'd', 'e', 'f', [1]];

//不写入参数，默认是将数组中的所有元素，转换成一个字符串的形式，并返回。
var showJoin = arr.join();
console.log(showJoin) //由结果可知，默认是用逗号分割
//a,b,c,d,e,f,1

//写入参数，是将数组中所有的元素拿出来，然后放入到一个字符串中，并使用写入的参数作为分隔符。
var showJoin1 = arr.join(''); //空字符串作为分隔符，消除默认的逗号分隔符。
console.log(showJoin1);
//abcdef1

var showJoin2 = arr.join(' '); //空格作为分隔符，消除默认的逗号分隔符。
console.log(showJoin2);
//a b c d e f 1

var showJoin3 = arr.join('-'); //使用连字符(分隔符)作为分隔符，消除默认的逗号分隔符。
console.log(showJoin3);
//a-b-c-d-e-f-1

var showJoin4 = arr.join('0'); //数字0作为分隔符，消除默认的逗号分隔符。
console.log(showJoin4);
//a0b0c0d0e0f01

//其实也可以认为是填充作用。

//split
//不写参数时，默认是将整个字符串转换成数组的唯一元素。
var showSplit1 = showJoin4.split();
console.log(showSplit1); //结果是一个包含原始字符串的单元素数组，因为没有指定分隔符，所以整个字符串作为一个整体被加入到数组中。
//[ 'a0b0c0d0e0f01' ]

//写入第一个参数,参数类型为字符串，此参数的作用是将字符串分隔成多份，并组成数组。
var showSplit2 = showJoin4.split('0');
console.log(showSplit2);
//['a', 'b', 'c', 'd', 'e', 'f', '1']

//写入第二个参数,类型为数值，是将组合成的数组保留多少长度，也可以理解为截取。
var showSplit3 = showJoin4.split('0', 4);
console.log(showSplit3);
//[ 'a', 'b', 'c', 'd' ]

JavaScript学习笔记十五

fifteen

一：Array（数组）

1.1 声明数组的方法

1.2 三种声明数组方法的原型是谁？

1.3 数组的底层机制

1.4 稀松数组

1.5数组的增改查

二：数组中的方法

2.1 代码范例六：unshift() 和 push() 方法使用以及重写。

2.2 代码范例七：shift() 和 pop() 方法使用以及重写。

2.3 代码范例八：reverse() 方法使用以及重写。

2.4 代码范例九：splice() 方法使用。

2.5 代码范例十：sort() 方法使用。

2.6 代码范例十：concat() 方法使用。

2.7 代码范例十：toString() 方法使用。

2.8 代码范例十：slice() 方法使用。

2.9 代码范例十：join()` 与 `split() 方法使用。

2.1 代码范例六：`unshift()` 和 `push()` 方法使用以及重写。

2.2 代码范例七：`shift()` 和 `pop()` 方法使用以及重写。

2.3 代码范例八：`reverse()` 方法使用以及重写。

2.4 代码范例九：`splice()` 方法使用。

2.5 代码范例十：`sort()` 方法使用。

2.6 代码范例十：`concat()` 方法使用。

2.7 代码范例十：`toString()` 方法使用。

2.8 代码范例十：`slice()` 方法使用。