首页 > 基础资料 博客日记

JavaScript基础教程（初识Javascript到使用内置对象）

2023-07-29 11:01:54基础资料围观506次

Java资料网推荐JavaScript基础教程（初识Javascript到使用内置对象）这篇文章给大家，欢迎收藏Java资料网享受知识的乐趣



目录


1、初识JavaScript

1.1、初识javascript

JavaScript是什么

  • 布兰登·艾奇（BrendanEich）用10天完成JavaScript设计，最初命名为LiveScript；后来在与Sun合作之后将其改名为JavaScript

  • JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（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的组成

ECMAScript——JavaScript语法

  • ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言

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

DOM——文档对象模型

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

BOM——浏览器对象模型

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

js的三种样式

js的三种样式，分别为：行内式JS、内部JS、外部JS

示例：

<!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>
        // 内嵌JS
        // js用单引号，html与css用双引号
        alert('this is alert')
    </script>

    <!-- 外部JS文件 -->
    <script src="my.js"></script>
</head>
<body>
    <!-- 行内式JS -->
    <!-- alert('hello word') -->
    <!-- 可读性差，在html中编写JS大量代码时，不方便阅读；引号易错，引号多层嵌套匹配时，非常容易弄混； -->
    <input type="button" value="just try" onclick="alert('hello word')">
</body>
</html>

1.2、JavaScript注释

<!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>
        // 单行注释，快捷键是Ctrl+/
        
        /* 
        多行注释，需要自行设定快捷键，建议设置为Ctrl+Shift+/
        多行2
        多行2 
        */
    </script>
</head>
<body>
    
</body>
</html>

1.3、JavaScript输入输出语句

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

2、变量

2.1、变量概述

什么是变量

  • 白话：变量就是一个装东西的盒子。

  • 通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

变量在内存中的存储

  • 本质：变量是程序在内存中申请的一块用来存放数据的空间。

  • 类似我们酒店的房间，一个房间就可以看做是一个变量。

2.2、变量的使用

变量是声明、赋值、初始化

变量在使用时分为两步：

  • 声明变量

  • 赋值

<!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是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管 
            age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
        */
        var age;
        // 给age这个变量赋值为10          
        age=18;
        
    </script>
</head>
<body>
    
</body>
</html>

我们也可以在声明变量的时候，直接进行初始化

<!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 age=18;

    </script>
</head>
<body>
    
</body>
</html>

案例1：

  • 弹出一个输入框，提示用户输入姓名。

  • 弹出一个对话框，输出用户刚才输入的姓名。

<!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;
        myname=prompt("请输入您的姓名");
        alert('你输入的姓名是' + myname);
    </script>
</head>
<body>
    
</body>
</html>

变量的更新

<!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 age=18;
        age=28; //一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准
        alert(age)
    </script>
</head>
<body>
    
</body>
</html>

声明多个变量

<!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 age = 10,  name = 'zs', sex = 2;       
    </script>
</head>
<body>
    
</body>
</html>

声明变量特殊情况

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

变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：usrAge, num01, _name

  • 严格区分大小写。var app; 和 var App;是两个变量

  • 不能以数字开头。18age是错误的

  • 不能是关键字、保留字。例如：var、for、while

  • 变量名必须有意义。MMDBBDnl→age

  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

案例：

要求：交换两个变量的值 ( 实现思路：使用一个 临时变量 用来做中间存储 )

<!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 a=10;
        var temp;
        var b=20;
        temp=a;
        a=b;
        b=temp;
        alert('a的值是' + a);
        alert('b的值是' + b);  
    </script>
</head>
<body>
    
</body>
</html>

3、数据类型

3.1、数据类型简介

为什么需要数据类型

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

  • 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

变量的数据类型

  • 变量是用来存储值的所在处，它们有名字和数据类型。

  • 变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

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

var age = 10;            // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

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

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

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

数据类型的分类

JS把数据类型分为两类：

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

  • 复杂数据类型（object)

3.2、简单数据类型

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

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

数字型 Number

var age = 21;       // 整数
var Age = 21.3747;  // 小数

数字型范围

<!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>
        alert(Number.MAX_VALUE);  // 1.7976931348623157e+308
        alert(Number.MIN_VALUE);  // 5e-324
    </script>
</head>
<body>
    
</body>
</html>

数字型三个特殊值

<!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>
        alert(Infinity) //Infinity ，代表无穷大，大于任何数值，输出结果：Infinity
        alert(-Infinity) //-Infinity ，代表无穷小，小于任何数值，输出结果：-Infinity
        alert(NaN) // NaN ，Not a number，代表一个非数值，输出结果：NaN
    </script>
</head>
<body>
    
</body>
</html>

isNaN()

isNaN()用来判断一个变量是否为非数字的类型.

  • isNaN(x): x是数字，则返回false；

  • isNaN(x): x不是数字，则返回true；

<!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 myage=18;
        alert(isNaN(myage)); // 结果:false

        var myname='zhan'
        alert(isNaN(myname)); // 结果:true
    </script>
</head>
<body>
    
</body>
</html>

字符串型 String

  • 字符串型可以是引号中的任意文本，其语法为双引号""和单引号''

  • 因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

  • 字符串引号嵌套：外单内双

<!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 strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
        var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串

        // 常见错误
        var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法
        
        // 引号嵌套
        var strMsg4 = '我是"高帅富"程序猿';   // 可以用''包含""
    </script>
</head>
<body>

</body>
</html>

字符串转义符

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

案例

弹出网页警示框，显示如下内容：

酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。这一刻，我豪气冲天，终于大喊一声："收破烂啦～"

<!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 strMsg; 
       strMsg='酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。这一刻，我豪气冲天，终于大喊一声：\"收破烂啦～\"'
       alert(strMsg)
    </script>
</head>
<body>

</body>
</html>

字符串长度

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

<!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 strMsg = "我是帅气多金的程序猿！";
        alert(strMsg.length); // 显示 11
    </script>
</head>
<body>

</body>
</html>

字符串拼接

<!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>
        alert('hello'+' '+'my'+' '+'friend'); // 输出：hello my friend
    </script>
</head>
<body>

</body>
</html>
<!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 age=18;
        alert('我的年龄是'+age); // 我的年龄是18
        alert('我已经'+age+'岁了！'); // 我已经18岁了！
    </script>
</head>
<body>

</body>
</html>

案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）

<!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 age=prompt("请输入您的年龄");
        alert('您今年'+age+'岁啦！');
    </script>
</head>
<body>

</body>
</html>

布尔型 Boolean

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

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

<!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>
        alert(true+1);  // 结果：2
        alert(false+10); // 结果：10
    </script>
</head>
<body>

</body>
</html>

Undefined 和 Null

<!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>
        // 一个声明后没有被赋值的变量会有一个默认值undefined (如果进行相连或者相加时，注意结果）
        var a;
        alert(a);             // 输出：undefined
        alert('这个是：'+a);   // 输出：这个是：undefined
        alert(11+a);          // 输出：NaN；说明undefined与数值运算，结果为NaN
        alert(true+a);        // 输出：NaN

        // 一个声明变量给 null 值，里面存的值为空
        var b=null;
        alert(b);             // 输出：null
        alert('这个是：'+b);   // 输出：这个是：null
        alert(11+b);          // 输出：11
        alert(true+b);        // 输出：1
    </script>
</head>
<body>

</body>
</html>

获取变量数据类型

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

<!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>
        alert(typeof 18);       // number
        alert(typeof 'hello');  // string
        alert(typeof false);    // boolean
        alert(typeof null);     // object
        alert(typeof NaN);      // number
        alert(typeof undefined);// undefined
    </script>
</head>
<body>

</body>
</html>

3.3、数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：

  • 转换为字符串类型

  • 转换为数字型

  • 转换为布尔型

转换为字符串

方式说明案例
toString()转成字符串var num=1;
alter(num.toString());
String()强制转化转成字符串var num=1;
alter(String(num));
加号拼接转成字符串var num=1;
alter(num+'xxx');

  • toString()和String()使用方式不一样。

  • 三种转换方式，更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

转换为数字型

方式说明
parseInt(string)将string类型转化成整数数值型
parseFloat(string)将string类型转化成浮点数数值型
Number()强制转化将string类型转化成数值型
js隐式转化(- * /)利用算术运算符 隐式转换成数值型
<!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 a='18';
        var b='3.14';
        var c='3.94';
        var d='120px';
        var e='re120px';
        var f='120px88px';

        // parseInt
        console.log(parseInt(a));  // 18
        console.log(parseInt(b));  // 3
        console.log(parseInt(c));  // 3
        console.log(parseInt(d));  // 120
        console.log(parseInt(e));  // NaN
        console.log(parseInt(f));  // 120

        // parseFloat
        console.log(parseFloat(a));  // 18
        console.log(parseFloat(b));  // 3.14
        console.log(parseFloat(c));  // 3.94
        console.log(parseFloat(d));  // 120
        console.log(parseFloat(e));  // NaN
        console.log(parseFloat(f));  // 120

        // Number()
        console.log(Number(a));  // 18
        console.log(Number(b));  // 3.14
        console.log(Number(c));  // 3.94
        console.log(Number(e));  // NaN

        // 隐式转换
        console.log('12' - 0);      // 12
        console.log('123' - '120'); // 3
        console.log('123' * 1);     // 123
    </script>
</head>
<body>

</body>
</html>

案例：计算年龄

此案例要求在页面中弹出一个输入框，我们输入出生年份后， 能计算出我们的年龄。

<!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 year=prompt('请您输入的出生的年份')
        age=2021- year  // 隐式转换
        alert('您的年龄是'+age);
    </script>
</head>
<body>

</body>
</html>

转换为布尔型

方式说明案例
Boolean()其他类型转化为布尔类型Boolean('true');

  • 代表空、否定的值会被转换为false，如：''、0、NaN、null、undefined

  • 其余值都会被转换为true

<!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>
        console.log(Boolean(''));         // false
        console.log(Boolean(0));          // false
        console.log(Boolean(NaN));        // false
        console.log(Boolean(null));       // false
        console.log(Boolean(undefined));  // false
        console.log(Boolean('小白'));     // true
        console.log(Boolean(12));         // true
    </script>
</head>
<body>

</body>
</html>

4、运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

  • 算术运算符

  • 递增和递减运算符

  • 比较运算符

  • 逻辑运算符

  • 赋值运算符

4.1、算术运算符

<!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>
        // 算术运算符
        console.log(10+20);  // 30
        console.log(10-20);  // -10
        console.log(10*20);  // 200
        console.log(10/20);  // 0.5
        console.log(9%2);    // 1 --取余，9除以2等于4余1

        // 浮点数的精度问题
        // 浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。  
        alert(0.1 + 0.2)   // 结果是：0.30000000000000004
        alert(0.07 * 100)  // 结果是：7.000000000000001
        // 所以：不要直接判断两个浮点数是否相等 !  

    </script>
</head>
<body>

</body>
</html>

4.2、递增和递减运算符

<!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 num=10;
        alert(++num + 20); // 31——前置递增运算符，先自增，后返回值在参与运算，故结果是：10+1 +20=31

        var num2=10;
        alert(20 + num2++); // 30——后置递增运算符,先返回值参与运算，后自增，故结果是：20+10=30，然后num2再自增到11
        alert(num2);  // 11
    </script>
</head>
<body>

</body>
</html>

4.3、比较运算符

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

<!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 num1 = 10;
        var num2 = 100;
        alert(num1 > num2); // false
        alert(num1 == 11);  // false
        alert(num1 != num2);// true
    </script>
</head>
<body>

</body>
</html>

4.4、逻辑运算符

<!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>
        // 布尔值参与的逻辑运算
        console.log(1>4 || 5>2); // true
        console.log(1>4 && 5>2); // false

        // 除了上面布尔值参与的逻辑运算，还有表达式参与的逻辑运算

        // 短路运算
        // 逻辑与的短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1
        console.log(123 && 456); // 456
        console.log(0 && 456); // 0
        console.log('' && 1 + 2 && 456 * 56789) // ''

        // 逻辑或的短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
        console.log(123 || 456); // 123
        console.log(0 || 456 || 456 + 123); // 456

    </script>
</head>
<body>

</body>
</html>

4.5、赋值运算符

<!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 age = 10;
        age += 5;  // 相当于 age = age + 5;
        age -= 5;  // 相当于 age = age - 5;
        age *= 10; // 相当于 age = age * 10;
    </script>
</head>
<body>

</body>
</html>

4.6、运算符优先级

  • 一元运算符里面的逻辑非优先级很高

  • 逻辑与比逻辑或优先级高

<!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>
        console.log( 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true
        var num = 10;
        console.log( 5 == num / 2 && (2 + 2 * num).toString() === '22'); // true
    </script>
</head>
<body>

</body>
</html>

5、流程控制

5.1、判断

if

<!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 score=parseInt(prompt('请输入分数'));
        if(score>=60){
            alert('及格')
        }
    </script>
</head>
<body>

</body>
</html>

if-else

<!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 score=parseInt(prompt('请输入分数'));
        if(score>=60){
            alert('及格')
        }
        else{
            alert('不及格')
        }
    </script>
</head>
<body>

</body>
</html>

if-else if

<!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 score=parseInt(prompt('请输入分数'));
        if(score>=90){
            alert('优秀')
        }
        else if(score>=80){
            alert('良好')
        }
        else if(score>=60){
            alert('及格')
        }
        else{
            alert('不及格')
        }
    </script>
</head>
<body>

</body>
</html>

三元表达式

<!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>
        // 三元表达式：表达式1 ? 表达式2 : 表达式3;
        var score=parseInt(prompt('请输入分数'));
        score>=60?alert('及格'):alert('不及格');
    </script>
</head>
<body>

</body>
</html>

switch语句

<!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 day=parseInt(prompt('请输入1-7'));
        switch (day){
            case 1:
                alert('周一')
                break;
            case 2:
            alert('周二')
                break;
            case 3:
                alert('周三')
                break;
            case 4:
                alert('周四')
                break;
            case 5:
                alert('周五')
                break;
            case 6:
                alert('周六')
                break;
            case 7:
                alert('周日')
                break;
        }
    </script>
</head>
<body>

</body>
</html>

5.2、循环

for循环

<!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>
        // 计算1加到100的值，for循环做法
        var i=0;
        var sum=0;
        for(i;i<=100;i++){
            sum += i
        }
        alert(sum)
    </script>
</head>
<body>

</body>
</html>

嵌套for循环

<!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>
        // 打印5行10列的星星，嵌套for循环
        var str = '';
        for(var hang=1;hang<=5;hang++){
            for(var lie=1;lie<=10;lie++){
                str += '☆';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>
<body>

</body>
</html>

while循环

<!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>
        // 计算1加到100的值，while循环做法
        var i=0;
        var sum=0;
        while(i<=100){
            sum +=i;
            i++
        }
        alert(sum)
    </script>
</head>
<body>

</body>
</html>

do-while

<!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>
        // 计算1加到100的值，do-while循环做法
        var i=0;
        var sum=0;
        do{
            sum+=i;
            i++;
        }while(i<=100)
        alert(sum)
    </script>
</head>
<body>

</body>
</html>

break语句

  • break 关键字用于立即跳出整个循环（循环结束）

<!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>
        // break语句

        // 要求用户输入用户名和密码 用户名只要不是admin 密码不是666666，就一直循环，循环到3次跳出
        var username='';
        var userpwd='';
        var i=0;
        var isok=1;

        while(username!='admin' || userpwd!='666666'){
            username=prompt('请输入您的账号');
            userpwd=prompt('请输入您的密码');

            i++;
            if(i==3){
                alert('您已输入三次错误账户密码，程序将退出');
                isok=0;
                break;
            }
        }

        if(isok==1){
            alert('登录成功') 
        }
         
    </script>
</head>
<body>

</body>
</html>

continue

  • continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）

<!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>
        // continue + break语句

        // 要求用户输入用户名和密码 用户名只要不是admin 密码不是666666，就一直循环，循环到3次跳出
        var username = '';
        var userpwd = '';
        var i = 0;

        while (1) {
            username = prompt('请输入您的账号');
            userpwd = prompt('请输入您的密码');

            if (username != 'admin' || userpwd != '666666') {
                i++;
                if (i == 3) {
                    alert('您已输入三次错误账户密码，程序将退出');
                    break;
                }
                continue;
            } else {
                alert('登录成功');
                break;
            }
        }
    </script>
</head>
<body>

</body>
</html>

6、数组

6.1、数组的概念

  • 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

  • 可以利用new创建数组：var arr=new Array()

  • 也可以利用数组字面量[]创建数组：var arr = [1, 2, '文本', true]

  • 数组里面的数据一定用逗号分隔

  • 获取数组元素——格式：数组名[索引号]，索引号从0开始，如arr[2]获取arr数组的第三个元素

案例

定义一个数组，里面存放星期一、星期二…… 直到星期日（共7天），在控制台输出：星期日

<!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 arr=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        alert(arr[6]);
    </script>
</head>
<body>

</body>
</html>

6.2、遍历数组

<!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 arr=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        for(var i=0;i<arr.length;i++){
            alert(arr[i]);
        }
    </script>
</head>
<body>

</body>
</html>
<!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 arr=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        var str='';

        for(var i=0;i<arr.length;i++){
            if(i==arr.length-1){
                str = str + arr[i]
            } else {
                str = str + arr[i] + '|'
            }           
        }
        alert(str); // 输出：星期一|星期二|星期三|星期四|星期五|星期六|星期日
    </script>
</head>
<body>

</body>
</html>

6.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>
        // 1. 新增数组元素 修改length长度
        var arr=['星期一','星期二','星期三'];
        arr.length=7;
        alert(arr);    // 星期一,星期二,星期三,,,,
        alert(arr[5]); // undefined ——新增的空间没有给值，默认为undefined

        // 2. 新增数组元素 修改索引号 追加数组元素
        var brr=['星期一','星期二','星期三'];
        brr[3]='星期四'
        brr[4]='星期五'
        brr[5]='星期六'
        brr[6]='星期日'
        alert(brr);  // 星期一,星期二,星期三,星期四,星期五,星期六,星期日

        // 3.替换原来的元素
        brr[0]='周一'
        alert(brr);  // 周一,星期二,星期三,星期四,星期五,星期六,星期日
    </script>
</head>
<body>

</body>
</html>

案例

要求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。

<!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>
        // 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var brr=[];
        var j=0;

        for(var i=0; i<arr.length; i++){
            if (arr[i]>=10){
                brr[j]=arr[i];
                j++;
            }
        }

        alert(brr);  // 77,52,25
    </script>
</head>
<body>

</body>
</html>

7、函数

  • 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

7.1、 函数的声明与调用

  • 函数在使用时分为两步：声明函数和调用函数。

声明函数

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

  • function是声明函数的关键字,必须小写

  • 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

案例：

利用函数计算1-100之间的累加和

<!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 getSum(start_num,end_num){
            var sum=0;
            for(var i=start_num; i<=end_num;i++){
                sum += i;
            }
            alert(sum)
        }
        // 函数调用
        getSum(1,100);  // 5050
        getSum(5,50);   // 1265
    </script>
</head>
<body>

</body>
</html>

7.2、函数的参数

形参和实参

  • 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参；

  • 而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

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

<!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 getSum(start_num,end_num){
            var sum=0;
            for(var i=start_num; i<=end_num;i++){
                sum += i;
            }
            alert(sum)
        }
        // 函数调用
        getSum(1,100);  // 5050
        getSum(5,50,100);   // 1265
        getSum(40);  // 0，因为sum本身已经定义成0了
    </script>
</head>
<body>

</body>
</html>

7.3、函数的返回值

  • return语句用于返回函数的返回值

  • 在使用 return 语句时，函数会停止执行，并返回指定的值

  • 如果函数没有 return ，返回的值是 undefined

  • return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}

// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return后面的值
<!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 getMax(num1,num2){
            if(num1>num2){
                return num1;
            } else {
                return num2;
            }
        }

        alert(getMax(100,500));
    </script>
</head>
<body>

</body>
</html>
<!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>
        // return 语句之后的代码不被执行

        function add(num1,num2) {
            return num1 + num2;
            alert('我不会被执行，因为前面有 return');
        }
        var resNum = add(21, 6); 
        alert(resNum);          // 27

    </script>
</head>
<body>

</body>
</html>
<!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>
        // return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

        function add(num1,num2) {
            return num1,num2;
        }

        var resNum = add(21, 6); 
        alert(resNum);  // 6
    </script>
</head>
<body>

</body>
</html>

7.4、可变参数arguments

  • 当我们不确定有多少个参数传递的时候，可以用arguments来获取。

  • 在JavaScript中，arguments实际上它是当前函数的一个内置对象。

  • 所有函数都内置了一个arguments对象，arguments 对象中存储了传递的所有实参。

  • arguments展示形式是一个伪数组，因此可以进行遍历。

  • 伪数组具有以下特点：

    • 具有 length 属性

    • 按索引方式储存数据

    • 不具有数组的 push , pop 等方法

案例：

利用函数求任意个数的最大值

<!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 maxValue() {
            var max = arguments[0];
            for (var i = 0; i < arguments.length; i++) {
                if (max < arguments[i]) {
                    max = arguments[i];
                }
            }
            return max;
        }
        alert(maxValue(2, 4, 5, 9));
        alert(maxValue(12, 4, 9));
    </script>
</head>
<body>

</body>
</html>

7.5、函数的两种声明方式

自定义函数方式(命名函数)

我们在上面所有的实示例中，都是利用函数关键字function自定义函数方式

  • 因为有名字，所以也被称为命名函数

  • 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

function getMax(num1,num2){
    if(num1>num2){
        return num1;
    } else {
        return num2;
    }
}

函数表达式方式(匿名函数）

利用函数表达式方式的写法如下：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；

// 调用的方式，函数调用必须写到函数体下面
fn();

  • 因为函数没有名字，所以也被称为匿名函数

  • 这个fn里面存储的是一个函数

  • 函数表达式方式原理跟声明变量方式是一致的

  • 函数调用的代码必须写到函数体后面

8、作用域

  • 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

  • 作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

  • JavaScript（es6前）中的作用域有两种：全局作用域、局部作用域（函数作用域）

<!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>
        // 全局作用域——作用于所有代码执行的环境(整个script标签内部)或者一个独立的js文件。
        var a=10;    // a是全局变量
        var b=20;    // b是全局变量
        alert(a+b);

        // 局部作用域 （函数作用域）——作用于函数内的代码环境，就是局部作用域。 
        function getMax(){
            var c=20;    // c是局部变量
            var d=100;   // d是局部变量
            return c>d?c:d;
        }
        alert(getMax());
    </script>
</head>
<body>

</body>
</html>

  • JS没有块级作用域（在ES6之前）

块作用域由 { } 包括。
在其他编程语言中（如 java、c#等），在if语句、循环语句中创建的变量，仅仅只能在本if语句、本循环语句中使用

9、预解析

先来思考两个问题：

问题1

如果未声明变量，然后直接输出，会报错

console.log(num1); // Uncaught ReferenceError: num1 is not defined

但是先直接输出，再声明变量，则不会报错，为什么呢？

console.log(num2); // undefined
var num2;

问题2

如果先调用函数，再声明命名函数，不会报错

fn();
function fn() {
    console.log('打印'); // 打印
}

但是如果先调用函数，再声明匿名函数，则会报错，是为什么呢？

fn();
var  fn = function(){
    console.log('打印'); // Uncaught TypeError: fn is not a function
}

造成上面两个问题的原因是：

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

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

问题1中，先直接输出变量num2，再声明变量num2，不会出错是因为预解析时先把变量num2在作用域中提前声明了；

问题2中，先调用函数fn，再声明命名函数fn，不会报错也是因为预解析时先把函数fn在作用域中提前声明了。


预解析分为：变量预解析（变量提升）和函数预解析（函数提升）

  • 变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作

  • 函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数


案例

// 案例——结果是：undefined
var num = 10;
fun();
function fun() {
  console.log(num);
  var num = 20;
}

预解析过程

1--全局变量提升：

var num;

function fun() {
  console.log(num);
  var num = 20;
}

num=10;
fu();

2--函数变量提升：

var num;

function fun() {
  var num;
  console.log(num); // 此时结果为undefined
  num = 20;
}

num=10;
fu();

10、对象

10.1、什么是对象

  • 现实生活中，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

  • 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

  • 对象是由属性和方法组成的。

    • 属性：事物的特征，在对象中用属性来表示（常用名词）

    • 方法：事物的行为，在对象中用方法来表示（常用动词）

10.2、对象的作用

  • 保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？

  • JS 中的对象表达结构更清晰，更强大，如将一个LOL游戏的英雄盖伦的信息以及技能表达结构如下：

创建盖伦这个对象
盖伦.姓名='德玛西亚之力'
盖伦.血量=20000
盖伦.攻击力=500
盖伦.技能='德玛西亚正义'

10.3、如何创建对象

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

  • 利用字面量 { } 创建对象

  • 利用 new Object 创建对象

  • 利用构造函数创建对象

利用字面量 { } 创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建德玛西亚皇子-嘉文四世这个对象
        var jarvan={
            // 注意：冒号与逗号
            name:'Jarvan IV',  // 对象里面的变量称为属性，不需要声明，用来描述该对象的特征
            nickName:'the Exemplar of Demacia',
            hp:571.2,
            mp:302.2,
            ad:55.71,
            // 对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。
            bigSkill:function(){
                alert('天崩地裂');
            },
        };

        // 对象的调用
        console.log(jarvan.nickName);
        console.log(jarvan.ad);
        jarvan.bigSkill();
    </script>
</head>
<body>

</body>
</html>

运行结果：

利用 new Object 创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建德玛西亚皇子-嘉文四世这个对象
        var jarvan=new Object;
        jarvan.name='Jarvan IV';
        jarvan.nickName='the Exemplar of Demacia';
        jarvan.hp=571.2;
        jarvan.mp=302.2;
        jarvan.ad=55.71;
        jarvan.bigSkill=function(){
            alert('天崩地裂');
        };
        
        // 对象的调用
        console.log(jarvan.nickName);
        console.log(jarvan.ad);
        jarvan.bigSkill();
    </script>
</head>
<body>

</body>
</html>

利用构造函数创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 构造函数创建一个英雄类
        function Hero(name,nickName,hp){  // 构造函数约定首字母大写
            this.name=name;     // 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法
            this.nickName=nickName;
            this.hp=hp;
            this.bigSkill=function(){
                alert('天崩地裂');
            };       // 构造函数中不需要 return 返回结果
        }
        
        // 创建德玛西亚皇子-嘉文四世这个对象
        var jarvan=new Hero('Jarvan IV','the Exemplar of Demacia',571.2); // 创建对象的时候，必须用 new 来调用构造函数

        // 对象的调用
        console.log(jarvan.nickName);
        console.log(jarvan.hp);
        jarvan.bigSkill();
    </script>
</head>
<body>

</body>
</html>

构造函数和对象

  • 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）

  • 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

10.4、遍历对象属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 构造函数创建一个英雄类
        function Hero(name,nickName,hp){ 
            this.name=name; 
            this.nickName=nickName;
            this.hp=hp;
            this.bigSkill=function(){
                alert('天崩地裂');
            }; 
        }
        
        // 创建德玛西亚皇子-嘉文四世这个对象
        var jarvan=new Hero('Jarvan IV','the Exemplar of Demacia',571.2); 

        // 遍历对象属性
        for(var k in jarvan){
            console.log(k);          // 这里的 k 是属性名
            console.log(jarvan[k]);  // 这里的 obj[k] 是属性值
        }
    </script>
</head>
<body>

</body>
</html>

运行结果

11、内置对象

  • JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象

  • 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的，后续在JS API中讲解

  • 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

  • 内置对象最大的优点就是帮助我们快速开发

  • JavaScript提供了多个内置对象：Math、Date、Array、String等

  • 可以在这个文档查看内置对象：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

11.1、Math 对象

  • Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用Math中的成员。

Math.PI		           // 圆周率
Math.floor() 	       // 向下取整
Math.ceil()            // 向上取整
Math.round()           // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
Math.abs()		       // 绝对值
Math.max()/Math.min()  // 求最大和最小值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
        console.log(Math.PI); // 一个属性 圆周率
        console.log(Math.max(1, 99, 3)); // 99
        console.log(Math.max(-1, -10)); // -1
    </script>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
        var myMath = {
            PI: 3.141592653,
            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.PI);
        console.log(myMath.max(1, 5, 9));
        console.log(myMath.min(1, 5, 9));
    </script>
</head>
<body>

</body>
</html>

绝对值方法

console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1

三个取整方法

// Math.floor()——向下取整，往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1

// Math.ceil()——向上取整，往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2

// Math.round()——四舍五入
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1

随机数方法

  • random( )方法可以随机返回一个小数，其取值范围是[0，1)，左闭右开

// 随机取得0-1之间的小数
console.log(Math.random());
// 随机取得两个数之间的整数
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

案例：猜数字游戏

程序随机生成一个 1~ 10 之间的数字，并让用户输入一个数字，

  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>
        // 随机取得两个数之间的整数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // 随机生成1-10之间的整数
        var random = getRandom(1, 10);

        // 循环判断
        while (true) { 
            var num = prompt('你来猜？ 输入1~10之间的一个数字');
            if (num > random) {
                alert('你猜大了');
            } else if (num < random) {
                alert('你猜小了');
            } else {
                alert('你好帅哦，猜对了');
                break; 
            }
        }
    </script>
</head>
<body>

</body>
</html>

11.2、日期对象

  • Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才能使用

Date()方法的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // Date()日期对象是一个构造函数，必须使用new来调用日期对象

        // 使用Date()方法：如果没有参数 返回当前系统的当前时间
        var date = new Date();
        console.log(date);  // Sun Dec 12 2021 01:23:30 GMT+0800 (中国标准时间)

        // 使用Date()方法：如果Date()里面写参数，就返回括号里面输入的时间 
        var date1 = new Date(2019, 10, 1);
        console.log(date1); // Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)。返回的是11月？因为此时的月份是0-11，而不是1-12

        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);  // Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)
    </script>
</head>
<body>

</body>
</html>

日期格式化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 格式化日期 年月日 
        var date = new Date(); // 2021-12-12 01:41:20
        console.log(date.getFullYear());   // 2021
        console.log(date.getMonth() + 1);  // 12，因为Date中的月份是0-11，而不是1-12，故需要+1
        console.log(date.getDate());       // 12
        console.log(date.getDay());        // 0，getDay()是获取星期几，0是周日

        // 获取现在是时间
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]); // 今天是：2021年12月12日 星期日
    </script>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours());  // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒

        // 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTimer()); // 01:49:49
    </script>
</head>
<body>

</body>
</html>

获取日期的总的毫秒形式(时间戳)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数。Unix 纪元（格林威治时间 1970 年 1 月 1 日 00:00:00）

        // 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());

        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);

        // 3. H5 新增的 获得总的毫秒数，IE浏览器不支持H5
        console.log(Date.now());
    </script>
</head>
<body>

</body>
</html>

案例：倒计时效果

做一个倒计时效果

思路：

  1. 设定结束时间：2021-12-15 12:00:00

  2. 将结束时间转化为时间戳1，将当前时间转化为时间戳2，(时间戳1-时间戳2)/1000 就是当前距离结束时间的秒差

  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>
        function countDown(endtime){
            var endtime_ms = +new Date(endtime); // 将结束时间转化为时间戳
            var now_ms = +new Date(); // 将当前时间转化为时间戳
            var time_s = (endtime_ms-now_ms)/1000 // 计算两者时间差，转化为秒

            var d = parseInt(time_s / 60 / 60 / 24); // 天
            d = d < 10 ? '0' + d : d;

            var h = parseInt(time_s / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;

            var m = parseInt(time_s / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;

            var s = parseInt(time_s % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;

            return d + '天' + h + '时' + m + '分' + s + '秒';
        }

        console.log(countDown('2021-12-15 12:00:00')); // 03天09时35分23秒
    </script>
</head>
<body>
    
</body>
</html>

11.3、数组对象

数组对象的创建

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建数组的两种方式
        // 1. 利用数组字面量
        var arr = [1, 2, 3];

        // 2. 利用new Array()
        var arr1 = new Array();     // 创建了一个空的数组
        var arr2 = new Array(2);    // 这个2 表示 数组的长度为2，里面有2个空的数组元素 
        var arr3 = new Array(2, 3); // 等价于[2,3]，这样写表示里面有2个数组元素，分别是2、3
    </script>
</head>
<body>

</body>
</html>

检测是否为数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 检测是否为数组

        // (1) instanceof  运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);  // true
        console.log(obj instanceof Array);  // false

        // (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
        console.log(Array.isArray(arr));  // true
        console.log(Array.isArray(obj));  // false
    </script>
</head>
<body>

</body>
</html>

添加删除数组元素的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /*
          push()方法：在数组的末尾添加一个或者多个数组元素
          push完毕之后，返回的结果是新数组的长度。原数组也会发生变化
        */
        var arr = [1, 2, 3];
        arr.push(4, 'xx'); // [1, 2, 3, 4, 'xx']
        console.log(arr);

        /*
          unshift()方法：在数组的开头 添加一个或者多个数组元素
          unshift完毕之后，返回的结果是新数组的长度。原数组也会发生变化
        */
        arr.unshift('red', 'purple');
        console.log(arr);  // ['red', 'purple', 1, 2, 3, 4, 'xx']

        /*
          pop()方法：删除数组的最后一个元素 
          pop完毕之后，返回的结果是新数组的长度。原数组也会发生变化
        */ 
        arr.pop();
        console.log(arr);  // ['red', 'purple', 1, 2, 3, 4]

        // 4. shift() 它可以删除数组的第一个元素 
        /*
          shift()方法：删除数组的第一个元素 
          shift完毕之后，返回的结果是新数组的长度。原数组也会发生变化
         */ 
        arr.shift();
        console.log(arr); // ['purple', 1, 2, 3, 4]
    </script>
</head>
<body>

</body>
</html>

案例：筛选数组

有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var arr=[1500, 1200, 2000, 2100, 1800];
        var brr=[];

        for (var i=0; i<=arr.length;i++){
            if(arr[i]<2000){
                brr.push(arr[i]);
            }
        }
        console.log(brr)  // [1500, 1200, 1800]
    </script>
</head>
<body>

</body>
</html>

数组排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 翻转数组
        var arr = ['pink', 'red', 'blue'];
        arr.reverse();
        console.log(arr);  // ['blue', 'red', 'pink']

        // 2. 数组排序
        var arr1 = [1,4,5,8];
        arr1.sort();
        console.log(arr1); // [1, 4, 5, 8]

        // 但是下面这种sort()方法就会出错
        var arr2 = [1,4,16,5,8,48];
        arr2.sort();
        console.log(arr2); // [1, 16, 4, 48, 5, 8]

        // 为了解决上面的问题，可以在sort方法内加入一个函数
        var arr3 = [1,4,16,5,8,48];
        arr3.sort(function(a,b){
            return a-b
        })
        console.log(arr3); // [1, 4, 5, 8, 16, 48]

        // 上面的方法，将a、b位置对换，则可以降序排序
        var arr4 = [1,4,16,5,8,48];
        arr4.sort(function(a,b){
            return b-a
        })
        console.log(arr4); // [48, 16, 8, 5, 4, 1]
    </script>
</head>
<body>

</body>
</html>

数组索引方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /*
            indexOf(数组元素)——返回该数组元素的索引号，从前面开始查找，只返回第一个满足条件的索引号，如果在该数组里面找不到元素，则返回的是 -1
            lastIndexOf(数组元素)——返回该数组元素的索引号，从后面开始查找
        */
        var arr = ['red', 'green', 'blue', 'pink', 'blue'];
        console.log(arr.indexOf('blue'));  // 2，即第三个
        console.log(arr.indexOf('while')); // -1，即没找到
        console.log(arr.lastIndexOf('blue')); // 4，从后面找，最后一个blue的索引就是4
    </script>
</head>
<body>

</body>
</html>

案例： 数组去重

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
        // 核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
        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(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
        console.log(demo); // ['c', 'a', 'z', 'x', 'b']
    </script>
</head>
<body>

</body>
</html>

数组转换为字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 数组转换为字符串 
        // 1. toString() 将数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3
        
        // 2. join(分隔符) 
        var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join()); // green,blue,pink
        console.log(arr1.join('-')); // green-blue-pink
        console.log(arr1.join('&')); // green&blue&pink
    </script>
</head>
<body>

</body>
</html>

11.4、字符串对象

基本包装类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var text='hello';
        console.log(text.length); // 5
        /*
        思考一个问题：
        按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，为什么？
        这是因为 js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

        var temp = new String('hello');  // 1. 生成临时变量，把简单类型包装为复杂数据类型
        text=temp;                       // 2. 赋值给我们声明的字符变量
        temp=null;                       // 3. 销毁临时变量
        */
    </script>
</head>
<body>

</body>
</html>

字符串的不可变性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 字符串的不可变
        var str = 'andy';
        console.log(str); // andy
        str = 'red';
        console.log(str);  // red

        /*
        思考：
        字符串既然是不可变的，但是上面的例子中的字符串为什么可以变更呢？
        因为虽然看上去可以改变内容，但其实是内存中的地址变了，内存中新开辟了一个内存空间。
        */

        // 因为我们字符串的不可变所以不要大量的拼接字符串
        // var str = '';
        // for (var i = 1; i <= 1000000000; i++) {
        //     str += i;
        // }
        // console.log(str);
    </script>
</head>
<body>

</body>
</html>

根据字符返回位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // indexOf('要查找的字符', [起始的位置])——从前往后找——找不到返回-1
        // lastIndexof('要查找的字符', [起始的位置])——从后往前找——找不到返回-1
        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春'));      // 2
        console.log(str.indexOf('春', 5));   // 8
        console.log(str.indexOf('山'));      // -1

        console.log(str.lastIndexOf('春'));   // 8
        console.log(str.lastIndexOf('春',6)); // 2
        console.log(str.lastIndexOf('山'));   // -1
    </script>
</head>
<body>

</body>
</html>

案例：返回字符位置

查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
        var str = 'abcoefoxyozzopp';
        var num=0; // 出现的次数
        var index = str.indexOf('o');

        while(index !== -1){
            console.log(index);
            num++;
            index = str.indexOf('o',index+1);
        }
        console.log('o出现的次数是: ' + num);

        // 结果是： 3  6  9  12  o出现的次数是: 4
    </script>
</head>
<body>

</body>
</html>

根据位置返回字符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3)); // y

        // 遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }  // a  n  d  y


        // 2. charCodeAt(index)  返回相应索引号的字符ASCII值
        console.log(str.charCodeAt(0)); // 97 ——a的ASCII值是97

        // 3. str[index] H5 新增的
        console.log(str[0]); // a
    </script>
</head>
<body>

</body>
</html>

案例：

判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。

1.先来看下面的例子，用一个 对象['属性名'] 来判断对象是否有该属性

<!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>
        // 有一个对象o，可以用 对象['属性名'] 来判断是否有该属性
        var o = {
            age: 18
        }
        if (o['age']) {
            console.log('里面有该属性');

        } else {
            console.log('没有该属性');
        }
    </script>
</head>
<body>
    
</body>
</html>

2.判断字符串 'abcoefoxyozzopp' 中每个字符出现的次数

<!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='abcoefoxyozzopp';
        var o={}; // 1.创建一个空对象

        // 2.遍历字符串
        for (var i=0; i<str.length; i++){
            var ch = str.charAt(i);  // 3.获取单个字符
            if(o[ch]){
                o[ch]++;  // 5.如果字符已经存在，则o[字符]自增1
            } else {
                o[ch]=1;  // 4.如果字符不存在，则o[字符]=1——即第一次出现
            }
        }
        console.log(o); // 6.打印出来
    </script>
</head>
<body>
    
</body>
</html>

结果如下：

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>
        var str='abcoefoxyozzopp';
        var o={}; // 1.创建一个空对象

        // 2.遍历字符串
        for (var i=0; i<str.length; i++){
            var ch = str.charAt(i);  // 3.获取单个字符
            if(o[ch]){
                o[ch]++;  // 5.如果字符已经存在，则o[字符]自增1
            } else {
                o[ch]=1;  // 4.如果字符不存在，则o[字符]=1——即第一次出现
            }
        }
        console.log(o); // 6.打印出来

        // 7.遍历对象取出最大次数的对象属性
        var max = 0;
        var charr = '';
        for(var k in o){
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if(o[k]>max){
                max=o[k];
                charr=k
            }
        }
        console.log('最多的字符是'+charr+'总出现'+max+'次'); // 最多的字符是o总出现4次
    </script>
</head>
<body>
    
</body>
</html>

字符串操作方法

<!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>
        // 1. concat('字符串1','字符串2'....)
        var str = 'andy';
        console.log(str.concat('red')); // andyred

        // 2. substr('截取的起始位置', '截取几个字符');
        var str1 = '改革春风吹满地';
        console.log(str1.substr(2, 2)); // 春风——从第3个字符开始，截取2个

        // 3. 替换字符 replace('被替换的字符', '替换为的字符')  只会替换第一个字符
        var str3 = 'andyandy';
        console.log(str3.replace('a', 'b')); // bndyandy

        // 4. 字符转换为数组 split('分隔符') 
        var str4 = 'red, pink, blue';
        console.log(str4.split(',')); // ['red', ' pink', ' blue']
        var str5 = 'red&pink&blue';
        console.log(str5.split('&')); // ['red', ' pink', ' blue']
    </script>
</head>
<body>
    
</body>
</html>


文章来源:https://www.cnblogs.com/taoshushu/p/16501860.html
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：java随笔——类与对象
下一篇：Java模版引擎之Freemarker——全

相关文章

最新发布

点击排行

本站推荐

标签云