JavaScript编程基础2

Posted 0点0度

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript编程基础2相关的知识,希望对你有一定的参考价值。

1,数据类型相关操作

使用typeof x函数查看变量的数据类型:

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object,数组是一种特殊的对象类型
typeof {name:‘John‘, age:34} // 返回 object, 因此 typeof [1,2,3,4] 返回 object

null:

  null表示什么都没有,它自己是一种类型,表示一个空对象引用。所以可以把变量设置为null来清空对象。

undefined:

  在 javascript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined

null和undefined区别:

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

 

2,类型转换

在 JavaScript 中有 5 种不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

constructor属性:

constructor属性返回javaScript变量的构造函数:

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:‘John‘, age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

  在我看来,js中的数组:var mycar=new Array("hello","i am","fine")是对象的实例,而[1,2,4]这种,更接近真正意义上的数组。

isArray()和isDate()用法,第一个为例

//看isArray()的用法,
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerhtml = isArray(fruits);    //返回true
//true直接会写到id=demo的元素中

 

数据类型转换:变成字符串

String(x)    把数字转换为字符串

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回,先算,后转换,转换以后是,字符串123,当然了输出的时候并不会表明自己的类型

       toString()也是这样的作用:(123).toString()

  其他的数字变字符串方法简介:留后再学,赶进度

方法描述
toExponential() 把对象的值转换为指数计数法。
toFixed() 把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision() 把数字格式化为指定的长度。

布尔值转换为字符串:

String(false)        // 返回 字符串false
false.toString()     // 返回 字符串false,两个方法都可以

日期变成字符串:

String(new Date())  //返回当前日期的字符串格式

obj.toString()     //同上

Date方法简介:

方法描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

 

数据类型转换:变成数字

Number("3.14")    // 返回 3.14  空字符串转换为0,其他字符串转换为NaN
Number("99 88")   // 返回 NaN

var x="5";
var y=+5; //y将是数字5,一元运算符可以把变量转化为数字,如果不能转化,那就得到NaN,仍旧是数字类型

  其他字符串转换为数字的方法:

方法描述
parseFloat() 解析一个字符串,并返回一个浮点数。
parseInt() 解析一个字符串,并返回一个整数

布尔值转化为数字:

Number(false)     // 返回 0
Number(true)      // 返回 1

日期转化为数字:

d = new Date();
Number(d)    //我得到的是15多少多少的一个数,估计是时间戳
//用d.getTime()也是可以的。

数据类型转换:自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

document.getElementById("demo").innerHTML = myVar;

myVar = {name:"Fjohn"} // toString 转换为 "[object Object]" myVar = [1,2,3,4] // toString 转换为 "1,2,3,4" myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换:

myVar = 123             // toString 转换为 "123"    为什么数字123会转换成字符串123呢,我估计可能是因为html需要输出统一的字符给用户看
myVar = true            // toString 转换为 "true"
myVar = false           // toString 转换为 "false"

 

3,正则表达式 

语法实例:

var patt = /runoob/i    //声明变量patt等于rundoob,i表示不区分大小写;这语法和sed,awk有点像

正则的修饰符:

修饰符描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。


search() 方法
 

用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);    //返回6

replace() 方法 

用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

<body>

<button onclick="myFunction()">点我</button>    //按钮激发事件
<p id="demo">请访问 Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML;     //得到id=demo的元素的内容,赋值给str
    var txt = str.replace(/microsoft/i,"Runoob");    //声明变量txt等于在str的基础上把microsoft换成runoob。
    document.getElementById("demo").innerHTML = txt;    //重写id=demo的元素
}
</script>
</body>

js中的正则表达式简介:

表达式描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
元字符描述
d 查找数字。
s 查找空白字符。
 匹配单词边界。
uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
量词描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。

使用 RegExp 对象

在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象

调用var xxx=new RegExp(‘patton‘)就可以使用以下命令:

使用test():

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

<script>
var patt1=new RegExp("e");   //实例化
document.write(patt1.test("The best things in life are free")); // 返回true,注意格式,是patt.test(),作用是查找字符串中有没有e。
</script>
//简写:/e/.test("The best things in life are free!")    厉害了,还有这种操作,但是好像不支持正则修饰符

 

使用exec():

exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

<script>
var patt1=new RegExp("be|es");
document.write(patt1.exec("The best things in life are free"));
</script>
//返回的是be,所以我觉得它实际上只是返回匹配到的第一个值

4,javascript错误

try 语句测试代码块的错误。它允许我们定义在执行时进行错误测试的代码块。

catch 语句处理错误。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

throw 语句创建自定义错误。当错误发生时,JavaScript 引擎通常会停止,并生成一个错误消息。

 

try...catch...

<script>
var txt="";
function message(){
    try {
        adddlert("Welcome guest!");    //特意写错了alert,如果try语句有错误,那就执行catch语句
    }
    catch(err) {    //catch 块会捕捉到 try 块中的错误,并执行代码来处理它。
        txt="本页有一个错误。

";
        txt+="错误描述:" + err.message + "

";    //捕捉错误用err.message
        txt+="点击确定继续。

";
        alert(txt);
    }
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />    //激发事件
</body>

throw语句

<body>

<p>请输出一个 5 到 10 之间的数字:</p>

<input id="demo" type="text">    //定义了一个文本框,用于收集用户端的信息
<button type="button" onclick="myFunction()">测试输入</button>    //按钮激发事件
<p id="message"></p>    //结果会更新在这个段落中,尽管现在是空的

<script>
function myFunction() {
    var message, x;    //两个变量
    message = document.getElementById("message");    //message相当于获取元素了
    message.innerHTML = "";    //元素的用空填充的
    x = document.getElementById("demo").value;    //x用于获取用户的输入
    try { 
        if(x == "")  throw "值为空";    //如果用户的输入是空的话,直接引发错误,下面的代码不执行了,调到catch语句,打印出错误.err指代的是什么呢?其实就是throw后面的部分。
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;    //向带id=message的元素中输出错误
    }
}
</script>

</body>
</html>

 









以上是关于JavaScript编程基础2的主要内容,如果未能解决你的问题,请参考以下文章

你可能不知道的JavaScript代码片段和技巧(下)

你可能不知道的JavaScript代码片段和技巧(上)

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

Javascript JSON 的问题

JavaScript 代码片段