前端基础学习（3） JavaScript概述 JavaScript数据类型 JavaScript内置对象与方法

前端基础学习（3） JavaScript概述 JavaScript数据类型 JavaScript内置对象与方法

一、今日内容

  • JavaScript 概述
  • JavaScript 数据类型
  • JavaScript 运算符与流程控制
  • JavaScript 函数
  • JavaScript 内置对象与方法

二、JavaScript概述

  1. ECMAScript 和 JavaScript 的关系

    ECMAScript 与 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现；我们现如今学习的主要是ES6，即 ECMAScript 6 标准；

  2. JavaScript 的组成

    尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，也不是唯一被标准化的部分；一个完整的 JavaScript 实现是由以下3个不同的部分组成的：

    • ECMAScript：核心；
    • DOM（Document Object Model，即文档对象模型）：整合js CSS html；
    • BOM（Browser Object Model，即浏览器对象模型）：整合 js 和浏览器；

  3. 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>

  4. JavaScript 的注释方式

    // 注释内容

  5. JavaScript 变量声明

    • JS 的变量名可以使用_、数字、字母、$组成，不能以数字开头；
    • 声明变量使用var 变量名;的格式来进行声明；

    注意：

    • 变量名是区分大小写的；
    • 推荐使用驼峰式命名规则，首字母大写；
    • 保留字不能用作变量名；

三、JavaScript 数据类型

同 Python 一样，JavaScript 也具有动态数据类型，但是声明变量的方法与 Python 有所不同；

var x1 = 1;
var x2 = "alex";

// 利用typeof可以查看变量的数据类型
typeof x1;  // number
typeof x2;  // string

  1. 数值类型（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)本身也属于数值类型。

  2. 字符串类型（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);  // 分割

  3. boolean 类型

    区别于 Python，JavaScript 中的布尔类型元素都是小写，如 true和false；并且，""0nullundefinedNaN都等价于false；

  4. null和undefined

    null表示值为空，一般在需要指定或者清空一个变量时才会使用，如name = null；

    undefined表示声明一个变量但未初始化时，该变量的默认值是undefined，还有函数无明确的返回值时，返回的也是undefined；

    即，null表示变量值为空，undefined表示只声明了变量但没有赋值；

  5. 对象类型 object

    JavaScript 中所有的事物都是对象：字符串、数值、数组、函数；此外 JavaScript 允许自定义对象；JavaScript 提供多个内建对象，如 Number、String、Date、Array等，通过 new 实例化的对象都是 object 类型，如：var o = new String('hello');，数组不需要 new 声明，类型就是 object；

    对象属于带有属性和方法的特殊数据类型；

  6. 数组

    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);

  7. 自定义对象

    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 运算符与流程控制

  1. 运算符

    // 算数运算符
+ - * / % ++ -- i++ ++i等，用法和C/C++相同；

// 比较运算符
> >= < <= != == === !==
// 注意：
// 1 == "1" 称为弱等于，比较的过程为将不同的数据类型变为相同，如果转换后相同即返回true
// 1 === "1" 称为强等于，只有在值和数据类型都完全相等才会返回true
// 日常使用要尽量使用强等于

// 逻辑运算符
&& || ! 分别代表与、或、非 

// 赋值运算符
= += -= *= /=等，用法和C/C++相同；

  2. 流程控制

    • 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 函数

  1. 函数定义

    // 不带参数的函数
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);

  2. 全局变量和局部变量

    • 局部变量：在 JavaScript 中函数内部声明的变量就是局部变量，所以只能在函数内部访问它。只要函数运行完毕本地变量就会被删除；

    • 全局变量：在函数外声明的变量是全局变量，网页上所有的脚本和函数都可以访问它；

    • 变量生存周期：JavaScript 中变量的生命期从他们被声明的时间开始；局部变量会在函数运行后被删除；全局变量会在页面关闭后被删除；

    • 作用域：首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层；

    • 闭包：将部分不想被外部调用的变量封存在函数内部，JavaScript 的闭包实现基本方式如下：

      var city = "beijing";
function f(){
	var city = "shanghai";
	function inner(){
		console.log(city);
	}
	reuturn inner;
}
var ret = f();
ret();  // 返回结果shanghai

  3. 词法分析

    JavaScript 在调用函数时，会先进行词法分析，词法分析的过程如下：

    自动形成一个 Avitive Object（激活对象，AO），并会分析以下3个方面：

    • 函数参数：如果有，则将此参数赋值给AO，且值为 undefined。如果没有，则不做任何操作，但是一般有参数的时候，我们在执行函数的时候就把参数赋值给了这个函数，所以不会打印出 undefined 的效果；
    • 函数局部变量：如果 AO 上有同名的值，则不做任何操作。如果没有，则将此变量赋值给 AO，并且值为 undefined；
    • 函数声明：如果 AO 上有，则会将 AO 上的对象覆盖，如果没有，则不做任何操作；

    函数内部无论是使用参数还是使用局部变量都要到 AO 上寻找。

六、JavaScript 内置对象与方法

  1. 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();

  2. 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();  // 返回累计毫秒数，即时间戳

  3. 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字符串

  4. 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

  5. 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)  // 返回正切值
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/raygor/p/13949388.html