目录

JS书写的位置

JS注释方式

 JS的输入输出语句

 JS变量

变量的声明

变量的赋值

一次声明多个变量的写法

 变量名的命名规范

 JS数据类型

 简单数据类型（基本数据类型）说明

数据类型的转换

区分解释型语言和编译型语言

 运算符

算数运算符

递增递减运算符

比较运算符

逻辑运算符

赋值运算符

运算符得优先级

流程控制

 流程控制-分支结构

流程控制-循环结构

数组

JS数组的创建方式

数组的访问和扩容

函数Function

函数的声明和调用

函数参数问题

return ：终止函数

内置对象：arguments

 作用域

预解析

 JS对象

创建对象的三种方式

遍历对象属性及属性值

 内置对象

内置对象：Math

 内置对象：Date

日期的格式化

 获取时间戳（毫秒数）从1970-1-1开始计算

计算指定日期时间与现在日期时间的差值

内置对象：数组对象Array

操作数组：增删和排序

操作数组：获取索引 和 元素去重

操作数组：数组转为字符串

数组操作：数组的 连接、截取和定制删除

内置对象 ：字符串对象

包装类

包装过程

JS书写的位置

JS有三种书写位置：分别为行内，内嵌和外部。

1.行内式JS

 <button onclick="alert('我是弹窗')">点击，出现弹窗</button>

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

 2.内嵌式JS

<script>
     alert('我是弹窗');
</script>

•  可以将多行JS代码写到<script>标签中

3.外部JS文件

引用外部JS文件方式：

<script src="myjs.js"></script>

•  把大段JS代码独立写到HTML页面之外，更简洁，复用性也更强。
• 引用外部JS文件的script标签中不可以写代码。
• 适用于JS代码量较大的情况。

JS注释方式

单行注释：//

// 我是单行注释内容

多行注释：/*  */

 /*

我是多行注释内容

 */

 JS的输入输出语句

 JS变量

变量的声明

//声明变量
var name; 
//声明一个名称为name的变量
age = 18 ;
//变量可不声明直接赋值，可以，但是不提倡

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

变量的赋值

var name;
name = 'Tom'; //给变量name设置值为Tom

•  = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思。
• 变量值是用户保存到变量空间的值。

一次声明多个变量的写法

 同时声明多个变量时，只需要写一个var，多个变量名之间使用逗号隔开。

var name = 'Tom',
    age = 18，
    hobby = 'sleep';

 变量名的命名规范

• 由字母（A-Z, a-z），数字（0-9），下划线（_），美元符（$）组成
• 严格区分大小写
• 不能以数字开头
• 不能声明为关键字，保留字。例如：var、if、for等等。
• 变量名尽量见名知意。
• 使用驼峰式命名法：首个单词首字母小写，后面单词首字母大写。例如：myName;

 JS数据类型

 在计算机中，不同的数据所需要占用的存储空间是不同的，为了便于把数据分为所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

//JS是动态语言，js的变量类型在运行时才可确定（由赋值的类型决定），所以不声明时不需要指明变量类型。在代码运行时，变量的数据类型是由JS引擎根据 =  符号右边变量值的数据类型来判断的，运行完毕后，数据类型就被确定。

JS具有动态类型，同时也意味着相同变量可用作不同类型。

 简单数据类型（基本数据类型）说明

数字型的范围

 JS中数值的最大值和最小值。

console.log('最大值:' + Number.MAX_VALUE); //1.7976931348623157e+308
console.log('最小值:' + Number.MIN_VALUE); //5e-324

特殊的数值

Infinity：代表无穷大，大于任何数值。

-Infinity ：代表无穷小，小于任何数值。

NaN（Not a Number）：代表一个非数值。

 判断是否为数字型: isNAN( )

var age = 18;
console.log(isNaN(age));//输出为false 既：是数值型，非NaN

字符串的嵌套 

JS 可以用单引号和双引号相互嵌套。

//字符串的嵌套
var str1 = '我有"一个"梦想';//单引号嵌套双引号
var str2 = "我有'一个'梦想";//双引号嵌套单引号
//错误写法：
var str3 = '我有一个梦想" ;//两者不可混搭

字符串转义符

 在对字符串的操作时，可以利用转义字符更灵活的操作字符串。

转义符的简单使用举例：

 var str = 'I have \t a dream'; 
console.log(str);//输出为：I have 	 a dream

 获取字符串长度：length

//获取字符串长度
var str = 'I have a dream';
console.log(str.length); //输出为： 14

字符串的连接

//字符串连接
var num = 1;
console.log('我有'+ num + '个梦想'); //输出为：我有1个梦想

布尔型Boolean

布尔型有两个值：true和false，其中true表示真，false表示（假）。

布尔型和数字型相加的时候，true的值为1，false的值为0。

console.log(true + 1); //输出为：2
console.log(false + 1); //输出为：1

检测变量类型 typeof()

var num = 456;
var str = '456';
console.log('num类型为:' + typeof(num));//输出为：num类型为:number
console.log('str类型为:' + typeof(str));//输出为：str类型为:string

数据类型的转换

转换为字符串类型

•  通过 + 号拼接的方式称为：隐式转换

转换为数字类型

 转换为布尔型

•  代表空，否定的值会被转换为false,如 :  ‘ ‘ 、0 、NaN 、null 、undefined
• 除了以上5个，其余值都会被转换为true。 

区分解释型语言和编译型语言

概述

计算机不能直接理解除了机器语言之外的语言，所以必须把程序员写的程序语言翻译成机器语言计算机才能执行程序。程序语言翻译成机器语言的工具被称为翻译器。

JS代码—>翻译器—>机器语言

• 翻译器翻译的方式有两种：一种是编译，另一种是解释。两者区别在于：翻译时间点不同。
• 编译器是在代码执行之前进行编译，生成中间代码文件。例如 java的.class文件。
• 解释器是在运行时进行解释，边解释边执行。(当编译器以解释方式运行时候，称为解释器)

过程图解

 运算符

运算符(operator)也称为操作符，是用于实现赋值，比较和执行算术运算功能的符号。

JS中常用的运算符有

• 算数运算符
• 递增和递减运算符
• 比较运算符
• 逻辑运算符
• 赋值运算符

算数运算符

概念：算数运算使用的符号，用于执行两个变量或值得算术运算。

递增递减运算符

 如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(–)运算符来完成。

在JavaScript中，递增和递减既可以放在变量前面，也可以放到变量后面。放在变量前面时，我们称为前置递增运算符，放在变量后面时，我们称为后置递增运算符。

 两者区别：

前置递增：先递增，后赋值。

后置递增：先赋值，后递增。

比较运算符

概念：比较运算符(关系运算符)是两个数据进行比较时所使用得运算符，比较运算符后，会返回一个布尔值（true\false）作为比较运算得结果。

逻辑运算符

概念：逻辑运算符时用来进行布尔值运算得运算符，返回值也是布尔值。

 逻辑运算中得短路运算规则

// 0、''、NaN、null、undefined 转为布尔值为false
console.log(2 && 3);//输出为:3
console.log(0 && 2);//输出为:0

console.log(2 || 3);//输出为2
console.log(0 || 2);//输出为2

结论：

1.&&：第一个值为真，返回第二个值，第一个值为假，返回第一个值。

2.||：第一个值为真，返回第一个值，第一个值为假，返回第二个值。

3.当使用&& 符号，第一个只要是false，后面就不看了。整体返回false，||道理相同。

赋值运算符

运算符得优先级

流程控制

流程控制就是用来控制我们代码按照说明结构顺序来执行。

流程控制主要有三种结构：顺序结构、分支结构和循环结构。

 流程控制-分支结构

JS语言提供了两种分支结构语句 ： 1.if语句  2.switch语句

 语法结构-if单分支

由上到下执行代码得过程中，根据不同得条件，执行不同路径代码 

//单分支
if(条件表达式){
    //条件表达式为true执行体
}

语法结构：if双分支 

//双分支
if(条件表达式){
    //条件表达式结果为true的执行体
}else{
    //条件表达式结果为false的执行体
}

 语法结构：if多分支

//多分支
if(条件表达式1){
    //条件表达式1结果为true的执行体
}else if(条件表达式2){
    //条件表达式2结果为true的执行体
}else if(条件表达式3){
     //条件表达式3结果为true的执行体
}else{
    //以上条件都不满足的执行体
}

简介的条件判断：三元运算符—类似于：双分支

//条件表达式? 表达式1 : 表达式2;
var age = 18;
age > 18 '大于' : '不大于'; 

说明：如果条件表达式为true，则返回表达式1，否则返回表达式2。

分支之二：switch-case语句

一般针对于结果输出为有限个特定值的语句。

//条件表达式—分支 switch_case
    var num = prompt('请输入一个"1-3"的数字');
    switch(num){
        case '1': 
            alert('您输入的数字是1');
            break;
        case '2':
             alert('您输入的数字是2')
            break;
        case '3': 
            alert('您输入的数字是3')
            break;
        default:
            alert('没有匹配项')
    }

流程控制-循环结构

语法结构-for循环

for(初始化变量，循环条件，迭代条件){
    //循环体
}

//循环打印5次i
for(var i = 0 ; i < 5 ; i++){
    console.log(i);
}

语法结构-while循环 

//while循环在条件为真的情况下，循环执行指定代码。
//初始化条件
while(条件表达式){
    //循环体
    //迭代条件
}

循环执行顺序

1.先判断条件表达式是否为真，如果为真，则执行循环体，如果为false，退出循环。

2. 执行循环体

3.执行体执行完后，执行迭代条件后继续判断条件表达式，如果为真继续执行，否则退出。

语法结构 do-while循环

//初始化条件
do{
    //执行体
}while(条件表达式){
    
    //迭代条件
}

do-while循环：无论如何，先执行一次循环体，在判断条件表达式。

 关键字：break 和continue

break：关键字用于立即跳出整个循环（结束当前循环）。

continue：关键字用于立即跳出当次循环 （结束本次循环）。

数组

JS数组的创建方式

1.利用new创建数组。

//var 数组名 = new Array();
var arr = new Array();//创建了一个名为arr的空数组。
arr[0] = 1;
arr[1] = 'ok'; //给数组中添加数据。

2.利用数组字面量创建数组。 

//通过字面量
var arr1 = [];//创建一个名为arr1的空数组
var arr2 = [1 , 2 , 'o', 'k',false] //创建一个带有初始值的数组。

JS数组中可存放任意类型的数据，如字符串，数字，布尔值等。

数组的访问和扩容

访问数组

数组的访问可通过索引的方式访问。

//索引从0开始---到Array.length - 1 结束
var arr2 = [1 , 2 , 'o', 'k',false]
console.log(arr1[0]);//访问第一个
console.log(arr[1]);//访问第二个
console.log(arr2[arr2.length-1]);//访问最后一个

数组的遍历操作

//打印输出数组内所有元素
var arr = [1 , 2 , 3 ];
for( var i = 0 ; i < arr.length; i++){
    console.log(i); //输出为：1 2 3 
} 

数组的扩容

1.length属性是可读写的。

2.可以通过修改length长度来实现数组扩容的目的。

var arr3 = [1 , 2 , 3 ];
console.log(arr3.length); //输出为3
arr3.length = 5;
console.log(arr3.length); //输出为5

函数Function

在 JS中，可能会定义非常多的相同代码或功能相似的代码，这些代码可能需要大量的重复使用，虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就需要使用JS中的函数。

函数：封装了一段可实现某功能的代码块，可被重复使用，大大减少了代码冗余。

函数的声明和调用

声明方式一：

function name(params) { //params为参数
      //方法体
}

function return_num(number){//创建了函数名为return_num的函数
    console.log(number); //函数执行体
}

 声明方式二：

var fun = function(params){ //这样声明 fun就为函数名
       //方法体
}

 ​​函数的调用

function return_num(number){//创建了函数名为return_num的函数
    console.log(number); //函数执行体
}

//函数调用
return_num();

函数参数问题

在创建函数的时候，可以在（）中声明参数，此处参数称为形参，调用时传入参数，此处参数称为实参，参数给方法体内使用。

传入参数不匹配的情况

return ：终止函数

return关键字：在函数中作用为：当读取到return时，返回值，函数终止。

1. returun后面的值不执行
2. 只能返回一个值
3. 无return则返回undefined

内置对象：arguments

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

arguments数据结构是一个伪数组。伪数组的特点：

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

//简单使用举例
function fun1(){
    console.log(arguments);
}

fun1(1,2); //调用函数，传入参数

 作用域

通常来说，在代码中声明一个变量，有些位置是无法使用的，因为不处于正确的作用域。

作用域：代码可用性范围，提高程序逻辑局部性，减少名字冲突。

全局作用域和局部作用域

//全局作用域
//此变量可用范围：整个script标签或单独的js文件 例：
var number = 1 ;

//局部作用域
//此变量可用范围：仅仅局限于函数指定作用域内使用。
function fun(){
    var num = 1 ; //局部作用域
}

 变量的作用域：

在函数内部，没有声明（var）直接赋值的，也为全局变量。

全局和局部变量的效率

1.全局变量：只有浏览器关闭的时候才会销毁，比较占内存资源。

2.局部变量：当我们程序执行完毕就会销毁，比较节约资源。

作用域链

当出现多层嵌套时，向父级作用域取值时，按就近原则.

往上级查找，找到源头为止，或找到为止。

function num(){
    var a = 1 ;
    for(){
        var a = 2;
        for(){
            var b = a ; //b = 2
             }
          }
}

预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的，JS解析器在运行js代码的时候分为两步：预解析和代码执行。

1.预解析：js引擎会吧js里面所有的var 还有function提升到当前作用域的最前面

2.代码执行：按照代码书写的顺序从上往下执行。 

需要注意的是：提升var时，不将赋的值提升。var a = 1; —> 提升 var a ;

 JS对象

创建对象的三种方式

方式一：利用字面量创建对象

//字面量方式创建对象
var obj = {
    name: 'Tom',
    age: 18,  //设置对象属性
    eat: function(){
        console.log('吃饭');  //设置对象函数
    }

}

方式二：利用new Object 创建对象

//用new的方式创建对象
var obj = new Object();
obj.name = 'Jerry'; 
obj.age = 18; //定义对象属性
obj.drink = function(){
      console.log('喝热水');  //定于对象函数
}

方式三：利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，既对象成员变量赋初始值，他总与new运算符一起使用。

例如多个对象具有相同属性或方法，就可以将公共属性或公共方法声明在构造函中，不必每一个对象中再一次声明那些相同部分。

声明构造函数并利用其创建对象

function 构造函数名(args){
    //公共属性或方法
}

function Structure(name,age){
    this.name = name, //this:表示调用此函数的对象（当前对象）
    this.age = age;
}

var obj = new Structure('Abel',18); //创建第一个对象
obj.sex = 'm'; //添加自己的属性。

var obj1 = new Structure('Denny',18); //创建第二个对象
obj1.sex = 'w'; //添加自己的属性。

需要注意的是：

1.构造函数名字首字母要大写。

2.我们构造函数不需要return就可以返回结果。

3.我们调用构造器 必须使用new关键字。

4.我们只要new Structure（）调用函数就创建一个对象

遍历对象属性及属性值

for-in语句用于对数组或者对象的属性进行循环操作。

//语法结构
for(变量 in 对象){
    //操作
}

for(var v in obj){
    console.log(v); //此方式输出的是属性名
    console.log(obj[v]) //此方式输出的是属性值 

    //过程:取obj对象的一个值，赋予变量v，v操作数据，循环操作。
}

 内置对象

 1.JS中的对象分为3种：自定义对象，内置对象，浏览器对象。

2.内置对象就是指JS语言自带的一些对象，调用这些对象会我们实现了一些功能，我们只需调用即可。

内置对象：Math

具有数学常数和函数的属性和方法。存在数学相关的运算（最大值，绝对值，四舍五入等），可以使用Math种的成员。

常用方法

Math对象的一个常用方法：random（）；

Math.random()函数返回一个浮点型值，伪随机数在[ 0 – 1 )，左闭右开。

//Math.random()内置函数的使用
//以下区间，都是左闭右开。

console.log(Math.random()); //输出0-1的随机数

console.log(Math.random()*5); //输出0-5的随机数

console.log(Math.floor(Math.random()*5) );//输出0-5的整数

 获取A-B之间的随机整数

//输出A-B之间的随机数: random() 范围（0 - 1 ]
//公式：Math.random()*(B-A) + A;

function getRandomIntTwo(max,min) {
    Math.floor(max);
    Math.floor(min);
    return Math.floor( Math.random()*(max - min) + min);
}

console.log(getRandomIntTwo(5,9));//输出5-9之间的随机整数

 内置对象：Date

//内置对象：Date 
//创建Date对象 方式一 ：使用默认构造函数
var date = new Date();
console.log(date);//输出为：Wed Sep 07 2022 19:01:40 GMT+0800 (中国标准时间)

//创建Date对象 方式二：使用其他构造函数
var date1 = new Date(2022,9,7) //此方式存在偏移量问题
var date2 = new Date('2022-9-7 19:04:56')

console.log(date1); //Fri Oct 07 2022 00:00:00 GMT+0800 (中国标准时间)
console.log(date2); //Wed Sep 07 2022 19:04:56 GMT+0800 (中国标准时间)

日期的格式化

可以通过获取想要日期的某一部分，对日期进行格式化。

 获取时间戳（毫秒数）从1970-1-1开始计算

四种方式：

var date = new Date();
//方式一:valueOf()
var ts = date.valueOf();
//方式二：getTime()
var ts1 = date.getTime()

console.log(ts); //1662549872472
console.log(ts1);//1662549872472

//方式三：+new
var date1 = +new Date();
console.log(date1);//1662549872472

//方式四：调用静态方法 now() ---H5新增
console.log(Date.now());//1662549872472

计算指定日期时间与现在日期时间的差值

利用时间戳（目标时间-当前时间），再格式化时间。

//倒计时程序（通过时间戳）

function countdown(time){
//当前时间-时间戳
var nottime = +new Date();
//最终时间的时间戳
var endtime = +new Date(time);
//剩余时间的时间戳
var countdowntime = endtime - nottime;

//转换成秒数
var countdownsecond = countdowntime/1000

//countdowntime转换成天数，小时，分钟，秒数
var day =parseInt(countdownsecond/60/60/24) //天数
day = day <10? '0' + day :day
var hour =parseInt(countdownsecond/60/60%24)//小时
hour = hour <10? '0' + hour :hour
var minute = parseInt(countdownsecond/60%60)//分钟
minute = minute <10? '0' + minute :minute
var secont = parseInt(countdownsecond%60)
secont = secont <10? '0' + secont :secont

return day + '天' + hour + '小时' + minute +'分钟'+ secont+'秒'
}

//调用
var target = new Date('2022-9-8 17:00:00')
var str = countdown(target)
console.log(str);

内置对象：数组对象Array

检测是否为数组

1.利用关键字：instanceof

2.isArray()

var arr = [];
var date = new Date();
//instanceof
console.log(arr instanceof Array);//true
console.log(date instanceof Array);//false
//isArray
console.log(Array.isArray(arr));//true

操作数组：增删和排序

增删方法

方法调用方式： var arr = [1,2 ] ;   arr.push(3)

排序方法

 sort（）方法排序数组时，存在缺陷，解决方法：

var arr8 = [5 ,1 ,3 ,2 ,4 ];
arr8.sort(function(a,b){
     return a - b   //a-b为升序  b-a 为降序
});

操作数组：获取索引 和 元素去重

获取数组索引

var arr8 = [5 ,1 ,3 ,5 ,4 ];
console.log(arr8.indexOf(5));//返回0
console.log(arr8.lastIndexOf(5));//返回3

 数组元素去重

var arr = [1,5,6,5,8,12.1];
    var newArray = [];
    for(var i = 0 ; i < arr.length ; i++){
        if(newArray.indexOf(arr[i]) === -1){
            newArray.push(arr[i]);//等于-1说明以存在，不添加
        }
    }

操作数组：数组转为字符串

  var arr0 = [1,2,3]
  console.log(arr0.toString()); //1,2,3
  console.log(arr0.join('%'));//1%2%3

数组操作：数组的 连接、截取和定制删除

splice参数：

 splice()实例：

内置对象 ：字符串对象

根据索引位置返回字符串

 判断对象是否存在某属性

var obj{
    name:'Tom',
    age: 18;
}

if( obj['age'] ){
    console.log('存在该属性')
}else{
     console.log('不存在该属性')
}

字符串其他方法

包装类

为了方便操作基本数据类型，JS还提供了三个特殊引用类型：String、Number和Boolean。

基本包装类型就是把基本数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

包装过程

var str = 'andy';
cosole.log(str.length);

 由上代码，str声明为字符串类型，但是还是可以调用length方法。

我们知道，基本数据类型是没有属性和方法的，但是这却可以调用，原因：

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

 以上情况我们并不能看到，在我们声明基本数据类型时自动装箱。