前端基础学习(3) JavaScript概述 JavaScript数据类型 JavaScript内置对象与方法
前端基础学习(3) JavaScript概述 JavaScript数据类型 JavaScript内置对象与方法
一、今日内容
- JavaScript 概述
- JavaScript 数据类型
- JavaScript 运算符与流程控制
- JavaScript 函数
- JavaScript 内置对象与方法
二、JavaScript概述
-
ECMAScript 和 JavaScript 的关系
ECMAScript 与 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现;我们现如今学习的主要是ES6,即 ECMAScript 6 标准;
-
JavaScript 的组成
尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,也不是唯一被标准化的部分;一个完整的 JavaScript 实现是由以下3个不同的部分组成的:
- ECMAScript:核心;
- DOM(Document Object Model,即文档对象模型):整合js CSS html;
- BOM(Browser Object Model,即浏览器对象模型):整合 js 和浏览器;
-
JavaScript 代码的引入方式
可以写在
<head>
标签内,也可以写在<body>
标签内,也可以写在两者之外,但要在<html>
标签内;-
方式一:JavaScript 代码嵌在 HTML 代码内;
<script> alert('澳门皇家赌场上线了'); </script>
-
方式二:引入外部的 JavaScript 文件;
// js_case.js alert('是否满十八岁?');
case.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1> spa会锁 </h1> <script src="js_case.js"></script> </body> </html>
-
-
JavaScript 的注释方式
// 注释内容
-
JavaScript 变量声明
- JS 的变量名可以使用_、数字、字母、$组成,不能以数字开头;
- 声明变量使用
var 变量名;
的格式来进行声明;
注意:
- 变量名是区分大小写的;
- 推荐使用驼峰式命名规则,首字母大写;
- 保留字不能用作变量名;
三、JavaScript 数据类型
同 Python 一样,JavaScript 也具有动态数据类型,但是声明变量的方法与 Python 有所不同;
var x1 = 1;
var x2 = "alex";
// 利用typeof可以查看变量的数据类型
typeof x1; // number
typeof x2; // string
-
数值类型(Number)
JS 不区分整形和浮点型,只有一种数值类型;
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123 // parseInt和parseFloat方法 parseInt("123"); // 返回123a parseInt("123a"); // 返回123 parseInt("ABC"); // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。 parseFloat("123.456"); // 返回123.456
注意:NAN(Not a Number)本身也属于数值类型。
-
字符串类型(String)
var a = "hello" var b = "world" var c = a + b; console.log(c); // helloworld
字符串类型具有下列方法:
var a = "hello world"; a.length; // 返回长度 a.trim(); // 移除空白 a.trimLeft(); // 移除左空白 a.trimRigth(); // 移除右空白 a.charAt(n); // 返回第n个字符 a.concat(value,...); // 拼接 concatenation a.indexOf(substring, start); // 子序列位置,没有返回-1 a.sustring(from, to); // 根据索引获取子序列,不支持负数 a.slice(start, end); // 切片,支持负数 a.toLowerCase(); // 变成小写 a.toUpperCase(); // 变成大写 a.split(delimiter, limit); // 分割
-
boolean 类型
区别于 Python,JavaScript 中的布尔类型元素都是小写,如
true
和false
;并且,""
\0
\null
\undefined
\NaN
都等价于false
; -
null
和undefined
null
表示值为空,一般在需要指定或者清空一个变量时才会使用,如name = null
;undefined
表示声明一个变量但未初始化时,该变量的默认值是undefined
,还有函数无明确的返回值时,返回的也是undefined
;即,
null
表示变量值为空,undefined
表示只声明了变量但没有赋值; -
对象类型 object
JavaScript 中所有的事物都是对象:字符串、数值、数组、函数;此外 JavaScript 允许自定义对象;JavaScript 提供多个内建对象,如 Number、String、Date、Array等,通过 new 实例化的对象都是 object 类型,如:
var o = new String('hello');
,数组不需要 new 声明,类型就是 object;对象属于带有属性和方法的特殊数据类型;
-
数组
var a = [123, "abc"]; // 数组实例方法1 var b = new Array([22, 33]); // 数组实例方法2 typeof a; // object typeof b; // object console.log(a[0]); // 根据索引取值
数组的常用方法:
var a = [123, "abc"]; a.length; // 返回长度 a.push(ele); // 尾部追加元素 a.pop(); // 获取尾部元素 a.unshift(ele); // 头部插入元素 a.shift(); // 头部移除元素 a.slice(start, end); // 切片 a.reverse(); // 反转 a.join(seq); // 将数组元素连接成字符串 a.concat(cal,...); // 连接数组 a.sort(); // 排血 a.forEach(); // 将数组的每个元素传递给回调函数 a.splice(); // 删除元素,并向数组添加新元素 a.map(); // 返回一个数组元素调用函数处理后的值的新数组
sort 方法的具体使用:
// 声明排序函数(该排序本质上是冒泡排序) function sortNumber(a, b){ return a - b; } var arr = {100, 11, 22, 55, 33, 44}; arr.sort(sortNumber);
-
自定义对象
var a = {'name': 'liutianyi', 'age': 22}; console.log(a.name); // 索引方式1 console.log(a['name']); // 索引方式2
// 遍历对象中内容 var a = {'name': 'liutianyi', 'age': 22, 'gender': 'male'}; for (var i in a){ console.log(i, a[i]); } // 返回结果: // name liutianyi // age 22 // gender male
四、JavaScript 运算符与流程控制
-
运算符
// 算数运算符 + - * / % ++ -- i++ ++i等,用法和C/C++相同; // 比较运算符 > >= < <= != == === !== // 注意: // 1 == "1" 称为弱等于,比较的过程为将不同的数据类型变为相同,如果转换后相同即返回true // 1 === "1" 称为强等于,只有在值和数据类型都完全相等才会返回true // 日常使用要尽量使用强等于 // 逻辑运算符 && || ! 分别代表与、或、非 // 赋值运算符 = += -= *= /=等,用法和C/C++相同;
-
流程控制
-
if - else:比较简单,不举例了;
-
if - else if - else:比较简单,不举例了;
-
switch 切换:其实和C/C++上的 switch-case 用法也一样,举一个简单的例子:
var day = new Date().getDay(); // 获取当前是星期几,用0~6表示,0表示星期日 switch (day) { // 表示比较的变量为day case 0: // 如果day为0: console.log("Sunday"); break; // 如果此处不break,会继续执行下面的内容 case 1: console.log("Monday"); break; case 2: console.log)("Tuesday"); break; case 3: console.log("Wednesday"); break; case 4: console.log("Thursday"); break; case 5: console.log("Friday"); break; case 6: console.log("Saturday"); break; } // 如果想要满足多个条件中的一个就执行对应逻辑的写法: switch (day) { case 0: case 6: console.log("Weekend"); break; case 1: case 2: case 3: case 4: case 5: console.log("Working day"); break; }
-
for:有两种用法,一种类似 C 语言,另一种类似 Python:
// 用法1:用法同C/C++,并且与C++一样可以在括号内声明变量 for (var i = 0; i < 10; i++){ console.log(i); } // 用法2:用法同Python var dic = {'name': 'liutianyi', 'age': 10}; for (var i in dic) { console.log(k, dic[i]); }
-
while:同 C/C++ 用法相同:
var i = 0; while (i < 10) { console.log(i); i++; }
-
三元运算
var a = 1; var b = 2; var c = a > b ? a : b; // 如果a>b这个条件成立,就返回a,如果不成立就返回b;
-
五、JavaScript 函数
-
函数定义
// 不带参数的函数 function f1() { console.log("hello world"); } // 带参数的函数 function f2(a, b) { console.log(arguments); console.log(arguments.length); console.log(a, b); } // 带返回值的函数 function sum(a, b) { return a + b; } // 匿名函数 // 在ES6中,使用var声明可能会飘黄,建议使用let来定义变量,不过不影响使用 var sum = function (a, b) { return a + b; } sum(1, 2); // 立即执行函数,页面加载到这里,就立即执行,不需要被调用 (function (a, b) { return a + b; })(1, 2);
-
全局变量和局部变量
-
局部变量:在 JavaScript 中函数内部声明的变量就是局部变量,所以只能在函数内部访问它。只要函数运行完毕本地变量就会被删除;
-
全局变量:在函数外声明的变量是全局变量,网页上所有的脚本和函数都可以访问它;
-
变量生存周期:JavaScript 中变量的生命期从他们被声明的时间开始;局部变量会在函数运行后被删除;全局变量会在页面关闭后被删除;
-
作用域:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层;
-
闭包:将部分不想被外部调用的变量封存在函数内部,JavaScript 的闭包实现基本方式如下:
var city = "beijing"; function f(){ var city = "shanghai"; function inner(){ console.log(city); } reuturn inner; } var ret = f(); ret(); // 返回结果shanghai
-
-
词法分析
JavaScript 在调用函数时,会先进行词法分析,词法分析的过程如下:
自动形成一个 Avitive Object(激活对象,AO),并会分析以下3个方面:
- 函数参数:如果有,则将此参数赋值给AO,且值为 undefined。如果没有,则不做任何操作,但是一般有参数的时候,我们在执行函数的时候就把参数赋值给了这个函数,所以不会打印出 undefined 的效果;
- 函数局部变量:如果 AO 上有同名的值,则不做任何操作。如果没有,则将此变量赋值给 AO,并且值为 undefined;
- 函数声明:如果 AO 上有,则会将 AO 上的对象覆盖,如果没有,则不做任何操作;
函数内部无论是使用参数还是使用局部变量都要到 AO 上寻找。
六、JavaScript 内置对象与方法
-
JavaScript 面向对象
在 ES5 中没有类的概念,可以通过使用构造函数和原型链方法来实现类功能:
function Person(name) { this.name = name; } Person.prototype.func1 = function() { console.log(this.name, '爱编程!'); } var p = new Person('raigor'); console.log(p.name); // raigor console.log(p.func1()); // raigor 爱编程!
在 ES6 中新增了封装类的方法,并且支持继承:
class Person { constructor(name, age) { this.name = name; this.age = age; } showname() { console.log(this.name); } showage() { console.log(this.age); } } let p2 = new Person('aaa', 18); p2.showname();
-
Date 对象
-
创建 Date 对象:
// 方法1:不指定参数 var d1 = new Date(); // 获取当前时间 console.log(d1.toLocaleString()); // 当前时间日期的字符串表示:2020/11/9 上午11:22:10 // 方法2:参数日期为字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); // 2004/3/20 上午11:12:00 var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); // 2020/4/3 上午11:12:00 // 方法3:参数为毫秒数,从计算机元年开始 var d4 = new Date(5000); console.log(d4.toLocaleString()); // 1970/1/1 上午8:00:05 console.log(d4.toUTCString()); // Thu, 01 Jan 1970 00:00:05 GMT // 方法4:参数为年月日小时分钟毫秒 var d5 = new Date(2004, 2, 20, 11, 12, 0, 300); console.log(d5.toLocaleString()); // 2004/3/20 上午11:12:00
-
Date 对象的方法
var d = new Date(); d.getDate(); // 获取日 d.getDay(); // 获取星期,0-6表示,其中0表示星期日 d.getMonth(); // 获取月,0-11表示,其中0表示一月 d.getFullYear(); // 获取完整年份 d.getHours(); // 获取小时 d.getMinutes(); // 获取分钟 d.getSeconds(); // 获取秒 d.getMilliseconds(); // 获取毫秒 d.getTime(); // 返回累计毫秒数,即时间戳
-
-
JSON 对象
JSON 字符串的应用已经介绍过了,不继续赘述,JavaScript 的 JSON 对象使用方法如下:
var str1 = '{"name": "chao", "age": 18}'; var obj1 = {"name": "chao", "age": 18}; var obj = JSON.parse(str1); // 将字符串转换为对象 var string = JSON.stringfy(obj1); // 将对象转换成JSON字符串
-
RegExp 对象
JavaScript 主要依靠 RegExp 对象来实现字符串匹配等正则表达式操作,其实例化的方法如下:
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 实例化一个RegExp对象 var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 实例化RegExp的简单写法,与上者等价 reg1.test('hellllo'); // true // 注意:如果直接写一个reg2.test(),参数什么也不写,直接执行,可能会返回一个true // 这时因为什么也不写会默认传一个undefined,经处理后变成undefined字符串,所以有时会匹配成功
同时,字符串数据类型(String)也可以使用正则表达式进行匹配,具体如下:
var s = "hello world"; s.match(/o/g); // 查找字符串中符合正则的内容,g的意思是匹配所有; s.search(/h/g); // 查找字符串中符合正则表达式的位置,返回第一个匹配到的元素的索引位置,加不加g效果相同 s.split(/o/g); // 按照正则表达式对字符串进行切割,获得一个新值,原数据不变 s.replace(/o/g, "s"); // 对字符串按照正则进行替换 // g为匹配全部 i为匹配时不区分大小写
注意:test使用g全局匹配的时候,每次匹配成功都会记录下当前的光标;下一次匹配的时候会从记录光标下一个开始再次进行匹配,所以可能导致出现这种情况;
var reg = /a/g; var s = 'alex a sb'; reg.test(s); // true console.log(reg.lastIndex); // 1 reg.test(s); // true console.log(reg.lastIndex); // 6 reg.test(s); // false console.log(reg.lastIndex); // 0 reg.test(s); // true console.log(reg.lastIndex); // 1
-
Math 对象
类似于Python的内置函数 Math.abs(x) // 返回数的绝对值 Math.exp(x) // 返回e的指数 Math.floor(x) // 小数部分进行舍去 Math.log(x) // 返回数的自然对数 Math.max(x, y) // 返回最大值 Math.min(x, y) // 返回最小值 Math.pow(x, y) // 返回x的y次幂 Math.random() // 返回0~1之间的随机数 Math.round(x) // 返回四舍五入之后的整数 Math.sin(x) // 返回正弦 Math.sqrt(x) // 返回平方根 Math.tan(x) // 返回正切值