1,对变量的一些认识

在学习java的过程中,我对变量的理解,其实就是一个在运行期进行简单储存的数据的内存空间,运行期结束后就会在各个代码的垃圾回收机制中在内存空间中消除。

对于变量,在java中,一个被创建的变量,就只能储存同类型的数据,除了多态有一些简简单单的例外之外(父类变量存储子类对象)

但在学习js的过程中,我发现,一个被定义的变量,并不一定只能储存一个类型的数据!

比如:

  1. var a ="123";
  2. a=123;

这样的代码在java中是绝对不能实现的,一个储存了字符串数据类型的变量,是绝对不可能再储存整型。然而在js中却可以。

现在我们来说一说变量:

变量实际上是在内存中开辟了一个空间,用来存储一个数据!

在java这种强类型的变量语言中,在创建变量开辟空间的时候,java将这个内存空间所储存的类型所固定,使之只能存储固定类型的数据,

而js这种弱类型的语言中,只开辟了空间,并没有固定其所存储的数据类型,所以可以随意的转换!

(所有的强类型语言都会这样,弱类型也是)

js变量演示:

typeof(变量名)可以获取变量类型

  1. //定义number类型
  2.        let a =123;
  3.        let b =123.1;
  4.        let c =NaN;
  5.        document.write(a+"----"+typeof(a)+"<br>");
  6.        document.write(b+"----"+typeof(b)+"<br>");
  7.        document.write(c+"----"+typeof(c)+"<br>");
  8. //定义String类型
  9.        let a1="123";
  10.        let b1='123';
  11.        let c1="abv";
  12.        document.write(a1+"----"+typeof(a1)+"<br>");
  13.        document.write(b1+"----"+typeof(b1)+"<br>");
  14.        document.write(c1+"----"+typeof(c1)+"<br>");
  15.        document.write("<br>");
  16. //定义boolean类型
  17.        let  a2=false;
  18.        let  b2=true;
  19.        document.write(a2+"----"+typeof(a2)+"<br>");
  20.        document.write(b2+"----"+typeof(b2)+"<br>");
  21.        document.write("<br>");
  22. //定义null
  23.        let a3=null;
  24.        let b3=undefined;
  25.        let c3;
  26.        document.write(a3+"----"+typeof(a3)+"<br>");
  27.        document.write(b3+"----"+typeof(b3)+"<br>");
  28.        document.write(c3+"----"+typeof(c3));
  29.        document.write("<br>");

输出结果:

  1. 123----number
  2. 123.1----number
  3. NaN----number

  4. 123----string
  5. 123----string
  6. abv----string

  7. false----boolean
  8. true----boolean

  9. null----object
  10. undefined----undefined
  11. undefined----undefined

js这里有个小问题,用var或者let可以定义变量,但直接不写,也可以定义变量,两者区别在于,var和let定义的是局部变量,不写直接是全局变量!

2,流程控制语句Switch

Switch语句结构:

  1. Switch(变量):

  2. case  值:

在Java中,Switch能接受的数据类型:byte short int long char 枚举(1.5) 字符串(1.7)

但在js中, Switch能接受任意类型的数据!

3,一个简单的练习,在页面上输出99乘法表

  1. <script>
  2. document.write("<table align='center' >");
  3.        for (let i = 1 ; i < 10 ; i++){
  4.            document.write("<tr>");
  5.            for (let j = 1 ; j <= i ; j++){
  6.                document.write("<td>");

  7.                document.write(i + "*" + j + "=" + i*j);

  8.                document.write("</td>");

  9.           }
  10.            document.write("</tr>");
  11.            // document.write("<br>");
  12.       }
  13.        document.write("</table>");

  14.    </script>
  15.    <style>
  16.        td{
  17.            border: 1px solid;
  18.       }
  19.    </style>

4,js的常见对象

Function对象(函数对象)

1,创建

三种:

1,基本不用,看个热闹

  1. let fun = new function(形式参数列表,方法体);

2,这个和java方法挺像的,用的非常多,可记

  1. function 方法名(形式参数列表){
  2. 方法体
  3. }

  4. 例:

  5. function a(a1,b1){
  6.    document.write(a1+b1);
  7.   }

3,这个用的也比较多

  1. let  方法名 = function(形参列表){
  2. 方法体;
  3. }

  4. 例:

  5. let  a  =function(a1 , b1 ){
  6. document.write(a1+b1);
  7. }

2,方法

3,属性

1,length属性:代表形参的个数。

使用方式

  1. 对象名.length

4,特点

1,方法定义的时候,形参和返回值的类型不用写,反正都是var或者let,写了也没啥用

2,方法是一个对象,如果重复定义,会覆盖而不会报错。

3,在js中,方法的调用只与方法名有关,与形参列表无关

4,在方法声明中只有一个隐藏的内置对象(数组),arguments,封装所有实际参数

5,调用

  1. 方法名(实际参数列表)

Array对象(数组对象)

1,创建

也是三种:

1,

  1. let 数组名 = new Array(元素列表);

2,

  1. let 数组名 = new Array(默认长度);

3,

  1. let 数组名 = [元素列表];

2,方法

1,jion(参数):将数组中的元素按照指定的分隔符进行分割,,例:

  1.  let a1 = new Array(5);
  2.  for (let i = 0 ; i < a1.length ; i++){
  3.            a1[i]=i;
  4.       }
  5.  document.write(a1.join("--")+"<br>");
  6.    
  7.  打印效果:
  8.  0--1--2--3--4

2,向数组末尾添加一个或更多元素,并返回新的长度,,例(接上面的代码):

  1. document.write(a1.push("5",6)+"<br>");

  2. 打印效果:
  3. 0--1--2--3--4
  4. 7

3,属性

length,数组长度

4,特点

1,js中,数组元素的类型是可以变的,可以理解为java的Obj类型数组

2,js中,数组长度可变

Date对象(时间对象)

1,创建

  1. var 对象名 = new Date();

2 ,方法

toLocaleString(),返回当前date对象对应的时间本地字符串格式

  1. let a2 =new Date();
  2. document.write(a2+"<br>");
  3. document.write(a2.toLocaleString()+"<br>");

  4. 打印结果:
  5. Tue Dec 27 2022 18:36:03 GMT+0800 (中国标准时间)
  6. 2022/12/27 18:36:03

getTime(),返回当前毫秒值,,返回当前时间与1970年1月1日0点0分的毫秒值差

  1. document.write(a2.getTime()+"<br>");

  2. 打印结果:
  3. 1672137363540

Math对象(数学对象)

1,创建

这个对象很特殊,不需要创建,直接使用

使用:Math.方法名();、

2,方法

1,random(),返回一个0.0到1.0之间的伪随机数(含0不含1)

  1. document.write(Math.random()+"<br>");
  2.  
  3.  
  4. 打印结果:

  5. 0.14629435714864747

2,ceil(参数),对数进行向上舍入

  1. document.write(Math.ceil(Math.PI)+"<br>");

  2. 打印结果:
  3. 4

3,floor(参数),对数进行向下舍入

  1. document.write(Math.floor(Math.PI)+"<br>");

  2. 打印结果:
  3. 3

4,round(x),把数四舍五入为最近的整数

  1. document.write(Math.round(Math.PI)+"<br>");

  2. 打印结果:
  3. 3

3,属性

PI 圆周率

  1. document.write(Math.PI+"<br>")

  2. 打印结果:
  3. 3.141592653589793

小练习:1-100间的随即整数:

  1.  <script>      
  2. function  suiji(){
  3.            return Math.floor(Math.random()*99);
  4.       }
  5.        for (let  i = 0 ; i < 100 ; i ++){
  6.            document.write(suiji()+",")
  7. }
  8. </script>

  9. 打印结果:
  10. 25,78,25,91,84,68,11,10,19,10,31,31,25,2,91,91,86,74,52,10,67,7,7,83,19,68,89,19,75,25,54,52,87,16,47,44,40,72,29,68,55,0,37,39,73,55,44,28,41,84,78,84,24,88,83,68,5,22,84,53,9,70,25,22,6,51,2,37,71,24,66,98,10,48,75,68,82,31,63,94,56,11,81,74,95,98,44,30,37,60,90,29,71,0,90,8,35,51,43,75,

RegExp对象(正则表达式对象)

正则都知道吧?

说一下js里的正则规则:

1,正则表达式

1,单个字符:[]

例:

  1. 表示单个a [a];

  2. •表示ab [ab];

  3. •表示az [a-z];

  4. •表示az或者AZ [a-zA-Z];

  5. •表示az或者AZ或者09或者下划线: [a-zA-Z0-9_];

特殊的单个字符表示:

/d:单个数字,,也就相当于[0-9]

/w: 单个字符,,相当于[a-zA-z0-9_]

2,量词符号:

?:表示0次或1次

*: 表示0次或多次

+: 表示1次或多次

{m,n}:表示 m <= 数量 <= n

这里如果m没写,就是这样{,n}:表示最多有n个

n没写,{m,} :表示最少有m个

3,开始结束符号

^: 开始

$: 结束

小练习:输入账号,要求6-12位,的字符

/w{6,12}

2,正则对象

创建

1,

  1. let 对象名 = new RegExp("\正则表达式");

2,

  1. let 对象名 = /正则表达式/;
方法

tast(参数) :验证指定字符是否符合正则规则,符合返回true,不符合返回false

Global对象(全局对象)

1,特点

全局对象,这个Global中封装的方法不需要对象就可以直接调用。

  1. 方法名();

2,方法

1,encodeURI(): url编码

  1. let gl = encodeURI("鹏哥真帅");
  2. document.write(gl);

  3. 打印结果:
  4. %E9%B9%8F%E5%93%A5%E7%9C%9F%E5%B8%85

2,decodeURI(): url解码

  1. document.write(decodeURI(gl));

  2. 打印结果:
  3. 鹏哥真帅

3,encodeURIComponent():url 编码

这两个和上面两个的区别就在于参数的大小,对于大量数据的解码,编码,用这两个长的,比较好

4,decodeURIComponent():url 解码

编码方式

这里介绍一下,浏览器的编码方法:

假设现在有汉字:

鹏哥真帅

现在,假设用GBK码的编码方式,那么一个汉字是2个字节,一个字节是8位2进制数

那么鹏哥真帅这四个字,就会有32位字节

现在,我们再假设,鹏哥真帅 这四个字的编码为

10010010 10010010 10010010 10010010

这32位,然后咱们以8位为限制,转换成数字,中间以%隔开,那么最后得到一个结果(这里也是假设哈,我直接用encodeURI()这个方法 的编码出来了,结果如下)

%E9%B9%8F%E5%93%A5%E7%9C%9F%E5%B8%85

 

学习js的一些笔记的更多相关文章

  1. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  2. js便签笔记(12)——浏览TOM大叔博客的学习笔记 part2

    1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭 ...

  3. canvas学习之API整理笔记(二)

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  4. Js replace() 方法笔记

    最近捣鼓着学习Js,发现replace()真的很有用,替换功能杠杠的棒. 接下来看看我遇到的问题: 有两个随机给出的字符串,字符串1'xxxxxx',字符串2'====T'(这两个用作示例,其他为随机 ...

  5. 学习js回调函数

    <!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...

  6. JS SDK 随手笔记

    JS SDK 随手笔记 窗口模块 Frame/Multi Frame 对话框 页面间的通讯 生命周期 窗口层叠 窗口模块 窗口模块是是AppCan移动应用界面最基本的单位.窗口是每个界面布局的基础,他 ...

  7. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  8. 学习Logistic Regression的笔记与理解(转)

    学习Logistic Regression的笔记与理解 1.首先从结果往前来看下how logistic regression make predictions. 设我们某个测试数据为X(x0,x1, ...

  9. 转载-《Python学习手册》读书笔记

    转载-<Python学习手册>读书笔记 http://www.cnblogs.com/wuyuegb2312/archive/2013/02/26/2910908.html

  10. python学习第五次笔记

    python学习第五次笔记 列表的缺点 1.列表可以存储大量的数据类型,但是如果数据量大的话,他的查询速度比较慢. 2.列表只能按照顺序存储,数据与数据之间关联性不强 数据类型划分 数据类型:可变数据 ...

随机推荐

  1. 关于Redhat-7.x-下docker的安装记录

    今天因公司项目,需要部署docker环境,能根据指定的镜像创建容器 于是首先就得先部署docker环境,过程记录如下: 在Redhat 7.x - (aws上的Redhat) 环境下部署过程 1.安装 ...

  2. python-绘图与可视化

    python 有许多可视化工具,但本书只介绍Matplotlib.Matplotlib是一种2D的绘图库,它可以支持硬拷贝和跨系统的交互,它可以在python脚本,IPython的交互环境下.Web应 ...

  3. CentOS 7.9 安装 ELK

    一.CentOS 7.9 安装 elasticsearch-7.8.1 地址 https://www.elastic.co https://www.elastic.co/cn/downloads/pa ...

  4. 一篇文章带你掌握MyBatis简化框架——MyBatisPlus

    一篇文章带你掌握MyBatis简化框架--MyBatisPlus 我们在前面的文章中已经学习了目前开发所需的主流框架 类似于我们所学习的SpringBoot框架用于简化Spring开发,我们的国人大大 ...

  5. jquery+bootstrap学习笔记

    最近小颖接了个私活,客户要求用jquery和bootstrap来实现业务需求,小颖总结了下在写的过程中的一下坑,来记录一下 1.动态加载html文件 switch (_domName) { case ...

  6. Linux基础_2_bash功能

    查看当前shell:echo  $SHELL 查看可用shell:cat  /etc/shells 命令行编辑 光标跳到行首:Ctrl+a 光标跳到行尾:Ctrl+e 以单词为单位快速跳转光标:Ctr ...

  7. 微服务开发框架-----Apache Dubbo

    文章目录 一.简介 二.概念与架构 一.简介 Apache Dubbo 是一款微服务开发框架,提供了RPC通信与微服务治理两大关键能力.使用Dubbo开发的微服务,将具备相互之间的远程发现与通信能力, ...

  8. python环境安装(pyhon和pycharm)

    一.python安装 在地址栏输入https://www.python.org/进入python官网, 点击windows后会出现各种可供下载的历史版本, 安装包下载后,双击运行 点击下一步 勾选下面 ...

  9. NLP之基于Seq2Seq的单词翻译

    Seq2Seq 目录 Seq2Seq 1.理论 1.1 基本概念 1.2 模型结构 1.2.1 Encoder 1.2.2 Decoder 1.3 特殊字符 2.实验 2.1 实验步骤 2.2 算法模 ...

  10. python枚举类型 Enum

    在python中枚举是一种类(Enum) 枚举类中不能存在相同的标签名 枚举是可迭代的 例: from enum import Enum class Vip(Enum): MONDAY = 0 TUE ...