[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂

简介: 本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635463
出自【进步*于辰的博客

参考笔记一,P10.4、P13.2;笔记三,P48.1。

先言

  1. 下文所列举函数可能隶属ES5或ES6(特别是数组相关函数),我列举的是一些常用函数,并且一些“成对”函数我不会列举,如:lastIndexOf()(PS:一般情况下,lastIndexOf()会与indexOf()共同存在)。
  2. 诸如函数的学习与使用,建议大家查看源码,稍作测试便可掌握。

    1、通用函数

    | 摘要 | 参数说明 | 返回值类型/返回值 | 说明 |
    | --------------- | -------- | ----------------- | ------------------------------------------------------------ |
    | parseInt(str) | | | 将字符串中的数字部分转换成数字,以字符截止。可用于去除小数。若首字符不是数字,得NaN |
    | Number(str) | | | 将字符串转换成数字。若字符串中包含非数字,得NaN |
    | str.slice(i) | | | 截取字符串 |
    | eval(str) | | | 将字符串作为js脚本执行 |
    | type(a) | | | 返回变量类型。同指令type a |

2、Global对象函数

摘要 参数说明 返回值类型/返回值 说明
encodeURI(url) 对URL进行编码。作用对象:不属于URI的特殊字符,如:特殊符号、汉字
encodeURIComponent(url) 对URL进行编码。作用对象:任何非标准字符(即非字母)
decodeURI(url) 对URL进行解码。作用对象:不属于URI的特殊字符,如:特殊符号、汉字
decodeURIComponent(url) 对URL进行解码。作用对象:任何非标准字符(即非字母)

示例。

var url = 'https://blog.csdn.net/m0_69908381?type=blog&name=进步*于辰'
var enurl1 = encodeURI(url)
var enurl2 = encodeURIComponent(url)
console.log(enurl1)
console.log(enurl2)

var deurl1 = decodeURI(enurl1)
console.log(deurl1)
var deurl2 = decodeURIComponent(enurl2)
console.log(deurl2)

打印结果:
在这里插入图片描述

3、数组相关函数

参考笔记二,P9.4~8、P41.5;笔记三,P48.7、P12.3。

摘要 参数说明 返回值类型/返回值 说明
Array.of(a,b,...) 类似Java中的Arrays.asList()
Array.from(obj) obj 可以是数组、对象 将 obj 按照一定规则转化成数组
for(let i in arr) i 是下标,不是元素。arr 可以是数组或对象 加强for
for(let e of arr) e-元素。arr 只能是数组 加强for
arr.forEach((e, i) => {}) e-元素,i-下标 遍历数组
arr.indexOf(a) a-查找元素 返回匹配的第一个元素的下标,找不到返回-1
arr.findIndex(item => {}) item-数组元素 返回满足条件的第一个元素的下标,找不到返回-1
arr.find(item => {}) item-数组元素 返回满足条件的第一个元素,条件由函数内自定义,找不到返回undefined
arr.copyWithin(a, b, c) a-目标开始位置,b-开始位置,c-结束位置 arr 将arr中,[b,c)的元素复制到arr的a处

3.1 arr.find(item => {})

业务:返回满足条件的第一个元素,条件由函数内自定义。遍历时以true(满足条件)作为结束,若数组中无满足条件的元素或使用了return false,返回undefined。(注:item 是数组元素,遍历时作为参数传入函数,并作为返回值)

1:查找普通数组。

let arr = Array.of(10, 20, 30)
let e = arr.find(item => {
   
    return item > '10'
})
console.log(e);// 20

可见,JS中在比较时忽略数据类型。

2:查找对象数组。

var platform = [{
   
    id: 1,
    name: 'C站'
}, {
   
    id: 2,
    name: 'B站'
}]

var e = platform.find(item => {
   
    if(item.id == '1')
        return true
})
console.log(e)// { id: 1, name: 'C站' }

e = platform.find(item => {
   
    if (item.id == '1')
        return false
})
console.log(e)// undefined

3.2 Array.from(obj)

1:转化数组。

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

2:转化对象。

let obj = {
   
    id: 1,
    name: 'yc'
}
obj = Array.from(obj)
console.log(obj);// []

obj = {
   
    0: 1,
    1: 'yc',
    length: 2
}
obj = Array.from(obj)
console.log(obj);// [ 1, 'yc' ]

由于数组的打印结果与对象相似,在满足以下两个条件的情况下,Array.from()可将对象转化成数组:

  1. 对象属性名改为下标;
  2. 添加属性length,值为属性数。

满足条件的对象一般称为“对象数组”。

3:转化标签数组。

有5个按钮:
在这里插入图片描述
获取并遍历:

let tags = document.getElementsByTagName('button')
for(let i in tags)
    console.log(tags[i])

打印结果:
在这里插入图片描述
可见,多出了最后两个“额外”信息,这是标签数组本身自带的,与遍历无关。可是,若遍历中存在“标签操作”(如:设置标签属性),则会报错。

解决方案:

let tags = document.getElementsByTagName('button')
tags = Array.from(tags)
for(let i in tags)
    console.log(tags[i])

打印结果:在这里插入图片描述

这样就可以去掉“额外”信息。

3.3 arr.copyWithin(a, b, c)

示例:

let arr1 = Array.of(2, 3, 4, 5, 6)
arr1.copyWithin(1, 3, 5)
console.log(arr1)// [ 2, 5, 6, 5, 6 ]
let arr1 = Array.of(2, 3, 4, 5, 6)
arr1.copyWithin(1, 3, 4)
console.log(arr1)// [ 2, 5, 4, 5, 6 ]

最后

暂无言。

本文持续更新中。。。

相关文章
|
24天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
26天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
46 2
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
20 2
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
25 5
|
2月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
24 3
|
2月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
19 3
|
2月前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
30 2