【Web】0基础学Web—函数、箭头函数、函数闭包、函数参数、js作用域、字符串

函数

function 函数名(形参){
函数体
return val //只能return一个值
}

函数声明

<script>
function add(a, b) {
    return a + b
}
let a = 10, b = 20
let c = add(a, b)
console.log(c)
</script>

函数调用函数

<script>
function add2(a, b, c) {
    return add(a, b) + c
}
console.log(add2(1, 2, 3))
</script>

事件调用函数

<script>
function show(num) {
    for (let i = 0; i < num; i++) {
        console.log('hello')
    }
}
</script>

匿名函数

<script>
function test(a,b){
    console.log(a-b)  
}
test(10,5)
let test=function(a,b){
    console.log(a-b)
}
</script>

立即执行函数

立即执行函数的末尾必须加’ ；’

<script>
(function (a, b) {
    console.log(a - b)
})(10, 5);
+function (a, b) {
    console.log(a + b)
}(10, 5);
</script>

箭头函数

(形参列表)=>{
函数体
return 值
}
如果形参只有一个，()可以省略
如果{}内只有一句，{}可以省略
如果{}内只有一句并且是return，{}和return可以省略

<script>
let test = (a, b) => a + b
console.log(test(1, 2))
let test2 = () => {
    console.log('你好')
    console.log('你好2')
}
test2()
let test3 = n => {
    for (let i = 0; i < n; i++) {
        console.log('hello')
    }
}
test3(3)
</script>

函数闭包

1.外部函数嵌套内部函数
2.内部函数访问外部函数的变量
3.内部函数被返回
特点:外部函数的变量被内部函数引用，长时间占用内存，无法释放，造成内存泄漏

<script>
//闭包
function outter() {
    let a = 1
    function inner() {
        ++a
        console.log(a)
    }
    return inner
}
let inn = outter()
inn()
inn()
inn()
</script>

函数参数

位置参数 test(a,b,c)
默认参数 test(a,b=2),默认参数放到最后
不定项参数 test(…params)
函数的内置对象 arguments可有接收所有参数

<script>
function test(a, c, b = 10) {
    console.log(a + b + c)
}
test(10, 30)
//不定项参数
function test2(...params) {
    console.log(params)  //数组
    console.log(params[1])  //数组
}
test2(1, 2, 3, 4, 5)
//arguments内置对象接收
function test3() {
    console.log(arguments)  //类数组
    console.log(arguments[2])
}
test3(1, 2, 3, 4, 5, 6)
//arguments 和形参 相互映射影响
function test4(a, b) {
    console.log(a, b)  //3  5
    a = 10
    console.log(arguments) //10 5
    arguments[1] = 20
    console.log(a, b)  //10 20
}
test4(3, 5)
</script>

js作用域

全局变量,任何地方可以访问
暗示全局变量,属于window
局部变量，属于函数

<script>
let a = 10   //全局变量
function test() {
    a++
    let c = 10  //局部
    b = 20   //暗示全局变量
    console.log(a)
    console.log(this) //window
}
window.test()
//   console.log(c)
console.log(window.b)
window.alert(11)
window.confirm('确认吗')
let test2 = () => console.log(this)
test2()  //Window
</script>

字符串

字符串创建

<script>
let str = 'hello'
let str2 = new String('hello') //新建一个对象hello
console.log(str == str2)  //true
console.log(str === str2)  //false,不是同一个地址
</script>

字符串方法

<script>
let s = 'hello world'
console.log(s.length) //长度 11
console.log(s.charAt(2)) //l   根据下标获取对应字符
console.log(s[1]) //e
console.log(s.indexOf('o')) //4     第一个下标，找不到返回-1
console.log(s.lastIndexOf('o')) //7 最后一个下标
console.log(s.charCodeAt(1)) //101  unicode值
</script>

字符串拼接

<script>
console.log(s.concat('你好')) //hello world你好
console.log(s) //hello world
console.log(s.includes('lll')) //false 是否包含
console.log(s.startsWith('he')) //true  开头
console.log(s.endsWith('d')) //true   结尾
n = '5'
console.log(n.padStart(2, 0)) //05   开头填充
console.log(n.padEnd(2, 0)) //50   末尾填充
console.log(s.repeat(3)) //hello worldhello worldhello world
</script>

字符串截取

<script>
//slice(start,end) 可正可负，end不闭合
console.log('hello world'.slice(-5, -1))
//substring(start,end) 只能为正，end不闭合
console.log('hello world'.substring(2, 8))
// substr(start,len)  从start截取len个字符
console.log('hello world'.substr(2, 3))
</script>

去除字符串首尾空格

<script>
console.log('  hello world  '.trim())
console.log('  hello world  '.trimStart())
console.log('  hello world  '.trimEnd())
</script>

遍历

<script>
//根据下标遍历
for (let i = 0; i < s.length; i++) {
    console.log(s[i], s.charAt(i))
}
//根据下标遍历
for (const i in s) {
    console.log(s[i])
}
//直接遍历元素
for (const ch of s) {
    console.log(ch)
}
</script>

其他

<script>
//拆分
console.log('hello world'.split(' '))  //['hello', 'world']
//替换
console.log('hello world'.replace('ll', '你好')) //he你好o world
//g 全局匹配，匹配所有
console.log('a12b3'.replace(/\d+/g, '-')) //a-b-
console.log('a12b3cc'.split(/\d+/g)) //['a', 'b', 'cc']
//search 查找
console.log('a12b3cc'.search('c')) //5  返回第一个下标
console.log('ab3cc12'.search(/\d+/g)) //2  返回第一个下标
</script>