一文带你了解实战常用 JavaScript API

Object.keys()

获取一个对象的所有 key，返回值为数组.它会遍历 所有的可枚举属性名 。

const objInfo = {    gzh: '公众好:前端自学社区',    author: 'HaiJun',    stack: 'Fond End'}
console.log(Object.keys(objInfo)) //[ 'gzh', 'author', 'stack' ]

Object.values()

获取一个对象的 value ， 返回值为数组

console.log(Object.values(objInfo)) //[ '公众好:前端自学社区', 'HaiJun', 'Fond End' ]

Object.assign()

Object.assign() 方法将多个对象的属性进行合并，返回一个新对象。其中第一个参数是目标对象，在合并时，源对象的属性将覆盖目标对象中同名属性的值。

const objInfo = {    gzh: '公众好:前端自学社区',    author: 'HaiJun',    stack: 'Fond End'}

const dataInfo = {    title: '前端从入门到放弃 😄'}

console.log(Object.assign({},objInfo,dataInfo))
// {//     gzh: '公众好:前端自学社区',//     author: 'HaiJun',//     stack: 'Fond End',//     title: '前端从入门到放弃 😄'// }

Object.defineProperty()

它是用来对目标对象的指定属性进行定义或修改。 它有三个必须参数：

1. obj：必选参数，被操作的对象。

2. prop：必选参数，要操作或者定义的属性的名称。

3. descriptor：必选参数，描述符对象，包括属性的特性，可取值为：value、writable、enumerable、configurable、get、set。

descriptor 中可用的属性有：

1. value：属性值。默认为 undefined。

2. writable：是否可以修改属性的值。默认为 false。

3. enumerable：是否可以枚举该属性。默认为 false。

4. configurable：是否可删除和改变属性的特性。默认为 false。

5. get：访问该属性时的 getter 函数。默认为 undefined。

6. set：访问该属性时的 setter 函数。默认为 undefined。

一般情况下，我们改变的 descriptor 值不是所有参数都要修改的，所以该方法参数也支持简写形式，只指定要变化的属性即可，未指定则会使用默认值。

const personInfo = {}
Object.defineProperty(personInfo,'name',{value: 'HaiJun'})
console.log(personInfo)//{name: 'HaiJun'}

indexOf() 查找字符首次出现的索引

返回一个指定值在字符串中首次出现的位置。如果没有找到匹配项，返回 -1。

const str = "hello world";const pos = str.indexOf("world");console.log(pos); // 6

lastIndexOf() 查找字符最后一次出现的索引

返回一个指定值在字符串中最后一次出现的位置。如果没有找到匹配项，返回 -1。

const str = "hello world";const pos = str.lastIndexOf("o");console.log(pos); // 7

search() 返回字符首次出现的索引,可以使用正则匹配

返回一个指定值在字符串中首次出现的位置。如果没有找到匹配项，返回 -1。与 indexOf() 的不同之处是，它可以接受正则表达式作为参数。

const str = "hello world";const pos = str.search(/world/);console.log(pos); // 6

match() 正则匹配字符，返回数组

在字符串中检索指定的值。如果找到一个或多个匹配项，则返回一个数组，其中包含该匹配项。未找到匹配项，则返回 null。与 search() 的不同之处是，它可以接受正则表达式作为参数，并且可以返回多个匹配项。

const str = "hello world";const matches = str.match(/l/g);console.log(matches); // ["l", "l", "l"]

replace() 替换字符，也可以使用正则

在字符串中用一些字符替换另一些字符。如果有多个匹配项，只替换首个匹配项。可以使用正则表达式或字符串作为参数。

const str = "hello world";const result = str.replace("world", "earth");console.log(result); // "hello earth"

split() 字符串分割为字符串数组，也可以使用正则

将字符串分割成字符串数组。可以使用正则表达式或字符串作为分隔符。

const str = "hello,world";const arr = str.split(",");console.log(arr); // ["hello", "world"]

Window 常用 API

window 是浏览器的全局对象，常用属性如下：

1. window.innerHeight：窗口的内部高度，即可视区域高度，不包括工具栏、标签栏等。

2. window.innerWidth：窗口的内部宽度，即可视区域宽度，不包括滚动条等。

3. window.outerHeight：窗口的外部高度，包括浏览器工具栏、标签栏和滚动条等。

4. window.outerWidth：窗口的外部宽度，包括浏览器工具栏、标签栏和滚动条等。

5. window.location.href：当前页面的 URL 地址。

6. window.location.hostname：当前域名。

7. window.location.pathname：当前页面的路径。

8. navigator.userAgent：包含客户端浏览器的信息。

9. navigator.vendor：浏览器的开发商名字。

10. screen.width：屏幕宽度。

11. screen.height：屏幕高度。

Math 常用 API

1. Math.abs()：返回一个数的绝对值。

2. Math.ceil()：向上取整，返回大于或等于参数的最小整数。

3. Math.floor()：向下取整，返回小于或等于参数的最大整数。

4. Math.max()：返回多个参数中的最大值。

5. Math.min()：返回多个参数中的最小值。

6. Math.pow()：返回一个数的指数值。

7. Math.round()：四舍五入算法，返回一个数最接近的整数。

8. Math.sqrt()：返回一个数的平方根。

9. Math.random()：返回一个带有浮点数的伪随机数，范围在 0（包括）到 1（不包括）之间。

10. Math.floor(Math.random() * n)：返回一个 0 到 n-1 的随机整数。

在 JavaScript 中常用的保留小数的 API 如下：

• toFixed(n)：将数字保留 n 位小数，返回字符串类型结果。 （2.289).toFixed(2) === > 2.29

• toPrecision(n)：按照指定数字长度格式化数字，返回字符串类型结果.(666.231).toPrecision(3) => 666

• parseFloat(): 将字符串解析为浮点数，如果有小数部分则保留小数，如果没有小数部分则返回整数。 parseFloat('2.15') ===> 2.15

• **Number.toFixed(n): 将数字保留 n 位小数并返回数值结果。 **