前端 | 3. JavaScript基础

时间  2020-01-23 标签 前端 3 javascript 基础

做者博客：清自以敬html

欢迎任何形式转载，但请务必注明出处。前端

笔者会随时更正文章内容，但因为笔者水平有限，若是文章或代码有错误或者表述不当之处，还望不吝赐教。java

文章中的错误笔记连接web

  • 如连接笔记出现页面丢失，则笔记通常为私密状态，完善ing，完善后会公开，还望见谅。
  • 如连接笔记是一个错误连接或者空连接，能够评论区回复一下，笔者会修正连接。

上篇：前端 | 2. 正则正则表达式

下篇：前端 | 4. JavaScript之BOM和DOMsql

文章目录

1.做用及概念

做用chrome

能够来加强用户和html页面的交互过程，能够来控制html元素，让页面有一些动态的效果，加强用户的体验（例如对于表单值的判断直接由浏览器判断，而不是传回服务端再把判断结果传回来）。数组

概念浏览器

JS是一门客户端脚本语言，运行在客户端浏览器中的。每个浏览器都有JavaScript的解析引擎安全

  • 脚本语言：不须要编译，直接就能够被浏览器解析执行
  • 客户端脚本语言：首先都遵循ECMAScript标准（简称ES），此基础上各类客户端脚本语言也有本身的特性，就像SQL的标准语法和Mysql的方言之间的关系。如js特有的BOM和DOM，可是实际上其余脚本语言也有，不过并不在ECMAScript标准被制定。

2.JS基础

2.1.基本使用

因为js的开发时是和sun合做开发的，因此语法和java有些类似。

与html结合方式

内部JS：定义在<script>内，标签体内容为js代码

外部JS：<script>内经过src属性引入外部js文件

<script>能够定义在html页面的任何地方，且能够定义多个。

定义的位置会影响执行顺序。

一行只有一条语句时容许省略分号（不建议使用）

2.2.注释

单行注释：//

多行注释：/**/

2.3.数据类型

JS是弱类型语言，变量内存空间没有值的类型限定，声明变量经过var 变量名便可，能够接受任何类型的常量值。但能够经过typeof(变量名)获取存储的值类型（该方式对null值获取的类型是object类型）

var变量是方法内的局部变量，不写var关键字，则是定义全局变量(script元素下是全局)，不建议使用，为了更合逻辑，在script元素下定义个var便可，而后方法内赋值便可。

依据值的特色能够分为以下俩种类型：

原始数据类型：

1，number：数字类型。分为整数/小数/NaN(not a number 一个不是数字的数字类型)

2，string：字符串。 字符串 “abc” “a” ‘abc’

3，boolean: true和false

4，null：一个对象为空的占位符

5，undefined：未定义。若是一个变量没有给初始化值，则会被默认赋值为undefined

引用数据类型：object

2.4.运算符特色

和java几乎同样，但存在一些差别，主要是运算时的自动类型转换。

值的自动转换：

+(正号)，-(负号)。在JS中，若是运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换：

1，string转number：按照字面值转换。若是字面值不是数字，则转为NaN（不是数字的数字）

2，null和undefined转为NaN

3，boolean转number：true转为1，false转为0

Nan作算术运算的结果都是NaN

逻辑运算。如与或非运算，如if（）判断，其余类型和布尔类型会自动转换：

1，number：0和NaN→false，其余→true

2，String：""→false，其余→true

3，null和undefined→flase

4，对象→true

5，数值比较

  • 非number会转换为数值（规则如上），转不了就是NaN，NaN作比较判断都是false
  • ===，若是类型不一样会返回false，相同才会比较
  • String是按字符比较编码值，直到比出结果，若是字符串前缀同样，长度不同，则为true。因此能够认为是比较全部字符的编码和

整数相除不截断小数部分

2.5.流程控制语句

一样的和java几乎同样，惟一不一样的就是switch能够接受任意原始数据类型

2.6.对象

JS的对象概念：

JS在ES6以前是不支持类的建立的，因此能够认为是一个基于对象的语言，而不是面向对象的语言，可使用和创建对象，可是无法抽象类。

JS经常使用内置对象

Array对象：数组对象

1，做用：用来存放数组元素，存储方式相似于java的集合对象，可是由于js的变量空间没有类型限定，因此数组对象能够存储任何类型的元素

2，建立和使用对象：

//建立对象三种方式
var 数组对象名 = new Array(元素列表);
var 数组对象名 = [元素列表];
var 数组对象名 = new Array(数组长度);

//访问数组元素
数组对象名[index];

3，对象的经常使用属性：length

4，对象的经常使用方法：

  • join(separator)：将数组对象的元素按照指定分隔符字符串进行拼接，而后返回。缺省分隔符为逗号。
  • push(至少一个元素值)：将参数列表添加进数组对象的末端索引，返回添加后的length

5，元素的访问特色：

  • 若是索引“越界”，容量会自动扩容，扩容时的值类型为undefined，length也随之改变。

Function对象：函数对象

1，做用：该对象包装了一个能够调用的函数

2.建立和使用对象：

//建立对象三种方法
function 函数对象名(形参名列表){
函数体
}
var 函数对象名=function(形参名列表){
函数体
}
var fun = new Function(形式参数列表,方法体)/*这一种忘记就好*/

//调用对象
函数对象名(参数值列表);
  • 由上可见函数对象的建立时指定的名字并非方法名，而是一个形参变量名，因此不存在所谓的重载。
  • 形参名列表只是为了加强可读性，调用时传入的参数个数并不受形参列表个数限制，由于参数值都会依次封装进一个内置的数组对象arguments中，能够在方法体中经过argument[索引]来访问参数值。
  • js是弱类型的语言，变量没有类型之分，参数列表写类型没有意义，为了简洁性，形参不容许写类型，return的返回值类型同理，也不容许写

Date对象：日期对象

1，做用：得到一个日期对象，以获取日期信息

2，建立和使用对象：

var 变量名 = new Date();

3，对象经常使用方法

  • 和java的Date对象方法基本同样，get、set基本都有
  • toLocaleString()：返回当前date对象对应的时间本地字符串格式
  • getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math对象

1，做用：相似于java中Math工具类，能够直接使用，而不须要建立。

2，经常使用方法：

  • random():返回 [0, 1) 之间的随机数

  • ceil(x)：对非整数进行数轴上向前舍

  • floor(x)：对非整数进行数轴上向后舍入

  • 经常使用属性：PI

js没有java那种random类直接获取随机整数，也不能像java同样对数值直接强转。因此只能经过ceil和floor嵌套random来获取随机整数。

  • 获取时再对random()作乘积运算扩大随机数范围后，要取整则要注意扩大后区间的闭合方向，以使得每一段小数都公平的对应一个整数。例如[0,1）就得用floor取整，(-1,0]就得用ceil。

RegExp对象：正则表达式对象

正则笔记：前端 | 2. 正则

1，做用：构建一个正则表达式对象，能够以此进行正则筛选。

2，建立对象和使用对象

var xxx = new RegExp(''正则表达式"，"修饰符");
//或者
var xxx = /正则表达式/修饰符;

3，修饰符：

  • g，gloal首字符，表示全局匹配，即匹配完整个字符串，而不是匹配完一个就结束匹配。例如/a|b/，对"ab"筛选字符，则只会筛选出a。/a|b/g则会匹配出a和b
  • i，ignore首字符，表示忽略大小写，经过gi组合便可匹配全局且忽略大小写
  • m，执行屡次匹配

5，经常使用方法：

  • test(“待匹配字符串”)，匹配知足或者不知足正则

Global对象：

1，做用：全局对象，封装的方法能够在任何地方直接调用

2，经常使用方法：

  • encodeURI():url编码

URL编码就是application/x-www-form-urlencoded格式的编码，这种格式将部分不安全字符（例如汉字、空格）使用特定的字符集进行转换，例如将例如将汉字转换为其码值的%分隔形式（每俩位十六进制数前面一个%）。实际上URL传输时都是这种编码方式传输，而chrome作了显示时的解码，以致于汉字看到的仍是汉字。

举例：
编码前：2019年11月09日 11:41:11
编码后：2019%E5%B9%B411%E6%9C%8809%E6%97%A5+11%3A41%3A11

  • encodeURIComponent():url编码,编码的字符更多

  • decodeURI():url解码

  • decodeURIComponent():url解码

  • parseInt():将字符串转为数字

    • 逐一判断每个字符是不是数字，直到不是数字为止，将前边数字部分转为number

  • isNaN():判断一个值是不是NaN

    • 当须要判断是否为NaN时，没法经过==比较，由于NaN和NaN比较任然是false，因此须要经过该方法判断是否为NaN

  • eval(字符串):将参数字符串做为代码来执行。

三个相似包装类的对象，不过基本不用：Boolean、String、Number对象

联系我们 沪ICP备2021010478号-7