2024前端面经八股文—JavaScrip篇（万字总结、持续更新！！！）

JavaScript前端面经

基础知识：

数据类型：

1. 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
2. 引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

---

模板字符串( )：

​ 作用：允许你在字符串中嵌入表达式和变量。

​ 使用变量：包含在 ${} 内部，并在运行时求值

---

严格模式 use strict： 目的是指定代码在严格条件下执行

​ 特点：

​ 保留关键字；禁止this关键字指向全局对象；不允许对只读属性赋值；不允许删除函数；不允许删除变量或对象；不允许使用未声明的变量等

---

重点 this：

this指向总结

• 在方法中，this 表示该方法所属的对象。

• 如果单独使用，this 表示全局对象。

• 在函数中，this 表示全局对象。

• 在函数中，在严格模式下，this 是未定义的(undefined)。

• 在事件中，this 表示接收事件的元素。

• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

Promise

1. 理解：

   Promise 是一种为了避免回调地狱的异步解决方案，目的是更加优雅地书写复杂的异步任务。

2. Promise创建

   new Promise(function (resolve, reject) { // 要做的事情... });

   • resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
   • resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

3. Promise 对象有以下两个特点:

   1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

   • pending: 初始状态，不是成功或失败状态。
   • fulfilled: 意味着操作成功完成。
   • rejected: 意味着操作失败。

   2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。

4. Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

   1. then：用于处理 Promise 成功状态的回调函数。
   2. catch：用于处理 Promise 失败状态的回调函数。
   3. finally：无论 Promise 是成功还是失败，都会执行的回调函数。

5. 什么时候适合使用Promise而不是传统回调函数？

   答：当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

---

ES6新特性：

1. 箭头函数：(参数) => { 执行的操作 }

   特点：

   1、语法更加简洁、清晰
   2、箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。
   3、箭头函数继承而来的this指向永远不变
   4、.call()/ .apply()/ .bind()无法改变箭头函数中this的指向
   5、箭头函数不能作为构造函数使用
   6、箭头函数没有自己的arguments，可以在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表
   7、箭头函数没有原型prototype
   8、箭头函数不能用作Generator函数，不能使用yeild关键字
   9、箭头函数不具有super，不具有new.target

   与普通函数的区别：

   • 箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this，

   • 箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象

   • 不能通过new关键字调用，同样也没有new.target值和原型

---

1. let与const关键字：

   • let 声明的变量只在 let 命令所在的代码块内有效。

   • const 声明一个只读的常量，一旦声明，常量的值就不能改变。

   let与var区别：

   • var在全局范围内有效：全局作用
   • var可以声明多次：var a = 1, var a =2
   • var会提升变量： console.log(b); var b = "后声明"

   

---

1. **解构赋值：**解构赋值是对赋值运算符的扩展。

   • 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
   • 解构模型：
     1. 解构的源，解构赋值表达式的右边部分。
     2. 解构的目标，解构赋值表达式的左边部分。

   举例：

   let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3

---

1. async 和 await：

   • **async **是 ES7 才有的与异步操作有关的关键字

   语法：async function name([param[, param[, ... param]]]) { statements }

   返回值：async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

   async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

   **await **操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

   语法：[return_value] = await expression(一个Promise对象或者任意要等待的值）;

2. ES6 新增了模块化(import/export)

问题

1.null 和 undefined 的区别？

• undefined 表示一个变量没有被声明，或者被声明了但没有被赋值（未初始化），一个没有传入实参的形参变量的值为undefined，如果一个函数什么都不返回，则该函数默认返回undefined。

• null 则表示"什么都没有"，即"空值"。Javascript将未赋值的变量默认值设为 undefined ；Javascript从来不会将变量设为 null 。. 它是用来让程序员表明某个用var声明的变量时没有值的；

---

2.数据类型存储以及堆栈内存是什么？

基本数据类型：直接存储在栈内存中，占据空间小，大小固定，属于被频繁使用的数据。

引用数据：类型将指针存在栈中，将值存在堆中。 当我们把对象值赋值给另外一个变量时，复制的是对象的指针，指向同一块内存地址

---

== 与 ===区别？

=== 属于严格判断，直接判断两者类型是否相同，如果两边的类型不一致时，不会做强制类型准换，不同则返回false如果相同再比较大小，不会进行任何隐式转换对于引用类型来说，比较的都是引用内存地址，所以===这种方式的比较，除非两者存储的内存地址相同才相等，反之false

== 二等表示值相等。判断操作符两边对象或值是否相等类型可以不同，如果两边的类型不一致，则会进行强制类型转化后再进行比较

---

4.什么是事件？

• 事件是文档和浏览器窗口中发生的特定的交互瞬间，事件就发生了。

​ 一是直接在标签内直接添加执行语句，

​ 二是定义执行函数。

​ addeventlistener 监听事件

​ 事件类型分两种：事件捕获、事件冒泡。

• 事件捕获就是：网景公司提出的事件流叫事件捕获流，由外往内，从事件发生的顶点开始，逐级往下查找，一直到目标元素。

• 事件冒泡：IE提出的事件流叫做事件冒泡就是由内往外，从具体的目标节点元素触发，逐级向上传递，直到根节点。

• 事件委托： 利用事件冒泡，把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了

• 自定义事件

自定义事件，就是自己定义事件类型，自己定义事件处理函数。

5.防抖与节流？

1. 防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

   实现：setTimeout

2. 节流：是指连续触发事件但是在 n 秒中只执行一次函数

   实现：时间戳 / 定时器

---

6.深拷贝与浅拷贝的区别？

1. 深拷贝：

   • 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
   • 深拷贝就是把一个对象，从内存中完整的拷贝出来，从堆内存中开辟了新区域，用来存新对象，并且修改新对象不会影响原对象

2. 浅拷贝：

   • 将原对象或原数组的引用直接赋给新对象，新数组，新对象只是对原对象的一个引用，而不复制对象本身，新旧对象还是共享同一块内存
   • 如果属性是一个基本数据类型，拷贝就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址

---

7.立即执行函数(IIFE)和函数闭包？

1. 立即执行函数：( function( ){ })( ) 因为在 javascript 里，括号内部不能包含语句，当解析器对代码进行解释的时候，先碰到了()， 然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。

   作用：立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量。

2. 闭包：闭包就是能够读取其他函数内部变量的函数。

   function f1(){ var n=999; function f2(){ alert(n); // 999 } }

f2 可以读取 f1 中的局部变量，那么只要把 f2 作为返回值，可以在 f1 外部读取它的内部变量了

• 用途：可以读取函数内部的变量；让这些变量的值始终保持在内存中，不会在 f1 调用后被自动清除。
• 缺点：
  • 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
  • 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值

---

垃圾回收机制和内存机制

• 垃圾回收机制：自动内存管理机制，垃圾收集器会定期的找出那些不在继续使用的变量，然后释放内存。

  常见垃圾回收机制：

  • 标记清除：最常用的垃圾回收算法之一。当变量进入环境（函数中声明一个变量）时，它被标记为进入环境。当变量离开环境时（函数执行结束），它被标记为离开环境。垃圾回收器会定期检查所有变量，并清除被标记为“离开环境”的变量
  • 引用计数：跟踪每个值被引用次数，当一个值的引用次数变为零时，说明没有任何代码在使用它，垃圾回收会释放该值所占内存。容易出现循环引用问题，导致内存泄漏

• **内存泄漏：**不再使用的变量，它们所占用的内存 不去清除的话就会造成内存泄漏

---

JS延迟加载的方式

1.把JS放在页面的最底部

2.script标签的defer属性：脚本会立即下载但延迟到整个页面加载完毕再执行。该属性对于内联脚本无作用 (即没有 「src」 属性的脚本）。

3.是在外部JS加载完成后，浏览器空闲时，Load事件触发前执行，标记为async的脚本并不保证按照指定他们的先后顺序执行， 该属性对于内联脚本无作用 (即没有 「src」 属性的脚本）。

4.动态创建script标签，监听dom加载完毕再引入js文件

---

同步和异步的区别？各举一个Js中同步和异步的案例？

​ 同步：上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会做下一件事情。下面代码会等待上面 同步代码执行完毕

​ 异步： 规划要做一件事情,如果是异步事情，不是当前立马去执行这件事情，需要等一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作。下面代码不会等待上面异步代码执行完毕

对于写程序，同步往往会阻塞，没有数据过来，我就等着，异步则不会阻塞，没数据来我干别的事，有数据来去处理这些数据。

同步案例：for循环语句，alert(),console.log()等 js大部分都是同步编程

异步案例：所有定时器，ajax异步请求，所有的事件绑定都是异步;

---

setTimeout与setInterval区别与机制：

​ setTimeout()和setInterval()经常被用来处理延时和定时任务。

​ setTimeout() ：方法用于在指定的毫秒数后调用函数或计算表达式

​ setInterval()：则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。

---

js 的几种模块规范？

• 第一种是 CommonJS 方案，它通过 require 来引入模块，通过 module.exports 定义模块的输出接口。这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。
• 第二种是 AMD 方案，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范。
• 第三种是 CMD 方案，这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同。
• 第四种方案是 ES6 提出的方案，使用 import 和 export 的形式来导入导出模块。

---

require与import的区别和使用(CommonJS规范和es6规范)

​ 1、import是ES6中的语法标准也是用来加载模块文件的，import函数可以读取并执行一个JavaScript文件，然后返回该模块的export命令指定输出的代码。export与export default均可用于导出常量、函数、文件、模块，export可以有多个，export default只能有一个。

2、require 定义模块：module变量代表当前模块，它的exports属性是对外的接口。通过exports可以将模块从模块中导出，其他文件加载该模块实际上就是读取module.exports变量，他们可以是变量、函数、对象等。在node中如果用exports进行导出的话系统会系统帮您转成module.exports的，只是导出需要定义导出名。

require与import的区别

​ 1，require是CommonJS规范的模块化语法，import是ECMAScript 6规范的模块化语法；

​ 2，require是运行时加载，import是编译时加载；

​ 3，require可以写在代码的任意位置，import只能写在文件的最顶端且不可在条件语句或函数作用域中使用；

​ 4，require通过module.exports导出的值就不能再变化，import通过export导出的值可以改变；

​ 5；require通过module.exports导出的是exports对象，import通过export导出是指定输出的代码；

​ 6，require运行时才引入模块的属性所以性能相对较低，import编译时引入模块的属性所所以性能稍高。

---

target 和 currentTarget 区别

• 都是事件对象上的属性
• event.target：返回触发事件的元素
• event.currentTarget：返回绑定事件的元素(相当于事件中this)

---

prototype 和 proto 的关系是什么

• prototype: 所有函数都会有一个prototype属性, 它就是函数的原型对象
• proto: 所有实例对象上都会有一个proto属性, 它等同于函数的原型对象

原型和原型链

• **原型：**portoType这个属性就是函数的原型
• **原型链：**1.所有对象都有原型，而原型本身就是对象，所以原型也有自己的原型对象，就形成原型链
• 如果对象本身没有属性，则就会去原型链上去找
• Object原型对象的原型值为null

---

new操作符具体做了什么？

1. 在内存创建一个新对象
2. 把构造函数中this指向新建的对象
3. 会在新对象上添加一个__proto__属性,指向函数的原型对象prototype
4. 判断函数返回值,如果值是引用类型就直接返回值；否则返回this(创建的新对象)

---

什么是AJAX？如何实现？

• ajax是一种能够实现网页局部刷新的技术，可以使网页异步刷新。
• ajax的实现主要包括四个步骤：

​ （1）创建核心对象XMLhttpRequest；

​ （2）利用open方法打开与服务器的连接；

​ （3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）

​ （4）监听服务器响应，接收返回值。

---

Javascript 作用域链?

• 如果当前作用域没有找到属性或方法，会向上层作用域查找，
  直至全局函数，这种形式就是作用域链

---

为什么 JS 是单线程, 而不是多线程 [常考]

• 单线程是指 JavaScript 在执行的时候，有且只有一个主线程来处理所有的任务。
• 目的是为了实现与浏览器交互。
• 我们设想一下，如果 JavaScript 是多线程的，现在我们在浏览器中同时操作一个
  DOM，一个线程要求浏览器在这个 DOM 中添加节点，
  而另一个线程却要求浏览器删掉这个 DOM 节点，
  那这个时候浏览器就会很郁闷，他不知道应该以哪个线程为准。
  所以为了避免此类现象的发生，降低复杂度，JavaScript
  选择只用一个主线程来执行代码，以此来保证程序执行的一致性。

---

说一下call、apply、bind三者的作用 与 区别

• **作用：**三者的作用都是可以改变函数的this指向(function对象自带的方法)
• **区别：**1.call、apply会直接调用原函数，bind不会直接调用函数，而会拷贝一份返回一个新函数
• call、bind传参时一个个传入，而apply是把所有参数放到一个数组中传入

---

请说出三种减低页面加载时间的方法

• 压缩css、js文件
• 合并js、css文件，减少http请求(精灵图)
• 外部js、css文件放在最底下
• 减少dom操作，尽可能用变量替代不必要的dom操作

---

什么是重写，什么是重载？

• 重写：子类覆盖掉从父类继承过来的方法
• 重载：有多个同名的方法，但是参数列表不一样

​ 重写就是子类覆盖掉父类的方法

​ 重载就是在一个类里面，方法名字相同，而参数不同。

​ 返回类型可以相同也可以不同。

---

continue 与 break的区别

• continue：跳过本次循环，直接进入下一次循环
• break：直接终止循环

---

session 与 cookie 的区别

• session 保存在服务器，客户端不知道其中的信息；
• cookie 保存在客户端，服务器能够知道其中的信息。
• session 中保存的是对象，cookie 中保存的是字符串。
• session 不能区分路径，同一个用户在访问一个网站期间，所有的 session 在任何一个地方都可以访问到。
• 而 cookie 中如果设置了路径参数，那么同一个网站中不同路径下的 cookie 互相是访问不到的。

---

cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制 ?

• cookies 是一些存储在用户电脑上的小文件。
• 它是被设计用来保存一些站点的用户数据，这样能够让服务器为这样的用户定制内容，后者页面代码能够获取到 cookie 值然后发送给服务器。
• 比如 cookie 中存储了所在地理位置，以后每次进入地图就默认定位到改地点即可。

---

请描述一下 cookies，sessionStorage 和 localStorage 的区别

共同点

• 都是保存在浏览器端，且同源的。

区别

• cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。
• 而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
• cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下。
• 存储大小限制也不同，cookie 数据不能超过 4k，同时因为每次 http 请求都会携带 cookie，所以 cookie 只适合保存很小的数据，如会话标识。
• sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域不同，sessionStorage 在不同的浏览器窗口中不共享，即使是同一个页面；cookie 和 localStorage 在所有同源窗口中都是共享的。

---

验证码是干嘛的，是为了解决什么安全问题。

所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片， 图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

• 验证码一般是防止批量注册的，人眼看起来都费劲，何况是机器。
• 像百度贴吧未登录发贴要输入验证码大概是防止大规模匿名回帖的发生。
• 目前，不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。

---

性能优化

web 前端是应用服务器处理之前的部分，前端主要包括：HTML、CSS、javascript、image 等各种资源，针对不同的资源有不同的优化方式。

内容优化

• 减少 HTTP 请求数。这条策略是最重要最有效的，因为一个完整的请求要经过 DNS 寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。 常见方法：合并多个 CSS 文件和 js 文件，利用 CSS Sprites 整合图像，Inline Images (使用 data：URL scheme 在实际的页面嵌入图像数据 )，合理设置 HTTP 缓存等。
• 减少 DNS 查找
• 避免重定向
• 使用 Ajax 缓存
• 延迟加载组件，预加载组件
• 减少 DOM 元素数量。页面中存在大量 DOM 元素，会导致 javascript 遍历 DOM 的效率变慢。
• 最小化 iframe 的数量。iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括 JavaScript 和 CSS 的 DOM 元素的创建慢了 1-2 个数量级。
• 避免 404。HTTP 请求时间消耗是很大的，因此使用 HTTP 请求来获得一个没有用处的响应（例如 404 没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

服务器优化

• 使用内容分发网络（CDN）。把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
• GZIP 压缩
• 设置 ETag：ETags（Entity tags，实体标签）是 web 服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
• 提前刷新缓冲区
• 对 Ajax 请求使用 GET 方法
• 避免空的图像 src

Cookie 优化

• 减小 Cookie 大小
• 针对 Web 组件使用域名无关的 Cookie

CSS 优化

• 将 CSS 代码放在 HTML 页面的顶部
• 避免使用 CSS 表达式
• 使用 < link> 来代替 @import
• 避免使用 Filters

javascript 优化

• 将 JavaScript 脚本放在页面的底部。
• 将 JavaScript 和 CSS 作为外部文件来引用。 在实际应用中使用外部文件可以提高页面速度，因为 JavaScript 和 CSS 文件都能在浏览器中产生缓存。
• 缩小 JavaScript 和 CSS
• 删除重复的脚本
• 最小化 DOM 的访问。使用 JavaScript 访问 DOM 元素比较慢。
• 开发智能的事件处理程序
• javascript 代码注意：谨慎使用 with，避免使用 eval Function 函数，减少作用域链查找。

图像优化

• 优化图片大小
• 通过 CSS Sprites 优化图片
• 不要在 HTML 中使用缩放图片
• favicon.ico 要小而且可缓存

---

什么是CDN？

CDN（Content Delivery Network）是内容分发网络的缩写，它是一组位于全球不同地理位置的服务器群集，旨在更快、更可靠地传输互联网上的内容给用户。CDN的主要目的是通过将内容缓存在离用户更近的服务器上，从而提高网站的性能和用户体验。

在CDN中，当用户请求访问一个网站时，CDN会根据用户的地理位置，选择距离用户最近的服务器来响应请求。这样做有以下几个优点：

1. 加速网站访问速度：CDN可以缓存网站的静态资源（如图片、视频、CSS、JavaScript等），使这些资源可以更快地加载，从而提升网站的访问速度。

2. 减轻源服务器负载：CDN可以分担源服务器的负载压力，因为部分请求会由CDN节点来处理，减少源服务器的压力，提高网站的稳定性和可靠性。

3. 提高全球访问速度：由于CDN节点分布在全球各地，用户无论身处何地，都可以通过最近的CDN节点获取内容，减少网络延迟，提高访问速度。

4. 增强安全性：CDN可以提供一定程度的安全防护，例如DDoS攻击防护、SSL加密等，保护网站免受恶意攻击。

总的来说，CDN通过在全球各地建立节点，并缓存网站内容到这些节点上，实现了更快、更稳定的内容传输，从而提升了网站的性能和用户体验。许多大型网站和应用程序都使用CDN来改善其服务的性能和可靠性。

---

方法

Object的方法：

Object.is() 是一种判断两个值是否相同的方法。
语法：Object.is(value1, value2);
参数：value1：要比较的第一个值。value2：要比较的第二个值。
返回值：一个布尔表达式，指示两个参数是否具有相同的值。

Object.assign() 方法用于将所有可枚举的自身属性从一个或多个源对象复制到目标对象。
语法：Object.assign(target, ...sources)
参数：target：目标对象——应用源属性的对象，修改后返回。sources：源对象——包含你要应用的属性的对象。
返回值：修改后的目标对象。

Object.entries() ES8的Object.entries是把对象转成键值对数组， [key, value] 对的数组。
语法：Object.entries(obj)
参数：obj：要返回其自己的可枚举字符串键属性 [key, value] 对的对象。返回值：给定对象自己的可枚举字符串键属性 [key, value] 对的数组。
Object.fromEntries则相反，是把键值对数组转为对象
 
Object.values() 方法返回给定对象自己的可枚举属性值的数组，其顺序与 for...in 循环提供的顺序相同。
语法：Object.values(obj)
参数：obj：要返回其可枚举自身属性值的对象。返回值：包含给定对象自己的可枚举属性值的数组。

---

数组的方法：

1、sort( )：sort 排序 如果下面参数的正反 控制 升序和降序 ，返回的是从新排序的原数组
2、splice( )：向数组的指定index处插入 返回的是被删除掉的元素的集合，会改变原有数组；截取类 没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的 数组，原数组改变；两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的 数组，原数组改变；三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。会改变原数据
3、pop( )：从尾部删除一个元素 返回被删除掉的元素，改变原有数组。
4、push( )：向数组的末尾追加 返回值是添加数据后数组的新长度，改变原有数组。
5、unshift( )：向数组的开头添加 返回值是添加数据后数组的新长度，改变原有数组。
6、shift( )：从头部删除一个元素 返回被删除掉的元素，改变原有数组。
7、reverse( )： 原数组倒序  它的返回值是倒序之后的原数组
8、concat( )：数组合并。
9、slice( )：数组元素的截取，返回一个新数组，新数组是截取的元素，可以为负值。从数组中截取，如果不传参，会返回原数组。如果只传入一个参数，会从头部开始删除，直到数组结束，原数组不会改变；传入两个参数，第一个是开始截取的索引，第二个是结束截取的索引，不包含结束截取的这一项，原数组不会改变。最多可以接受两个参数。
10、join( )：讲数组进行分割成为字符串  这能分割一层在套一层就分隔不了了
11、toString( )：数组转字符串；
12、toLocaleString( )：将数组转换为本地数组。
13、forEach( )：数组进行遍历；
14、map( )：没有return时，对数组的遍历。有return时，返回一个新数组，该新数组的元素是经过过滤(逻辑处理)过的函数。
15、filter( )：对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组。
16、every( )：当数组中每一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
17、some( )：当数组中有一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
18、reduce( )：回调函数中有4个参数。prev（之前计算过的值），next（之前计算过的下一个的值），index，arr。把数组列表计算成一个
19.isArray() 判断是否是数组
20. indexOf  找索如果找到了就会返回当前的一个下标，若果没找到就会反回-1
21. lastIndexOf 它是从最后一个值向前查找的 找索如果找到了就会返回当前的一个下标，若果没找到就会反回-1
22. Array.of() 填充单个值
23. Array.from() 来源是类数组

字符串的方法

1、chartAt( )：返回在指定位置的字符；
2、concat( )：返回新的字符串**，将一个或多个字符串与原字符串连接合并
3、indexOf( )：检索字符串，返回第一次出现的索引，没有出现则为-1
4、lastIndexOf(searchValue[ fromIndex]) 返回从字符串尾部开始第一次出现的索引，没有则-1，fromIndex的值相对于从尾部开始的索引
5、split( )：返回一个以指定分隔符出现位置分隔而成的一个数组，数组元素不包含分隔符
6、substr( )：从起始索引号提取字符串中指定数目的字符；
7、substring( )：提取字符串中两个指定的索引号之间的字符；
8、toLowerCase( )：字符串转小写；
9、toUpperCase( )：字符串转大写；
10、valueOf( )：返回某个字符串对象的原始值； 
11、trim( )：删除字符串两边的空格；
12、trimeState 取出开始的空格
13、trimeEnd  去除末尾空格
14、includes(searchString[, position])返回boolean，判断一个字符串是否包含在另一个字符串中，从postition索引开始搜寻，默认0
15、slice( )：提取字符串片段，并在新的字符串中返回被提取的部分；
16、search(regexp)返回首次匹配到的索引，没有则-1，执行正则表达式和 String 对象之间的一个搜索匹配
17、toString()返回一个表示调用对象的字符串，该方法返回指定对象的字符串形式
18、trim()返回去掉两端空白后的新字符串 还有trimend trimstart
19、replace() 把指定的字符串替换成为别的字符