第五次网页前端培训(JS)
2022/2/10 6:13:39
本文主要是介绍第五次网页前端培训(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)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南
- 2024-11-16Vue项目实战:新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解:React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南:从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习:新手入门教程与实践指南
- 2024-11-16Vue3学习:从入门到初级实战教程