凯的个人博客

js语法

4/25/2024 js

# JS基础

  • 流程控制

  • 循环

  • 对象

  • 函数

  • 数组

# 1.流程控制

  • 单分支

    条件：可以是任何运算符的表达式 a&&b a+b a>=b

    ​ 可以是一个变量，甚至是一个函数的调用 a !a sum()

    ​ 表达式为假：空字符串''、数字0、null、undefined（非空字符串都为真）

  • 多分支语句

    switch(a){
    case 0:
        语句一;break;
    case 1:
        语句二;break;
    default:
        语句三;
}
    1
    2
    3
    4
    5
    6
    7
    8

  • 三目运算
    1

# 2.流程控制 -- 循环

  • for循环

    定义中间变量 关键字，必须用let

    for(let i=0;i<20;i++){
    //循环体
}
    1
    2
    3

  • while

    let i=0;
while(条件){
	//循环体
    i+=2;
}
    1
    2
    3
    4
    5

  • do ···while（无论有没有满足条件都要先执行一次）

    do{
    //
}while(条件)
    1
    2
    3

# 3.对象

  • 定义对象
//实例化
let obj = new object({key:val,key1:val1})

//字面量
let obj = {key:val,key1:val1}
1
2
3
4
5

  • 使用对象

    描述一个单独的个体：对象

    eg：有个同学叫晶晶，年龄20岁，性别是女生

     let user = {
	name:'晶晶',
    age:20,
    gender:'女生'
 }
 doucument.write(user.name + ' ' + user.age + ' ' + user.gender)
    1
    2
    3
    4
    5
    6

  • 对象取值

    对象名.属性名
对象名['属性名']
    1
    2

    # 1.对象合并

    //改变原对象的合并
let userInfo = Object.assign(user.userMoney)   //userInfo 的值和user的值是相同的

//不改变原对象的合并
let UserInfo = Object.assign({},User,user1)
    1
    2
    3
    4
    5

    # 2.对象遍历

    # 1.for```in循环

    <script>
     let user = {
	name:'晶晶',
    age:20,
    gender:'女生'
 }
 //for in
 for(key in user){
    console.log(user[key]);
 }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    # 2.forEach

    <script>
     let user = {
	name:'晶晶',
    age:20,
    gender:'女生'
 }
 //
 let userKeyArr = Object.keys(user)
 userKeyArr.forEach(function (item,index) {
    console.log(user[item]);
 })
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    # 3.

    <script>
     let user = {
	name:'晶晶',
    age:20,
    gender:'女生'
 }

 let userValueArr = Object.values(user)
 userValueArr.forEach(function(item){
    console.log(item);
 })
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    # 4.函数

  • 函数的定义方式

  • 函数的参数

    • 形参
    • 实参

  • 函数的参数默认值的设置

  • 函数的参数获取 arguments

  • 函数的返回值 return

  • 函数的调用方式

    • 直接调用
    • 对调 对象里面的方法调用
    • 回调
    • 自调--递归调用
    • 实例化调用 new

  • 函数的作用域 作用域链 【面试题】

# 1.函数定义方式

  • ES 5

方式1 通过function关键打头直接定义的函数，具体 函数提升特性：在js运行过程中那，会将这个函数 提升到整个js文件的最前面

//方式1 
function 函数名(){
    
}
//方式2：必须遵循 先定义 后使用原则
var 函数名 = function(){
    
}
1
2
3
4
5
6
7
8
//案例

// 调用
    sum(100, 200)

    // 求和函数

    var sum = function (a, b) {    //报错：sum is not a function 
        console.log(a + b)
    }

    function sum(a, b) {
        console.log(a + b)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  • ES 6 箭头函数

    形参：函数定义时 ，写到小括号中

    实参：函数调用时，写到小括号中

   sum(100, 200)    //实参
    function sum(a, b) {   //形参
        console.log(a + b)
    }
1
2
3
4

形参和 实参，需要一 一对应的规则

如果没有传递实参，但是有形参：形参默认值设置

  • 形参默认值设置

方式1：借助if 判断 赋值默认值

  sum(100, 200,500)    //实参
  sum(200,200)
    function sum(a, b, c) {   
        // 函数形参默认值设置
        if(c ==undefined){
            c=1000;
        }
        console.log(a + b + c)  
    }
1
2
3
4
5
6
7
8
9
10

方式2：ES6 默认值设置语法糖-[推荐]

  sum(100, 200,500)    //实参
  sum(200,200)
    function sum(a, b, c=1000) {   
        console.log(a + b + c)  
    }
1
2
3
4
5
  • arguments 形参列表 ES5
   sum(100, 200, 500)
    sum(100, 200, 500, 222, 2, 22, 2, 33, 3, 4, 45, 5, 5, 5, 5, 6, 6, 6, 6, 6, 7, 7, 7, 8)
    sum(-1,-2,-3,12,3,12,3,12,312,3,4545,4,5,45,45,45)
    function sum() {
        console.log(arguments)
        // arguments :伪数组、类数组：类似于数组的 假数组
        // 伪数组、类数组都不能数组所有方法26
        // for循环【推荐】
        let num =0;
        for(let i=0;i<arguments.length;i++){
            num += arguments[i]
        }
        console.log(num);   
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

案例： 实现无数个数字的 乘积

# 6.函数返回值 return

函数一旦调用之后 执行完成后 大多数情况都要有返回值，

函数体没有写返回值return 或：return ; 默认返回 unfefined

一个函数中如果存在多个return 当函数运行过程中只要遇到了return 就会立即结束函数的运行

//请求通过函数的封装 实现 传递进入xxx数据和xxx数据，返回得到一个新数据

function 函数名(a,b){
    //创建一个 返回值存储的变量
    let str; 
    
    //运行过程中 计算结果 保存到这变量中
    
    
    //返回数据
    return str;
}
1
2
3
4
5
6
7
8
9
10
11
12

# 练习1

1.封装一个函数实现 对象转为字符串的功能

let user = {
    id:1000,
    name:'苏鹏',
    age:20,
    like:'吃饭睡觉打豆豆'
}


function format (obj){
       let str = '';
        //obj==>'key=val&key1=val1'  
        // Object.keys(obj)  //['id',xxxx,xxx]
        for (key in obj) {   // key==‘id’  'name'  'age' 'like'
            str += '&' + key + '=' + obj[key]
        }
        // 字符串截取 去掉 第0个& 
        str = str.substring(1)
        return str;
}


let userStr =  'id=1000&name=苏鹏&age=20&like=吃饭睡觉打豆豆'


  
//2.任何对象传递过去 都可以拿到一个 类似的结果   'key=val&key1=val1'
    let userStr = format(user)
    console.log(userStr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 7.函数的调用方式

# 1.直接调用

函数名(实参1，实参2...)
1

# 2.对调 对象中的方法调用

对象.属性名() 
对象.方法()
1
2
let user = {
    name:'张麻子',
    eat:function(food){
        return '正在吃'+food
    }
}
//调用
user.eat('西瓜')  //正在吃西瓜
1
2
3
4
5
6
7
8

# 3.回调

在函数fn调用的过程中，传递的实参 本身又是一个函数callFn，

在函数fn执行过程中，又调用了 callFn这个回调函数

回调：现在不调（调用大函数的时候） 回头再调：在大函数运行过程中 调用这个传递的实参函数

//调用一个函数，等待2s以后 实现页面打开弹窗 alert()
function fn(callFn){
    //有很多的业务逻辑
    //回调 
   callFn();
}

fn(function(){
   setTimeout(()=>{
        alert()
    },2000)  
})
1
2
3
4
5
6
7
8
9
10
11
12
let arr = [1222,3,33]

//forEach 中传递的function就是一个回调函数 --同步代码 --异步代码【全部需要使用回调】 
arr.forEach(function(item,index){
    
})
1
2
3
4
5
6
7

# 4.自调--递归调用

在函数体的内部 调用 自己

一定会有退出的条件，递归的出口 ：（没有出口 必定造成死循环）

 function sum(num) {
        // 递归的出口 循环终止的条件
        if(num==1){
            return 1;  //最后一次循环需要返回的数据
        }

        return num * sum(num - 1);  //10*9*8*....*2* 1 ==1
    }
    let xx = sum(10)
1
2
3
4
5
6
7
8
9

# 5.实例化调用

let obj = new Object()
1

# 8.内置对象的方法

  • 字符串 有哪些内置方法

# indexOf

作用： 查找字符串中 能够匹配当前字符串的字符串位置，返回值是 查找到的位置索引 ，如果没有找到 返回-1

let str = '你好啊毛秋菊同学'
console.log(str.indexOf('同学'));  // 6
console.log(str.indexOf('徐练'));  //-1



// 小==》大 

let str1 = 'asdasdsadasAAAAAd';   
console.log(str1.toLocaleUpperCase());   //ASDASDSADASAAAAAD
console.log(str1.toUpperCase()); //ASDASDSADASAAAAAD

//大==》小
console.log(str1.toLocaleLowerCase());   //asdasdsadasaaaaad
console.log(str1.toLowerCase());   //asdasdsadasaaaaad

// 字符串截取
let str2 = '你好啊毛秋菊同学'
// substring(起始索引,终点索引)      substr(起始的索引，截取的长度) 
// slice(起始索引,终点索引)  索引可以是负数 -1：倒数第一个
// 起始索引对应的字符 截取时包含在内 ， 终点索引不包含在内
console.log( str2.substring(3,6));  //毛秋菊
console.log(str2.substr(3,3));  //毛秋菊
console.log(str2.slice(3,6)); //毛秋菊
console.log(str2.slice(-5,-2)); //毛秋菊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  • 数学 有哪些内置方法 Math

js数学方法