集合引用类型上

前端贾公子

已于 2023-01-12 09:59:51 修改

阅读量273

点赞数

分类专栏： JavaScript高级程序设计文章标签： javascript 开发语言 ecmascript

于 2023-01-12 09:54:40 首次发布

本文链接：https://blog.csdn.net/qq_63358859/article/details/128646687

版权

JavaScript高级程序设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Object

显式地创建Object 的实例有两种方式：

使用new 操作符和Object 构造函数

let person = new Object();
person.name = "Nicholas";
person.age = 29;

使用对象字面量（object literal）表示法，对象字面量是对象定义的简写形式，目的是为了简化包含大量属性的对象的创建：

let person = {
	name: "Nicholas",
	age: 29
};

逗号用于在对象字面量中分隔属性，因此字符串"Nicholas"后面有一个逗号，而29 后面没有，因为age 是这个对象的最后一个属性。

数值类型的属性名会被自动转换为字符串。

对象的属性可以通过点号和中括号修改访问，中括号时要用字符串形式

let person= {name：Nicholas};
let propertyName="name"
console.log(person[propertyName]); // "Nicholas"
console.log(person.name); // "Nicholas"

如果属性名中包含可能会导致语法错误的字符，或者包含关键字/保留字时，也可以使用中括号语法。

Array

ECMAScript 数组也是一组有序的数据，但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数据。这意味着可以创建一个数组，它的第一个元素是字符串，第二个元素是数值，第三个是对象。ECMAScript 数组也是动态大小的，会随着数据添加而自动增长。

创建数组

方法1，使用Array构造函数：

为构造函数传入一个数值，可以创建指定长度的数组：
也可以传递给构造函数要保存的元素：
在使用Array 构造函数时，可以省略new 操作符，结果是一致的。

et colors = new Array();
let colors = new Array(20);
let colors = new Array("red", "blue", "green");

方法2，创建数组的方式是使用数组字面量（array literal）表示法。

数组字面量是在中括号中包含以逗号分隔的元素列表：

let colors = ["red", "blue", "green"]; // 创建一个包含3 个元素的数组
let names = []; // 创建一个空数组
let values = [1,2,]; // 创建一个包含2 个元素的数组

数组的静态方法

Array在ES6新增两个创建数组的静态方法。

from()：将类数组结构转换为数组实例:

第一个参数是目标数组，
第二个参数是映射函数（可选）,
第三个参数是映射函数作用域this指向（可选）

    let a = "zyzc";
    let b = Array.from(a, function (item) {
        return item + this.aim;
    }, {
        aim: '|'
    });
    console.log(b);   // [ 'z|', 'y|', 'z|', 'c|' ]

of()：将参数转化为数组实例

  let a = Array.of(1,2,3,4,5);
  console.log(a);   // [1,2,3,4,5];

数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位（hole）。ECMAScript 会将逗号之间相应索引位置的值当成空位，ES6 规范重新定义了该如何处理这些空位。可以像下面这样创建一个空位数组：

const options = [,,,,,]; // 创建包含5 个元素的数组
console.log(options.length); // 5
console.log(options); // [,,,,,]

ES6 新增方法普遍将这些空位当成存在的元素，只不过值为undefined。

const options = [1,,,,5];
for (const option of options) {
	console.log(option === undefined);
}
// false
// true
// true
// true
// false

数组索引

索引从0开始，如果操作的索引大于数组的长度，则自动扩展。而数组最多可以包含4 294 967 295个元素。

  let colors = ["red","blue","yellow"];
  colors[2] = "black";    // 修改第三项
  colors[3] = "white";    // 新增第四项

length属性，不只是可读，还可通过修改length增加、删除数组元素。

  let colors = ["red","blue","yellow"];
  colors.length = 4;  // 新增第四项空字符串
  colors.length = 2;  // 删除数组末两个元素

检测数组

使用isArray()可以检测是否为数组

  if(Array.isArray(arr)){
    // 进行数组操作
  }

迭代器方法

Array原型上暴露了3个检索数组内容的方法：

keys()：返回数组索引
values()：返回数组元素
entries()：返回索引/值对

  const colors = ["red","blue","yellow"];

  const colorsKeys = Array.from( colors.keys() );
  const colorsValues = Array.from( colors.values() );
  const colorsEntires = Array.from( colors.entries() );

  console.log(colorsKeys);      //  [ 0, 1, 2 ] 
  console.log(colorsValues);  //  [ 'red', 'blue', 'yellow' ] 
  console.log(colorsEntires); //  [ [ 0, 'red' ], [ 1, 'blue' ], [ 2, 'yellow' ] ]

复制和填充方法

ES6新增了两个复制和填充的方法：

1.copyWithin(target[,start,end]):将[start,end)的元素，复制到索引target开始的地方。

第1个参数a表示目标覆盖的开始索引位置。
第2个参数b表示开始复制的开始元素索引位置。
第3个参数c表示结束复制的元素索引位置，注：不包含最后一个索引元素。

   var arr1=['a','b','c','d','e'];
   arr1.copyWithin(0,3,4)
   console.log(arr1);//["d", "b", "c", "d", "e"]

上述例子中，从数组arr1，所以为3的元素开始复制，一直到索引为4的元素结束，但是不包含索引为4的元素，此时就复制了[‘d’],然后把它覆盖到从索引为0开始的元素，因为只复制了一个元素，所以值覆盖了一个元素arr1[0]这个元素。结果为[“d”, “b”, “c”, “d”, “e”]

2.fill(target[,start,end]):将tartget元素，填充到[start,end)的位置上

target:需要填充的元素
start:元素填充的起始位置，默认为0;
end:停止填充的索引位置 (默认为 array.length)。若是负数则表示-x+length，默认为length

   let fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
    let newArr1 = fruits.fill('Watermelon', 0, 2);
    //['Watermelon', 'Watermelon', 'Apple', 'Mango', 'Kiwi', 'Papaya']
    console.log(newArr1);

静默忽略超出数组边界、零长度、方向相反的索引

转换方法

toLocaleString()：返回数组的字符串表示
toString()：返回数组的字符串表示
toValueOf()：返回数组本身
join(str)：向元素间添加分隔符，并返回对应字符串。【默认使用逗号】

valueOf()返回的还是数组本身。而toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串,就是对数组的每个值都会调用其toString()方法，并使用逗号分隔，以得到最终的字符串。

用alert()显示数组，因为alert()期待字符串，所以会在后台调用数组的toString()方法，从而得到跟toString()一样的结果。

let array2 = ['Hello', 'World'];
console.log(array2.valueOf());  //  ["Hello", "World"]
console.log(array2.toString());  //  Hello,World
alert(array2) // Hello,World

toLocaleString()方法也可能返回跟toString()和valueOf()相同的结果，但也不一定。在调用数组的toLocaleString()方法时，会调用数组每个值的toLocaleString()方法，而不是toString()方法。如果这两个方法结果不一致时，最终结果也就不一致。

除了默认的逗号分隔外，可以通过join()方法，使用不同的分隔符连接数组值。
join()方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

数组中某一项是null 或undefined，则在join()、toLocaleString()、toString()和valueOf()返回的结果中会以空字符串表示。

栈方法

pop()：退栈
push()：压栈

ECMAScript 数组提供了push()和pop()方法，以实现类似栈的行为。
push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。pop()方法则用于删除数组的最后一项，同时减少数组的length 值，返回被删除的项。

let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
alert(count); // 2
count = colors.push("black"); // 再推入一项
alert(count); // 3
let item = colors.pop(); // 取得最后一项
alert(item); // black
alert(colors.length); // 2

队列方法

shift()：删除并返回第一项数据
unshift()：向数组首部添加数据
push()：向数组末尾添加一项数据

先进的方法有push()，先出的方法则是shift()，它会删除数组的第一项并返回它，然后数组长度减1。使用shift()和push()，可以把数组当成队列来使用，实现先进先出的效果。

let count = colors.push("red", "green"); // 推入两项
alert(count); // 2
count = colors.push("black"); // 再推入一项
alert(count); // 3
let item = colors.shift(); // 取得第一项
alert(item); // red
alert(colors.length); // 2

排序方法

reverse()：反转数组
sort()：将元素通过String()转型后，比较字符串来按照升序重新排列数组元素。

  /* 
    比较函数接收两个参数:
      1. 若返回负值，则第一个数排在第二个数前面
      2. 若返回正值，则第二个数排在第一个数前面
  */
 // 升序排序
 function ASCcompare(value1,value2){
   // 其实可以完全简写为 return value1 - value2;
   if(value1 > value2) {
      return 1;
   } else if( value1 < value2) {
      return -1;
   } else {
      return 0;
   }
 }
 // 降序排序
 function DESCcompare(value1,value2){
   // 其实可以完全简写为 return value2 - value1;
   if(value1 > value2) {
      return -1;
   } else if( value1 < value2) {
      return 1;
   } else {
      return 0;
   }
 }
 let values = [0,1,5,10,15];
 console.log(values.sort());               // [ 0, 1, 10, 15, 5 ] 
 console.log(values.sort(ASCcompare));     // [ 0, 1, 5, 10, 15 ]
 console.log(values.sort(DESCcompare));    // [ 15, 10, 5, 1, 0 ]

return 0:不交换位置，不排序
return 1:交换位置
return -1:不交换位置

操作方法

concat()：用于字符串的拼接。

  let string1 = "Hello,"
  console.log(string1.concat("world!"));  // Hello,world!

slice(start[,end])：返回 [start,end)之间的元素，将传入的负参数与字符串长度相加。

  let test = "hello world";
  console.log(test.slice(3));   // lo world
  console.log(test.slice(-3));  // rld

splice()：强大的数组方法

删除：传入2个参数，第一个参数：要删除的第一个元素索引；第二个参数：要删除的元素数量。

插入：传入3个参数，第一个参数：要插入的开始位置（超出长度则在末尾插入）；第二个参数：0（表示要删除0个元素），第三个参数之后：要插入的元素。

  let arr = [1,2,3,4,5];
  arr.splice(5,0,6,7,8);  // 用索引5开始插入元素6，7，8
  console.log(arr);   // [1, 2, 3, 4,5, 6, 7, 8]

替换：传入3个参数，第一个参数：要替换的位置；第二个参数：要替换的个数，第三个参数之后：替换的元素

    let arr = [1,2,3,4,5];
    arr.splice(2,3,6,7,8);  // 用索引5开始插入元素6，7，8
    console.log(arr);   // [1, 2, 6, 7, 8]

搜索和位置方法

ECMAScript：提供两类搜索数组的方法：

按严格相等搜索

严格相等：两个参数比较的时候，使用全等（===）比较。

indexOf(aim[,startPosition])：从前往后找给定元素并返回索引，未找到则返回-1；

  let text = "hello world";
  console.log(text.indexOf("o")); // 4
  console.log(text.indexOf("o",6)); // 7

includes(aim[,startPosition])：判断是否包括指定元素

['a','b','c'].includes('a')
true

['a','b','c'].includes(1)
false

按断言函数搜索

断言函数接收三个参数：元素、索引和数组本身。

find()：返回匹配到的第一个元素
findIndex()：返回匹配到的第一个元素的索引

    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    let newArr = arr.find(function (element, index, array) {
        if (element >= this.aim) {
            return true;
        }
    }, { // 第三个参数：表示断言函数中this指向的作用域
        aim: 5
    })
    console.log(newArr);//5

迭代方法

数组的5 个迭代方法如下。

every()：对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。
filter()：对数组每一项都运行传入的函数，函数返回true 的项会组成数组之后返回。
forEach()：对数组每一项都运行传入的函数，没有返回值。
map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。

这些方法都不改变调用它们的数组。

map()方法会返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果。例如，可以将一个数组中的每一项都乘以2，并返回包含所有结果的数组，如下所示：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
alert(mapResult); // 2,4,6,8,10,8,6,4,2

归并方法

ECMAScript 为数组提供了两个归并方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。而reduceRight()从最后一项开始遍历至第一项。

可以使用reduce()函数执行累加数组中所有数值的操作，比如：

    let values = [1, 2, 3, 4, 5];
    let sum = values.reduce((prev, cur, index, array) => {
        // 1 2
        // 3 3
        // 6 4
        // 10 5
        // 15
        console.log(prev, cur,);
        return prev + cur
    });
    console.log(sum);

第一次执行归并函数时，prev 是1，cur 是2。第二次执行时，prev 是3（1 + 2），cur 是3（数组第三项）。如此递进，直到把所有项都遍历一次，最后返回归并结果。