JavaScript基础

最新推荐文章于 2022-09-28 17:18:43 发布
最新推荐文章于 2022-09-28 17:18:43 发布
阅读量366 收藏
点赞数
分类专栏： 前端三件套 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68536490/article/details/126295179
版权

####计算机语言
计算机语言只用于人与计算机之间，通讯的语言，它是人与计算机之间传递信息的媒介，计算机语言的种类非常的多，总的来说可以分为机器语言，汇编语言和高级语言

实际上，计算机最终所执行的是机器语言，它是由0和1组成的二进制数，二进制是计算机语言的基础

####编程语言
汇编语言是用来控制计算机的一系列指令，他有固定的格式和词汇不同，编程语言的格式和词汇不一样，必须遵守如今通用的编程语言，有两种形式，汇编语言和高级语言

汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆
高级语言，主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有c语言，java，c#，Python，php，JavaScript，Go语言，Objective-C，Swift等

####翻译器
高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个编译器，编译器可以将我们所编写的源代码转换为机器语言，也被称为二进制化，记住1和0

####编程语言和标记语言的区别
编程语言有很强的逻辑和行为能力，在编程语言里，你会看到很多if else，for，while等具有逻辑性和行为能力的指令，这是主动的

标记语言不用于向计算机发出指令，常用于格式化和链接标记语言的存在，是用来被读取的，他是被动的

总结
计算机可以帮助人类解决某些问题
程序员利用编程语言编写程序发出指令，控制计算机来实现这些任务
编程语言有机器语言汇编语言高级语言
高级语言需要一个翻译器转换为计算机识别的机器语言
编程语言是主动的，有很强的逻辑性

计算机组成：计算机由硬件和软件组成

  • 硬件由1.输入输出设备2.CPU中央处理器（负责处理数据与运算）3.硬盘（永久存储数据）4.内存（暂时存储数据）
  • 软件由：1.系统软件（Windows、Linux、macOS）2.应用软件（浏览器、QQ、VScode、Sublime、Word）

####程序运行

  1. 打开某个程序时，先从硬盘中把程序的代码加载到内存中
  2. CPU执行内存中的代码

**注意：**之所以要内存的重要原因在于CPU太快了，如果只从硬盘中读数据，会浪费CPU性能，所以，才使用存取速度更快的内存来保存运行时的数据（内存用的是电，硬盘是机械）

JavaScript

  • JavaScript（简称JS）是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）
  • 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
  • 现在也可以基于Node.js技术进行服务器端编程

###JavaScript的作用：

  • 表单动态校验（密码强度检测）（JS产生最初目的）
  • 网页特效
  • 服务端开发（Node.js）
  • 桌面程序（Electron）
  • App（Cordova）
  • 控制硬件-物联网（Ruff）
  • 游戏开发（Cocos2d-js）

####浏览器执行JS简介
浏览器分为渲染引擎和JS引擎

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

JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行

####JS组成
JavaScript由 ECMAScript(JavaScript语法)、DOM（页面文档对象模型）、BOM（浏览器对象模型）

1. ECMAScript
ECMAScript是由ECMA国际进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript。
JavaScript是网景公司发明的，JScript是微软公司发明的，但本质上，功能上是一样的

ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵循的一套JS语法工业标准

2. DOM——文档对象模型
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

3. BOM——浏览器对象模型
BOM，是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS有3种书写位置，分别为行内、内嵌和外部

1. 行内式JS
> < input type=“button” value=“点我试试” οnclick=“alert(‘Hello world’)”/>

  • 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
  • 注意单双引号使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
  • 可读性差，在HTML中编写JS大量代码时，不方便阅读
  • 引号易错，引号多层嵌套匹配时，非常容易弄混
  • 特殊情况下使用

2. 内嵌JS

< script>
alert(‘Hello World’);
< /script>

  • 可以将多行JS代码写到< script>标签中
  • 内嵌JS是学习JS时常用的方式

3. 外部JS文件

< script src=“my.js”>< /script>

  • 利于HTML页面代码结构化，把大量JS代码独立到HTML页面之外，美观又方便文件级别的复用
  • 引用外部JS文件的< script>< /script>标签中间不可以写代码
  • 适合于JS代码量比较大的情况

#####注释
单行注释// 快捷键默认是ctrl+/
多行注释/* */ 快捷键默认是shift+alt+a

####JavaScript输入输出语句

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印出输出信息浏览器
prompt(info)浏览器弹出输入框，用户可以输入浏览器

注意：prompt取过来的值是string类型的
如果想输出多个用逗号分隔，如：console.log(1,2,3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //这是一个输入框
        prompt('请输入您的年龄');
        //alert弹出警示框 输出的 展示给用户的
        alert('计算的结果是');
        //console控制台输出 给程序员测试用的
        console.log('我是程序员能看到的');
    </script>
</head>
<body>
    
</body>
</html>

##变量
####1. 声明变量

var age; //声明一个名称为age的变量

  • var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机自动为变量分配内存空间，不需要程序员管
  • age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

####2. 赋值

age=10; //给age这个变量赋值为10

####3. 变量的初始化

var age = 18; //声明变量同时赋值为18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname = prompt('请输入你的名字');
         alert('欢迎'+myname);   
    </script>
</head>
<body>
    
</body>
</html>

####4. 更新变量
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将最后一次赋的值为准

####5. 同时声明多个变量
如：

var age, name=llm, work;

####6. 声明变量特殊情况

情况说明结果
var age; console.log(age);只声明不赋值undefined
console.log(age)不声明 不赋值 直接使用报错
age=10; console.log(age);不声明 只赋值10

###变量命名规范

  • 由字母（A-Z，a-z）、数字（0~9）、下划线 _ 、美元符号$ 组成
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字、保留字
  • 变量名必须有意义
  • 遵守驼峰命名法
  • 尽量不要使用name作为变量名

####数据类型
JavaScript是一种弱类型语言或者说动态语言，这意味着不用提前声明变量的类型，在程序运行中，类型会被自动确定

var age = 10; //这是一个数字型
var areYouOK = ‘是的’; //这是一个字符串类型

变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型

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

var x = 6;
var x =“Bill”;

###数据类型的分类
JS把数据类型分为两类：

  • 简单数据类型（Number,String,Boolean,Undefined,Null）
  • 复杂数据类型（object）

1. 简单数据类型

简单数据类型说明默认值
Number数字型，包含整型值和浮点型值，如21、0.210
Boolean布尔值类型，如true、false,等价于1和0false
String字符串类型，如“张三”注意咱们js里面，字符串都带引号“”
Umdefinedvar a; 声明了变量a但是没有给值，此时a=undefinedundefined
Nullvar a=null; 声明了变量a为空值null

数字型范围

alert(Number.MAX_VALUE); //数值的最大值
alert(Number.MIN_VALUE); //数值的最小值

数字型三个特殊值

alert(Infinity); //代表无穷大
alert(-Infinity); //代表无穷小
alert(NaN); //Not a number代表一个非数值

用isNaN()这个方法判断非数字

console.log(isNaN(12)); //结果返回一个false
console.log(isNaN(‘llm’)); //结果返回一个true

字符串型String
字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号 ‘’
因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号

字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

字符串转义符
转义字符都是\开头的，但是这些转义字符要写到引号里面才生效，常用的转义字符及其说明如下：

转义字符解释说明
\ n换行符，n是newline的意思
\ \斜杠|
\ ’'单引号
\ ""双引号
\ttab缩进
\b空格，b是blank的意思

字符串长度
通过字符串的length属性可以获取整个字符串的长度

var strMsg = “我爱编程”;
alert( strMsg.length); //显示4

字符串拼接

  • 多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

alert(‘hello’ + ’ ’ + ‘world’); //hello world
alert(‘100’ + ‘100’); //100100
alert(‘11’ + 12); //1112

数值相加，字符相连

typeof可以用来获取检测变量的数据类型

console.log(typeof 变量名)

字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

  • 数字字面量：8，9，10
  • 字符串字面量：‘程序员’，‘前端三件套’
  • 布尔字面量：true,false

数据类型的转换
1. 转换为字符串

方式说明案例
toString()转成字符串var num=1;alert(num.toString());
String()强制转换转成字符串var num=1;alert(String(num));
加号拼接字符串(常用)和字符串拼接的结果都是字符串var num=1;alert(num+‘我是字符串’);

2. 转换为数字型

方式说明案例
函数parseInt(变量名)将string类型转成整数数值parseInt(‘78’)
函数parseFloat(变量名)将string类型转成浮点数数值型parseFloat('78.21)
Number()强制转换函数将string类型转换成数值型Number(‘12’)
js隐式转换（- * /）利用算术运算隐式转换为数值型‘12’ - 0
注意：

console.log(parseInt(‘3.14’));//3 取整
console.log(parseInt(‘3.94’));//3 取整，不会四舍五入
console.log(parseInt(‘200px’));//200 会自动去掉这个px单位（但是如果是rem200px，数字前面有字母则全部截掉，不会输出200）

注意：parseInt和parseFloat单词的大小写，这2个转换是重点

转换为布尔型

方式说明案例
Boolean()函数其他类型转成布尔值Boolean(‘true’)
  • 代表空、否定的值会被转换成false、如’'、0、NaN、null、undefined
  • 其余值都会被转换成true，如 ‘小白’、12

扩展知识：
编程语言需要通过翻译器翻译成机器语言才能执行程序

  • 翻译器翻译的方式有两种：一个是编译,另外一个是解释。两种方式之间区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行编译，生成中间代码文件
  • 解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行时也称之为解释器）

JavaScript的 == 有自动转型功能
===全等号，要求值和数据类型都一致
！==不全等号，要求值和数据类型一致

短路与

console.log(123 && 456); //456
coonsole.log(0 && 456);//0
console.log(0 && 1+2 && 456+56789);//0
console.log('' && 1+2 && 456+56789);//''
//如果有空字符''或者否定的都为假，其余都是真的
//否定的有 0 '' null undefined NaN

短路或

console.log(123||456);//123
console.log(123||456||456+123);//123
console.log(0 || 456 || 456+123);//456

var num=0;
console.log(123||num++);
console.log(num);//0

switch()语句里面的值必须和case 里面的值全等才会执行，（即数值与类型都相等）

####断点调试
断点调试可以帮我们观察程序的过程
浏览器中按F12——>sources–>找到需要调试的文件–>在程序的某一行设置断点
Watch: 监视，通过Watch可以监视变量的值的变化，非常的常用
F11： 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化

####利用new创建数组

var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组
var arr = new Array(3);//数组长度为3
var arr = new Array(2,3,4);//等价于[ 2,3,4 ] 就表示里面有3个数组元素

####利用数组字面量创建数组（常用）

//1. 使用数组字面量方式创建空数组
var 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = [‘小白’,‘大黑’,‘大黄’,1,2,682];//可以放不同的数据类型

数组里面可以放不同的数据类型
访问数组某个值

console.log(数组名[ 0 ]);//访问第0个元素

数组长度也可以用.length()来计算

数组名 . length
arr.length

####通过修改length长度新增数组元素

  • 可以通过修改length长度来实现数组扩容的目的
  • length属性是可读写的

var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
arr.length=7;
console.log(arr);
console.log(arr[ 4 ]);
console.log(arr[ 5 ]);
console.log(arr[ 6 ]);

其中索引号是4，5，6的空间没有给值，就是声明变量未给值，默认值就是undefined.

####通过修改数组索引新增数组元素

  • 可以通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
arr[ 4 ] = ‘hotpink’;
console.log(arr);

这种方式也是我们最常用的一种方式

###函数
1. 声明函数

//声明函数
function 函数名(){
//函数体代码
}

  • function是声明函数的关键字，必须小写
  • 由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum

2. 调用函数

函数名();

####函数形参和实参个数不匹配问题

参数个数说明
实参个数等于形参个数输出正确结果
实参个数多于形参个数只取到形参的个数
实参个数少于形参个数多的形参定义为undefined,结果为NaN

在JavaScript中，形参的默认值是undefined

return只能返回一个值，但通过返回一个数组可以返回多个值
如果函数没有return，则返回结果为undefined

return: 不仅可以退出循环，还可以返回return语句中的值，同时还可以结束当前的函数体内的代码

###arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

function 函数名(arguments){}
console.log(arguments[ 2 ]);//可以单独输出第2个数据

注意：只有函数才有arguments对象，而且是每个函数都内置好了这个arguments
arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

  • 具有length属性
  • 按索引方式存储数据
  • 不具有数组的push,pop等方法。

####函数的另一种声明方式(匿名函数)
如：

var fun = function(){};
fun();//此时，fun是变量名不是函数名，匿名函数通过变量名调用函数

JavaScript不像Java、C++等语言那样有块级作用域但是在es6的时候新增了块级作用域
所以以下代码可以实现：

if(3<5)
{ var num=10;
}
console.log(num);

####作用域链

  • 如果在函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  • 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就成为作用域链 （就近原则）

var num=10;
function fun(){
var num=20;

  function fun2(){
   console.log(num);//20
   }

}

###预解析

  1. js引擎运行js分为两步： 预解析 代码执行
    • 预解析 js引擎会把js里面所有var还有function提升到当前作用域的最前面
    • 代码执行 按照代码书写的顺序从上往下执行
  2. 预解析分为 变量预解析（变量提升） 和 函数解析（函数提升）
    • 变量提升 就是把所有的变量声明提升到当前作用域最前面 不提升赋值操作
    • 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

console.log(num);//undefined
var num = 10;
//相当于执行了以下代码
var num;
console.log(num);
num = 10;

f1();
console.log©;
console.log(b);
console.log(a);
function f1(){
var a=b=c=9; //其中var 只声明了a变量，其他b,c都是赋值操作，看作全局变量
console.log(a);
console.log(b);
console.log©;
}
//9，9，9，9，9，undefined

###创建对象的三种方式
在JavaScript中，现阶段我们可以采用三种方式创建对象（object）:

  • 利用字面量创建对象
  • 利用new Object创建对象
  • 利用构造函数创建对象

1. 对象字面量
对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法

//1.利用对象字面量创建对象
var obj = {
uname:‘唐三’，
age:18,
sex:‘男’,
sayHi:function(){
console.log(‘hi’);
}
}
//里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
//多个属性或者方法中间用逗号隔开
//方法冒号后面跟的是一个匿名函数

使用对象法一
我们采取 对象名.属性名

console.log(obj.uname);

使用对象法二
对象名[’ 属性名 ']

调用对象的方法
对象名.方法名

obj.sayHi();

变量、属性、函数、方法总结

  • 变量：单独声明赋值，单独存在
  • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特性
  • 函数：单独存在，通过’函数名（）'方式就可以调用
  • 方法：对象里面的函数称为方法，方法不需要声明，使用”对象.方法名（）“的方式就可以调用，方法用来描述该对象的行为和功能

2. 利用new Object创建对象

var obj = new Object();//创建了一个空的对象
obj.uname = ‘唐三’;
obj.age = 18;
obj.sex = ‘男’;
obj.sayHi = function(){
console.log(‘hi’);
}
//利用 = 等号赋值方法 添加对象的属性和方法
//每个属性和方法之间用 分号结束
console.log(obj.uname);
console.log(obj[’ sex ']);
obj.sayHi();

3. 利用构造函数创建对象

function Star(uname,age,sex){
this. name = uname;
this.age = age;
this.sex = sex;
this.sing = function(song){
console.log(song);
}
}
var ldh = new Star(‘刘德华’,18,‘男’);
console.log(typeof ldh); //Object
//构造函数名字首字母要大写
//我们构造函数不需要return 就可以返回结果
//调用构造函数必须使用new
console.log(ldh. name);

我们的属性和方法前面必须添加this

new在执行时会做四件事：

  1. 在内存中创建一个新的空对象
  2. 让this指向这个新的对象
  3. 执行构造函数里面的代码，给这个新的对象添加属性和方法
  4. 返回这个新的对象（所以构造函数里面不需要return）

//for in 遍历我们的对象
//for(变量 in 对象)
//我们使用 for in 里面的变量 一般写k或key
for (var key in obj){
console.log(key);// k 变量 输出 得到的是 属性名
console.log(obj[k]); // obj[k] 得到的是 属性值
}

本质：对象是一组无序的相关属性和方法的集合

###内置对象

  • JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象
  • 前面两种对象是JS基础内容，术语ECMAScript；第三个浏览器对象属于JS独有的
  • 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
  • 内置对象最大的优点就是帮助我们快速开发
  • JavaScript提供了多个内置对象：Math、Date、Array、String等

查阅文档（可以查有哪些内置对象）

  1. MDN(包括HTML、CSS和万维网以及HTML5应用的API)

  2. W3C

###Math内置对象
Math数学对象 不是一个构造函数，所以我们不需要new来调用 而是直接使用里面的属性和方法即可

console.log(Math.max(1,99,3));
console.log(Math.PT);//一个属性 圆周率

Math求最大最小值，自己写一个也可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       var myMath = {
        PI:3.14159265,
        max:function(){
            var max = arguments[0];
            for(var i = 1;i<arguments.length;i++){
                if(arguments[i]>max){
                    max = arguments[i];
                }
            }
            return max;
        },
         min:function(){
            var min = arguments[0];
            for(var i = 1;i<arguments.length;i++){
                if(arguments[i]<min){
                    min = arguments[i];
                }
            }
            return min;
        }
       }
       console.log(myMath.max(1,5,9));
       console.log(myMath.min(1,5,9));
    </script>
</head>
<body>
    
</body>
</html>

###Math概述

Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() //四舍五入 就近取整 注意-3.5 结果是-3 3.5结果是4（即0.5的都是往大的取整）
Math.abs() //绝对值
Math.max() / Math.min() //求最大最小值

####求随机数 Math.random()

###Date日期对象
Date()日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象

var arr = new Array(); //创建一个数组对象
var obj = new Object(); //创建了一个对象实例

//使用Date 如果没有参数，则返回当前系统的当前时间
var date = new Date();
console.log(date);

  • Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
  • Date实例用来处理日期和时间
  • 如果括号里有参数，则返回参数里面的时间，如果没有参数则返回当前系统的当前时间

####日期格式化
当我们需要2019-8-8 8:8:8格式的日期时，怎么办？

方法名说明代码
getFullYear()获取当年dObj.getFullYear()
getMonth()获取当月（0-11）dObj.getMonth()
getDate()获取当天日期dObj.getDate()
getDay()获取周几（周日0到周六6）dObj.getDay()
getHours()获取当前小时dObj.getHours()
getMinutes()获取当前分钟dObj.getMinutes()
getSeconds()获取当前秒数dObj.getSeconds()

var date1 = +new Date();//返回的是当前时间的总的毫秒数，如果有参数，则返回输入日期的总的毫秒数
console.log(date.valueOf());//输出距离1970.1.1总的毫秒数

###倒计时
####现在距离输入的时间还剩多少时间

  • 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的
  • 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
  • 把剩余的时间总的毫秒数转换为天、时、分、秒
    转换公式如下：
    • d = parseInt(总秒数/60/60/24);//计算天数
    • h = parseInt(总秒数/60/60%24);//计算小时
    • m = parseInt(总秒数/60%60);//计算分数
    • s = parseInt(总秒数%60);//计算当前秒数

倒计时案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      function countDown(time){
        var nowTime = +new Date();//返回当前时间总的毫秒数
        var inputTime = +new Date(time);//返回用户输入时间总的毫秒数
        var times = (inputTime - nowTime)/1000;//毫秒除1000得秒
        var d = parseInt(times/60/60/24);//天
        d = d<10?'0'+d:d;
        var h = parseInt(times/60/60%24)//时
        h = h<10?'0'+h:h;
        var m = parseInt(times/60%60);//分
        m = m<10?'0'+m:m;
        var s = parseInt(times%60);//秒
        s = s<10?'0'+s:s;
        return d+'天'+h+'时'+m+'分'+s+'秒';
      }
      console.log(countDown('2022-9-3 18:00:00'));
    </script>
</head>
<body>
    
</body>
</html>

####检测是否为数组的两种方法
1. instanceof Array

var arr = [];
console.log(arr instanceof Array);//true

2. Array.isArray()

var arr = [];
console.log(Array.isArray(arr));

####添加数组元素

  1. .push()在我们数组的末尾添加一个或者多个数组元素 push 推

    var arr = [ 1,2,3 ];
    arr.push(4,‘pink’);
    console.log(arr);
    console.log(arr.push(4,‘pink’));

  • push是可以给数组末尾追加新的元素
  • push()参数直接写 数组元素就可以了
  • push完毕之后，返回的结果是新的数组的长度
  • 原数组也会发生变化
  1. unshift在我们数组的开头添加一个或者多个数组元素

    var arr = [ 1,2,3 ];
    console.log(arr.unshift(‘red’,‘purple’));
    console.log(arr);

  • unshift是可以给数组前面追加新的元素
  • unshift()参数直接写 数组元素就可以了
  • unshift完毕之后，返回的结果是新的数组的长度
  • 原数组也会发生变化
  1. pop()它可以删除数组最后一个元素

    var arr = [ 1,2,3 ];
    console.log(arr.opp());
    console.log(arr);

  • pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
  • pop()没有参数
  • pop完毕之后，返回的结果是删除的那个元素
  • 原数组也会发生变化
  1. shift()它可以删除数组的第一个元素

    var arr = [ 1,2,3 ];
    console.log(arr.shift());
    console.log(arr);

  • shift是可以删除数组的第一个元素 记住一次只能删除一个元素
  • shift()没有参数
  • shift完毕之后，返回的结果是删除的那个元素
  • 原数组也会发生变化

  1. .reverse()翻转数组

    var arr = [‘pink’, ‘red’, ‘blue’];
    arr.reverse();
    console.log(arr);

  2. .sort()冒泡排序（从小到大）

    var arr = [ 13,4,77,1,7 ];
    arr.sort(function(a,b){
    reurn a-b;//升序
    //return b-a; 降序
    });
    console.log(arr);

  3. .indexOf()获取数组索引

    var arr = [‘red’, ‘green’, ‘blue’, ‘pink’, ‘blue’];
    console.log(arr.indexOf(‘blue’));
    console.log(arr.indexOf(‘blue’,3));//从索引是3的位置开始查找

  • 返回该数组元素的索引号
  • 只返回第一个满足条件的索引号，从前往后找
  • 如果在该数组里面找不到元素，则返回的是-1
  1. .lastIndexOf()获取数组索引

    var arr = [‘red’, ‘green’, ‘blue’, ‘pink’, ‘blue’];
    console.log(arr.lastIndexOf(‘blue’)); //4

  • 返回该数组元素的索引号
  • 只返回第一个满足条件的索引号，从后往前找
  • 如果在该数组里面找不到元素，则返回的是-1

####数组去重

function unique(arr){
var newArr = [];
for(var i = 0;i < arr.length;i++){
if(newArr.indexOf(arr[ i ]) === -1){
newArr.push(arr[ i ]);
}
}
return newArr;
}
var demo = unique([‘blue’, ‘green’, ‘blue’]);
console.log(demo);

####数组转换为字符串
1. .toString()

var arr = [ 1,2,3 ];
console.log(arr.toString()); //1,2,3

2. .join()分隔符

var arr = [‘green’, ‘blue’, ‘pink’];
console.log(arr.join());//默认是逗号分隔
console.log(arr.join(‘-’));//green-blue-pink

方法名说明返回值
concat()连接两个或多个数组，不影响原数组返回一个新的数组
slice()数组截取slice(begin,end)返回被截取项目的新数组
splice()数组删除splice(第几个开始，要删除几个数)返回被删除项目的新数组，注意，这个会影响原数组

####基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

//下面代码有什么问题？为什么字符串也可以用length属性
var str = ‘andy’;
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但是上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

//1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String(‘andy’);
//2. 赋值给声明的字符变量
str = temp;
//3. 销毁临时变量
temp = null;

###字符串不可变
指的是里面的值不可变，虽然看上去可以改变内容，但是其实是地址变了，内存种新开辟了一个内存空间
因为我们字符串不可变，所以不要大量的拼接字符串，这样会不断开辟新空间，会导致电脑卡顿

####根据字符返回位置(索引)
字符串所有的方法，都不会修改字符本身（字符串不可变），操作完成会返回一个新的字符串

var str = ‘改革春风吹满地，春天来了’;
console.log(str.indexOf(‘春’));
console.log(str.indexOf(‘春’,3));//从索引是3的位置开始往后查找

求某个字符出现的位置以及次数

var str = ‘abcoefoxyozzopp’;
var index = str.indexOf(‘o’);
var num = 0;
while(index !== -1){
console.log(index);
num++;
index = str.indexOf(‘o’,index+1);
}
console.log(‘o出现的次数’+num);

####根据位置（索引）返回字符（重点）

方法名说明使用
charAt(index)返回指定位置的字符（index处写字符串的索引号）str.charAt(0)
charCodeAt(index)获取指定位置处字符的ASCII码str.charCode(0)
str[ index ]获取指定位置处字符HTML5,IE8+支持 和charAt()等效

判断一个对象是否有该属性 对象名[ ‘属性名’ ]

var o = {
age = 18;
}
if(o[ ‘sex’ ]){
console.log(‘里面有该属性’);
}else{
console.log(‘里面没有该属性’);
}

####统计出现次数最多的字符

var str = ‘abcoefoxyozzopp’;
var o = {};
for(var i = 0;i < str.length;i++){
var chars = str.charAt(i);//chars是字符串的每一个字符
if(o[ chars ]){ //o[ chars ]得到的是属性值
o[ chars ]++;
}else{
o[ chars ] = 1;//属性值等于1
}
}
//遍历对象
var max = 0;
var ch = ‘’;
for(var k in o){
//k得到的是属性名
//o[ k ]得到的是属性值
if(o[ k ]>max){
max = o[ k ];
ch = k;
}
}
console.log(max);
console.log(‘出现最多的字符是’+ch);
console.log(k);

####字符串操作方法（重点）

方法说明
concat(str1,str2,str3…)concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start,length)从start位置开始（索引号），length是取得个数，（重点）
slice(start,end)从start位置开始，截取到end位置，end取不到
substring(start,end)从start位置开始，截取到end位置，end取不到，基本和slice相同 但是不接受负值

####替换字符 .replace()
它只会替换一个字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      var str = 'andyandy';
      console.log(str.replace('a','b'));
      //有一个字符串 'abcoefoxyozzopp'要求把里面所有的o替换为*
      var str1 = 'abcoefoxyozzopp';
      while(str1.indexOf('o') !== -1){
        str1 = str1.replace('o','*');
      }
      console.log(str1);
    </script>
</head>
<body>
    
</body>
</html>

####字符串转换为数组 split(‘分隔符’)

var str = ‘red, pink, blue’;
console.log(str.split(‘,’));
var str2 = ‘red&pink&blue’;
console.log(str2.split(‘&’));

  • toUpperCase() //转换大写
  • toLowerCase() //转换小写

####简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

  • 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
    string,number,boolean,undefined,null
  • 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过new关键字创建对象（系统对象、自定义对象），如Object/Array/Date等

####堆和栈

  1. 栈（操作系统）：由操作系统自动分配释放内存函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈：简单数据类型放到栈里面去
  2. 堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，复杂数据类型存放到堆里面
  • 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
  • 复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
Lemonade429
关注
专栏目录
JavaScript的Math对象基本用法
y1314999的博客
08-26 364
Math对象的基本用法： 1、Math 对象用于执行数学任务。Math是一个内置对象，不需要创建，可以直接使用。 2、Math对象常用API: Math.PI --------------返回圆周率3.1415926... Math.ceil(x) ----------对数值x进行向上取整 Math.floor(x) --------对数值x进行向下取整 Math.round(x) -------对数值x进行四舍五入 Math.abs(x) ----------返回
JavaScript系列（一）---JavaScript中的ECMAScript知识汇总
UtopiaOfArtoria的博客
10-15 506
JavaScript简介 JavaScript是一种网络脚本语言。在Web应用开发中，JavaScript被广泛应用于表单校验、浏览器事件响应、HTML页面中嵌入动态文本等等。因此对于web开发人员来说，了解JavaScript是很有必要的。 我们常说的JavaScript实际是包含三个部分： ECMAScript，描述该语言的语法和对象； 文档对象模型（DOM），描述处理网页内容的方法和接口；...
Java小农养成记第三十二天
qq_45265623的博客
02-11 663
java入门笔记
JavaScript Math对象介绍和运用
LILI_JU88的博客
03-20 1129
Math对象用于执行数学任务，它里面封装了数学运算相关的属性和方法。 常用属性：Math.PI表示圆周率 Math.ceil() 只要小数点后面有值都取1，除了0 Math.floor() 无论小数点是什么，都会去掉 Math.round() 可以对一个数进行四舍五入取整 Math.random() 可以用运算符来执行 0-X的随机数 Math.random()*X ...
javaScript中Math内置对象基本方法入门
程序猿布欧的博客
04-29 289
概念 Math 是javaScript的内置对象，包含了部分数学常数属性和数学函数方法。 Math 不是一个函数对象，用户Number类型进行使用，不支持BigInt。 Math 的所有属性与方法都是静态的。 比如说当我们使用圆周率的时候，写法是 Math.PI 当使用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。 Math 的常量是使用 JavaScript 中的全精度浮点数来定义的。 math原生属性 // 欧拉常数，也是自然对数的底数，约等于 2.718
JavaScript自定义对象
奔腾游子
05-18 683
JavaScript自定义对象 2.1、类和对象的概念 ​ 所谓对象就是真实世界中的实体，对象与实体是一一对应的，也就是说现实世界中每一个实体都是一个对象，它是一种具体的存在，可以发现身边很多对象，汽车，狗，人等，这些对象都有一个属性和行为。比如一只狗，那么它的属性有名称、品种、颜色、体重；行为有吠叫、摇摆、跑等。 ​ 所谓类是具备某些共同特征的对象实体的集合，它是一种抽象的概念，用程序设计的语言来说，类是一种抽象的概念，它是对所具有相同特征对象实体的抽象。比如所有的狗对象都有一些共同的
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript基础——使用JavaScript对象
weixin_30384217的博客
12-07 89
　　JavaScript有许多内置对象，如Number(数字)、Array(数组)、String(字符串)、Date(日期)和Math(数学)。这些内置对象都有成员属性和方法。除了JavaScript对象，Node.js、MongoDB、Express和Angular也添加了自己的内置对象。 　　JavaScript也为你构建自己的自定义对象提供了一个相当不错的面向对象的编辑结构。使用对象而不只...
前端学习day17：dom：阻止默认事件，事件的解绑，this指向，改变this指向，实现数组拼接，值类型和引用类型，值传递和引用传递，深浅拷贝，箭头函数，箭头函数中的this指向
qq_45926448的博客
07-05 302
阻止默认事件，事件的解绑，this指向，改变this指向，实现数组拼接，值类型和引用类型，值传递和引用传递，深浅拷贝，箭头函数，箭头函数中的this指向
继承 单继承 多层继承 成员变量：this & super ； 成员函数：覆盖操作； 一个对象实例化过程！！
逍遥单机君
09-26 824
继承 继承的好处： 1，提高了代码的复用性。 2，让类与类之间产生了关系，给第三个特征多态提供了前提. java中支持单继承。不直接支持多继承，但对C++中的多继承机制进行改良。 单继承：一个子类只能有一个直接父类。 多继承：一个子类可以有多个直接父类(java中不允许,进行改良) 不直接支持，因为多个父类中有相同成员，会产生调用不确定
[转]JavaScript对象模型-执行模型
vineet
12-16 116
数据类型 基 本数据类型 基本数据类型是JS语言最底层的实现。简单数值类型: 有Undefined, Null, Boolean, Number和String。注意，描述中的英文单词在这里仅指数据类型的名称，并不特指JS的全局对象N an, Boolean, Number, String等，它们在概念上的区别是比较大的。对象: 一个无序属性的集合，这些属性的值为简单数值类型、对象或者函数。同上，这...
JavaScript
过期的秋刀鱼
08-21 2122
javascript入门基础语法
Vue 动态拼接this后面的变量
weixin_39891473的博客
12-11 4425
今天写项目的用到for循环,动态拼接变量, 用了几种方法不行,终于找到一种,记录一下: for (let i = 1; i <= 4; i++) { let data = { RequestType: "Get", portNumber: i + "" }; console.log(i); console.log(this["Str" + i]); this.$axios .post("/api/conf
Java初学者笔记（3）
w00211122的博客
08-13 124
Java基础知识第三部分（未完）
JavaScript基础知识
最新发布
pzllovelsy的博客
09-28 170
渲染引擎:用来解析HTML与CSS ,俗称内核，比如chrome浏览器的blink ,老版本的webkitJS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8浏览器本身并不会执行JS代码,而是通过内置JavaScript弓|擎(解释器)来执行JS代码。JS 弓|擎执行代码时逐行解释每一句源码(转换为机器语言) , 然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。
Javascript 中神奇的 this
weixin_34194317的博客
01-18 157
Javascript 当中的 this 与其他语言是完全不同的机制，很有可能会让一些编写其他语言的工程师迷惑。 1. 误以为 this 指向函数自身 根据 this 的英语语法，很容易将函数中出现的 this 理解为函数自身。在 javascript 当中函数作为一等公民，确实可以在调用的时候将属性值存储起来。但是如果使用方法不对，就会发...
21day-8：面向对象进阶，继承，static关键字
qq_53009955的博客
08-08 505
Java中提供一个关键字extends，用这个关键字，我们可以让一个类和另一个类建立起父子关系。代码格式 public class Student extends People {}Student称为子类（派生类），People称为父类(基类 或超类)。作用：当子类继承父类后，就可以直接使用父类的使用非私有变量和方法了继承能提高代码的复用性。...
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值