• JavaScript简介


    ECMAScript和JavaScript的关系

            1996年11月,Netscape公司决定将JavaScript提交给国际标准化组织ECMA(European Computer Manufacturers Association),希望JavaScript能够成为国际标准,以此抵抗微软。

            1997年7月,ECMA组织发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。之所以不叫JavaScript,一方面是由于商标的关系,另一方面也是想体现这门语言的制定者是ECMA,不是Netscape,这样有利于保证这门语言的开放性和中立性。

            因此,ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。

    JS变量与常量

    1.变量命名规则与声明变量

            在JS中声明变量和常量都需要使用关键字,声明变量时有两种情况分别声明在全局与局部中

    " role="presentation" style="position: relative;">  全局声明变量:var

    " role="presentation" style="position: relative;">  局部声明变量:let

    " role="presentation" style="position: relative;">  声明常量:const

    ps:JS是动态类型,变量名绑定的数据值类型不固定

    1. var name ="name1"
    2. name = "name2"
    3. name = 123

    2.常量的特点

            常量保存的是不可变化的量在JS中是不能修改的,在声明常量时不能重复赋值

    1. const name = "name1"
    2. name = "name2"
    3. //直接报错

    JS数据类型之数值类型

    1.查看数据值数据类型

            在JS中查看数据类型可以使用:typeof

    2.JS数值型(Number)

            在JS中不区分整型与浮点型统一称之为:数值类型(number)

            将数据转换成数值型:parseInt,当数据为非数字的特殊值时返回:NaN(表示不是一个数字)

    1. var a = 22.22;
    2. var b = 999;
    3. parseInt("999")
    4. >>>返回:999
    5. parseInt("ABC")
    6. >>>返回:NaN

    JS数据类型之字符串类型

    1.JS字符串

            JS字符串用关键字(let)来声明,用单引号、双引号、反引号包含起来的数据

    1. //单引号
    2. let name = 'name1'
    3. //双引号
    4. let gender = “ male”
    5. //反引号
    6. let hobby = `sing`

    2.字符串内置方法

    JS字符串常用内置方法
    方法说明
    length返回字符串长度
    trim()移除空白
    trimLeft()移除左边的空白
    trimRight()移除右边的空白
    charAt(n)返回第n个字符
    concat(value,)拼接字符串
    slice(start,end)切片
    toLowerCase()字符串小写
    toUpperCase()字符串大写
    split(delimiter,limit)按指定分割字符串

    JS数据类型之布尔值

    1.布尔值定义(Boolean)

            在JavaScript中有两个布尔值:true和false,区别python中的布尔值JS中的都是小写,其中空字符串、0、null、undefined、NaN都是false值。

    1. //定义布尔值
    2. var a = ture;
    3. var b = false;
    4. //判断布尔值
    5. Boolean(NaN) # false
    6. Boolean(undefined) # false
    7. Boolean(a) # true

    2.null与undefined区别

            " role="presentation" style="position: relative;">  null表示值为空,指的是一个被定义过的变量被手动清空使该变量变为object类型值变为null

            " role="presentation" style="position: relative;">  undefined值也是空,但是指的是一个变量被声明之后没有被初始化值,那么该变量的默认值是undefined还有当函数没有明确的返回值时返回的也是undefined。

    ps:可以通俗的理解为null是一个谈恋爱后分手了的单身狗,而undefined则表示一个想谈恋爱但是没有谈过的单身狗。

    JS数据类型之对象 

    1.对象的定义

            JS中也是一切皆对象:字符串、数值、数组、函数等,而且JS允许自定义对象。对象是带有属性和方法等特殊数据类型,JS中提供了多个内建对象如:String、Date、Array等

    2.对象之数组

            JS的数组类似Python中的列表,使用单独的变量名来存储多个数据值,数组通过点点出内置方法

    1. //定义一个数组
    2. var a = [1, 2, 3, a, b, "True"];
    3. //索引取值
    4. console.log(a[5]
    5. 结果:"True"

    常用方法:

    方法说明
    .length()统计数组的大小
    .push(ele)数组尾部追加元素
    .pop()获取数组尾部的元素
    .unshift(ele)头部插入元素
    .shift()头部移除元素
    .slice(start,end)切片取值
    .reverse()反转
    .join(seq)将数组元素连接成字符串
    .concst(val,...)连接数组
    .sort()排序
    .forEach()将数组的每个元素传递给回调函数
    .splice()删除元素,并向数组添加新元素
    .map()返回一个数组元素调用函数处理后的值的新数组
    1. // 举例理解
    2. var num =[1, 22, 33, 44, 55, 66, 77, 88];
    3. num.forEach(function(a){console.log(a)})
    4. 结果:以换行的形式循环打印数组
    5. num.splice(0,1,1111)
    6. num
    7. 结果:把数组中索引从0开始修改1个元素
    8. [111, 22, 33, 44, 55, 66,7 7, 88]

    3.JS数据类型之自定义对象

            在JS中自定义对象相当于python中的字典且方式不是单一的

    方式一:类似"字典"方式

    let a1 = {'name':'aa','age':18};
    

    方式二:关键字 new

    let b1 = newBject() 

    ps:自定义对象直接用句点符对数据值进行操作

    拓展:遍历数组中的数据和python中如何让字典也可以通过句点符操作数据

    1. var a1 = [1,2,3,4,5,6]
    2. for (var i=0;ilength;i++) {
    3. console.log(i);
    4. }

    JS运算符 

    1.常规运算符

            常规的运算符与python中的大致相同分算数运算符、赋值运算符、比较运算符、逻辑运算符、但也有一些特别的符号

    常规运算符
    运算符用法
    +加法
    -减法
    *乘法
    /除法
    %取模
    =赋值
    !=不等于
    >,<大于,小于
    >=,<=大于等于,小于等于

    2.特殊运算符

    特别符号
    运算符方法
    ==弱等于,自动转换成相同数据类型
    ===强等于,不自动转换数据类型
    &&关系运算,等价于and
    ||关系运算,等价于or
    关系运算,等价于not
    三元运算符
    1. // 注意点:在JS中符号位置不同结果也不同
    2. var a = 10;
    3. var res = a++;
    4. 结果:先赋值后自增 11
    5. var res1 = ++a;
    6. 结果:先自增后赋值 12

    JS流程控制 

    1.if分支结构

            JS中if分支结构与Python的if语句逻辑相同,但语法格式不一样我们可以对照着Python语法来学习JS的语法结构

    1. # python中的if语句格式
    2. if 条件1:
    3. 执行语句
    4. elif 条件2:
    5. 执行语句
    6. else
    7. 执行语句
    1. // JS中if语法格式
    2. if (条件1) {
    3. 执行语句;
    4. }else if(条件2) {
    5. 执行语句;
    6. }else {
    7. 执行语句;
    8. }

    " role="presentation" style="position: relative;">  JS中条件需要用括号括起来

    " role="presentation" style="position: relative;">  JS大括号等同python中的冒号

    " role="presentation" style="position: relative;">  JS需要完整的写else if

    " role="presentation" style="position: relative;">  执行语句后需要加分号;

    2.循环结构

    1.for循环:由两部分组成,条件控制和循环体

    1. for(初始化语句;循环条件;自增或自减) {
    2. 执行的代码块;
    3. }

    1. // for循环遍历代码
    2. a1 = [1,2,3,4,5,6,7]
    3. for (let i=0;i < a1.length;i++) {
    4. console.log(a1[i]);
    5. }

    2.while循环:循环会重复执行一段代码,直到某个条件不再满足

    1. while(条件表达式语句){
    2. 执行的代码块;
    3. }

    1. // 具体用法:遍历数组数据
    2. a1 = [1,2,3,4,5,6,7]
    3. let i=0;
    4. while (i < a1.length) {
    5. console.log(a1[i]);
    6. i++;
    7. }

     JS函数定义

    1.函数的定义

            JS函数通过function关键字进行定义,后面跟函数名和括号,函数名可以包含字母、数字、下划线和$符

    2.具体用法

    " role="presentation" style="position: relative;">  参数与参数间用逗号隔开,函数执行代码放在大括号中

    " role="presentation" style="position: relative;">  函数体个数不需要一一对应要限制参数个数需要用到关键字:arguments        

    1. // 语法格式
    2. function 函数名(参数1、参数2,...) {
    3. 执行体代码
    4. return 返回值
    5. }
    6. // 限制个数
    7. function 函数名(参数1、参数2,...) {
    8. if (arguments.length==2){
    9. 两个形参条件成立执行体代码
    10. }else{
    11. 条件不成立执行体代码
    12. }
    13. }

    3.匿名函数

    " role="presentation" style="position: relative;">  不需要函数名

    1. function(a, b){
    2. return a + b;
    3. }

    4.箭头函数

    1. var f = () => 5;
    2. // 等同于
    3. var f = function(){return 5};
    4. var sum = (num1, num2) => num1 + num2;
    5. // 等同于
    6. var sum = function(num1, num2){
    7. return num1 + num2; //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
    8. }

     JS内置对象

    1.Date日期对象

            Date对象用于处理日期与时间,创建内置对象的有固定的语法:

    1. var 变量名 = new 内置对象名();
    2. //创建不指定参数对象
    3. var d1 = new Date();
    4. console.log(d1.toLocaleString());
    5. //创建参数为日期字符串
    6. var d2 = new Date("2004/3/20 11:12");
    7. console.log(d2.toLocaleString());
    8. var d3 = new Date("04/03/20 11:12");
    9. console.log(d3.toLocaleString());
    10. //创建参数为毫秒数
    11. var d3 = new Date(5000);
    12. console.log(d3.toLocaleString());
    13. console.log(d3.toUTCString());
    14. //创建参数为年月日小时分钟秒毫秒
    15. var d4 = new Date(2004,2,20,11,12,0,300);
    16. console.log(d4.toLocaleString()); //毫秒并不直接显示

    ps:创建不同参数的日期对象

     " role="presentation" style="position: relative;">  Date对象的方法:

    1. /*
    2. 获取日 getDate()
    3. 获取星期 getDay()
    4. 获取月(0-11) getMonth()
    5. 获取完整年份 geFullYear()
    6. 获取年 getYear
    7. 获取小时 getHours()
    8. 获取分钟 getMinutes()
    9. 获取秒 getSeconds()
    10. 获取毫秒 getMilliseconds()
    11. 返回累计毫秒数 getTime()
    12. */
    13. var d3 = new Date();
    14. d1.getDate()
    15. d1.getMonth()
    16. d1.getMilliseconds()
    17. d1.getYear()

    2.JSON序列化对象

            和python序列化一样,通过JSON序列化能够达到多语言交互

    1. JSON.stringify() //序列化
    2. JSON.parse() //反序列化
    1. import json # python中需要先导模块
    2. json.dumps() # 序列化
    3. json.loads() # 反序列化

    " role="presentation" style="position: relative;">  JSON文件多语言交互原理:

            在python中当对字典数据进行序列化时结果会成为{"name":"a","age":"18"} json格式,而这时候把这个数据穿给JS中时可以通过JSON.parse()将传过来的数据进行反序列化得到数据,反之也是一样的JS中序列到python中反序列

    3.RegExp正则对象

            在JS中的正则表达式有两种表达方式:

    1. var res1 = new RegExp("表达式"); // 方式一
    2. var res2 = /表达式$/;

    " role="presentation" style="position: relative;">  正则表达式中不能有空格

    " role="presentation" style="position: relative;">  全局匹配时有一个lastIndex属性

  • 相关阅读:
    <string.h>字符操作函数的实现(strcpy、strcat、mem)
    Loader自定义组件sourceComponent 和source区别
    基于STM32单片机医院病房呼叫系统Proteus仿真
    Chinese ​(Simplified)​ Language Pack / 中文语言包插件
    如何恢复U盘里面的已经损坏的数据?
    阿里云国际版建立云端数据库操作流程
    基于TCP的网络聊天系统
    独立站怎么设置打折活动?独立站新站怎么优化长尾词?——站斧浏览器
    江苏大带宽服务器会运用到哪些行业?
    基于Springboot+Mybatis+mysql+vue宠物领养网站1.0
  • 原文地址:https://blog.csdn.net/weixin_52596593/article/details/126511684