JavaScript初探二（了解数据）

Mirror王宇阳

发布于 2020-11-13 11:00:56

9340

发布于 2020-11-13 11:00:56

文章被收录于专栏：Mirror的技术成长

JavaScript初探（二）

JavaScript 事件

HTML事件

常见的HTML事件

事件	描述
onchange	HTMl元素被改变
onclick	用户点击HTML元素
onmouseover	用户鼠标接触HTML元素上
onmouseout	用户鼠标离开HTML元素
onkeydown	用户按下键盘按键
onload	浏览器完成页面加载

JavaScript可以做的事情

事件处理程序可以用于处理、验证用户输入、用户动作、浏览器动作：
- 页面加载时应该做的事情
- 页面关闭时应该做的事情
- 用户点击按钮时被执行的动作
- 用书输入数据时应该验证的内容
- ……
JavaScript处理事件的方法：
- HTML事件属性可执行JavaScript代码
- HTML时间属性能够调用JavaScript函数
- 向HTML元素分配自己的事件处理函数
- 阻止事件被发送或被处理
- ……

JavaScript 字符串

特殊字符

由于字符串必须有引号包围，JavaScript会误解字符串
为了避免使用引号的时候被Javascript误解，可以使用转移字符

代码	结果	描述
\ '	'	单引号
\ "	"	双引号
\ \	\	反斜杠
\ b		退格
\ f		换页
\ n		跳到新的一行
\ r		回车
\ t		水平制表符
\ v		垂直制表符

字符串可以是对象

通常，JavaScript字符串是原始值，通过字面方式创建：

var firstName = "Bill" ;

但是字符串也可以通过关键字 new 定义为对象：

var firstName = new String("Bill") ;

实例：

var x = "Bill" ;
var y = new String ("Bill") ;

typeof x ;  //返回String
typeof y ;  //返回object

不建议将字符串创建为对象，会拖慢执行速度， new 关键字会使代码复杂化当使用 == 运算时，为 true 当使用 === 运算时，为 false

var x = "Bill" ;
var y = new String ("Bill") ;

x == y ; //true
x === y ; //false

字符串内建方法和属性

字符串长度

lenght：返回字符串的长度

字符串变量.length;

var txt = "I am is Student" ;
var len = txt.length ;
// 输出txt的长度：len=15

查找字符串中的字符

indexof(char)：返回字符串中指定的字符首次出现的位置索引字符串变量.indexof(size);

var str = "I want world peach" ;
var pos = str.indexof("w");

JavaScript 从零开始计算位置。

lastIndexof(char) ：返回字符串指定字符最后出现的位置索引

var pos = str.lastIndexo("w");

如果 indexof() 和 lastIndexof() 均为找到，会返回 -1

检查字符串中的字符串

search(char) ：搜索特定值的字符串，并返回匹配的位置字符串变量.search(char);

var str = "I want world peach" ;
var pos = str.search("w")

提取部分字符串

提取方法： slice(start , end) ; substring(start , end); substr(start , length);

slice()方法

slice() 提取字符串的某个开始部分并在新字符串中返回被提取的部分。
该方法设置两个参数：起始索引，终止索引（字符串从零开始索引）
实例：

var str = "Refueling Huawei Refueling China";
var res = str.slice(7,13);
// 结果：Huawei

> 如果省略第二个参数，则会以第一个参数开始，到字符的最后。

var res = str.slice(17);
// 结果：Refueling China

如果参数为负数，则是从尾部开始从零计数

var res = str.slice(-5);
// 结果：China

substring()方法

substring() 类似 slice()，不同之处在于 substring() 无法接收负的索引。

substr()方法

类似与slice()，不同之处在于 substr() 的第二个参数规定的是被提取的长度。

var str = "Refueling Huawei Refueling China";
var res = str.substr(10,6);
// 结果：Huawei

如果省略了第二参数则会截取开始位置剩下的所有字符如果参数为负数，则从字符串的结尾开始计算位置（从零开始）第二个参数不能为负数

替换字符串内容

replace()：用另一个值替换字符串中指定的值。

var str = "Refueling Huawei Refueling China";
var rep = str.replace("Huawei","China");
// 结果：Refueling China Refueling China

replace方法调用不会改变字符串的原有内容，只会在替换后，返回一个新的字符串。默认的，replace只替换首个匹配到的字符(串)。
默认的，replace对大小写敏感区分，如果要忽略大小写区分，可以使用正则：/ i

var str = "Refueling Huawei Refueling China";
var rep = str.replace("/HUAWEI/i","China");
// 结果：Refueling China Refueling China

注意：正则表达式不带引号。

var str = "Refueling Huawei Refueling China Refueling Huawei Refueling China Refueling Huawei Refueling China ";
var rep = str.replace("/Huawei/g","China");
// 结果：Refueling China Refueling China Refueling China Refueling China Refueling China Refueling China

如需替换所有匹配，使用正则的 /g 标志（用于全局搜索）——如上

大小写转换

toUpperCase()：全部转为大写

var txt = "Huawei Refueling";
var Upptxt = txt.toUppercase();
// 结果：HUAWEI REFUELING

toLowerCase() ：全部转为小写

var txt = "Huawei Refueling";
var Upptxt = txt.toLowercase();
// 结果：huawei refueling

concat()方法：连接字符

concat()：连接两个或多个字符

var str = "Huawei Refueling";
var str1= "China Refueling";
var txt = str.concat(" & ",str1);
// 结果：Huawei Refueling & China Refueling

concat()方法可用于代替加运算符；如下是等效的两条：

var txt = "Huawei Refueling" + " & " + "China Refueling";
var txt = "Huawei Refueling".concat(" & ","China Refueling");
// 结果：Huawei Refueling & China Refueling
// 1,2 行代码的结果是等效的

改变的不是字符串，只是生成了一个新的字符串

String.trim()

trim()：删除字符串两端的空白字符

var str = "    Huawei Refueling    ";
var txt = str.trim();

提取字符串字符

方法：
- charAt(position)
- charCodeAt(position)

charAt()方法

charAt()：返回字符串中指定下标索引的字符

var str = "Huawei Refueling";
var txt = str.charAt(7);
// 结果：R

charCodeAt()方法

charCodeAt()：返回字符串中指定索引的字符的 unicode编码

var str = "Huawei Refueling";
var txt = str.charCodeAt(7);
// 结果：82

属性访问

var str = "Huawei Refueling";
str[0];
//结果：H

问题：
- 不适合早起版本
- 看着像数组实际上不适数组
- 如果找不到字符，[] 返回 undefined ，而charAt() 返回空字符串
- [] 是只读的；str[0] = "A" ; 不会产生错误，因为，str[]不支持存入的

字符串转数组

split()：字符串转为数组

var str = "a,b,c,d,e";
str.split(",");		// 逗号分隔
str.split("|");		// 竖线分隔
str.split(" ");		// 空格分隔
// 以指定的字符作为分隔条件将str字符串转为数组

如果没有分隔条件约束，字符串将包含到一个数组空间中即：str[0]=a,b,c,d,e
如果分隔符是""，返回的是间隔单个字符的数组

var str = "Huawei";
str.split("") ;

JavaScript 数字

JavaScript 数值

书写JavaScript数值，既可以带小数点，也可以不带。

超小或超大的数可以通过科学计数法来写：

var x = 123e5 ; // 12300000
var y = 123e-5 ; // 0.00123

JavaScript 数值始终是 64 位的浮点数

数值精度

小数最大是精确到—17位（浮点数的算法是不100%精确的）

数字和字符串相加

警告！！！

JavaScript的加法和级联都使用 + 运算符；
数字用加法+ ，字符串用级联；

数字字符串

JavaScript 字符串可以拥有数字内容

var x = 100 ;	// x是数字
var y = "100" ; // y是字符串

在数字运算中，JavaScript会尝试将字符串转为数字进行运算

var x = "100" ;	
var y = "10" ; 
var z = x / y ;  //结果：z = 10

javaScript会对乘法、除法、减法等除了加法以外的字符串数字进行算数运算但是，不会对加法进行算数运算；会对加法进行字符串的级联

NaN - 非数值

NaN：属于JavaScript保留字，表示某个数不是合法的数。

var x = 100 / "Huawei" ;
// 结果：x = NaN

表示x现在是不合法的

isNaN ：全局函数，用于判断某个值是不是数值

var x = 100 / "Huawei";
isNaN(x);//返回 true

NaN 在typeof会认定为 number ===> 认为是一个数

Infinity

Infinity ：JavaScript在计算数值时超出最大可能数范围时返回的值

var myNumber = 2 ;
while(myNumber != Infinity){
    myNumber = myNumber * myNumber ;
}

除以零也会生成 Infinity

var x = 2 / 0 ;		//x ==> Infinity
var y = -2 / 0 ;	//y ==> -Infinity

Infinity是数；typeof Infinity 返回 number

十六进制

前缀为 0x 的数值常量会被解释为 十六进制

var x = 0xFF ;
// 结果： 255

一些版本也会把 0 带头的数解释为八进制

toString()方法

toString(x)：按照x设定的进制数，输出数。

var myNumber = 128 ;
myNumber.toString(16) ; // 十六进制输出 80
myNumber.toString(8) ;	// 八进制输出 200
myNumber.toString(2) ;	// 二进制输出 1000 0000

数值可以是对象

通常JavaScript 数值是通过字面量创建的原始值：var x = 123 ; 也可以通过关键字 new 定义为对象： var y = new Number(123);

var x = 123 ;
var y = new Number(123) ;
// typeof x 返回 number
// typeof y 返回 object

不建议使用new定义对象，因为 JavaScript对象无法逻辑对比

JavaScript 数值方法

Number方法和属性

toSring()方法*

toString()：以字符串返回数值

所有数字方法可用于任何类型的数字（字面量、变量或表达式）

toString(x)：以x进制返回数值

var myNumber = 128 ;
myNumber.toString(16) ; // 十六进制输出 80
myNumber.toString(8) ;	// 八进制输出 200
myNumber.toString(2) ;	// 二进制输出 1000 0000
myNumber.toString() ; // 默认进制输出 128
myNumber.toString(10) ; // 十进制输出 128

toExponential()方法

toExponential(x)：返回字符串值，包含四舍五入并指数计数的数字

var x = 3.145 ;
x.toExponential(2) ;  // 返回 3.15e+0
x.toExponential(4) ;  // 返回 3.1450e+0
x.toExponential(6) ;  // 返回 3.145000e+0

x参数是可选的，没有设置就不会对数值进行四舍五入；如果设置了，就会按照x位小数进行四舍五入并以指数的方法进行输出字符串值类型。

toFixed()方法

toFixed(x)：返回字符串值，指定小数位数并进行四舍五入（不以指数计数）

var x = 3.145 ;
x.toFixed(0); // 返回 3
x.toFixed(2); // 返回 3.15
x.toFixed(4); // 返回 3.1450

toPrecision()方法

toPrecision(x)：返回字符串值，包含指定长度的数字（总长度）

var x = 3.145 ;
x.toPrecision() ; // 返回 3.145
x.toPrecision(2); // 返回 3.1
x.toPrecision(4); // 返回 3.145
x.toPrecision(6); // 返回 3.14500

valueOf()方法*

valueOf()：以数值返回数值

变量转为数值

三种方法将变量转为数字：
- Number()方法
- parseInt()方法
- parseFloat()方法
这些方法是全局的JavaScript方法

全局方法

JavaScript的全局方法使用于所有JavaScript数据类型

方法	描述
Number()	返回数值，由其参数转换而来
parseFloat()	解析其参数并返回浮点数
parseInt()	解析其参数并返回整数

Number()方法

Number()：把JavaScript变量转换为数值

x = true ;
Number(x) ; // 返回 1
x = false ;
Number(x) ;	// 返回 0
x = new Data() ;
Number(x) ;	// 返回 14045680277739
x = "10" ;
Number(x) ; // 返回 10
x = "10 20" ;
Number(x) ; // 返回 NaN

如果变量无法转为数字，则返回 NaN（非数值）

用于日期的Number()方法

Number也可以把标准格式的日期转换为数字

Number(new Date("2019-06-18")) ;
// 返回：1560816000000

parsInt()方法

paresInt()：解析一段字符串并返回数值；允许空格；只返回首个数字

paresInt("10") ; // 返回 10
paresInt("10.33"); // 返回 10
paresInt("10 20 30"); // 返回 10
paresInt("Huawei 10"); // 返回 NaN

如果无法转换为数值，则返回 NaN

parseFloat()方法

parseFloat()：解析一段字符串并返回数值；允许空格；只返回首个数字

paresFloat("10"); // 返回 10
paresFloat("10.33"); // 返回 10.33
paresFloat("10.11 2.2 22"); // 返回 10.11
paresFloat("Huawei 10.11"); // 返回 NaN

如果无法转换为数值，则返回 NaN

数值属性

属性	描述
MAX_VALUE	返回JavaScript中可能的最大的数
MIN_VALUE	返回JavaScript中可能的最小的数
NEGATIVE_INFINITY	表示负的无穷大
NaN	表示非数字值
POSITIVE_INFINITY	表示无穷大（溢出返回）

数字属性不可用于变量

数字属性属于名为Number的JavaScript数字对象包装这些属性只能作为Number.MAX_VALUE访问使用 myNumber.MAX_VALUE，其中myNumber是变量、表达式或值，将返回undefined

！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-06-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html

编程算法

javascript

java

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

JavaScript初探 二 （了解数据）

JavaScript初探 二 （了解数据）

JavaScript初探 （二）

JavaScript 事件

HTML事件

常见的HTML事件

JavaScript可以做的事情

JavaScript 字符串

特殊字符

字符串可以是对象

字符串内建方法和属性

字符串长度

查找字符串中的字符

检查字符串中的字符串

提取部分字符串

slice()方法

substring()方法

substr()方法

替换字符串内容

大小写转换

concat()方法：连接字符

String.trim()

提取字符串字符

charAt()方法

charCodeAt()方法

属性访问

字符串转数组

JavaScript 数字

JavaScript 数值

数值精度

数字和字符串相加

警告！！！

数字字符串

NaN - 非数值

Infinity

十六进制

toString()方法

数值可以是对象

JavaScript 数值方法

Number方法和属性

toSring()方法*

toExponential()方法

toFixed()方法

toPrecision()方法

valueOf()方法*

变量转为数值

全局方法

Number()方法

用于日期的Number()方法

parsInt()方法

parseFloat()方法

数值属性

数字属性不可用于变量

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

JavaScript初探二（了解数据）

JavaScript初探二（了解数据）

JavaScript初探（二）