Object对象

创建对象的两种方式

new+构造函数

let obj=new Object({name:'bob',age:'age'})
console.log(obj);

使用new操作符加构造函数可以创建一个对象

使用对象字面量{}

let obj1={name:'Tom',age:'20'}

使用{}包含可以创造一个对象,{表示一个表达式开始，}则代表这个表达式结束.

注: 在所有现代浏览器中，对象字面量最后一个属性加,不报错，但在一些老的浏览器中，会发生报错。

在上述两小节中，我们可以得出new Object在一定程度上等于{},区别是前者是用构造函数来创建对象，后者是用对象字面量来创建。{}是ES3语法，在较旧的js版本中不支持,而new Object在兼容所有js环境。

存取对象属性两种方式

点语法和中括号语法

但在特殊情况下，如属性名中有空格，那么可以通过[]来进行存取。举例：

let obj1={age:'20'}
    obj1.name='Tom'
    obj1['My Cat']='Jack'
    console.log(obj1.name,obj1['My Cat']);//Tom Jack

且[]可以获取到动态属性值，而点语法只能获取到静态属性值，举例：

let obj={name:'Tom'}
const nickName='name'
console.log(obj.nickName,obj.name);//undefined 'Tom'
console.log(obj[nickName],obj['name']);//undefined 'Tom'

nickName的值等于name，中括号如果里面不加’'则会提取nickname的值来作为属性名，而点语法则只有静态，不能进行提取。

数组

创建数组方式

Array构造函数

构造函数和Object构造函数类似，不同的是，它如果输入一个数字，且只输入该数字，则该数字就是数组长度。

let arr=new Array(20);
let arr1=new Array(20,'Tom')
let arr2=new Array('Jack','Tom','John')
console.log(arr.length,arr1.length,arr2.length)//20 2 3

数组字面量[ ]

let arr=[];
let arr1=[1,3]
let arr2 =[1,2,3,4,,,,,]
console.log(arr,arr1,arr2)//[] [1,3] (8) [1, 2, 3, 4, empty × 4]
console.log(arr.length,arr1.length,arr2.length);//0 2 8

和对象字面量类似，数组字面量实现和构造函数一样的效果，在上述代码的arr2中我们发现加了很多空，这些，被用作占位，打印出来是undefined(未定义的值)，有占位符的数组也叫稀疏数组，为了代码整洁和增强可读性一般不建议使用。

创建数组方法(form&of)

of方法

of方法可以将一组参数转换成数组实例，举例

console.log(Array.of(1,2,3,4),Array.of(undefined,undefined));
//(4) [1, 2, 3, 4] (2) [undefined, undefined]

from方法

From方法可以把任何可迭代的结构从类数组对象，转换成数组实例。js当中大多数都是可迭代对象，这里举几个不是迭代对象的例子：

不可迭代数据类型：number、boolean、Math、symbol、null、undefined、JSON。

注：ES6中引入的迭代器协议，我们也可以通过实现Symbol.iterator方法来对一个不可迭代对象实现可迭代。那么它就可以被from方法所调用并转换成数组实例。

from方法是在获取到一个可迭代结构后，新建一个数组，并把这个结构返回一个新数组，那么这个数组的地址的新的，但值还是可迭代结构转换成数组后的引用。举例：

    let str='123'
    let ma=new Map().set(1,2)
              .set(3,4)
    let se=new Set().add(1).add(3).add(5)
    console.log(str,ma,se);//123 Map(2) {1 => 2, 3 => 4} Set(3) {1, 3, 5}
    console.log(Array.from(str),Array.from(ma),Array.from(se));
    //(3) ['1', '2', '3'] (2) [Array(2), Array(2)] [1, 3, 5]

也可以通过对arguments对象进行改变。

arguments 对象是 JavaScript 中的一个特殊对象，它在函数内部自动创建，并包含了函数被调用时传递的参数信息。

a数组复制给b数组，=和from的区别是什么？

from实现过程：

1.获取可迭代对象，2.遍历可迭代对象中的元素，可迭代对象转换成新数组 3.返回新数组

转换后的数组是被创建出来的新数组,和原数组堆地址不同，引用值相同。所以它虽然也是浅拷贝，但是它俩改变非对象索引的值，不会发生一变都变的效果。

等于=实现过程：

1.获取原始数组

2.复制引用值，引用堆地址

所以说=被复制和复制的数组都用一个引用堆地址，就会出现一变都变的情况，不管它们是不是对象索引值。

数组空位（稀疏数组）

let arr=[,]

这个就被称为稀疏数组，ES6中，打印出来为undefined。

正常来说遍历这种未定义的值数组时，会跳过，但使用ES6新增的from方法，则会返回undefined,未定义的值。

数组索引(length)

数组可以通过length属性来判断长度，同时也可以通过改变长度修改数组。

let arr=[1,2,3]
console.log(arr);//(3) [1, 2, 3]
arr.length=2;
console.log(arr);//(3) [1, 2, 3]

如果想在数组末尾添加元素也可以通过**arr[arr.length]=‘元素值’**进行添加。

数组检测(instanceof&isArray)

常用的两种方法：instanceof、isArray()

instanceof: value instanceof Array

isArray: Array.isArray(value)

前者在遭遇多个全局执行上下文|框架时，会出现报错，因为主页面的Array构造函数和子页面的Array构造函数不同，每个框架或页面都有自己原生的Array构造函数，所以就可能出现报错问题。举例：

我有一个页面，有用到iframe子页面框架

<body>
  <iframe src="./angular-01.html"></iframe>
  <script>
    // 在全局作用域中定义一个值
    var value = [1, 2, 3];
    // 判断 value 是否为数组
    if (value instanceof Array) {
      console.log("Value is an arrayS");  // 在主页面输出
    }
  </script>
</body>

子页面angular-01.html

<body>
  <script>
    // 在 frame1.html 的全局作用域中重新定义 Array
    var Array = "I'm not an array!";
    // 使用与主页面相同的代码来判断 value 是否为数组
    if (value instanceof Array) {
      console.log("Value is an array");  // 不会输出
    }
  </script>
</body>

如果有多个执行上下文或多个iframe框架，则可以使用isArray来检测数组。

迭代器方法(keys、values、entries)

这三种方法都是实现对数组迭代，区别是获得的内容不同

keys：数组索引(键)

values:数组各个属性值(值)

entries:数组索引和值(键值对)

  let arr=['apple','banana','orange']
  console.log(Array.from(arr.keys()));// (3) [0, 1, 2]
  console.log(Array.from(arr.values()));//(3) ['apple', 'banana', 'orange']
  console.log(Array.from(arr.entries()));//(3) [Array(2), Array(2), Array(2)]

复制和填充方法(copyWithin&fill)

fill填充方法

语法格式:

一个参数：数组名.fill(填充数)

两个参数：数组名.fill(填充数,最小索引值)

三个参数:数组名.fill(填充数,最小索引值,最大索引值)

举例：

      let oneFill = [0, 1, 2, 3, 4]
      let twoFill = [0, 1, 2, 3, 4]
      let threeFill = [0, 1, 2, 3, 4]
      oneFill.fill(5);
      console.log(oneFill); //(5) [5, 5, 5, 5, 5]
      twoFill.fill(6, 1)
      console.log(twoFill); //(5) [0, 6, 6, 6, 6]
      threeFill.fill(5, 2, 4)
      console.log(threeFill); //(5) [0, 1, 5, 5, 4]

copyWithin复制方法

浅复制自身数组索引，一共有三个参数，语法格式如下：

let arr=[0,1,2,3,4,5,6,7,8,9]
arr.copyWithin(5);//复制从索引为0的值开始，复制的位置在索引为5的值//0,1,2,3,4,0,1,2,3,4
let arr1=[0,1,2,3,4,5,6,7,8,9]
console.log(arr1);
arr1.copyWithin(2,4)//开始复制的位置是2，起始位置索引
console.log(arr1);//0,1,4,5,6,7,8,9,8,9
let arr2=[0,1,2,3,4,5,6,7,8,9]
console.log(arr2)
arr2.copyWithin(2,4,8)
console.log(arr2);//0,1,4,5,6,7,6,7,8,9
//被复制值，起始位置：4，结束位置：8，复制地点：2，如果没有结束位置，则一直复制到数组末尾。

转换方法(toLocalString,toString,join)

toLocalString和toString

它俩都是用于数组转换成字符串的方法。

toString() 方法返回一个表示数组元素的字符串，并使用逗号分隔每个元素。

默认情况下，toString()方法不会对数组元素进行任何格式化或本地化处理。

例如，对于数组 [1, 2, 3]，调用 toString() 方法将返回字符串 “1,2,3”。

toLocaleString() 方法将数组转换为一个本地化后的字符串，根据不同的语言环境可能有不同的输出。与 toString()

不同，toLocaleString() 对数组元素进行了本地化处理，根据语言环境应用相应的格式。

例如，在某些语言环境下，日期、时间和数字可能以特定的方式显示。 toLocaleString()

方法还接受一些可选参数，用于指定语言环境和格式选项。例如，对于日期数组 [new Date()]，调用 toLocaleString()

方法将返回日期的本地化字符串表示。

join

实现数组转字符串，还可以往每个元素中添加参数，来进行隔断，如join(‘,’)等

let arr=['red','green','yellow']
let str1=arr.join('')
let str2=arr.join(',')
console.log(str1+'\n'+str2);
//greenyellow
// red,green,yellow

栈方法(pop、push)

首先讲一下堆栈概念：堆栈是一种后进先出（Last-In-First-Out，LIFO）的数据结构。元素在堆栈的顶部进行插入和删除操作。

最后插入的元素始终位于堆栈的顶部，即最新的元素可被首先访问或移除。类似于现实生活中的一叠盘子，只能从顶部放入或取出。

常见的应用场景包括函数调用、表达式求值、撤销操作等。例如，浏览器的历史记录就可以看作是一个堆栈。.

js这两个方法类似于堆栈进行操作，pop就是释放最外层元素，push就是在最外层加一个元素。

let arr=['red','green','yellow']
arr.pop()
arr.push('blue')
console.log(arr);
// [
//     "red",
//     "green",
//     "blue"
// ]

队列方法（shift、push）

队列概念·

队列是一种先进先出（First-In-First-Out，FIFO）的数据结构。

元素在队列的尾部（末尾）进行插入，而从队列的头部（开头）进行删除。新元素被添加到队列的末尾，而最早添加的元素位于队列的开头。

类似于现实生活中排队等候的概念，先来先服务。常见的应用场景包括任务调度、消息传递等。例如，打印机队列就是一个典型的队列。

shift方法是在数组头部，进行释放动作，push是在数组末尾进行添加动作，这两个方法组合就变成了队列方法。

let arr=['red','green','yellow','pink']
arr.push('blue','black')
arr.shift()
console.log(arr);
// [
//     "green",
//     "yellow",
//     "pink",
//     "blue",
//     "black"
// ]

unshift

除了shift方法外，还有一个unshift方法，和shift方法相反，unshift方法主要做了往数组头部添加元素的动作。

排序方法(sort、reverse)

reverse翻转数组

通俗来说，把数组反过来，12345变成54321(,省略了)

let arr=['red','green','yellow','pink']
arr.reverse()
console.log(arr);
// [
//     "pink",
//     "yellow",
//     "green",
//     "red"
// ]

sort排序

sort默认是升序，把数组从小到大进行排序。

let arr=[5,4,2,6,3]
arr.sort()
console.log(arr);//(5) [2, 3, 4, 5, 6]

也可以通过箭头函数或者普通函数来进行降序或者复杂的动作。

let arr=[5,4,2,6,3]
arr.sort((a,b)=>b-a)
console.log(arr);//(5) [6, 5, 4, 3, 2]

操作方法(concat、slice、splice)

concat

concat主要是用于新数组的拼接以及数组拍平操作。

拍平有一个数组属性：

Symbol.isConcatSpreadAble

,这个属性可以控制数组是否被强制拍平，默认是true。

数组拼接

let arr1=[1,2,3]
let arr2=[9,8]
let arr3=arr1.concat(arr2)
console.log(arr3);//(5) [1, 2, 3, 9, 8]
arr2=arr2.concat(1,2)
console.log(arr2);//(4) [9, 8, 1, 2]
arr1=arr1.concat('yes','no')
console.log(arr1);//(5) [1, 2, 3, 'yes', 'no']
arr1=[4,5,6].concat(1)
console.log(arr1);//(4) [4, 5, 6, 1]
//拍平
      let arr=[1,2,3,4]
      let arrs=[2,3,4]
      let arra=[3,4,5]
      arrs[Symbol.isConcatSpreadable]=false;
      arra[Symbol.isConcatSpreadable]=true;
      console.log(arr.concat(arrs));//(5) [1, 2, 3, 4, Array(3)]
      console.log(arr.concat(arra));//(7) [1, 2, 3, 4, 3, 4, 5]

slice

切割原数组得到新数组的一个方法，可以传正负值。

let arr=[0,1,2,3,4]
console.log(arr.slice(1));//得到索引>1的新数组
//(4) [1, 2, 3, 4]
console.log(arr.slice(1,2));//得到索引>=1同时<2的新数组
//[1]

传负值，一般会从结束索引反推，比如上述数组，传值-2，-1，如果负数过大，则会返回空数组。

console.log(arr.slice(-2,-1));//[2]

splice（删除、添加、替换）

删除

let arr=[0,1,2,3,4];
//删除 语法格式[删除开始位置，删除截止位置]
console.log(arr.splice(0,2),arr);//(2) [0, 1] (3) [2, 3, 4]

添加

let arr=[0,1,2,3,4];
//添加 语法格式[开始位置，删除数量，添加内容....]
console.log(arr.splice(0,1,'red','blue'),arr);//[0] (6) ['red', 'blue', 1, 2, 3, 4]

替换

替换和添加是一样的语法格式，只不过替换是要先删除原有索引下的内容，然后替换成新的。

let arr=[0,1,2,3,4];
//添加 语法格式[开始位置，删除数量，替换内容....]
console.log(arr.splice(0,1,6),arr);//[0] (5) [6, 1, 2, 3, 4]

在上述代码中，0就被替换成6。

显式调用和隐式调用的区别

显式调用是指直接调用函数，如fun().隐式调用是指用对象下的方法，用对象进行调用，a.fun()等，属于隐式调用。

6. 显式调用要求直接使用函数名来调用函数，而隐式调用则需要通过对象的方法或属性来调用函数。

7. 显式调用可以在任何地方进行，而隐式调用必须通过对象来进行，因为函数和对象之间有关联。

8. 在隐式调用中，函数内部的 this 关键字会绑定到调用该函数的对象上，而显式调用则可以自由地指定 this 的值。

搜索和位置方法

按严格相等搜索是基于值的相等性进行比较，使用严格相等运算符（===）来查找数组中与指定值严格相等的元素，返回第一个或最后一个匹配项的索引。

按断言函数搜索是基于自定义条件进行比较，使用传入的断言函数对每个元素进行判断，返回满足条件的第一个元素或其索引。它允许根据特定的需求编写复杂的条件来搜索数组中的元素

严格相等搜索（indexOf、lastIndexOf、includes）

前两者为所有版本都可以使用，includes为ES7新出现的搜索方法。

lastIndexOf是从后往前搜索，而indexOf和includes是从前往后搜索。

includes查询Object或数组返回都是true\false，indexOf和lastIndexOf返回的都是索引位置或-1、

举例：

let arr=[0,1,2,3,4,4,3,2,1,0];
console.log(arr.indexOf(3),arr.indexOf(5));//3 -1
console.log(arr.lastIndexOf(3),arr.lastIndexOf(5));//6 -1
console.log(arr.includes(3),arr.includes(5));//true false

断言函数搜索（find、findIndex）

ES6新出现的断言函数.举例

let person=[
  {'name':'Jack',age:20},
  {'name':'Tom',age:21},
  {'name':'John',age:10}
]
console.log(person.find((item,index,array)=>item.age>18))
//{name: 'Jack', age: 20}
console.log(person.findIndex((item,index,array)=>item.age<18));
//2

前者返回值，后者返回索引，都是从数组头部开始判断，每个索引都调用这个函数，只返回第一个匹配的值。

迭代方法(every、filter、forEach、map、some)

every方法与some方法

    同：两个方法都返回true、false。
    异：every方法需要所有值都满足条件，才会返回true。
        some方法需要至少有一个值满足条件，返回true。

举例：

let person=[
  {'name':'Jack',age:20},
  {'name':'Tom',age:21},
  {'name':'John',age:10}
]
console.log(person.every((item)=>item.age>18));//false
console.log(person.some((item)=>item.age>18));//true

filter、map方法

同：新数组为返回值，原数组不发生改变。时间复杂度：O(n)

异： filter为条件筛选后的新数组。map为把数组中元素操作后的新数组。

举例：

let person=[
  {'name':'Jack',age:20},
  {'name':'Tom',age:21},
  {'name':'John',age:10}
]
let fil=person.filter(item=>{
  return item.age>18;
})
let ma=person.map(item=>{
  if(item.age>18){
    return item.age*2;
  }else return item.age;
})
console.log(fil,ma);
// {name: 'Jack', age: 20}
// {name: 'Tom', age: 21}
//(3) [40, 42, 10]

forEach方法

特点：

无返回值，时间复杂度O(n)，遍历数组并执行指定操作。

let person=[
  {'name':'Jack',age:20},
  {'name':'Tom',age:21},
  {'name':'John',age:10}
]
person.forEach(item=>{
  item.age++;
})
console.log(person);//age都加1

归并方法(reduce、reduceRight)

归并方法，用于将数组的元素聚合成单个值。

它接受一个回调函数作为参数，在每次迭代中将累加器和当前元素组合起来。

回调函数的返回值将成为下一次迭代的累加器值。最后将这个值作为返回值。

区别：reduce从第一项开始遍历，reduceRight从最后一项开始遍历

let red=[1,2,3,4,5];
console.log(red.reduce((rev,rep)=>rev-rep));//-13
//1-2-3-4-5=-13
console.log(red.reduceRight((rev,rep)=>rev-rep));//-5
//5-4-3-2-1=-5

Map、WeakMap、Set 类型

Map基本语法

通常使用 Map 数据结构来表示键值对的集合。

四大方法

get:获取map集合中的属性。

set:添加map集合中属性。

has:判断map集合是否有某个属性。

delete:删除map集合中的属性。

举例：

let a=new Map([
  ['name','key'],
  ['age',18]
])
console.log(a.get('name'));//key
a.set('animal','cat')
console.log(a.get('animal'));//cat
console.log(a.has('animal'));//true
console.log(a.delete('animal'),a.has('animal'));//true false

Map特性、Map与Object区别

特性

键可以是任何数据类型：在Map中，键可以是任何JavaScript的数据类型，包括原始类型（如字符串、数字等）和引用类型（如对象、函数等）。这使得Map在处理复杂数据结构时非常有用。

保持插入顺序：Map会记住元素插入的顺序，并按照插入顺序进行迭代。这在需要按顺序访问元素时非常有用。

动态大小：与数组不同，Map没有固定的长度限制。它可以根据需要自动扩展以容纳更多的元素。

区别

1.Map在内存占用可以比Object多存储50%的键值对。

2.插入性能Map较Object快。（Map使用哈希表）。

3.查找速度Object较快。

4.删除性能Map较Object强。因为Object需要用到垃圾回收机制。

weakMap

因为Map即使没有被引用也不会被垃圾回收。会出现内存泄漏的问题，但weakMap解决了这个问题，它如果没被引用，则会被回收，从而预防了内存泄漏的问题。

因为是Map的子集，所有Map的API它大多都可以调用。

它出现的价值有三点：

1.预防内存泄漏。

2.保持数据的隐私性：因为外部无法直接访问weakMap内部的键值。

缺点：

1.无法迭代 2.无法获取大小长度。3.键必须是对象类型，不能是原始类型。

Set

set是一种具有无序和唯一性的集合。无序是指，它的属性没有先后顺序之分，唯一是指，它定义的值，不能再次添加，接下来简单讲解一下它的四个方法和size属性。

语法格式：

let se=new Set();

add、delete、has方法|size属性

      let se=new Set([
        'val1','val2'
      ])
      se.add('val3').add('val4').add('val2')
      console.log(se);//Set(4) {'val1', 'val2', 'val3', 'val4'}
      let boo=se.has('val1')
      console.log(boo,se.size);//true
      console.log(se.delete('val1'),se.has('val1'),se.size);//true false 3
      se.clear();
      console.log(se.size);//0

上述代码中，add是用来添加set元素，可以多次添加，但是不能添加已有的属性值。

add添加，delete删除，has查询，clear删除所有元素，size查询当前集合长度。

顺序和迭代

使用keys、values或者[Symbol.iterator]属性可以迭代。

举例：

let se=new Set([
  'val1','val2'
])
for(item of se.values()){
  console.log(item);//val1 val2
}
for(item of se[Symbol.iterator]()){
  console.log(item);//val1 val2
}
for(item of se.keys()){
  console.log(item);//val1 val2
}

扩展操作符

[…]

let arr1 = [1, 2, 3]; 
let arr2 = [0, ...arr1, 4, 5]; 
console.log(arr2);//(6) [0, 1, 2, 3, 4, 5]

总结

林林总总写了一星期，map和set那里写的很少，只讲了基本用法。那么好，本期内容到此结束。

JavaScript红宝书第6章：集合引用类型