前端 JavaScript简介和基本数据类型

内容概要

  • JavaScript简介
  • 变量与常量
  • 基本数据类型
  • 数据类型内置方法
  • 函数
  • 常见内置对象

内容详细

JavaScript简介

        # JavaScript简称JS 与Java一点关系都没有!!!
        # JS也是一门编程语言
            IT行业鄙视链>>>前端意淫着想摆脱后端的约束
            写出了使用JS编写后端代码的方案>>>NodeJs
        # JS虽然是一门编程语言但是逻辑非常的不严谨
            据传该语言最初的版本是由一个程序员花了七天时间写出来的

        类中引入方式
            1.script标签内部直接编写(学习的时候使用)
            2.script标签src属性导入外部js文件(最正规)

        注释语法
            html:<!--注释语法-->
            css:/**/
            JS://单行注释  /*多行注释*/
            # 模板语法注释 {##}

        结束符号
            分号作为结束符号(;)  但是不用写问题也不大

变量与常量

        在JS中声明变量需要使用关键字
            老版本	var(全部都是全局变量)
            新版本 let(可以声明局部变量)
            # 推荐使用let(其实问题不大)
        在JS中声明常量也需要使用关键字
            const  # 声明一个真正意义上的常量

        如何创建变量
            var name = 'zhang'
            let name = 'zhang999'
        如何创建常量
            const pi = 3.14

        """
        可以编写js代码的地方
            1.pycharm提供的js文件
            2.直接使用浏览器提供的编程环境
        """
        ps:pycharm在使用上述关键字的时候如果出现了报错说明js版本没有选择6
        需要我们自定义设置 settings>>>l f>>>js

基本数据类型

        python基本数据类型
            int、float、str、list、dict、bool、tuple、set
        js基本数据类型
            number、string、boolean、undefined、object()

        查看数据类型
            python中使用type()
            js中使用typeof

number类型

        # 数值类型:包含了整型与浮点型
        parseInt、parseFloat

        NaN:Not A Number
        """NaN属于数值类型 表示的意思是 不是一个数字"""

string类型

        # 定义字符类型的方式
            1.单引号
            2.双引号
            3.小波浪号
                var s1 = `
                    jason老师
                    tony老师
                    kevin老师
                    `

        # 在js中字符串的拼接推荐使用+号

        # 格式化输出(模板字符串的功能)
            var name1 = 'jason'
            var age = 18
            `my name is ${name1} my age is ${age} `

boolean类型

        在python中布尔值类型首字母大写
            True False
        在js中布尔值类型全部小写
            true false

null与undefined类型

        null表示的意思是空
        undefined表示的意识是未定义
            eg:null意思是厕纸用完了 undefined意思是厕纸都没装

对象之数组类型

        # 对应到python中就是列表list

        l2.splice(2,1)  # 第一个参数是起始位置 第二个参数是删除元素的个数

运算符

        1.比较运算符
            ==   弱等于  # 会自动转换数据类型至相同状态
            ===  强等于  # 不会自动转换数据类型

        2.逻辑运算符
            python中
                and or not
            js中
                && || !

流程控制

        '''if判断'''
        python中	
            if 条件:
                条件成立之后执行的代码
            else:
                条件不成立执行的代码
        js中
            if(条件){
                条件成立之后执行的代码
            }else{
                条件不成立执行的代码
            }

            if(条件1){
                条件1成立之后执行的代码
            }else if(条件2){
                条件2成立之后执行的代码
            }else{
                条件都不成立执行的代码
            }
        '''switch'''
            var day = new Date().getDay();
            switch (day) {
              case 0:
              console.log("Sunday");
              break;
              case 1:
              console.log("Monday");
              break;
            default:
              console.log("...")
            }
        """for循环"""
            for(起始值;循环条件;每次循环后执行的操作){
                for循环体代码
            }
                for (var i=0;i<10;i++) {
                    console.log(i);
                    }
            # 练习:如何使用for循环取出数组内的每个元素
                var l1 = [111,222,333,444,555,666]
                 for(let i=0;i<l1.length;i++){
                     console.log(l1[i])
                 }
        """while循环"""
            while(循环条件){
                循环体代码
            }

三元运算符

        在python中
            res = '吃饭' if 18 > 10 else '喝水'
        在js中 
            res = 18 > 10 ? '吃饭':'喝水'

函数

        在python中
            def 函数名(参数1,参数2,...):
                '''函数注释'''
                函数体代码
                return 返回值

        在js中
            function 函数名(参数1,参数2,...){
                // 函数注释
                函数体代码
                return 返回值
            }
        """
        arguments参数 可以获取传入的所有数据
            也支持return和匿名函数
        """
        var f = v => v;
        // 等同于
        var f = function(v){
          return v;
        }

自定义对象

        # 相当于python中的字典类型
            方式1: var d = {'name':'zhang','age':18}
            方式2: var d = Object({'name':'zhang','age':18})

        class MyDict(dict):
            def __getattr__(self, item):
                return self.get(item)
            def __setattr__(self, key, value):
                self[key] = value

        res = MyDict(name='zhang',age=18)
        print(res.name)
        print(res.age)
        res.xxx = 123
        print(res.xxx)
        print(res)    

内置对象

        # 如果需要使用内置对象 需要关键字 new
        在python中
            import date
            date()
        在js中
            new date()


        ##########################################################
        序列化
            python中
                import json
                json.dumps()  # 序列化
                json.loads()  # 反序列化
            js中
                JSON.stringify()  # 序列化
                JSON.parse()  # 反序列化
        """
        如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作
            1.在js中使用JSON.stringify()序列化成json格式字符串
            2.基于网络发送给python程序(自动编码)
            3.python接收 解码并反序列化
        """
        ##########################################################

        regexp对象
            方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
            方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;
        全局匹配
            正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
            # 全局匹配会有一个lastindex属性
            reg2
            /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
            reg2.test('zhang666')
            true
            reg2.test('zhang666')
            false
            reg2.lastIndex
            0
            reg2.test('zhang666')
            true
            reg2.lastIndex
            8
        校验时不传参数默认传的是undefined
posted @ 2022-02-14 21:03  风花雪月*  阅读(42)  评论(0编辑  收藏  举报