【前端】JavaScript

最新推荐文章于 2024-10-02 00:07:14 发布

爱敲代码的菜菜

最新推荐文章于 2024-10-02 00:07:14 发布

阅读量917

点赞数 21

分类专栏：前端文章标签：前端 javascript 开发语言 JS class

本文链接：https://blog.csdn.net/qq_74455045/article/details/136573807

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浏览器：渲染引擎+JS引擎

渲染引擎：解析HTML+CSS，俗称“内核”
JS引擎：就是JS解释器，如Chrome中内置的V8

1.JavaScript组成

ECMAScript (简称ES)：JavaScript语法
DOM：页面文档对象模型，对页面中的元素进行操作
BOM：浏览器对象模型，对浏览器窗口进行操作

2.书写形式

2.1行内式

直接嵌入到html内部

<body>
    <input type="button" value="按钮" onclick="alert('waring！')">
    <input type="button" value="按钮" onclick='alert("waring！")'>
</body>

2.2内嵌式

写到Script标签中

<script>
    alert("warning")
</script>

2.3外部式

写到单独的.js文件中

<script src="hello.js"></script>

alert("hello world")

3.变量

JS中所有变量均为弱类型动态变量，且变量没有int、long等类型，只有数值类型

<script>
    var name = "zhangsan";
    console.log(name) //显示
    let age = 18;
    console.log(age);  
</script>

3.1强类型变量VS弱类型变量

强类型：不同类型的变量进行赋值的时候，需要进行一定的手段（强制类型转换）

弱类型：不同类型的变量进行赋值的时候，可直接赋值

<script> 
    a = 1
    b = 'b'
    b = a //1
    console.log(b)
</script>

3.2动态类型变量VS静态类型变量

动态：代码在执行过程中变量的类型可以随时发生变化

静态类型：变量定义的时候是什么类型，运行过程中就是什么类型

<script>
    a = 1
    console.log(typeof(a)) //number
    b = 'b'
    a = b
    console.log(typeof(a)) //string
</script>

4.基本数据类型

number：数字，不区分整数和小数
boolean：true真，false假
string：字符串类型
undefined：只有唯一的值undefined，表示未定义的值
null：只有唯一的值null，表示空值

4.1特殊的数字值

infinity：无穷大，大于任何数字，表示已经超过了JS能表示的范围
-infinity：负无穷大，小于任何数字，表示已经超过了JS能表示的范围
NaN：表示当前结果不是一个数字

<script>
    console.log(10/0) //infinity
    console.log(-10/0) //-infinity
    console.log('haha'-1) //NaN
</script>

4.2string字符串类型

值需要用单引号或双引号引起来，否则会报错；若字符串中包含引号，则需要搭配使用单双引号

<script>
    a = "my name is 'zhangsan'";
    b = 'how are "you"';
</script>

求长度：length属性

<script>
    var a = 'hello world'
    alert(a.length) //11
    var b = '你好世界'
    alert(b.length) //4
</script>

字符串拼接：+

<script>
    var a = "你好"
    console.log(a + "JavaScript") //你好JavaScript
    var b = "my age is "
    console.log(b + 18) //my age is 18
    
    console.log(100+100) //200
    console.log('100'+100) //100100
</script>

4.3boolean类型

true为真，可当做1；false为假，可当做0

<script>
    let a = true
    console.log(typeof(a)) //boolean
    a = a + 1
    console.log(a) //2
    console.log(typeof(a)) //number
</script>

4.4undefined类型

<script>
    let a;
    console.log(a) //undefined
    console.log(a + "20") //undefined20
    console.log(a + 1) //NaN
    console.log(a + true) //NaN
</script>

4.5null空值类型

<script>
    let a;
    let b = null;
    console.log(a + 10) //NaN
    console.log(b + 10) //10
</script>

5.运算符

自增自减运算符、比较运算符、逻辑运算符、位运算、移位运算……与之前所学基本一致，这里就不赘述了~

== 比较相等，会进行隐式类型转换，比较的是变量的内容
=== 比较相等，不会进行隐式类型转换，比较的是内容+数据类型

<script>
    let a = 10;
    let b = '10';
    alert(a == b) //true
    alert(a === b) //false
</script>

6.条件语句&循环语句

if-else语句、三元表达式、switch语句…………

while循环、continue…………

同C语言与Java，不赘述，直接下一节~

7.数组

7.1创建数组

JS中的数组中不要求元素是同类型

<script>
    let arr1 = new Array();
    let arr2 = [1, 2, 'haha', false];
</script>

7.2获取数组元素

<script>
    let arr = [1, 2, 3, '4']
    console.log(arr) //[1, 2, 3, '4']
    console.log(typeof(arr)) //object
    console.log(arr[2]) //3
    console.log(arr[10]) //undefined
    arr = 'hello' //给数组名直接赋值，数组中的所有元素都会消失
    console.log(arr) //hello 
    console.log(typeof(arr)) //string
</script>

7.3新增数组元素

修改length

<script>
    let arr = [1, 2, 3, 4]
    arr.length = 10
    console.log(arr) //[1, 2, 3, 4, empty*6]
    arr[7] = 8
    console.log(arr) //[1, 2, 3, 4, empty*3, 8, empty*2]
    console.log(arr[5]) //undefined
</script>

通过下标新增

<script>
    let arr = new Array()
    console.log(arr) //啥也没有
    for(i = 0;i < 10;i++) {
        arr[i] = i;
    }
    console.log(arr) //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    arr[20] = 20
    console.log(arr.length) //21
</script>

使用push追加元素

<script>
    let arr1 = [0, 1, 2, 3, 4]
    let arr2 = new Array()
    for(i = 0;i < arr1.length;i++) {
        arr2.push(arr1[i])
    }
    console.log(arr2) //[0, 1, 2, 3, 4]
</script>

7.4删除数组元素

splice (x, y)：从下标为x的位置开始删除y个元素

<script>
    let arr = [0, 1, 2, 3, 4, 5, 6]
    arr.splice(2, 2)
    console.log(arr) //[0, 1, 4, 5, 6]
</script>

8.函数

8.1语法格式

<script>
    function hello() { //没有参数列表和返回值的函数
        console.log("hello world")
    }
    hello() //调用
    function haha(num, name) { //有参数列表和返回值的函数
        console.log(num + "hello" + name)
        return 1;
    }
    let a = hello()
    let b = haha(1, "张三") 
    console.log(typeof(a)) //undefined
    console.log(typeof(b)) //number
</script>

8.2参数个数

实参和形参个数可以不匹配，但实际开发中要求匹配

实参比形参多：多出的参数不参与运算
形参比实参多：多出的参数值为undefined

<script>
    function haha(num, name) { 
        console.log(num + "hello" + name)
        return 1;
    }
    console.log(haha(1)) //1helloundefined
    console.log(haha(1,"zhangsan",2)) //1hellozhangsan
</script>

8.3函数表达式

将函数直接赋值给变量，然后调用变量

<script>
    let result = function Sum() {
        ret = 0;
        for(i = 0;i <= 100;i++) {
            ret += i;
        }
        return ret
    }
    console.log(result())
    
    //匿名函数
    let b = function() {
        console.log(arguments)
    }
    b()
    b(1, 2, 3)
</script>

8.4作用域

全局作用域：在整个script标签，或者单独的js文件中生效
局部作用域：函数内部生效

注意：JS中，如果定义一个变量时不使用let或var，默认该变量为全局变量

<script>
    let num = 10
    function test01() {
        let num = 100
        console.log(num)
    }
    function test02() {
        let num = 200
        console.log(num)
    }
    console.log(num) //10
    test01() //100
    test02() //200
    // for(i = 1;i <= 100;i++) {
    // }
    // console.log(i) //101
    for(let i = 1;i <= 100;i++) {
    }
    console.log(i) //报错
</script>

8.4作用域链

函数可以定义在函数内部
内层函数可以访问外层函数的局部变量，采用链式查找，从内到外依次查找

<script>
    let num = 10
    function test01() {
        let num = 100
        console.log(num) //100
        function test02() {
            console.log(num) //100
        }
        test02()
    }
    test01()
</script>

9.对象

9.1创建对象

1> 使用字面量创建对象

<script>
    let a = {}
    let student = {
        name:"张三",
        height:"186",
        weight:"72kg",
        sayHello:function() {
            console.log("hello")
        }
    }
    //访问
    console.log(student.name) //张三
    console.log(student["height"]) //186
    student.sayHello() //hello
</script>

2> 使用new Object创建对象

<script>
    // let student = {} //也可以
    let student = new Object()
    student.name = "李四"
    student.height = 168
    student["weight"] = "52kg"
    student.sayHello = function() {
        console.log("hello")
    }
    console.log(student.name) //李四
    console.log(student["height"]) //168
    student.sayHello() //hello
</script>

3> 使用构造函数创建对象

前面的方式只能创建一个对象，此方法可以方便的创建多个对象

<script>
    function People(id, name, age) {
        this.id = id
        this.name = name
        this.age = age
        this.Say = function() {
            console.log(name + " say hello")
        }
    }
    let wangwu = new People(1, "wangwu", 18)
    let zhaoliu = new People(1, "zhaoliu", 18)
    console.log(wangwu)
    wangwu.Say() //wangwu say hello
    console.log(zhaoliu)
    zhaoliu.Say() //zhaoliu say hello
</script>

9.2class类&构造方法&static关键字

<script>
    class People { //class类
        constructor(id, name, age) { //构造方法
            this.id = id
            this.name = name
            this.age = age
        }
        say() {
            console.log(this.name + " say hello")
        }
        
        static other = "other" //xiaoming没有这个属性 
        static Sum() {
            return 100
        }
    }

    let xiaoming = new People(1,"xiaoming",20)
    console.log(xiaoming)
    xiaoming.say() //xiaoming say hello

    //使用类名访问static变量
    alert(People.other) //other
    alert(People.Sum()) //100
</script>

9.3继承

<script>
    class People { //class类
        constructor(id, name, age) { 
            this.id = id
            this.name = name
            this.age = age
        }
        say() {
            console.log(this.name + " say hello")
        }
    }

    //继承
    class Student extends People { 
        constructor(id, name, age, grade) {
            super(id, name, age)
            this.grade = grade
        }
        //重写
        say() {
            alert(this.name)
        }
    }
    let student = new Student(6, "wuyu", 22, 98)
    console.log(student)
    student.say() //wuyu
</script>

over~~~