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>