第五次网页前端培训（JS）

本文主要是介绍第五次网页前端培训（JS），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibilin

1.安装编译器

HBuilder X:HBuilderX-高效极客技巧

2.基本内容

数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：

function myFunction(a, b) { return a * b;}

注释：//...或者/*...*/ (与C语言类似)

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

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

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

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] }

类型转换：（1）通过使用 JavaScript 函数；（2）通过 JavaScript 自身自动转换。

全局方法 String() 可以将数字转换为字符串。该方法可用于任何类型的数字，字母，变量，表达式：

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

String(false)        // 返回 "false"
String(true)         // 返回 "true"

Number 方法 toString() 也是有同样的效果。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

Number转换方法

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

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

自动转换类型

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

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"
myVar = true            // toString 转换为 "true"
myVar = false           // toString 转换为 "false"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类型转换</title>
	</head>
	<body>
		<script type="text/javascript">
		console.log(parseInt("123abc"));  //123
		console.log(parseInt("abc123"));  //NaN
		console.log(parseInt("123.4abc"));//123
		console.log(parseInt("123"));     //1234
		console.log("123");
		
		var a = 1 ;
		var b = "2" ;
		console.log(a + b);               //12
		console.log(a + parseInt(b));
		
		console.log(parseFloat("123abc"));//123
		console.log(parseFloat("abc123"));//NaN
		console.log(parseFloat("123.4abc"));//123.4
		console.log(parseFloat("123"));//1234
		console.log(parseFloat("123.4.5"));//123.4
		
		console.log("-------------------------");
		//toString()
		var aa = 10 ;
		console.log(aa);
		console.log(aa.toString());
		var bb = null;            //空值
		//console.log(bb.toString());  //Cannot read property 'toString' of null
		
		//toFixed()
		var cc = 1.346 ;
		console.log(cc.toFixed(2));  //保留两位，四舍五入
		
		console.log("-------------------------");
		
		//Number
		var q = "1" ;
		var w = "a" ;
		var e = "123abc" ;
		var r = "123.4" ;
		var t = "123.4.5" ;
		console.log(Number(q));
		console.log(Number(w));
		console.log(Number(e));
		console.log(Number(r));
		console.log(Number(t));
		
		console.log("-------------------------");
		
		//Boolean
		console.log(Boolean("a"));     //true
		console.log(Boolean(0));       //false
		console.log(Boolean("1"));     //true
		console.log(Boolean(null));    //false
		
		console.log("-------------------------");
		
		//String
		console.log(10);
		console.log(String(10));
		console.log(null);
		console.log(String("null"));
		
		
		
		
		
		
		
		
		
		
		
		</script>
	</body>
</html>

这篇关于第五次网页前端培训（JS）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript