欢迎光临
我的个人博客网站

JavaScript基础

 

JavaScript基础

1- 初识JavaScript

1.1 JavaScript 是什么

  • JavaScript是一种运行在客户端的脚本语言,现基于Node.js技术进行服务端编程;

    所谓脚本(Script)语言:是运行时不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行。读到一行,执行一行;

  • 目的是实现逻辑业务与页面控制,相当于动作;

    所谓逻辑性:就是 实现这个要求的思路 先怎么做后怎么做;

1.2 JavaScript的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )

  • 网页特效

  • 服务端开发(Node.js)

  • 桌面程序(Electron)

  • App(Cordova)

  • 控制硬件-物联网(Ruff)

  • 游戏开发(cocos2d-js)

1.3 HTML/CSS/JS 的关系

HTML 和 CSS 属于描述类语言;JS 属于 编程类语言;

JavaScript基础

1.4 浏览器执行 JS 简介

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

  • 渲染引擎:用来解析HTML和CSS,俗称内核,比如 chrome浏览器的 blink,老版webkit等;

  • JS 引擎:也称 JS 解释器。用来读取网页中的 JavaScript代码,处理后运行,如chrome的V8;

    浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。

1.5 JS 的组成

JavaScript基础

  1. ECMAScript

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

    更多参看MDN: MDN手册

  2. DOM——文档对象模型

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

  3. BOM——浏览器对象模型

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

 

1.6 JS 书写位置

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

1.行内式

<input type="button" value="点我" onclick="alert('Hello World')" />

 

  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick

  • 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

  • 可读性差, 在html中编写JS大量代码时,不方便阅读;

2.内嵌式

<script>     alert('Hello  World~!'); </script>

 

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

  • 内嵌 JS 是学习时常用的方式

3.外部JS文件

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

 

  • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用

  • 引用外部 JS文件的 script 标签中间不可以写代码

  • 适合于JS 代码量比较大的情况

    <head>         <meta charset="UTF-8">         <title>Document</title>         <!-- 2.内嵌式的js -->         <script>             alert('这是我的第一个js');         </script> // 3.外部js的写法,开始和结束标签间不能写字         <script src="script.js"> </script>     </head> <body>         <!-- 1.行内式的js 直接写到元素内部,以on开头的属性 外双内单引号 -->         <input type="button" value="提交" onclick="alert('提交成功')">     </body>

 

 

2 – JavaScript注释

JS中的注释主要有两种,分别是单行注释和多行注释。

1. 单行注释 // 用来注释单行文字(  快捷键   ctrl  +  /   ) 2. 多行注释 /* */  用来注释多行文字( 默认快捷键  alt +  shift  + a )

 


更改快捷键:vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认

3 – JavaScript输入输出语句

为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:

方法 说明 面向对象
alert(msg) 浏览器弹出警示框 用户
console.log(msg) 浏览器控制台打印输出信息 程序员
prompt(info) 浏览器弹出输入框,用户可以输入 用户
  <script>        // 1.弹出输入框 输入内容后默认弹出输入的内容         prompt('请输入你的年龄');        // 2.alert 弹出警示框 输出的 展示给用户的         alert('这是我的第一个js');       // 3.console 控制台输出打印信息 给程序员测试用的 浏览器f12控制台左手第二个         console.log('这是程序员能看到的');   </script>

 

 

程序设计基础

1 – 变量概述

1.1 什么是变量

  • 为什么需要变量?有些数据需要保存,所以需要变量;

  • 变量是什么?变量相当一个容器,用来存储数据;

  • 本质?变量的本质是程序在内存中的一块存储空间;

  • 通过变量名找到变量,访问内存;

  • 变量的命名规范:见名知意-驼峰命名法;

1.2 – 变量的使用

  • 变量的声明

  • 变量的赋值

  • 变量的初始化

    1.声明变量

var age; // 声明一个名称为 age 的变量;本质是 在内存中申请一块存储空间

 

  • var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管;

  • age 是程序员定义的变量名,我们要通过 变量名来访问内存中分配的空间;

    2.赋值

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

 

      
  • = 表示赋值,用来把右边的值赋给左边的变量空间

  • 变量值是程序员保存到变量空间里的值

    3.变量的初始化

声明一个变量的同时并赋值, 我们称之为变量的初始化。

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

 

案例:

  • 弹出一个输入框,提示用户输入姓名;

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

    <script>         // 1.用户输入姓名 存储到一个myname的变量里 变量是存储容器         var myname = prompt('请输入姓名');         // 2.输出这个用户名         alert(myname);         // alert('myname');加了单引号就显示不出变量名了     </script>

 

 

1.3 变量语法扩展

1.更新变量

变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

var age = 18; age = 81;   // 最后的结果就是81 因为18 被覆盖掉了 

 

         

2.同时声明多个变量

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

var age = 10,  name = 'zs', sex = 2;     

 

3.声明变量特殊情况

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

案例:变量的语法扩展

    <script>         // 1.更新变量 变量被重新赋值后,以最新一次为准         var myname = '卡卡西';         console.log(myname);         myname = '火影';         console.log(myname);//最新一次显示 火影 但之前的因为也输出了,也会有历史显示          // 2.声明多个变量,可简写 只需写一个var,变量名间逗号隔开,分号表结束         // var age = 18;         // var address = '通辽';         // var sex = 'nv';         var age = 18,             address = '通辽',                 sex = 'nv';          // 3. 声明变量的特殊情况         // 3.1 只声明 不赋值 结果是?undefined         var sex;         console.log(sex); // undefined         // 3.2 不声明 不赋值 直接使用某个变量会报错         console.log('tel');         // 3.3 不声明直接赋值 js 可以使用         qq = 110;         console.log(qq); // 110     </script>

 

案例:交换两个变量的值

js 是编程语言有很强的逻辑性在里面: 实现这个要求的思路 先怎么做后怎么做

// 思路:引入一个临时变量temp     <script>         var temp;         var apple1 = '青苹果';         var apple2 = '红苹果';         temp = apple1;         apple1 = apple2;         apple2 = temp;         console.log(apple1);         console.log(apple2);     </script>

 

1.4 变量命名规范

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

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

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

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

  • 变量名必须有意义。 MMD BBD nl → age

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

 

2 – 数据类型

2.1 数据类型简介

1.为什么需要数据类型?

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

2.变量的数据类型?

变量的数据类型决定了以什么样的类型存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型;在程序运行过程中,变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的。

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

 

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

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

 

3.数据类型的分类

  • 简单数据类型 (Number,String,Boolean,Undefined,Null)

  • 复杂数据类型 (object)

2.2 简单数据类型

简单数据类型(基本数据类型)

简单数据类型 说明 默认值
Number 数字型,包含整形和浮点型,如21和0.21 0
String 字符串型,加了引号的都是字符串 “ ”、‘ ’
Boolean 布尔值型,返回值true、false,等价于1和0 false
Undefined var a;声明变量确没给值,此时a = undefined undefined
Null var a = null;声明了变量a为空值 null

1、数字型 Number

  <script>             // 1.存储整形和浮点型         var age = 21; // 整数         var Age = 21.3747; // 小数            // 2.存储各进制数值         var num1 = 010; // 八进制         var num2 = 0xff; // 十六进制          // 3.数字型范围 三个特殊值         alert(Number.MAX_VALUE); // 最大值         alert(Number.MIN_VALUE); // 最小值         alert(Infinity); // 无穷大         alert(-Infinity); // 无穷小         alert(NaN); // not a number,代表一个非数值          console.log('Number.MAX_VALUE * 2'); // Infinity 无穷大         console.log('-Number.MAX_VALUE * 2'); // -Infinity 无穷小          console.log('pink老师' - 100);// NaN 非数值          // 4.isNaN() 判断 非数字类型 并且返回一个值          // 是数字返回 false 不是返回true         console.log(isNaN(12)); // false         console.log(isNaN(userName)); // true   </script>

 

2、字符串型 String

(1)字符串型是引号内的任意文本,内部换行需要用转义字符 如 n

    <script>         // 嵌套原则:外双内单 或 外单内双;         var str = '我是一个"高富帅"的程序员';         console.log(str);          // 字符串转义字符  都是用  开头 但是这些转义字符写到引号里面         var str1 = "我是一个'高富帅'的n程序员";         console.log(str1);     </script>

 

(2)字符串转义符

转义符 解释说明
n 换行符,n 是 newline 的意思
斜杠
‘ 单引号
”双引号
t tab 缩进
b 空格 ,b 是 blank 的意思

(3)字符串拼接:

  • 多个字符串之间可以使用 + 进行拼接, 字符串 + 任何类型 = 新字符串类型

  • + 号总结口诀:数值相加 ,字符相连

    <script>         // 1. 检测获取字符串的长度 length          var str = 'my name is andy';         console.log(str.length); // 15          // 2. 字符串的拼接 + 不同类型也可拼接 但最后是字符串型          // 数字型是结果 即:数值相加、字符相连         console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼         console.log('pink老师' + 18); // 'pink老师18'         console.log('pink' + true); // pinktrue         console.log(12 + 12); // 24         console.log('12' + 12); // '1212'     </script>

 

(4)字符串拼接加强

  • 经常会将字符串和 变量 来拼接,变量可以很方便地修改里面的值

  • 变量是不能添加引号的,因为加引号的变量会变成字符串

  • 如果变量两侧都有字符串拼接,口诀“引引加加 ”,删掉数字,变量写加中间

    <script>         console.log('pink老师 18 岁');         //先写此句,然后删除18 引引加加 中间加变量                  var age = 18;         console.log('pink老师' + age + '岁');// 引引加加     </script>

 

案例:交互编程的三个基本要素

  • 用户输入:弹出一个输入框prompt,让用户输入年龄;

  • 程序内部处理:把用户输入的值作为变量保存起来,把刚才输入的年龄与所要输出的字符串拼接;

  • 输出结果:使用alert语句弹出警示框;

案例:显示年龄案例

    <script>         var age = prompt('请输入你的年龄');         var str = '你今年已经' + age + '岁了';         alert(str);     </script>

 

 

3、布尔型Boolean

  • 布尔类型有两个值:true 和 false ,其中 true 表示真,而 false 表示假;

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

console.log(true + 1);  // 2 console.log(false + 1); // 1

 

4、Undefined 和 Null

  • 一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时,注意结果)

var variable; console.log(variable);           // 只声明未赋值 输出 undefined console.log('你好' + variable);  // 你好undefined console.log(11 + variable);    // undefined 和数字相加 输出 NaN  console.log(true + variable); //  NaN

 

  • 一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null)

var vari = null; console.log('你好' + vari);  // 你好null console.log(11 + vari);     // 11 console.log(true + vari);   //  1

 

2.3 获取变量数据类型

1.typeof 获取检测变量的数据类型

    <script>         var num = 18;         console.log(typeof num); // number         var str = 'pink';         console.log(typeof str); // string         var flag = true;         console.log(typeof flag); // boolean         var vari = undefined;         console.log(typeof vari); // undefined         var timer = null;         console.log(typeof timer); // object          // prompt 取过来的值是 字符型的         var age = prompt('请输入您的年龄');         console.log(age);         console.log(typeof age); // string     </script> 

 

也可以通过控制台的颜色判断数据类型;黑色是字符串;

2.字面量

字面量表示如何表达这个值,一眼看上去知道这个属于什么类型的值。

    <script>         console.log(18);// 数字字面量         console.log('18');// 字符串字面量         console.log(true);// 布尔字面量         console.log(undefined);         console.log(null);     </script>

 

 

2.4 数据类型转换

什么是数据类型转换?就是把一种数据类型的变量转换成另一种数据类型,通常会实现3种方式的转换:

  • 转换为字符串类型

  • 转换为数字型

  • 转换为布尔型

1.转换为字符串

方式 说明 案例
加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1;alert(num + ‘我是字符串’);也称隐式转换
toString( ) 转成字符串 var num = 1;alert(num.toString( ));
String( )强制转换 转成字符串 var num = 1;alert(String(num));
    <script>         // 1. 把数字型转换为字符串型变量 .toString()         var num = 10;         var str = num.toString();         console.log(str);         console.log(typeof str);         // 2. 我们利用 String(变量)            console.log(String(num));         // 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换         console.log(num + '');     </script>

 

2.转换为数字型(重点)

方式 说明 案例
parseInt(string)函数 将string类型转换成整数数值型 parseInt(’78’)
parseFloat(string)函数 将string类型转换成浮点数值型 parseFloat(‘78.21’)
Number()强制转换函数 将string类型转换成数值型 Number(’12’)
js隐式转换(- * /) 利用算数运算隐式转换为数值型 ’12’ – 0
    <script>         var age = prompt('请输入你的年龄');         // 1. parseInt(变量) 可以把字符型的转换成数字型 得到的是整数         console.log(parseInt(age));         console.log(parseInt('3.14')); // 整数 3         console.log(parseInt('120px')); // 整数 120 单位px被去掉         console.log(parseInt('rem120px')); // NaN 首字母检测不是数字          // 1. parseFloat(变量) 可以把字符型的转换成浮点型 得到的是浮点数         console.log(parseFloat('3.14')); // 3.14         console.log(parseFloat('120px')); // 单位也会去掉          // 3. Number(变量)         var str = '123';         console.log(Number(str));         console.log(Number('12'));          // 4. 利用了算术运算 - * / 隐式转换(不能 +)         console.log('12' - 0); // 数字型 12,先把数字转为数字型在-         console.log('123' - '120'); // 3          console.log('123' + '120'); // 123120 + 是字符串拼接,     </script>

 

 

案例:输出年龄

思路:

  • 弹出一个输入框(prompt),让用户输入出生年份(用户输入)

  • 把用户输入的值用变量保存起来,用今年年份减去变量值,就是现在的年龄(程序内部处理)

  • 弹出警示框(alert),把计算的结果输出(输出结果)

    <script>         var year = prompt('请输入你的出生年份');         var age = 2020 - year;// year是字符串 减法隐式转换 成数字型         alert('你今年已经 ' + age + ' 岁了');     </script>

 

案例:简单加法器

要求:计算两个数的值,用户输入第一个值后,继续弹出第二个输入框并输入第二个值,最后弹出窗口显示两次输入值相加的结果。

    <script>           var num1 = prompt('请输入第一个值:');         var num2 = prompt('请输入第二个值:');         var result = parseFloat(num1) + parseFloat(num2);         alert('结果是:' + result);     </script>

 

3.转换为布尔型

  • 代表空、否定的值会被转换为 false ,如 ”、0、NaN、null、undefined ;

  • 其余值都会被转换为 true;

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

 

 

3 – 标识符、关键字、保留字

3.1 标识符

标识(zhi)符:就是指开发人员 为变量、属性、函数、参数取的名字。 标识符不能是关键字或保留字。

3.2 关键字

关键字:是指 JS本身已经使用了的字,不能再用它们充当变量名、方法名。  包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

3.3 保留字

保留字:实际上就是预留的“关键字”,意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。  包括:boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。  注意:如果将保留字用作变量名或函数名,那么除非将来的浏览器实现了该保留字,否则很可能收不到任何错误消息。当浏览器将其实现后,该单词将被看做关键字,如此将出现关键字错误。

3.4 标识符命名规范

  • 变量、函数的命名必须要有意义

  • 变量的名称一般用名词

  • 函数的名称一般用动词

  • 操作符(=)、括号、左右各留一个空格;

    注释后面打一个空格;

     

4 – 运算符(操作符)

4.1 运算符的分类

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

JavaScript中常用的运算符有:     - 算数运算符  + - * / %     - 递增和递减运算符  ++ --     - 比较运算符  > < >= <= != ==     - 逻辑运算符  && || !     - 赋值运算符  =

4.2 算数运算符

1.算术运算符概述

概念:算术运算使用的符号,用于执行两个变量或值的算术运算。

运算符 描述 实例
+ 10+20=30
10-20=-10
* 10*20=200
/ 10/20=0.5
% 取余数(取模) 返回除法的余数 9%2=1

2.浮点数的精度问题

浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。

    var result = 0.1 + 0.2; // 结果是:0.30000000000000004     console.log(0.07 * 100); // 结果是:7.000000000000001     // 所以:不要直接判断两个浮点数是否相等 !

 

3.表达式和返回值

表达式:是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果,返回给开发者,称为返回值

 

4.3 递增和递减运算符

如果需要反复给数字变量+1或-1可以使用递增(++)和递减(--)运算符来完成。 在 JavaScript 中,递增(++)和递减(--)既可放在变量前,也可以放变量后面 前置递增和后置递增。 注意:前置递增和后置递增在单独使用时,效果是一样的;在表达式里,有所不同;

递增运算符

  • 前置递增运算符 “++变量”:

    使用口诀:先自加,后返回值 ++num——num = num + 1;

    var  num = 10;     alert(++num + 10);   // num = 11  11+10=21

 

  • 后置递增运算符 “变量++”:

    使用口诀:先原值运算,后自加 num++ —— num = num + 1 ;

    var  num = 10;     alert(10 + num++);  // num = 11 10+10=20

 

案例:递增运算符:

    <script>         var a = 10;         ++a; // ++a  11    a = 11         var b = ++a + 2; // a = 12         console.log(b); // 14          var c = 10;         c++; // c++ 11          var d = c++ + 2; //  c++  = 11+2     c = 12         console.log(d); // 13          var e = 10;         var f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12         console.log(f); // 10 + 12 = 22         // 后置自增  先表达式返回原值 后面变量再自加1     </script>

 

 

4.4 比较运算符

  • 比较运算符概述

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

    运算符名称 说明 案例 结果
    < 小于号 1<2 true
    > 大于号 1>2 false
    >= 大于等于号 2>=2 true
    <= 小于等于号 2<=3 false
    == 判断号(会转型) 37==37 true
    != 不等号 37!=37 false
    === !== 全等 要求值和数据类型都一致 37===’37’ false

     

  • 等号比较

    符号 作用 用法
    = 赋值 等号右侧的值赋给左侧
    == 判断 判断两边的值是否相等(注意隐式转换)
    === 全等 判断两边的值和数据类型是否完全相同

    实例:比较运算符

            //1. 我们程序里面的 == 是判断两边值是否相等         console.log(3 == 5); // false         console.log('pink老师' == '刘德华'); // flase         console.log(18 == 18); // true         console.log(18 == '18'); // true         console.log(18 != 18); // false         // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true         console.log(18 === 18);         console.log(18 === '18'); // false

     

4.5 逻辑运算符

  • 逻辑运算符概述

    逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。

    逻辑运算符 说明 案例
    && “逻辑与” ’与‘ and true && false
    || “逻辑或” ’或‘ or true || false
    “逻辑非” ’非‘ not ! true

    案例:逻辑运算符

            <script>         // 1. 逻辑与 &&  and 两侧都为true  结果才是 true  只要有一侧为false  结果就为false          console.log(3 > 5 && 3 > 2); // false         console.log(3 < 5 && 3 > 2); // true         // 2. 逻辑或 || or  两侧都为false  结果才是假 false  只要有一侧为true  结果就是true         console.log(3 > 5 || 3 > 2); // true          console.log(3 > 5 || 3 < 2); // false         // 3. 逻辑非  not  !          console.log(!true); // false     </script>

     

     

  • 短路运算(逻辑中断)

    逻辑运算符左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

    // 1.逻辑与 短路运算     //如果第一个表达式为真,则返回表达式2;如果第一个为假,则返回表达式1;     console.log(123 && 456);//456     console.log(0 && 456 + 1 && 2);// 0     console.log('' && 1 + 2 && 456 * 56789); // ''     // 空或者否定的为假 其余是真  0 ‘’ null undefined NaN 为假;      // 2.逻辑或 短路运算     //如果表达式1 结果为真 则返回表达式1 如果结果为假,则返回表达式2     console.log(123 || 456);//123     console.log(0 && 456 + 1 && 2);//456 继续向后运行

 

4.6 赋值运算符

概念:用来把数据赋值给变量的运算符。

赋值运算符 说明 案例
= 直接赋值 var name = ‘值’;
+=、-= 加、减一个数后在赋值 var age = 10; age+=5; // 15
*=、/=、%= 乘、除、取模后再赋值 var age = 2; age*=5; // 10

案例:赋值运算符

    var age = 10;     age += 5;  // 相当于 age = age + 5;     age -= 5;  // 相当于 age = age - 5;     age *= 10; // 相当于 age = age * 10;

 

 

4.7 运算符优先级

优先级 运算符 顺序
1 小括号 ( )
2 一元运算符 ++ — !
3 算术运算符 先 * / % 后 + –
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先 && 后 ||
7 赋值运算符 =
8 逗号运算符 ,
  • 一元运算符里面的逻辑非优先级很高

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

 

5 – 流程控制

5.1 流程控制概念

流程控制就是来控制代码按照一定结构顺序来执行 流程控制主要有三种结构:顺序结构、分支结构、循环结构

5.2 顺序流程控制

特点:从上到下,依次执行

5.3 分支流程控制

特点:根据不同的条件,执行不同的路径代码(多选一的过程)得到不同的结果;

JS 语言提供了两种分支结构语句:if 语句、switch 语句

5.4 if 语句

       // 1. if语句          // 条件表达式成立 则执行代码,否则什么也不做         if (条件表达式) {             // 条件成立执行的代码语句         }         // 2. if else 双分支语句         // 分支语句 2选1过程 最终只有一条语句执行         if (条件表达式) {             语句1;//如果条件成立则执行语句1             }         else { 语句2 };//条件不成立执行语句2           // 3. 多分支语句          // 最后也是只有一个语句执行 else if任意多,都不成立执行 else         if (条件表达式1) {             语句1;         } else if (条件表达式2) {              语句2;               } else {             最后的语句;         }          // 4. 三元表达式 条件表达式 ?表达式1 :表达式2        // 如果条件表达式为真,则返回表达式1,否则返回表达式2,表达式有返回值         var num = 10;         var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的         console.log(result);          // if (num > 5) {         //     result = '是的';         // } else {         //     result = '不是的';         // }

 

案例:判断是否闰年 (if …else…)

// 算法:能被4整除且不能整除100的为闰年,或者能够被400整除的就是闰年     <script>         var year = prompt('请您输入年份:');         if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {             alert('您输入的年份是闰年');         } else {             alert('您输入的年份是平年');         }     </script>

 

案例:判断成绩级别 (if …else if …else…)

// 思路:从大到小的顺序,否则 就都输出了     <script>         var score = prompt('请您输入分数:');         if (score >= 90) {         alert('宝贝,你是我的骄傲');         } else if (score >= 80) {         alert('宝贝,你已经很出色了');         } else if (score >= 70) {         alert('你要继续加油喽');         } else if (score >= 60) {         alert('孩子,你很危险');         } else {         alert('熊孩子,我不想和你说话,我只想用鞭子和你说话');     </script>

 

案例:数字补0案例 (条件表达式 ? 表达式1 : 表达式2)

// 思路:用户输入一个0-59之间的数字,如果小于10,在这个数字前面补0(加0 拼接)      <script>         var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');         // 三元表达式 表达式 ? 表达式1 :表达式2          var result = time < 10 ? '0' + time : time;          alert(result);     </script>

 

 

5.5 switch分支流程控制

  • switch :开关 转换 , case :小例子 选项

  • 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量,不用数值;

  • 如果表达式与case后面得值 存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束

  • 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

  • 注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case,不会退出switch

特点:switch后面的表达式是 固定值,通常是变量,优点是可以直接跳转到特定的case语句;

// 思路:利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上,就执行该case 里面的语句  如果都没有匹配上,那么执行 default里面的语句     switch(表达式) {         case value1: 执行语句1; break;         case value2: 执行语句2; break;         default: 最后的语句;     }

 

案例:查询水果价格 switch()

        // 弹出 prompt 输入框,让用户输入水果名称,把这个值取过来保存到变量中。         // 将这个变量作为 switch 括号里面的表达式。         // case 后面的值写几个不同的水果名称,注意一定要加引号 ,因为必须是全等匹配。         // 弹出不同价格即可。          var fruit = prompt('请您输入查询的水果:');         switch (fruit) {         case '苹果':         alert('苹果的价格是 3.5/斤');         break;         case '榴莲':         alert('榴莲的价格是 35/斤');         break;         default:         alert('没有此水果');     }    

 

5.5 switch 语句和 if else if 语句的区别

  • 一般情况下,它们两个语句可以相互替换

  • switch用于处理case比较确定的情况,如固定值的;进行条件判断后直接执行到程序的条件语句,效率更高;

  • if else更加灵活,常用于范围判断(大于 小于);但if else有几种条件就判断多少次;分支较少时效率较高;

 

6 – 循环

循环的目的:可以重复执行某些代码

JS三种循环结构:

  • for循环:常用于 计数

  • while循环:复杂一点的条件判断,比for灵活

  • do…while循环:比while严谨

三个循环很多情况可以相互转换;

6.1 for循环

重复执行某些代码,通常和计数有关系

    // 1. 语法结构     for (初始化变量; 条件表达式; 操作表达式) {         //循环体     }      //1.初始化变量 就是用 var声明一个普通变量,常用于作为计数器     //2.条件表达式 用来决定每一次循环是否继续执行 终止的条件     //3.操作表达式 每次循环最后执行的代码 常用于计数器变量递增减      for (var i = 1; i <= 100; i++) {         console.log('你好吗');     }     //1.先赋初值 var i = 1 整个循环只执行一次     //2.在执行 i <= 100 条件成立执行循环语句 不成立跳出循环     //3.条件成立的话 接下来执行console.log('')     //4.最后执行i++ i++是单独写的代码 递增  第一轮结束     //5.接着执行 i <= 100 如果满足条件 就去执行循环体 不满足条件退出循环 第二轮

 

for循环执行方式

    <script>         // 1.for循环 重复执行相同代码         // 让用户 控制 输入的次数         var num = prompt('请输入次数');         for (var i = 1; i <= num; i++) {             alert('hello world');             // console.log('hello world');         }          // 2.for循环 重复执行不同的代码 因为我们有计数器变量 i 的存在 i每次循环值都会变化         // 计数器 输出一个人 1~100岁         for (var i = 1; i <= 100; i++) {             console.log('这个人今年' + i + '岁了');         }     </script>

 

案例:有关for循环的算法

    <script>     // 1. 求 1~100 之间的整数累加和 算法:sum = sum + i  5050;            var sum = 0;// 求和变量 初始值为0         for (var i = 1; i <= 100; i++) {             // sum = sum + i;             sum += i;         }         console.log(sum);      // 2. 求1~100间的所有数的平均值 需要一个 sum 和的变量 还需要一个平均值 average 的变量  50.5         var sum = 0;         var average = 0;         for (var i = 1; i <= 100; i++) {             sum = sum + i;             // sum += i;         }         average = sum / 100;         console.log(average);     // 3. 求1~100间所有偶数和奇数的和 需要一个偶数和even 和一个奇数和odd         var even = 0;         var odd = 0;         for (var i = 1; i <= 100; i++) {             if (i % 2 == 0) {                 even = even + i;             } else {                 odd = odd + i;             }         }         console.log('1~100之间的所有偶数和是' + even);         console.log('1~100之间的所有奇数和是' + odd);     </script>

 

案例:求学生成绩案例

    <script>         // 思路:         // 1. 弹出输入框输入总得班级人数(num)         // 2. 依次输入学生成绩并保存(score)         // 3. for循环 弹出的次数与班级总人数之间的关系 i <= num         // 4. 先求总成绩 sum ,之后求平均成绩 average 弹出结果         var num = prompt('请输入班级的总人数');// num 总的班级人数         var sum = 0;         var average = 0;         for (var i = 1; i <= num; i++) {             var score = prompt('请输入第' + i + '个学生成绩');             sum = sum + parseFloat(score);         }         average = sum / num;         alert('班级总成绩是' + sum);         alert('班级的平均分是' + average);     </script>

 

案例:打印五角星

  <script>         //     一行打印五个星星          // console.log('★★★★★');         //     循环打印5次         // for (var i = 1; i <= 5; i++) {         //     console.log('★');         // }          // 1.一行打印五颗星星 追加字符串的方法-是一行打印多少个,不是循环多少次一行一个         // var str = '';          // for (i = 1; i <= 5; i++) {         //     str = str + '★';         // }          // 2.取决于用户输入         var num = prompt('请输入星星的个数');         var str = '';         for (i = 1; i <= num; i++) {             str = str + '★';         }         console.log(str);     </script>

 

 

双重for循环

双重for循环:

    <script>         // 1.语法结构          for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {             for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {                 执行语句;             }         }         //  内层循环可以看做外层循环的循环体语句         //  外层循环执行一次,内层循环 执行全部         //  总共执行了 i*j 次          for (var i = 1; i <= 3; i++) {             console.log('这是外层循环第' + i + '次');             for (var j = 1; j <= 3; j++) {                 console.log('这是内层循环第' + j + '次');             }         }     </script>

 

案例:打印n行n列五角星

    <script>         var rows = prompt('请你输入行数:');         var cols = prompt('请你输入列数:');         var str = '';         for (var i = 1; i <= rows; i++) { // 外层循环负责 打印i行              for (var j = 1; j <= cols; j++) { // 内层循环负责 一行打印j个                 str = str + '★';             }             // 如果一行打印完毕j个星星就要另起一行 加 n             str = str + 'n'; // 字符串拼接 追加字符串         }         console.log(str);     </script>

 

案例:打印 倒三角

JavaScript基础

    <script>         var str = '';         for (var i = 1; i <= 10; i++) { //外层循环控制行数             for (var j = i; j <= 10; j++) {                  //内层循环打印个数不一样 j=i=1,从1~10打印10个                 str = str + '★';             }             // 如果一行打印完毕j个星星就要另起一行 加 n             str = str + 'n';         }         console.log(str);     </script>

 

案例:打印九九乘法表(正三角)

       // 一共有9行,但是每行的个数不一样,因此需要用到双重 for 循环        // 外层的 for 循环控制行数 i ,循环9次 ,可以打印 9 行          // 内层的 for 循环控制每行公式  j   	  // 核心算法:每一行 公式的个数正好和行数一致, j <= i;       // 每行打印完毕,都需要重新换一行
    <script>         str = '';         for (i = 1; i <= 9; i++) {             for (j = 1; j <= i; j++) {                 // str = str + '★';                 // str += i + 'x' + j + '=' + i * j;                 str += j + 'x' + i + '=' + i * j + 't';                 //为了符合列匹配关系             }             str = str + 'n';         }         console.log(str);    </script>

 

for 循环小结

  • for 循环可以重复执行某些相同代码

  • for 循环可以重复执行些许不同的代码,因为我们有计数器

  • for 循环可以重复执行某些操作,比如算术运算符加法操作

  • 双重 for 循环,外层循环一次,内层 for 循环全部执行

  • for 循环是循环条件和数字直接相关的循环

断点调试:

  • 浏览器中f12打开调试器窗口

  • 单击某条语句设置断点,并刷新浏览器

  • 右上角 步进 进行一步步调试,看程序怎样运行的

 

6.2 while循环

while语句的语法结构如下:

使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环

    <script>         // 1. while 循环语法结构 while 当...的时候         // 2.执行思路 当条件表达式为true时 执行循环体 否则 退出循环          while (条件表达式) {              循环体          }                 // 3.代码验证         var num = 1;// 初始化变量 计数器         while (num <= 100) {             console.log('hello');             num++; // 操作表达式 完成计数器的更新 防止死循环 不加限制会变成死循环 一定要有退出条件         }          // 转换写法         for (num = 1; num <= 100; num++) {             console.log('hello');         }     </script>

 

案例:while循环 输出人的年龄

    <script>         // while循环案例         // 1.打印人的一生,从1岁到100岁         var i = 1;         while (i <= 100) {             console.log('这个人今年' + i + '岁了');             i++;         }          // 2.计算1~100之间所有的整数和         var sum = 0;         var j = 1;         while (j <= 100) {             sum = sum + j;             j++;         }         console.log(sum);          // 3.弹出一个提示框,你喜欢我么? 如果输入喜欢,就提示结束,否则 一直询问         var message = prompt('你喜欢我么?');         while (message !== '喜欢') {             message = prompt('你喜欢我么');         }         alert('我也喜欢你啊');     </script>

 

 

6.3 do-while循环

比while更简单一些;

while是先判断后循环;do…while是先执行,后判断,至少执行一次;

    <script>         // 1.语法结构  先循环,在判断,至少执行一次         do {             //循环体         } while (条件判断);          // 2.代码         var i = 1;         do {             console.log('how are you');             i++;         } while (i <= 100)                      do {             var message = prompt('你喜欢我么?');         } while (message !== '喜欢')          alert('我也喜欢你啊');     </script>

 

 

6.4 continue、break

1.continue 关键字用于立即跳出本次循环

继续下一次循环(本次循环体中 continue 之后代码会少执行一次)

案例:吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子,代码实现如下

     for (var i = 1; i <= 5; i++) {          if (i == 3) {              console.log('这个包子有虫子,扔掉');              continue; // 跳出本次循环,跳出的是第3次循环            }           console.log('我正在吃第' + i + '个包子呢');      }      //1. 求 1~100 之间,除了能被7整除之外的 整数和         var sum = 0;         for (var i = 1; i <= 100; i++) {             if (i % 7 == 0) {                 continue;// 退出本次循环 直接跳到 i++             }             sum += i;             console.log(sum);         }     </script>

 

2.break 关键字用于立即跳出整个循环(循环结束)

案例:吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了,其代码实现如下

  for (var i = 1; i <= 5; i++) {      if (i == 3) {          break; // 直接退出整个for 循环,跳到整个for下面的语句      }      console.log('我正在吃第' + i + '个包子呢');    }

 

 

7 – 数组

为什么需要数组?

普通变量一次只能存一个值;数组(Array)是一组数据的集合,一次可以存多个值;

7.1 数组的概念

数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。

7.2 创建数组

JS 中创建数组有两种方式:

  • 利用new 关键字 创建数组(对象)

var 数组名 = new Array() ; var arr = new Array();   // 创建一个新的空数组

 

  • 利用数组字面量创建数组

var  数组名 = []; // 使用数组字面量方式创建带初始值的数组 数组类型不限 var  数组名 = [1,'pink',true];// 数组的初始化

 

7.3 获取数组中的元素

索引 (下标) :用来访问数组元素的序号(数组下标从 0 开始)。

数组可以通过索引来访问、设置、修改对应的数组元素,可以通过“数组名[索引]”的形式来获取数组中的元素。

        // 4. 我们数组里面的数据一定用逗号分隔         // 5. 数组里面的数据 比如1,2, 我们称为数组元素         // 6. 获取数组元素  格式 数组名[索引号]  索引号从 0开始          console.log(arr1);         console.log(arr1[1]); // pink老师         console.log(arr1[2]); // true   

 

注意:如果访问时数组没有和索引值对应的元素,则得到的值是undefined

7.4 遍历数组

把数组中的每个元素 从头到尾 都访问一次(类似学生的点名)称为遍历数组;

for循环中的 i 是计数器,当索引号使用,arr[i] 是数组元素 第i个数组元素,索引号从0开始

    <script>         // 1.数组索引 访问数组中某个元素         var arr = ['red', 'green', 'blue'];         console.log(arr[0]);// red          // 2.遍历数组 通过for循环访问数组所有元素         //   因为数组索引号从0开始,所以i必须从0开始 i < 3         //   输出的时候 arr[i] i 计数器 当索引号来用         var arr = ['red', 'green', 'blue'];         for (var i = 0; i < arr.length; i++) {             console.log(arr[i]);         }         // 数组名.length 可以直接获取数组长度 动态监测数组元素的个数         console.log(arr.length);// 此处数组的长度是数组元素的个数,并非索引     </script>

 

案例:求数组里面所有元素的和及平均值

    <script>         // 1.声明一个求和变量 sum         // 2.遍历这个数组,把里面每个数组元素 加到sum 里         // 3.用求和变量 sum 除以数组的长度得到数组的平均值         var arr = [2, 4, 1, 7, 4];         var sum = 0;         var average = 0;         for (i = 0; i < arr.length; i++) {             // sum+=i;// 加的不是计数器,是数组里的元素             sum += arr[i];         }         average = sum / arr.length;         console.log('这组数的和是:' + sum);         console.log('这组数的平均值是:' + average);         console.log(sum, average); // 想要输出多个变量,用逗号分隔即可     </script>

 

案例:求数组 [2,6,1,77,52,25,7] 中的最大值

    <script>         // 1.声明一个求和变量 max 默认最大值可以取数组中的第一个元素         // 2.遍历这个数组,把里面每个数组元素和 max 相比较         // 3.如果这个数组元素大于max 就把这个数组元素存到 max 里面,否则继续下一轮比较。         var arr = [2, 6, 1, 77, 52, 25, 7];         var max = arr[0];// 将数组第一个值赋值给max         for (i = 1; i < arr.length; i++) {             if (arr[i] > max) {                 max = arr[i];             }         }         console.log('该数组里最大的是:' + max);     </script>

 

案例:将数组元素转换为字符串,中间用任意字符相连

        // 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串,并且用 | 或其他符号分割         // 1.需要一个新变量用于存放转换完的字符串 str。         // 2.遍历原来的数组,分别把里面数据取出来,加到字符串里面。         // 3.同时在后面多加一个分隔符         <script>          var arr = ['red', 'green', 'blue', 'pink'];         var str = '';         var sep = '|';         for (i = 1; i < arr.length; i++) {             str += arr[i] + sep;         }         console.log(str);     </script>

 

注意

  • 此处数组的长度是数组元素的个数 ,不是数组的索引号(下标号)。

  • 当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化;数组的length属性可以被修改:

  • 如果设置的length属性值大于数组的元素个数,则会在数组末尾出现空白元素;

  • 如果设置的length属性值小于数组的元素个数,则会把超过该值的数组元素删除

7.5 数组中新增元素

1、通过修改length长度新增数组元素,通过length长度实现数组的扩容

2、通过修改数组索引新增数组元素,追加数组元素

    <script>         // 1.新增数组元素 修改length长度         var arr = ['red', 'green', 'blue'];         console.log(arr.length);         arr.length = 5;// 数组长度修改为5 里面应该有5个元素         console.log(arr);// 后面两个是空的 undefined          // 2.新增数组元素 修改索引号 追加数组元素         var arr1 = ['red', 'green', 'blue'];         arr1[3] = 'pink';         console.log(arr1);         arr1[4] = 'hotpink';         console.log(arr1);         arr1[0] = 'yellow';// 替换原来的数组元素         console.log(arr1);          arr1 = '有点意思';// 不要直接给 数组名赋值 否则里面的数组元素都没有了         console.log(arr1);     </script>

 

 

案例:数组存放0~10个值,循环追加的方式输出

    <script>         var arr = [];// 定义一个空数组         for (var i = 0; i < 10; i++) {// 遍历数组             // arr=i;// 不要直接给数组名赋值 否则以前的元素都没了             arr[i] = i + 1;// i是数组下标 下标为0的数组对应着 第一个数组元素         }         console.log(arr);     </script>

 

案例:筛选数组 筛选数组中大于10的数存入新数组

    <script>         // 方法一         var arr = [1, 2, 3, 4, 5, 6, 7, 8, 19, 10];         var newArr = [];// 声明一个新的数组存放新数据         var j = 0;// 方法1 声明一个新变量         for (var i = 0; i < arr.length; i++) {             if (arr[i] >= 10) {                 // 新数组索引号应该从0开始 依次递增                 newArr[j] = arr[i];                 // 在旧数组里找出大于等于10的元素 依次追加给新数组                 j++;             }         }         console.log(newArr);          // 方法二         var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];         var newArr = [];// 声明一个新的数组存放新数据         // 刚开始 newArr.length 就是0         for (var i = 0; i < arr.length; i++) {             if (arr[i] >= 10) {                 // 新数组索引号应该从0开始 依次递增                 newArr[newArr.length] = arr[i];             }         }         console.log(newArr);     </script>

 

案例:删除数组指定元素,数组去重 删除数组中的0

    // 1、需要一个新数组用于存放筛选之后的数据。     // 2、遍历原来的数组, 把不是 0 的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据)。     // 3、新数组里面的个数, 用 length 不断累加。     <script>         var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];         var newArray = [];         for (var i = 0; i < arr.length; i++) {             if (arr[i] != 0) {                 newArray[newArray.length] = arr[i];             }         }         console.log(newArray);     </script>

 

案例:翻转数组 将数组中的内容反过来存放

    // 1、声明一个新数组 newArr     // 2、把旧数组索引号第4个取过来(arr.length - 1),给新数组索引号第0个元素 (newArr.length)     // 3、我们采取 递减的方式  i--   // 思路:把 旧数组 的 最后一个元素 取出来给 新数组 作为第一个  (递减)       <script>         var arr = ['red', 'green', 'blue', 'pink', 'purple'];         var newArr = [];         for (var i = arr.length - 1; i >= 0; i--) {             newArr[newArr.length] = arr[i];         }         console.log(newArr);     </script>

 

案例:数组排序 交换相邻两个变量(冒泡排序)

冒泡排序:一种算法,把一系列数据按照一定的顺序排列,依次比较相邻两个元素;

JavaScript基础

    <script>         var arr = [5, 4, 3, 2, 1];         for (var i = 0; i <= arr.length - 1; i++) { // 外层交换趟数 5个元素交换4趟             for (var j = 0; j <= arr.length - i - 1; j++)                  //里层循环 负责每一趟的交换次数             {                 // 内部交换2个变量的值 前一个和后面一个数组元素相比较                 if (arr[j] > arr[j + 1]) {                     var temp = arr[j];                     arr[j] = arr[j + 1];                     arr[j + 1] = temp;                 }             }         }         console.log(arr);     </script>

 

 

8 – 函数

8.1 函数的概念

函数:就是封装了一段可被重复调用执行的代码块

通过此代码块可以实现大量代码的重复使用

8.2 函数的使用

函数使用分为两步: 声明函数 和 调用函数;

     // 1.声明函数  函数名 命名为动词     // (1) function 声明函数的关键字 全部小写      // (2) 函数是做某件事情,函数名一般是动词 sayHi       // (3) 函数不调用自己不执行     function 函数名() {         //函数体代码     }
// 2.调用函数 函数名(); // 通过调用函数名来执行函数体代码 函数不调用 自己不执行 function sayHi() { console.log('hi~~'); } sayHi();

 

注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。

案例:利用函数封装计算1-100累加和

        // 1.声明函数         function getSum(num1,num2) {             var sum = 0;// 准备一个变量,保存数字和             for (var i = num1; i <= num2; i++) {                 sum += i;// 把每个数值 都累加 到变量中             }             alert(sum);         }         // 2.调用函数         getSum(1,100);

 

8.3 函数的参数

  • 形参:形式上的参数 声明函数时定义 可看做不用声明的变量

  • 实参:实际上的参数 函数调用时传递的 最终实参传递给形参

函数参数的运用:

        // 1.函数声明 声明形参         function 函数名(形参1, 形参2, 形参3...) {             // 函数体         }         // 2.函数调用 调用实参         函数名(实参1, 实参2, 实参3...);           // 声明函数         function getSum(num1, num2) {             console.log(num1 + num2);         }         // 调用函数         getSum(1, 3); // 4 先将实参传递给形参 在执行函数体         getSum(6, 5); // 11

 

函数形参和实参数量不匹配时

参数个数 说明
实参个数等于形参个数 输出正确结果
实参个数多于形参个数 值取到形参个数
实参个数小于形参个数 多的形参定义为undefined,结果NaN
注意:在JavaScript中,形参的默认值是undefined。

案例:函数的执行

// 1.函数可以重复相同的代码     function cook() {         console.log('hello');     }     cook();  // 2.也可以利用函数的参数 实现函数重复不同的代码     function 函数名(形参1,形参2...) { // 声明的小括号里是形参 形式上的              }     函数名(实参1,实参2...);// 函数调用的小括号里是实参 实际的      function cook(aru) { // 形参是接收实参的 aru='hello' 相当于一个不用声明的变量         console.log(aru);     }     cook('hello');// 形参和实参个数尽量相匹配 // 1.利用函数求任意两个数之间的和     function getSum(num1,num2) {         console.log(num1 + num2);     }     getSum(1, 3);     getSum(2, 6);
// 2.利用函数求任意两个数之间的累加和 function getSum(start, end) { var sum = 0; for (var i = start; i <= end; i++) { sum += i; } console.log(sum); } getSum(1, 100);

 

8.4 函数的返回值return

return 语句

函数只是用来做某件事或实现某种功能,最终的结果需要返回给函数的调用者; 只要函数遇到return 就把后面的结果 返回给函数的调用者  函数名()= return + 后面
   // 声明函数     function 函数名(){         ...         return  需要返回的值;     }     // 调用函数     函数名();// 此时调用函数就可以得到函数体内return 后面的值      // 声明函数     function sum(){      ...      return 666;     }     // 调用函数     sum(); // 此时sum = 666,return 语句会把自身后面的值返回给调用者

 

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

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

    // 1.利用函数求任意两个数之和         function getResult(num1,num2) {             return num1 + num2;         }         //getResult();// getResult = num1+num2         console.log(getResult(1,2));      // 2.利用函数求两个数中最大值         function getMax(num1,num2) {             // if (num1 > num2) {             //     return num1;             // } else {             //     return num2;             return num1 > num2 ? num1 : num2;         }         console.log(getMax(1, 3));      // 3.利用函数求数组中的最大值         function getArrMax(arr) { // arr接收一个数组             var max = arr[0];             for (var i = 1; i<=arr.length; i++) {                 if (arr[i] > max) {                     max = arr[i];                 }             }             return max;         }         // getArrMax([1,2,3,4,5]);// 实参是一个数组         // 实际开发中,常用一个变量 来接收 函数的返回结果         var re = getArrMax([1,2,3,4,5]);         console.log(re);

 

return函数注意事项:

// 1.return 终止函数         function getSum(num1, num2) {             return num1 + num2;             alert('这条语句不被执行');//return结束,后面的代码不被执行         }          // 2.return 只能返回一个值         function fn(num1, num2) {             return num1, num2;// return返回的结果是最后一个值 num2         }         console.log(fn(1, 2));          // 3.求任意两个数的 加减乘除结果         function getResult(num1, num2) { // 想要输出多个值return 可以返回数组             return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];         }         var re = getResult(1, 2);         console.log(re);          // 4. 我们的函数如果有return 则返回的是 return 后面的值,如果函数么有 return 则返回 undefined            console.log(fun1()); // 返回 666         function fun2() {          }         console.log(fun2()); // 函数返回的结果是 undefined

 

退出循环

break ,continue ,return 的区别

  • break :结束当前的循环体(如 for、while)

  • continue :跳出本次循环,继续执行下次循环(如 for、while)

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

 

8.5 arguments的使用

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

arguments对象中存储了传递的所有实参,是当前函数的一个内置对象,函数独有的;

  <script>         // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments         function fn() {             // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]             // console.log(arguments.length);             // console.log(arguments[2]);             // 我们可以按照数组的方式遍历arguments             for (var i = 0; i < arguments.length; i++) {                 console.log(arguments[i]);             }         }         fn(1, 2, 3);         fn(1, 2, 3, 4, 5);         // 伪数组 并不是真正意义上的数组         // 1. 具有数组的 length 属性         // 2. 按照索引的方式进行存储的         // 3. 它没有真正数组的一些方法 pop()  push() 等等     </script>

 

注意:在函数内部使用该对象,用此对象获取函数调用时传的实参。

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

 <script>         // 利用函数求任意个数的最大值         function getMax() { // arguments = [1,2,3]             var max = arguments[0];             for (var i = 1; i < arguments.length; i++) {                 if (arguments[i] > max) {                     max = arguments[i];                 }             }             return max;         }         console.log(getMax(1, 2, 3));         console.log(getMax(1, 2, 3, 4, 5));         console.log(getMax(11, 2, 34, 444, 5, 100));     </script>

 

案例:

<script>         // 1.利用函数封装方法 翻转任意数组 reverse 翻转         function reverse(arr) {             var newArr = [];             for (var i = arr.length - 1; i >= 0; i--) {                 newArr[newArr.length] = arr[i];             }             return newArr;         }         var arr1 = reverse([1, 2, 3, 4, 5]);         console.log(arr1);          // 2.利用函数封装的方法,对数组排序--冒泡排序         function sort(arr) {             for (var i = 0; i < arr.length - 1; i++) {                 for (var j = 0; j < arr.length - i - j; j++) {                     if (arr[j] > arr[j + 1]) {                         var temp = arr[j];                         arr[j] = arr[j + 1];                         arr[j + 1] = temp;                     }                 }             }             return arr;         }         var arr2 = sort([1, 2, 3, 4, 5]);         console.log(arr2);          // 3.判断闰年         function isRunYear(year) {             // 如果是闰年返回 true 否则返回false             var flag = flase;             if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {                 flag = true;             }             return flag;         }         console.log(isRunYear(2000));         console.log(isRunYear(1999));     </script>

 

函数之间可以相互调用:

函数内部可以调用另一个函数;

    <script>         // 函数是可以相互调用的         // function fn1() {         //     console.log(11);         //     fn2(); // 在fn1 函数里面调用了 fn2 函数         // }         // fn1();          // function fn2() {         //     console.log(22);          // }         </script>

 

在同一作用域代码中,函数名即代表封装的操作,使用函数名加括号即可以将封装的操作执行。

案例:输出当年年的2月份天数

<script>         // 用户输入年份,输出当年年的2月份天数         function backDay() {             var year = prompt('请您输入年份');             if (isRunYear(year)) {                 alert('当前年份是闰年 2月份有29天');             } else {                 alert('当前年份是平年 2月份有28天');             }         }         backDay();         // 判断是否为闰年的函数         function isRunYear(year) {             var flag = false;             if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {                 flag = true;             }             return flag;         }     </script>

 

 

8.6 函数的两种声明方式

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

利用函数关键字 function 自定义函数方式

    // 声明定义方式     function fn() {...}     // 调用 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面     fn();

 

2、函数表达式方式(匿名函数)

        // var 变量名 = function () { }         var fun = function () {             console.log('我是函数表达式');         }         fun();

 

  • fun是变量名 不是函数名

  • 函数表达式 声明方式和 声明变量差不多,只不过变量里存的是值 而 函数表达式里存的是函数

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

  • 函数表达式也可以进行传递参数

 

9 – 作用域

9.1 作用域概述

作用域:变量能够起作用和效果的 某个范围 目的:为了提高程序的可靠性 更重要的作用是减少命名冲突 全局作用域和局部作用域命名不冲突

9.2 作用域的分类

JavaScript(es6前)中的作用域有两种:

  • 全局作用域

  • 局部作用域(函数作用域)

1.全局作用域

	作用于所有代码执行的环境(整个script标签内部)或独立的js文件,或者var声明的。 	如果在函数内部没有声明,直接赋值的变量也属于全局变量,一般不用console.log(); 	全局变量只有浏览器关闭时才会结束,占资源;

2.局部作用域

	作用于函数内的代码环境,就是局部作用域(函数作用域)  	在函数内部的作用域,这个代码名字只在函数内部起作用  	function fn { 局部作用域 }; 	函数的形参也可以看做局部变量;局部变量在代码执行完毕后就结束;

3.es6新增块级作用域

js在es6中新增块级作用域,块作用域由 { } 包括 如if{} for{}等 在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在当前 if 语句、当前循环语句中使用
  • java有块级作用域:

if(true){   int num = 123;   system.out.print(num);  // 123 } system.out.print(num);    // 报错

 

以上java代码会报错,是因为代码中 { } 即一块作用域,其中声明的变量 num,在 “{ }” 之外不能使用;

而与之类似的JavaScript代码,则不会报错。

  • js中没有块级作用域(在ES6之前)

if(true){   var num = 123;   console.log(123); //123 } console.log(123);   //123

 

 

9.3 – 变量的作用域

在JavaScript中,根据作用域的不同,变量可以分为两种:

  • 全局变量

  • 局部变量

1.全局变量

在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
  • 全局变量在代码的任何位置都可以使用

  • 在全局作用域下 var 声明的变量 是全局变量

  • 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)

2.局部变量

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量) 注意: 函数的形参也可以看做是局部变量
  • 局部变量只能在该函数内部使用

  • 在函数内部 var 声明的变量是局部变量

  • 函数的形参实际上就是局部变量

3.全局变量和局部变量的区别

  • 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存;

  • 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间;

 

9.4 – 作用域链

根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链。

案例分析1:
function f1() { // 外部函数     var num = 123;     function f2() {         console.log( num );// 站在目标出发,一层一层的往外查找     }     f2(); // 内部函数 } var num = 456; f1();

 

案例:

作用域链:采取就近原则的方式来查找变量最终的值 var a = 1; function fn1() {     var a = 2;     var b = '22';     fn2();     function fn2() {         var a = 3;         fn3();         function fn3() {             var a = 4;             console.log(a); //a的值 ?             console.log(b); //b的值 ?         }     } } fn1();            // 作用域链         var num = 10;         function fn() {             var num = 20;// 根据作用域链机制 先调用上一级的             function fun() {                 console.log(num);// 内部函数可以调用外部函数 属于子集             }         }          function f1() {             var num = 123;             function f2() {                 console.log(num);// 站在目标出发一层层往外查找 num=123 近             }             f2();         }         var num = 456;         f1();

 

 

预解析

1.1 预解析的相关概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。  JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。  预解析:  js引擎会把js里所有的 var 还有 function 提升到当前作用域的最前面,预解析也叫做变量、函数提升。 代码执行: 按照代码抒写的顺序从上到下执行

注意:预解析会把变量和函数的声明在代码执行之前执行完成。

 

1.2 预解析分类

预解析分为变量预解析(变量提升) 和 函数预解析(函数提升)  变量提升:变量的声明会被提升到当前作用域的最上面,变量的 赋值 不会提升。 函数提升:函数的声明会被提升到当前作用域的最上面,但是不会调用函数。

预解析分为变量预解析(变量提升) 和 函数预解析(函数提升)

 // 1.未声明 直接调用  报错         console.log(num);          // 2.先调用 后声明  undefined 坑1         // 变量预解析(变量提升)声明提升,赋值不提         console.log(num);         var num = 10;         // 预解析后相当于:         var num; // 只声明 未赋值 undefine         console.log(num);         num = 10;          // 3.利用关键字定义函数 函数先调用后声明 或 先声明后调用 无影响         // 函数预解析(函数提升)         fn();         function fn() {             console.log(11);         }         // 预解析后相当于:把函数提升到最前面          // 4.利用函数表达式定义函数 只能先声明后调用 否则会报错         // 解决函数表达式声明调用问题         var fun = function () {             console.log(22);         }         // 预解析后相当于:         var fun;         fun();         fun = function() {             console.log(22);         } 

 

案例:

// 1.         var num = 10;         fun();         function fun() {             console.log(num);             var num = 20;         }     // 函数提升后 相当于以下代码   输出undefined         var num;         function fun() {             var num; // 只声明 未赋值 undefined             console.log(num);             num = 20;         }         num = 10;         fun();      // 4.         f1();         console.log(c);         console.log(b);         console.log(a);         function f1() {             var a = b = c = 9;             console.log(a);             console.log(b);             console.log(c);         }     // 相当于以下代码         function f1() {             //var a = b = c = 9;             // 相当于 var a = 9;b = 9;c = 9;//b c 直接赋值 没有var声明 相当于全局变量             // 集体声明应该是 var a  =9,b = 9,c = 9;             var a;             a = b = c = 9;             console.log(c);// 9             console.log(b);// 9             console.log(a);// 报错 a当局部变量看 只声明         }

 

 

对象

1.1 对象的相关概念

1、什么是对象?

对象是指具体的事物,如字符串、数值、数组函数等;万物皆对象;

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

  • 属性:事物的特征,在对象中用属性来表示(常用名词)

  • 方法:事物的行为,在对象中用方法来表示(常用动词)

2、为什么需要对象?

保存一个值用变量;保存多个值,可以使用数组;保存一个人的完整信息可以用对象(相当于C语言结构体);

  • 对象可以让代码结构更清晰

  • 对象属于复杂数据类型object。

  • 本质:对象就是一组无序的相关属性和方法的集合。

  • 构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。

  • 对象实例特指一个事物,比如这个苹果、正在给你们讲课的pink老师等。

  • for…in 语句用于对对象的属性进行循环操作。

 

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

相同点 他们都是用来存储数据的;

  • 变量:单独声明赋值,使用的时候直接写变量名 单独存在

  • 属性:对象里面的变量称为属性,不需要声明,用来描述对象特征 对象.属性;

    属性是对象的一部分,而变量不是对象的一部分,变量是单独存储数据的容器

  • 函数:单独存在的,通过“函数名()”的方式就可以调用

  • 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用;

    方法是对象的一部分,函数是单独封装操作的容器

    函数和方法的相同点 都是实现某种功能 做某件事

// 变量和属性的相同点 都是用来存储数据的         // 1.变量 单独声明并赋值 使用的时候直接写变量名 单独存在         var name = 10;         // 2.属性 在对象里不需要声明 调用的时候必须是 对象.属性         var obj = {             age: 18         }         console.log(obj.age);          // 函数和方法的相同点 都是实现某种功能 做某件事         // 3.函数是单独声明 并且调用的 函数名() 单独存在的         function fn() {          }         // 4.方法 在对象里面 调用的时候 对象.方法()         var obj = {             age: 18             fn: function () {              }         }

 

小括号()优先级;中括号[ ]数组;花括号{ }对象

1.2 创建对象的三种方式

  • 利用字面量创建对象;

  • 利用new object创建对象;

  • 利用构造函数创建对象;

1、利用字面量创建对象

    <script>         // 1.利用 字面量 创建对象 利用键值对形式 属性名 :属性值 ,中间 逗号 隔开                      var obj = {};         var obj = {             uname: '张三疯', // 里面的属性或方法采取键值对的形式 键 属性名 :值 属性值             age: '18',       // 多个属性或者方法中间用逗号隔开             sex: '男',             sayHi: function () {    // 方法冒号后面跟的是一个匿名函数 function                 console.log('hi~');             }         }          // 2.调用对象                  console.log(obj.name); // 调用对象的属性 采用 对象名.属性名 理解为 的         console.log(obj['age']); // 调用属性还有一种方法 对象名['属性名']             obj.sayHi(); // 调用对象的方法 sayHi  对象名.方法名()     </script>

 

2、利用 new Object 创建对象

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

 

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

因为前面两种方式一次只能创建一个对象;

  • 构造函数就是把 我们对象里一些相同的属性和方法抽象出来封装到函数中;

  • 构造函数用于创建某一类函数,首字母要大写;与关键字 new 一起使用;

  • 利用构造函数创建对象的过程称为对象的实例化

    <script>         // 利用构造函数创建对象         // 需要创建四大天王的对象 相同的属性: 名字 年龄 性别 相同的方法:唱歌         function 构造函数名() {             this.属性 = 值;             this.方法 = function () { }         }         new 构造函数名(); // 1.构造函数 泛指一大类         function Star(uname, age, sex) { // 构造函数首字母大写             this.name = uname;             this.age = age;             this.sex = sex;             this.sing = function (sang) {                 console.log(sang);             }         } // 2.对象 特指某一个 对象的实例化         var ldh = new Star('刘德华', 18, '男');         // 多了个 this 和new 不需要 return 就可以返回结果         // console.log(typeof ldf); // object         console.log(ldh.name);         console.log(ldh['sex']);         ldh.sing('冰雨');     </script>         // 1. 构造函数名字首字母要大写         // 2. 我们构造函数不需要return 就可以返回结果         // 3. 我们调用构造函数 必须使用 new         // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}         // 5. 我们的属性和方法前面必须添加 this

 

 

构造函数和对象的区别:

  • 构造函数 如明星 泛指一大类 类似于java语言中的类

  • 对象 特指 是一个具体的事物

我们利用构造函数创建对象的过程我们也称为对象的实例化

 

new关键字:

  • new 构造函数可以 在内存中创建了一个空的新对象;

  • 让this就会指向刚才的空对象

  • 执行构造函数里面的代码 给这个空对象添加属性和方法

  • 返回这个新对象(所以不需return)

var ldh = new Star(‘刘德华’, 18, ‘男’);

 

1.3 遍历对象

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

for (变量 in 对象名字) {     // 在此执行代码 }

 

变量通常用 k 或者 key

         // for (变量 in 对象) { }         for (var k in obj) {             console.log(k);// k变量输出 得到的是 属性名             console.log( obj[k] );// 得到的是 属性值         }

 

 

1.4 内置对象

1.41内置对象的概念

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

  • 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于我们 JS 独有的, 我们JS API 讲解

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

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

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

 

1.42 MDN文档查阅!

查找文档:学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。 Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。 MDN:https://developer.mozilla.org/zh-CN/

 

Math对象

1.Math 概述

Math 对象不是构造函数,所以我们不需要new 来调用 而是直接使用里面的属性和方法即可,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。

属性、方法名 功能
Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() 绝对值
Math.max()/Math.min() 求最大和最小值
Math.random() 获取范围在[0,1)内的随机值

注意:上面的方法使用时必须带括号

        // Math 三个取整的方式         // (1) Math.floor() 地板 向下取整 往小了取值         console.log(Math.floor(1.9));// 1         // (2) Math.ceil()  天花板 向上取整 往大了取值         console.log(Math.ceil(1.1));// 2         // (3) Math.round() 四舍五入 其他数字都是四舍五入 5往大了取         console.log(Math.round(1.1));// 1         console.log(Math.round(1.5));// 2         console.log(Math.round(-1.1));// -1         console.log(Math.round(-1.5));// -1                    // Math 数学对象 不是一个构造函数,不需要 new 调用 直接使用里面的属性和方法         console.log(Math.PI);// 一个属性 圆周率         console.log(Math.abs(-1));// 1 绝对值         console.log(Math.max(1, 33, 99));// 99         console.log(Math.max('pink'));// NaN         console.log(Math.max());//          // 利用对象封装自己的数学对象 里面有PI最大值和最小值         var myMath = {             PI: 3.1415926,             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));

 

2. 随机数方法 random()

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

得到一个两数之间的随机整数,包括两个数在内。

获取指定范围内的随机整数算法

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

 

案例:Math对象随机数方法

        // 想要得到两个数之间的随机整数 并且包括这2个数         // Math.floor(Math.random() * (max - min +1)) + min         function getRandom(min, max) {             return Math.floor(Math.random() * (max - min + 1)) + min;         }         console.log(getRandom(1, 10));         // 随机点名         var arr = ['张三', '张三疯', '张三疯子', '李四', '李思思'];         // console.log(arr[0]);         console.log(arr[getRandom(0, arr.length - 1)]);

 

案例:猜数字游戏

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

案例分析

① 随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。

② 需要一直猜到正确为止,所以一直循环。

③ 用while 循环合适更简单。

④ 核心算法:使用 if else if 多分支语句来判断大于、小于、等于。

    <script>         function getRandom(min, max) {             return Math.floor(Math.random() * (max - min + 1)) + min;         }          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>

 

如果限定猜的次数,可以在条件判断改为for

日期对象

Date 对象和 Math 对象不一样,  Date是一个构造函数,使用时需要实例化后(new)才能使用其中具体方法和属性 Date 实例用来处理日期和时间

1.使用Date实例化日期对象

  • 获取当前时间必须实例化:

var now = new Date(); console.log(now);

 

  • 获取指定时间的日期对象

var future = new Date('2019/5/1'); 如果Date()不写参数,就返回当前时间 如果Date()里面写参数,就返回括号里面输入的时间

注意:如果创建实例时并未传入参数,则得到的日期对象是当前时间对应的日期对象

        // Date() 日期对象 是一个构造函数 必须使用new 来调用创建日期对象         var arr = new Array();// 创建了一个数组对象         var obj = new Object();//创建了一个新的对象实例          // 1.使用Date 如果没有参数 返回当前系统的当前时间         var date = new Date();         console.log(date);         // 2.参数常用写法 数字型 2019,10,01 或者 字符串型 '2019-10-1 8:8:8'         var date1 = new Date(2019, 10, 1);         console.log(date1);// 返回的是 11月 不是 10月         var date1 = new Date('2019-10-1 8:8:8');         console.log(date2);

 

2.使用Date实例的方法和属性 日期格式化

方法名 说明 代码
getFullYear() 获取当年 getFullYear()
getMonth() 获取当月(0-11) getMonth()
getDate() 获取当前日期 getDate()
getDay() 获取星期几(周日为0) getDay()
getHours() 获取当前小时 getHours()
getMinutes() 获取当前分钟 getMinutes()
getSeconds() 获取当前秒钟 getSeconds()

 

案例: 输出当前日期

请写出这个格式的日期:2019年5月1日 星期三

    <script>         // 格式化日期 年月日 手动更改显示         var date = new Date();         console.log(date.getFullYear());// 返回当前日期的年 2019         console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 月份写时加1         console.log(date.getDate()); // 返回的是 几号         console.log(date.getDay()); // 3 周日返回的是0         // 写一个 2019年 5月 1日 星期三         var year = date.getFullYear();         var month = date.getMonth();         var dates = date.getDate();         var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];         var day = date.getDay();         console.log('今天是:' + year + '年' + month + '月' + dates + '日' + arr[day]);     </script>

 

案例: 输出当前时间

写一个函数,格式化日期对象,成为 HH:mm:ss 的形式 比如 00:10:45

    <script>         // 格式化日期 时分秒         var date = new Date();         console.log(date.getHours());//         console.log(date.getMinutes()); //         console.log(date.getSeconds()); //         // 要求封装一个函数返回当前的时分秒 格式 08:08:08         function getTime() {             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(getTime());     </script>

 

 

3.通过Date实例获取总毫米数

总毫秒数的含义:基于1970年1月1日(世界标准时间)起的毫秒数

毫秒数也叫时间戳,永远不会重复;

案例:获取总毫秒数

    <script>         // 获得 Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日                var date = new Date();// 实例化Date对象         // 1. 通过 valueOf()  getTime() 用于获取对象的原始值         console.log(date.valueOf());// 距离 1970 过了多少毫秒         console.log(date.getTime());          // 2. 简单的写法(常用)         var date1 = +new Date();// +new Date() 返回的是总毫秒数         console.log(date1);          // 3. HTML5新增的的方法,有兼容性问题         console.log(Date.now());     </script>

 

案例:倒计时效果

案例分析

① 核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。

② 用时间戳(毫秒)来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。

③ 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)

转换公式如下:

 d = parseInt(总秒数/ 60/60 /24); // 计算天数

 h = parseInt(总秒数/ 60/60 %24) // 计算小时

 m = parseInt(总秒数 /60 %60 ); // 计算分数

 s = parseInt(总秒数%60); // 计算当前秒数

    <script>         function countDown(time) {             var nowTime = +new Date();// 返回的是当前时间的总毫秒数             var inputTime = +new Date(time);// 返回的是用户输入事件的总毫秒数             var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 1s=1000ms             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('2019-5-1 18:00:00'));         var date = new Date();         console.log(date);     </script>

 

 

数组对象

1.创建数组的两种方式

  • 字面量方式

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

     

  • new Array() 构造函数

        // var arr1 = new Array();  // 创建了一个空的数组         // var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素          var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3       console.log(arr1);

     

    注意:上面代码中arr创建出的是一个空数组,如果需要使用构造函数Array创建非空数组,可以在创建数组时传入参数

    参数传递规则如下:

    • 如果只传入一个参数,则参数规定了数组的长度

    • 如果传入了多个参数,则参数称为数组的元素

2.检测是否为数组

  • instanceof 运算符

    instanceof 可以判断一个对象是否是某个构造函数的实例

    var arr = [1, 23]; var obj = {}; console.log(arr instanceof Array); // true arr是数组 console.log(obj instanceof Array); // false obj是对象

     

  • Array.isArray()

    Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中新增的方法 ie9以上不支持

    var arr = [1, 23]; var obj = {}; console.log(Array.isArray(arr));   // true console.log(Array.isArray(obj));   // false

     

翻转数组:

  // 翻转数组         function reverse(arr) {             // if (arr instanceof Array) {             if (Array.isArray(arr)) {                 var newArr = [];                 for (var i = arr.length - 1; i >= 0; i--) {                     newArr[newArr.length] = arr[i];                  }                 return newArr;             } else {                 return 'error 这个参数要求必须是数组格式 [1,2,3]'             }         }         console.log(reverse([1, 2, 3]));         console.log(reverse(1, 2, 3));

 

3.添加删除数组元素的方法

数组中有进行增加、删除元素的方法,部分方法如下表

方法名 说明 返回值
push(参数1…) 末尾添加一个或多个元素,注意修改原数组 并返回新的长度
pop() 删除数组最后一个元素,把数组长度减1 无参数、修改原数组 返回他删除的元素的值
unshift(参数1…) 向数组的开头添加一个或多个元素,注意修改原数组 并返回新的长度
shift() 删除数组的第一个元素,数组长度减1无参数,修改原数组 并返回第一个元素得值

注意:push、unshift为增加元素方法;pop、shift为删除元素的方法

案例:添加删除数组元素

   <script>         // 添加删除数组元素方法         // 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推         var arr = [1, 2, 3];         // arr.push(4, 'pink');         console.log(arr.push(4, 'pink'));          console.log(arr);         // (1) push 是可以给数组追加新的元素         // (2) push() 参数直接写 数组元素就可以了         // (3) push完毕之后,返回的结果是 新数组的长度          // (4) 原数组也会发生变化         // 2. unshift 在我们数组的开头 添加一个或者多个数组元素         console.log(arr.unshift('red', 'purple'));          console.log(arr);         // (1) unshift是可以给数组前面追加新的元素         // (2) unshift() 参数直接写 数组元素就可以了         // (3) unshift完毕之后,返回的结果是 新数组的长度          // (4) 原数组也会发生变化          // 3. pop() 它可以删除数组的最后一个元素           console.log(arr.pop());         console.log(arr);         // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素         // (2) pop() 没有参数         // (3) pop完毕之后,返回的结果是 删除的那个元素          // (4) 原数组也会发生变化         // 4. shift() 它可以删除数组的第一个元素           console.log(arr.shift());         console.log(arr);         // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素         // (2) shift() 没有参数         // (3) shift完毕之后,返回的结果是 删除的那个元素          // (4) 原数组也会发生变化     </script> </head>

 

案例: 筛选数组

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

    var arr = [1500, 1200, 2000, 2100, 1800];     var newArr = [];     for (var i = 0; i < arr.length; i++) {         if (arr[i] < 2000) {         // newArr[newArr.length] = arr[i];          newArr.push(arr[i]);          }      }     console.log(newArr);

 

 

4.数组排序

数组中有对数组本身排序的方法,部分方法如下表

方法名 说明 是否修改原数组
reverse() 颠倒数组中元素的熟悉怒,无参数 改变原来数组 返回新数组
sort() 对数组的元素进行排序 改变原数组 返回新数组

 

注意:sort方法需要传入参数来设置升序、降序排序

  • 如果传入“function(a,b){ return a-b;}”,则为升序

  • 如果传入“function(a,b){ return b-a;}”,则为降序

        // 数组排序         // 1. 翻转数组         var arr = ['pink', 'red', 'blue'];         arr.reverse();         console.log(arr);          // 2. 数组排序(冒泡排序)         var arr1 = [17, 4, 71, 6, 9];         // arr1.sort();// 只能对单位数字排序         arr1.sort(function (a, b) {             return a - b;// 按照升序排列             return b - a;// 按照降序排序         });         console.log(arr1);

 

 

5.数组索引方法

数组中有获取数组指定元素索引值的方法,部分方法如下表

方法名 说明 返回值
indexOf() 数组中查找给定元素的第一个索引 存在返回索引,不存在,返回-1
lastIndexOf() 在数组中的最后一个索引 存在返回索引,不存在,返回-1

获取数组指定元素索引值

    <script>         // 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找         // 它只返回第一个满足条件的索引号          // 它如果在该数组里面找不到元素,则返回的是 -1           // var arr = ['red', 'green', 'blue', 'pink', 'blue'];         var arr = ['red', 'green', 'pink'];         console.log(arr.indexOf('blue'));         // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找         var arr = ['red', 'green', 'blue', 'pink', 'blue'];          console.log(arr.lastIndexOf('blue')); // 4     </script>

 

案例: 数组去重(重点案例)

有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’],要求去除数组中重复的元素

案例分析

① 目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。

② 核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。

③ 我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回时 -1 就说明 新数组里面没有该元素

旧数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]

新数组 [ ]

    <script>         // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。         // 1.目标: 把旧数组里面不重复的元素选取出来放到新数组中, 重复的元素只保留一个, 放到新数组中去重。         // 2.核心算法: 我们遍历旧数组, 然后拿着旧数组元素去查询新数组, 如果该元素在新数组里面没有出现过, 我们就添加, 否则不添加。         // 3.我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素         // 封装一个 去重的函数 unique 独一无二的
        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'])         var demo = unique(['blue', 'green', 'blue'])         console.log(demo);     </script>

 

 

6.数组转换为字符串

数组中有把数组转化为字符串的方法,部分方法如下表

方法名 说明 返回值
toString() 把数组转换成字符串 逗号分割每一项 返回一个字符串
join(‘分隔符’) 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串

注意:join方法如果不传入参数,则按照 “ , ”拼接元素

        // 数组转换成字符串         // 1. toString()          var arr = [1, 2, 3];         console.log(arr.toString());// 1,2,3         // 2. join(分隔符)         var arrr1 = ['green', 'blue', 'pink'];         console.log(arr1.join());// green,blue,pink         console.log(arr1.join('-'));// green-blue-pink         console.log(arr1.join('&'));// green&blue&pink

 

 

其他方法

  • 数组中还有其他操作方法,同学们可以在课下自行查阅学习

  • slice() 和 splice() 目的基本相同,建议同学们重点看下 splice()

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

 

字符串对象

1.基本包装类型

为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。

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

// 下面代码有什么问题? var str = 'andy'; console.log(str.length);

 

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

    // 对象 才有 属性和方法   复杂数据类型才有 属性和方法      // 简单数据类型为什么会有length 属性呢?      // 基本包装类型:  就是把简单数据类型 包装成为了 复杂数据类型  // 1. 生成临时变量,把简单类型包装为复杂数据类型 var temp = new String('andy'); // 2. 赋值给我们声明的字符变量 str = temp; // 3. 销毁临时变量 temp = null;

 

2.字符串的不可变

	指的是里面的值不可变,虽然看上去可以改变内容,但只是地址变了,在内存中新开辟了一个内存空间。 原来的值还是有的; 	当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。 	

由于字符串的不可变,在大量拼接字符串的时候会有效率问题

var str = 'abc'; str = 'hello'; // 当重新给 str 赋值的时候,常量'abc'不会被修改,依然在内存中 // 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变 // 由于字符串的不可变,在大量拼接字符串的时候会有效率问题 var str = ''; for (var i = 0; i < 100000; i++) {  str += i; } console.log(str); // 这个结果需要花费大量时间来显示,因为需要不断的开辟新的空间

3.根据字符返回位置

字符串的所有方法,都不会修改字符本身(字符串是可变的),操作完成后会发挥成以个新的字符串;

字符串通过基本包装类型可以调用部分方法来操作字符串,以下是返回指定字符的位置的方法:

方法名 说明
indexOf(‘要查找的字符’,开始的位置) 返回指定内容在元字符串中的位置,如果找不到返回-1,开始的位置是index索引号
lastIndexOf() 从后往前找,值找第一个匹配的

 

 // 字符串对象 根据字符返回位置 str.indexOf('要查找的字符',[起始位置])         var str = '改革春风吹满地,春天来了';         console.log(str.indexOf('春'));// 2         console.log(str.indexOf('春', 3));// 从索引号是 3的位置开始往后查找 8

 

案例:返回字符位置

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

① 核心算法:先查找第一个o出现的位置

② 然后 只要indexOf 返回的结果不是 -1 就继续往后查找

③ 因为indexOf 只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找

    <script>         var str = "abcoefoxyozzopp";         var index = str.indexOf('o'); // 从第一个o开始查找,返回 索引号 3         var num = 0;         // console.log(idnex);         while (index !== -1) {             console.log(index);             num++; // 开始寻找第二个 o             index = str.indexOf('o', index + 1);         }         console.log('o出现的次数是:' + num);     </script>

 

 

4.根据位置返回字符

字符串通过基本包装类型可以调用部分方法来操作字符串,以下是根据位置返回指定位置上的字符:

方法名 说明 使用
charAt(index) 返回指定位置的字符(index字符串的索引号) str.charAt(0)
charCodeAt(index) 获取指定位置处字符的ASII码(index索引号) str.charCodeAt(0)
str[index] 获取指定位置处字符 html/ie8+支持

 

在上述方法中,charCodeAt方法返回的是指定位置上字符对应的ASCII码,ASCII码对照表如下:

        // 根据位置返回字符         // 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));         }         // 2. charCodeAt(index) 反应相应索引号的字符ASII值 目的:判断用户按下了哪个键         console.log(str.charCodeAt(0));//97         // 2. str[index] H5 新增的         console.log(str[0]); // a

 

案例:返回字符位

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

判断一个字符串 ‘abcoefoxyozzopp’ 中出现次数最多的字符,并统计其次数

1.核心算法:利用 charAt() 遍历这个字符串

2.把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1

3.遍历对象,得到最大值和该字符

注意:在遍历的过程中,把字符串中的每个字符作为对象的属性存储在对象总,对应的属性值是该字符出现的次数

    <script>         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;             }         }         console.log(o);         // 2.遍历对象         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);     </script>     <script>         // 有一个对象 来判断是否有该属性 对象['属性名']         var o = {             age: 18         }         if (o['sex']) {             console.log('里面有该属性');          } else {             console.log('没有该属性');          }          //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。         // o.a = 1         // o.b = 1         // o.c = 1         // o.o = 4         // 核心算法:利用 charAt() 遍历这个字符串         // 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1         // 遍历对象,得到最大值和该字符         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;             }         }         console.log(o);         // 2. 遍历对象         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);     </script>

 

5.字符串操作方法

字符串通过基本包装类型可以调用部分方法来操作字符串,以下是部分操作方法:

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

 

        // 字符串操作方法         // 1.concat('字符串1','字符串2'...)         var str  ='andy';         console.log(str.concat('red'));// andyred          // 2. substr('截取的起始位置','截取几个字符');         var str1 = '改革春风吹满地';         console.log(str1.substr(2,2));// 春风 // 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符

 

 

replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符,其使用格式如下:

字符串.replace(被替换的字符串, 要替换为的字符串); var str = 'andyandy'; console.log(str.replace('a')); //只替换第一个a

 

split()方法

split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。

字符串.split("分割字符") var str = 'a,b,c,d'; console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]     <script>         // 1. 替换字符 replace('被替换的字符','替换为的字符') 只替换第一个         var str = 'andyandy';         console.log(str.replace('a', 'b'));// bndyandy         // 替换里面所有选中的字符串         var str1 = 'andyandy';         while (str1.indexOf('a') !== -1) {             str1 = str1.replace('a', '*');         }         console.log(str1);         // 2. 字符串转换为数组 split('分隔符') join 把数组转为字符串         var str2 = 'red,pink,blue';         console.log(str2, split(','));// ['red','pink','blue']         console.log(str2, split('&'));// ['red'&'pink'&'blue']     </script>

 

课下查阅

 toUpperCase() //转换大写

 toLowerCase() //转换小写

 

数据类型

1.1 简单数据类型

简单类型基本数据类型值类型):

在存储时变量中存储的是值本身,包括string ,number,boolean,undefined,null

null返回的是object,如果有个变量,以后打算存储为对象,可以用;

  <script>         // 简单数据类型 null  返回的是一个空的对象  object          var timer = null;         console.log(typeof timer);         // 如果有个变量我们以后打算存储为对象,暂时没想好放啥, 这个时候就给 null          // 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值         // 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示  然后这个地址指向堆里面的数据     </script>

 

 

1.2 复杂数据类型

复杂数据类型(引用类型):在存储时变量中存储的仅仅是地址(引用),通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等;

1.3 堆栈

  • 堆栈空间分配区别:

  1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面;

  2、堆(操作系统):存储 复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收

 

js中没有堆栈概念

  • 简单数据类型的存储方式

    值类型变量的数据直接存放在变量(栈空间)中,存储的是值

  • 复杂数据类型的存储方式

    引用类型变量(栈空间)里存放的是地址,地址指向堆里面的数据,真正的对象实例存放在堆空间中

    JavaScript基础

1.4 简单类型传参

函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。

    function fn(a) {         a++;         console.log(a);      }     var x = 10;     fn(x);     console.log(x);

 

运行结果如下:

 

1.5 复杂数据类型传参

函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

function Person(name) {     this.name = name; } function f1(x) { // x = p     console.log(x.name); // 2. 这个输出什么 ?    刘德华     x.name = "张学友";     console.log(x.name); // 3. 这个输出什么 ?    张学友 } var p = new Person("刘德华"); console.log(p.name);    // 1. 这个输出什么 ?   刘德华 f1(p); console.log(p.name);    // 4. 这个输出什么 ?  张学友

 

 

JavaScript基础

 

 

 

 

 

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript基础
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏