JavaScript基础--ECMAScript

HTML决定网页主体结构和内容，CSS用于美化网页样式，JavaScript负责实现业务逻辑和页面控制等行为
JavaScript是一种运行在客户端的脚本语言，一种轻量级的编程语言 (Script：脚本)

JavaScript概述

编程语言的分类

  • 编程语言和标记语言的区别
    • 编程语言有很强的逻辑和行为能力，通常用于向机器发出一系列复杂的指令
    • 标记语言(html、css)不用于向计算机发出指令，常用于格式化和链接

参考文档
高级语言和低级语言

  • 低级语言(包括机器语言和汇编语言)
    • 计算机硬件只能识别“断开”和“闭合”两种物理状态，也就是0和1。使用机器指令效率最高，因为无需对指令进行翻译
    • 但是机器语言对人类不友好，一大串0和1，很难识别和记忆，且容易出错。但是对于机器来说秒懂
  • 高级语言
    • 高级语言采用易于识别和记忆的字符来作为关键字，也更接近人类的思维方式，编写容易读写性好，开发效率更高
    • 高级语言是可移植的，做少量修改甚至无需修改，即可将代码运行在不同平台的计算机上

编译型语言和解释型语言（相对于高级语言而言）

  • 编译型语言
    • 编译就是把一个事先编好的叫做“编译程序”的机器语言程序安装在计算机内，当需要执行高级语言程序时，编译程序就把整个“高级语言的源程序”翻译成“机器语言的目标程序”
  • 解释型语言
    • 高级语言进入计算机后，解释程序一边扫描一边解释，逐句输入逐句翻译，计算机一行一行执行，并不产生目标程序

强类型语言（静态语言）和弱类型语言（动态语言）

  • 强类型语言（静态语言）
    • 是编译时变量的数据类型就可以确定的语言，大多数静态语言要求在使用变量之前必须声明数据类型。比如Java、C、C++、C#等
    • 强类型语言是必须强制确定数据类型的语言，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这种数据类型。一个变量的类型是申明的时候就已经确定的，更安全
  • 弱类型语言（动态语言）
    • 是运行时才确定数据类型的语言，变量在使用之前无需申明类型，通常变量的值是被赋值的那个值的类型。比如Php、Asp、JavaScript、Python、Perl等等
    • 弱类型语言是数据类型可以被忽略的语言。它与强类型语言相反，一个变量可以赋不同数据类型的值。一个变量的类型是由其上下文决定的，效率更高

JavaScript是一种脚本语言，一种解释型的、弱类型的编程语言

浏览器执行JavaScript代码

JavaScript是脚本语言不需要编译
JavaScript是可插入HTML页面的编程代码，插入HTML页面后，可由所有的现代浏览器执行

浏览器分成两部分：渲染引擎和JS引擎

  • 渲染引擎：用来解析HTML与CSS，俗称浏览器内核
  • JS引擎：也称JS解释器，用来读取网页中的JavaScript代码，对其处理后运行

浏览器本身不会执行JS代码，运行过程中通过内置JS解释器(JS引擎)来逐行解释每一句JS源码(转换成机器语言)然后由计算机执行

JavaScript的应用领域

网站前端开发 -- 老本行，用来实现前端逻辑
基于Node.js技术进行服务器后端开发
桌面程序开发(Electron) -- chrome等浏览器能把JS写的程序打包成桌面应用
移动开发Web app
插件 -- Javascript是唯一一种在所有主流平台都被原生支持的编程语言，因此在所有主流平台都可以使用JS进行插件开发。常见的有浏览器插件和扩展程序
游戏开发(cocos2d-js)
...

JavaScript的组成

一个完整的 JavaScript 实现是由以下3个不同部分组成的：

  • 核心(ECMAScript)：ECMAScript描述了JavaScript语言本身的相关内容，规定了JS的编程与法和基础核心知识
  • 文档对象模型(DOM)：Document object model(整合js、css、html)，处理可扩展标记语言的标准编程接口
  • 浏览器对象模型(BOM)：Broswer object model(整合js和浏览器)，提供了独立于内容的、可以与浏览器窗口互动的对象结构

通过DOM可以对HTML页面元素进行类似CSS的样式操作；而通过BOM可以操作浏览器窗口，如弹出框，控制浏览器跳转等

ECMAScript的历史与版本

1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。
次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3 添加正则表达式添加try/catch
2009 ECMAScript 5 添加"strict mode"严格模式添加JSON支持
2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7 增加指数运算符（**）增加Array.prototype.includes

注：ES6就是指ECMAScript6。 ECMAScript4 没有发布

ECMAScript和JavaScript的关系

ECMAScript是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。完整的JavaScript实现是由ECMAScript、DOM、BOM 3个不同部分组成的
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。
一是商标，JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript，首先内置于IE 3.0
JavaScript和JScript，两者都是ECMAScript的实现和扩展

参考文档1 参考文档2

JavaScript引入方式

JS引入方式与CSS类似

  • 行内JS，将单行或少量JS代码写在html标签的事件属性中

    • 可读性差、易错、少用

  • 内嵌JS：在html文件的Script标签内书写JS代码

    <script>
  // 在这里写JS代码
</script>

  • 引入外部JS文件

    <script src="myscript.js"></script>
    • 利于html页面代码结构化，方便复用
    • 引入外部JS文件的<script></script>标签之间不能写代码

JS注释

// 单行注释 快捷键command+/ (Mac端)/Ctrl+/(windows)
/* */ 多行注释 快捷键shift+option+a(Mac端)/shift+Ctrl+a(Windows)

修改快捷键 vscode左下角 ->键盘快捷方式

注：在Mac端的VSCode中，option键被识别为Windows的alt键

几个输入输出函数

alert("输出信息");       // 浏览器弹出警示框 输出文本内容需要用引号包括起来，单引双引都可以
console.log("输出信息"); // 浏览器控制台打印输出信息
prompt("提示信息");      // 浏览器弹出输入框，用户可以输入，上方打印提示信息

浏览器控制台：打开F12，第二栏Console

JavaScript变量

  • 变量声明：使用var 变量名;的格式来进行声明；
var userName = "Alex"; // 声明并赋值(初始化)
var age = 18, sex = '男'; // 同时声明多个变量
  • 命名规范
  • JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头
  • 变量名是区分大小写的
  • 关键字、保留字不能用做变量名
  • 变量名要有意义
  • 推荐使用驼峰式命名规则

注：关于保留字，就是预留的关键字，以后可能会成为关键字，建议不要作为标识符(变量名)使用

JavaScript基本数据类型

JS是一种弱类型语言拥有动态类型，运行过程中变量的数据类型由JS引擎根据右侧值的类型判断，自动确定

// 相同的变量可用作不同的类型
var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

Number 数值类型

不区分整数和浮点型，就只有一种数字类型，默认值为0

var a = 12.34; // 浮点数
var b = 20;    // 十进制
var c = 019;   // 八进制
var d = 0x23A; // 十六进制

特殊值

  • JS中的最大值 Number.MAX_VALUE
  • JS中的最小值 Number.MIN_VALUE
  • 无穷大 infinity
  • 无穷小 -infinity
  • 非数值 NaN // Not a Number 表示不是一个数字

补充：isNaN()方法，用于判断一个变量是否为非数字类型，返回true或false

String字符串类型

字符串类型可以是"双引号"或'单引号'中的任意文本，没有引号会被认为是JS代码，而JS没有这些语法，报错
字符串中包含引号时需要引号嵌套，外单内双或外双内单都可以，看内部需要哪个

var a = "Hello";
var b = 'world';
var c = 'say: "Hello world"';

转义字符，字符串中有特殊用途的字符，需要加\才能正常使用

\n 换行符   \\ 斜杠   \' 单引号   \" 双引号   \t 缩进   \b 空格 等
  • 常用方法
var str = ' asd faf gd ';
str.length	// 返回字符串长度
str.trim()	// 移除空白
str.trimLeft()	// 移除左边的空白
str.trimRight()	// 移除右边的空白
str.charAt(n)	// 返回第n个字符
str.concat(value, ...)	// 拼接
str.indexOf(substring, start)	// 子序列位置
str.substring(from, to)	// 根据索引获取子序列
str.slice(start, end)	// 切片
str.toLowerCase()	// 小写
str.toUpperCase()	// 大写
str.split(delimiter, limit)	// 分割
  • JS中拼接字符串一般使用“+”
    拼接方式：字符串 + 任何类型 = 拼接后的字符串
    只要有字符串参与，就会把与字符串相加的任何类型转换成字符串，再拼接成新的字符串
var a = 'Hello' + ' ' + 'world'; // 字符串相加  得到'Hello world'
var b = '100' + '100';  // 数值字符串相加  得到'100100'
var c = '11' + 12;      // 数值字符串加数值  得到'1112'
var line = 122;
var d = '这里是第' + line + '行'; // 将字符串与变量拼接，方便修改字符串(变量名不加引号)   '这里是第122行'

Boolean布尔值类型

var a = true;  //true表示 真，与数字相加时值为1
var b = false; //false表示 假，与数字相加时值为0

Undefined

当声明一个变量但还没有赋值时，该变量的默认值是undefined；还有就是函数无明确的返回值时，返回的也是undefined
与字符串相加时作为'undefined'，而与数值或Boolean相加时，结果为 NaN 非数值

Null空值

表示值是空的，一般在需要指定或清空一个变量时才会使用，如name=null;
null可以手动清空一个变量的值，使得该变量变为object类型，值为null
与字符串相加时作为'null'，而与数值或Boolean相加时作为0

数据类型转换

typeof + 变量名 检测并返回变量的数据类型，typeof是一个一元运算符

  • 转换成字符串类型
var num1 = 1; alert(num1.toString); // .toString
var num2 = 1; alert(String(num2));  // String()强制转换
var num3 = 1; alert(num3 + '');     // 字符串拼接 隐式转换
  • 转换成数值类型
parseInt('123')  // parseInt(string) 转换成整数数值    返回123
parseInt('ABC')  // 返回NaN，代表非数字值的特殊值，指示某个值不是数字
parseFloat('123.456')  // parseFloat(string) 转换成浮点数数值   返回123.456
Number('12')  // Number(string)强制转换函数
'12' - 0; '12' * 1;  // JS隐式转换 通过除加法外的 -、*、/等算术运算隐式转换成数值类型

补充：prompt函数返回值、表单获取的数据是字符串类型，想要参与运算需要先转换成数值类型
如果数值字符串后带单位，转换时会无法识别而舍弃掉，如果以非数字开头，返回NaN

  • 转换成Boolean型
Boolean(1);

代表"空"、"否定"的值会被转换成false，如''(空字符串)、0、null、undefined、NaN
其余值会转换成true

运算符、表达式、返回值、运算符优先级

JS中的运算符与C语言基本一致

+ - * / %   // 算数运算符

> >= < <= != == === !==   // 比较运算符(关系运算符)

&&  ||  !   // 逻辑运算符 与、或、非

= += -= *= /= %=   // 赋值运算符
  • JS浮点数的精度问题
var result = 0.1 + 0.2; // 结果 0.30000000000000004
0.7 * 100; // 结果不是7，而是 7.00000000000000001

JS中的浮点数值的最高精度是17位小数，计算中精确度远远不如整数，不要直接判断两个浮点数是否相等

  • JS中的比较运算符 全等号 '==='
    判断两边的值和数据类型是否完全一致
console.log(18 == '18'); // true
console.log(18 === '18'); // false

上面这种情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用'=='进行比较时，JS内部会自动转换成同一类型再进行比较
所以我们以后写JS涉及到比较时尽量用'==='来强制限制类型，防止判断错误

  • JS中的逻辑运算符同样需要注意"短路问题"，即 当左侧的表达式可以决定结果时，右侧的表达式不会被执行运算

  • 运算符优先级

优先级 运算符 顺序
1 小括号 ( )
2 一元运算符 ++ -- !
3 算数运算符 先* / % 后+ -
4 关系运算符 > >= < <=
5 关系运算符 == != === !==
6 逻辑运算符 先&& 后| |
7 赋值运算符 =
8 逗号运算符 ,

流程控制(顺序结构、分支结构、循环结构)

流程控制的三种结构：顺序结构、分支结构、循环结构
逻辑与语法和C语言完全一致

  • 浏览器断点调试
    F12->sources->找到需要调试的文件->在某一行设置断点
    Watch：监视，通过watch可以监视变量值得变化，常用
    F11：程序一行一行单步执行，配合watch观察变量的值变化

  • continue、break关键字
    continue关键字用于跳出本次循环，继续下一次循环
    break关键字用于立即结束并跳出整个循环或分支

顺序结构

  • 最基本的流程控制，按代码的先后顺序依次执行

分支结构

  • if语句
// if 小括号的表达式成立，即执行代码，否则不执行
var a = 10;
if (a > 5){
  console.log("yes");
}

// if-else 双分支，有时也可以用三元表达式代替
var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

// if-else-if 多分支 多条件判断 可以用三元表达式代替，但结构复杂易错，但可以装X
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}
  • switch语句
var day = new Date().getDay();
switch (day) {
  case 0:
    console.log("Sunday");
    break; // case子句后通常都会加break语句，否则程序会继续执行后续case中的语句
  case 1:
    console.log("Monday");
    break;
default:
    console.log("...") // 所有case都不符合条件后，默认执行的语句，也可以不写
}

循环结构

  • for循环
for (var i=0;i<10;i++) {
  console.log(i);
}
// 通过多层循环嵌套实现冒泡排序等算法
  • for in循环
var obj = new Object();
for (var k in obj) {
    console.log(k); // k 输出的是 对象中的属性名
    console.log(obj[k]); // obj[k] 输出的是 属性的值
}
// 增强for循环，用于遍历对象等复杂数据类型
  • while循环
var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}
  • do while循环
var i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);
// do while循环先执行后判断，至少会执行一次循环体代码

JavaScript数组

数组的作用是：使用单独的变量名来存储一系列的值，数组属于对象类型
数组可以存放任意类型的数据，字符串、数字、Boolean等都可以存储

// 通过对象的方式创建一个空数组
var a = new Array(); 

//通过字面量的方式创建空数组  字面量：通过字面意义就可以判断出数据类型
// 数组的字面量是 [ ]
var b = []; 

//通过字面量的方式创建数组并赋值
var c = [123, "ABC"]; 

// 输出"ABC"  通过下标来访问数组元素
console.log(c[1]);

// 获取数组长度的属性：lenght，是数组对象的属性
console.log(c.lenght));

// 可以使用循环遍历整个数组
for (var i=0;i<c.lenght;i++) {
  console.log(c[i]);
}
  • 数组中新增元素
// 1. 通过修改lenght长度来扩容数组   JS中的lenght属性是可读写的
var arr = [1, '2', 'k'];
arr.lenght = 4;
console.log(arr);
console.log(arr[3]);  // 新增的数组元素没有赋值，默认值是undefind

// 2. 通过修改数组索引来追加数组元素
var arr = [1, '2', 'k'];
arr[3] = 4;
console.log(arr);
// 给已有的索引赋值会替换原本的数据
// 给数组名赋值会将整个数组覆盖掉
  • 冒泡排序算法
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.lenght; i++) { // 外层循环管理趟数
    for (var j = 0; j < arr.lenght; j++) { // 内层循环管理每一趟的交换次数
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
  • 数组的其他属性应用，之后到对象再整理，可以查阅MDN文档

JavaScript函数

可重复调用执行的代码块

函数声明(定义)与调用

// 普通函数声明(定义)
function f1() {
  console.log("Hello world!");
}
f1(); // 调用函数

// 带参数的函数
function f2(a, b) {       // 声明函数时的参数是形参 形式参数
  console.log(a, b);
}
f2(1, 2); // 调用函数时传递参数   调用函数时的参数是实参 实际参数

// 带参数与返回值的函数
function sum(a, b){
  return a + b;      // 通过return将结果传递出去
  console.log(a, b); // return后面的代码不会执行
}
var num = sum(1, 2); // 用变量接收函数的返回值
// return只能返回一个值，如果用逗号隔开多个值，以最后一个为准  如果要返回多个值，只能将其放在数组或对象中返回
// 其实如果没有return，也是有返回值的，只不过返回的是undefind

// 匿名函数声明方式 函数表达式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);
//sum是变量名不是函数名，只不过内部存储的不是值而是函数

// 立即执行函数 ==> 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);
  • 函数实参和形参个数不匹配的问题
function sum(a, b){
  return a + b;
}
sum(100, 200);            // 形参实参个数相等，正常输出  300
sum(100, 200, 300, 400);  // 实参多于形参，只取到形参的个数，后面的舍弃  300
sum(200);                 // 实参小于形参，缺少的参数被定义为undefind，输出结果为NaN 在JS中，形参的默认值是undefind
  • 函数内置的arguments对象
    arguments是伪数组，具有lenght属性且按索引方式存储数据，可以遍历获取保存的参数，但不具有数组的pop()、push()方法
function add(a,b){
  console.log(a+b);
  console.log(arguments.length); // 当不确定有多少参数传递时，可以使用arguments对象来获取
　console.log(arguments[0]);//arguments相当于将传入的参数全部包含，这里取得就是第一个元素1
}
add(1,2)
  • 参数传递
    函数的形参是局部变量，当把值类型变量作为参数传给函数形参时，是把变量的值复制一份给形参，形参的任何修改不会影响到函数外部的实参
    当把引用数据类型变量传给形参时，是把保存在栈区变量中的地址复制给形参，实参与形参操作的是同一个数据

作用域、全局变量和局部变量

  • 作用域分类(es6之前)
    全局作用域：整个script标签或者单独的js文件
    局部作用域：函数或代码块内部

  • 全局变量
    在函数外(全局作用域)声明的变量就是全局变量，网页上的所有脚本和函数都能访问它

  • 局部变量
    在函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，变量就会被删除

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

  • 链式查找
    首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层

  • 作用域链
    只要有代码，就至少有一个作用域，如果函数中还有函数或代码块，那么就又嵌套一个作用域
    作用域链：根据在内部函数可以访问外部函数变量的机制，用链式查找决定哪些数据能被内部函数访问

JavaScript预解析

  • 当前作用域下，JS代码执行之前，浏览器会默认把带有var和function声明的变量在内存中进行提前声明或者定义

  • 相当于把变量和函数的声明提升到当前作用域的最上面，但赋值和定义函数不会提升，也不会调用函数

  • 函数表达式(匿名函数)没有function声明，会以变量声明提升，如果在赋值函数体前调用函数会报错

  • 预解析会把变量和函数的声明在代码执行之前执行完成，随后从上到下执行JS代码

JavaScript对象

所有具体的事物都是对象：字符串、数字、数组、日期等等。在JavaScript中，对象是拥有属性和方法的数据

基本数据类型与引用数据类型

  • 基本数据类型
    在内存中存储的是值本身，所以也叫值类型，内存中存储位置在栈区
    string、number、boolean、undefind、null
    注：null返回的类型是一个空对象

  • 引用数据类型
    在存储时栈区的变量存储的是指向堆区的地址，对象实例存储在堆区
    通过new关键字创建的都是对象(自定义对象、内置对象)

自定义对象 创建与调用

  • 1.用字面量创建一个空对象 对象的字面量是
// 
var obj = {}; 
var alex = {   // 对象中包含属性和方法，采用键值对的形式表示
    userName: 'alex',   // 属性间以 , 隔开
    age: 18,
    sex: '男',
    say: function(){    // 方法是一个函数表达式/匿名函数
      console.log('hello world');
    }
};

// 调用对象
console.log(person.name);  // 对象.属性名 方式调用对象属性
console.log(person['age']); // 对象['属性名'] 方式调用对象属性
person.say();              // 对象.方法名() 调用对象方法
  • 2.用new Object方式创建对象
var person = new Object();  // 创建一个空对象
person.name = 'user';       // 通过 对象.属性 = 值 的方式为对象新增属性和方法
person.age = 1;             // 属性间以 ; 隔开
person.sayHi = function(){  // 方法是一个函数表达式/匿名函数
      console.log('Hi');
    }
  • 3.用构造函数的方式实例化对象
    与其他语言的“类与对象”概念相似
// function 构造函数名 (属性值参数){
//   this.属性 = 值;
//   this.方法 = function(){
// }

function Humen (userName, age, sex){  // 构造函数名首字母大写
    this.userName = userName;    // 将一类对象里一些相同的属性和方法抽取封装到一个函数中
    this.age = age;              // this 代表是这个对象的属性
    this.sex = sex;
    this.speak = function() {
      console.log('hello world');  // 构造函数不需要使用return
    }
}

// new执行时会在内存堆区中创建一个空对象并让this指向这个对象
// 然后执行构造函数里的代码，根据传递的参数为对象属性和方法赋值，最后返回新对象的地址，使用变量接收地址(指针)
var person = new Humen('person', 1, 'man');  // 配合new关键字使用，返回的是一个对象
console.log(person);
console.log(person.userName);
console.log(person.age);
console.log(person['sex']);
person.speak();

// for in循环 遍历对象
for (var k in person) {
  console.log(k); // k 输出的是 对象中的属性名或方法名
  console.log(obj[k]); // obj[k] 输出的是 属性的值 或 方法的函数表达式
}

变量--属性、函数--方法 的区别

  • 变量：单独声明赋值，单独存在
  • 属性：需要依附在对象中，不需要单独声明，用来描述对象特征
  • 函数：单独存在，单独调用
  • 方法：需要依附在对象中，由对象来调用，描述对象的行为和功能

JS的内置对象

JS内置的一些对象，提供了一些常用的基本属性和方法

通过查阅文档(如MDN) 查询更多内置对象的属性方法使用详解

  • 查阅方法的功能
  • 参数的意义和类型
  • 返回值的意义和类型
  • 通过demo测试
基本包装类型

为方便操作基本类型，JS提供了三种特殊的引用类型：String、Number、Boolean，用于将对应的基本数据类型包装成对象类型，让其拥有对象的属性和方法

//我们平常写程序的过程：
var str = 'hello'; //string 基本类型
var s2 = str.charAt(0); //在执行到这一句的时候 后台会自动完成以下动作 ：

//后台偷偷发生的
 var _str = new String('hello'); // 1.创建String类型的一个实例
 var s2 = _str.chaAt(0);         // 2.在实例上调用指定的方法，并且返回结给s2
 _str = null;                    // 3.销毁这个实例
alert(s2);  // h 
alert(str); // hello
Math 数学对象

Math数学对象不是构造函数，不需要new来实例化对象，直接使用其属性和方法(类似OC中的工具类)
常用属性和方法

console.log(Math.PI); // 获取圆周率属性
console.log(Math.max(1,22,444,2)); // 返回一组数的最大值，如果有字符串，返回NaN，参数为空返回-infinity无穷小
console.log(Math.min(1,22,444,2)); // 返回一组数的最小值
console.log(Math.abs(-1));  // 返回绝对值  数值字符串会自动转换  非数值字符串返回NaN
console.log(Math.floor(1.9));  // 取整数部分 向下取值 舍弃小数部分
console.log(Math.ceil(1.1));   // 取整数部分 向上取值 舍弃小数部分，整数位进1
console.log(Math.round());     // 四舍五入

// 随机数方法 无参数 随机返回一个小数，取值范围 0 =< X <1 
console.log(Math.random());
// 封装一个返回指定两个数之间随机整数的函数，包含这两个数
function getRandom (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
Date 日期对象

Date日期对象是构造函数，必须实例化才能使用，通过实例对象来处理日期和时间

var now = new Date(); // 返回当前日期
var time_3_15 = new Date('2022-3-15'); // 返回指定日期   固定格式的字符串参数
console.log(now);
console.log(time_3_15);

// 日期格式化方法
// 格式化年月日
var date = new Date();
var year = date.getFullYear();  // 返回年份
var month = date.getMonth();    // 返回月份 取值 0 - 11，1月返回0 想要正确输出需要+1
var dates = date.getDate();     // 返回当日日期
var day = date.getDay();        // 返回星期几 取值 0 - 6，周日返回0
// 通过字符串数组来输出汉字的星期数
var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var nowDate = '今天是:' + year + '年' + (month + 1) + '月' + dates + '日' + arr[day];
console.log(nowDate);

// 格式化时分秒
var hours = date.getHours();     // 返回当前小时数
var minutes = date.getMinutes(); // 返回当前分钟数
var seconds = date.getSeconds(); // 返回当前秒数
// 如果想要输出两位数的时间格式，小于两位数时数字补0
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var nowTime = hours + ':' + minutes + ':' + seconds;
console.log(nowTime);
// 可以将以上代码封装成函数使用


// 获取Date 当前距离1970年1月1日08:00的总毫秒数
var msDate = new Date();
var ms1 = date.valueOf(); // 方式1
var ms2 = date.getTime(); // 方式2
var ms3 = +new Date();    // 方式3 常用
var ms4 = Date.now();     // 方式4 H5新增方式 不需要实例化对象

// 倒计时实现 封装函数   毫秒数转换成日期
function countDown (inputTargetTime) {    // 时间格式的字符串参数 如'2022-1-1 08:00:00'
    var nowTime = +new Date();  // 当前时间毫秒数
    var targetTime = +new Date(inputTargetTime);   // 计时目标时间毫秒数
    var remainingTime = (targetTime - nowTime) / 1000;  // 距离目标时间剩余的总秒数
    var day = parseInt(remainingTime / 60 / 60 / 24);     // 剩余天数
    var hour = parseInt(remainingTime / 60 / 60 % 24);    // 剩余小时数
    var minute = parseInt(remainingTime / 60 % 60);       // 剩余分钟数
    var second = parseInt(remainingTime % 60);            // 剩余秒数
    // 格式化时间
    day = day < 10 ? '0' + day : day;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;
    second = second < 10 ? '0' + second : second;
    // 返回字符串
    return '剩余' + day + '天' + hour + '时' + minute + '分' + second + '秒';
}
console.log(countDown('2022-10-1 08:00:00'));
Array 数组对象
// 创建数组
// 1.字面量创建数组
var arr = [1, 2, 3];
// 2.实例化数组对象
var arr1 = new Array(); // 空数组
var arr2 = new Array(2); // 数组长度为2，元素值为空
var arr3 = new Array(2, 3); // 数组长度为2，元素值为2、3

// 检测是否为数组
// 1.instanceof 运算符
console.log(arr3 instanceof Array);
// 2.Array.isArray(参数) H5新增方法
console.log(Array.isArray(arr3));

// 添加或删除数组元素
// 添加元素
console.log(arr.push(4, '5')); // 数组末尾追加新的数组元素，参数是要加入的新元素，会改变原数组，返回值是修改过的数组长度
console.log(arr.unshift(-1, 0)); // 数组头部插入新的数组元素，参数是要加入的新元素，会改变原数组，返回值是修改过的数组长度
// 删除元素
console.log(arr.pop()); // 删除数组最后一个元素，无参数，会改变原数组，返回值是被删除的元素值
console.log(arr.shift()); // 删除数组第一个元素，无参数，会改变原数组，返回值是被删除的元素值
console.log(arr.splice(2, 2, '2', '3')); // 从 参数1 索引开始，删除 参数2 个元素，之后的参数代表原地增加的新元素

// 数组排序方法
// 翻转数组
arr.reverse();
console.log(arr);

// 冒泡排序
arr.sort(function(a, b) {
    return a - b; // 升序，  b - a为降序
});
console.log(arr);

// 根据元素查找数组索引
console.log(arr.indexOf(2)); // 查找元素并返回其索引号，查找不到返回-1，只会返回查找到的第一个元素索引
console.log(arr.lastIndexOf(2)); // 从最后一个元素开始查找元素并返回其索引号，查找不到返回-1，只会返回查找到的第一个元素索引

// 数组转换成字符串
// toString()
console.log(arr.toString()); // 将数组转换成字符串，每个元素用','连接
// join()
console.log(arr.join('-')); // 将数组转换成字符串，每个元素用字符参数'-'连接
console.log(arr.join('&')); // 将数组转换成字符串，每个元素用字符参数'&'连接

// 连接或截取数组
var newArr = arr.concat(arr3, '4'); // 连接多个数组或值，返回一个新的数组
console.log(newArr);

var newArr1 = arr.slice(2, 4); // 提取原数组中索引从参数1到参数2的所有元素(包含参数1，但不包含参数2)，
console.log(newArr1); // 如果没有参数1，会从索引0开始截取，没有参数2，会截取到数组末尾，最后返回一个含有被提取元素的新数组
String字符串对象
  • 字面量生成的字符串不可变
    字面量生成的字符串的值是常量，是不可变的，虽然看上去改变了字符串变量的值，但其实是在内存中开辟了新的空间存储新字符串，将变量中的地址指向新的空间
    而使用new实例化出来的字符串对象是可变的
// 根据字符返回位置
var str = 'hello world';
console.log(str.indexOf('o')); // 返回要查找的字符在字符串中的索引，找不到返回-1，只返回第一个找到的索引
console.log(str.indexOf('o', 2)); // 参数2 是开始查找的索引位置
console.log(str.lastIndexOf('o')); // 从后往前找

// 根据位置返回字符
console.log(str.charAt(3)); // 返回指定索引位置的字符
console.log(str.charCodeAt(3)); // 返回指定索引位置字符的ASCII码值
console.log(str[3]); // 返回指定索引位置的字符 H5新增

// 连接或截取字符串
var newStr = str.concat(' 2022', ' 02', '-26'); // 连接多个字符串，返回的是一个新的字符串
console.log(newStr);

var newStr1 = str.substr(6, 5); // 从 参数1 索引开始，截取 参数2 个字符，返回的是一个新的字符串
console.log(newStr1);

var newStr2 = str.slice(0, 5); // 从 参数1 索引开始，截取到 参数2 索引位置(参数2 索引位置截取不到)，返回的是一个新的字符串
console.log(newStr2);

var newStr3 = newStr.substring(12, 16); // 从 参数1 索引开始，截取到 参数2 索引位置(参数2 索引位置截取不到)，返回的是一个新的字符串
console.log(newStr3);

// 替换字符
var newStr4 = newStr.replace('-', ' ');
console.log(newStr4); // 字符串中第一个 参数1 字符，替换为 参数2 字符，返回一个新字符串

// 字符串转换成数组
console.log(newStr4.split(' ')); // 将字符串以 参数字符 作为分隔拆开，返回一个数组

// 字符大小写转换
var upperCaseStr = str.toUpperCase(); // 所有字符转换成大写，返回新字符串
console.log(upperCaseStr);

var lowerCaseStr = upperCaseStr.toLowerCase(); // 所有字符转换成小写，返回新字符串
console.log(lowerCaseStr);
posted @   ChiseledPumpkin  阅读(88)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript库-jQuery
· Ajax使用
· JavaScript总结
· 前端之JavaScript
· JavaScript基础1
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae