前提 编程语言 编程
:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。
计算机程序
:就是计算机所执行的一系列的指令集合
,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
计算机语言
指用于人与计算机之间通讯的语言
,它是人与计算机之间传递信息的媒介
。
计算机语言的种类非常的多,总的来说可以分成机器语言
,汇编语言
和高级语言
三大类。
实际上计算机最终所执行的都是机器语言
,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础
。
如今通用的编程语言有两种形式:汇编语言和高级语言。
汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。
1 2 3 4 C语言:puts("你好"); PHP:echo "你好"; Java:System.out.println("你好"); JavaScript: alert("你好");
初识JavaScript 是什么
JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)
脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程
作用
表单动态校验(密码强度检测)( JS 产生最初的目的
)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)
组成 JavaScript: ECMAScript(语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)
ECMAScript: ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。 通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行 互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
书写方式 JS 有3种书写位置,分别为行内、内嵌和外部。
行内式JS 1 <input type="button" value="点我试试" onclick="alert('Hello World')" />
可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用
内嵌 JS 1 2 3 <script> alert ('Hello World~!' ); </script>
可以将多行JS代码写到 <script>
标签中
内嵌 JS 是学习时常用的方式
外部 JS文件 1 <script src="my.js" ></script>
利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况
注释 为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释和多行注释。
单行注释
// 用来注释单行文字( vscoad快捷键 ctrl + / )
多行注释
/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )
快捷键修改为: ctrl + shift + /
vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键→ 回车确认
输入输出语句 为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:
方法
说明
归属
alert(msg)
浏览器弹出警示框
浏览器
console.log(msg)
浏览器控制台打印输出信息
浏览器
prompt(info)
浏览器弹出输入框,用户可以输入
浏览器
例如:
1 2 3 4 5 6 7 8 9 <script> prompt ('请输入您的年龄' ); alert ('计算的结果是' ); console .log ('我是程序员能看到的' ); </script>
变量 概述 白话:变量就是一个装东西的盒子。
通俗:变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改。
变量在内存中的存储:本质:变量是程序在内存中申请的一块用来存放数据的空间。(类似我们酒店的房间,一个房间就可以看做是一个变量)
使用 变量在使用时分为两步:
声明变量
赋值
1 2 3 4 5 6 7 8 9 10 11 <script> var age; age = 18 ; console .log (age); var myname = 'Cyan' ; console .log (myname); </script>
声明变量
var
是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配 内存空间,不需要程序员管
age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
赋值
=
用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
变量值是程序员保存到变量空间里的值
变量的初始化 1 2 3 4 var age = 18 ; var myname = 'Cyan' ;console .log (myname);
声明一个变量并赋值, 我们称之为变量的初始化
。
案例1
弹出一个输入框,提示用户输入姓名。
弹出一个对话框,输出用户刚才输入的姓名。
1 2 3 4 5 6 <script> var myname = prompt ('请输入您的名字' ); alert (myname); </script>
语法拓展 更新变量 一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
同时声明多个变量 同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
1 var age = 10 , name = 'zs' , sex = 2 ;
声明变量特殊情况
情况
说明
结果
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
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
案例2 要求:交换两个变量的值 ( 实现思路:使用一个 临时变量 用来做中间存储 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script> var temp; var apple1 = '青苹果' ; var apple2 = '红苹果' ; temp = apple1; apple1 = apple2; apple2 = temp; console .log (apple1); console .log (apple2); </script>
数据类型 简介 在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
简单来说,数据类型就是数据的类别型号。比如姓名“张三”,年龄18,这些数据的类型是不一样的。
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的 内存中。JavaScript 是一种弱类型或者说动态语言
。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
1 2 var age = 10 ; var areYouOk = '是的' ;
JS 的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的
JavaScript 拥有动态类型,同时也意味着相同的变量
可用作不同的类型
:
1 2 var x = 6 ; var x = "Bill" ;
分类 JS 把数据类型分为两类:
简单数据类型 (Number,String,Boolean,Undefined,Null)
复杂数据类型 (object)
简单数据类型(基本数据类型) JavaScript 中的简单数据类型及其说明如下:
简单数据类型
说明
默认值
Number
数字型,包含整型值和浮点型值,如21、0.21
0
Boolean
布尔值类型,如true、false,等价于1和0
false
String
字符串类型,如“张三”注意咱们JS里面,字符串都带引号
“”
Undefined
var a;声明了变量a但是没有给值,此时a=undefined
undefined
Null
var a=null; 声明了变量a为空值
null
数字型 Number JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。
1 2 var age = 21 ; var Age = 21.3747 ;
1.进制:(八进制:数字前面加0 十六进制:数字的前面加 0x)
1 2 3 4 5 6 7 8 9 10 11 var num1 = 010 ;console .log (num1); var num2 = 012 ;console .log (num2); var num3 = 0x9 ;console .log (num3); var num4 = 0xa ;console .log (num4);
2.范围:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 console .log (Number .MAX_VALUE ); console .log (Number .MIN_VALUE ); console .log (Number .MAX_VALUE * 2 ); console .log (-Number .MAX_VALUE * 2 ); console .log ('pink老师' - 100 );
3.判断:(isNaN() )
1 2 3 console .log (isNaN (12 )); console .log (isNaN ('pink老师' ));
字符串型String 字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’’
因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。
1.字符串转义符
JS 可以用单引号嵌套双引号
,或者用双引号嵌套单引号
(外双内单,外单内双)
1 2 var str = '今天"也"在学习' ;console .log (str);
2.字符串转义符
类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是 \ 开头的,常用的转义符及其说明如下:
转义符
解释说明
\n
换行符,n 是 newline 的意思
\\
斜杠 \
\'
‘ 单引号
\"
”双引号
\t
tab 缩进
\b
空格 ,b 是 blank 的意思
1 2 3 var str1 = '今天"也"在\n学习' ;console .log (str1);
3.字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length
属性可以获取整个字符串的长度。
1 2 var strMsg = '今天也在学习' ;alert (strMsg.length );
字符串拼接
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
1 2 3 4 5 6 console .log ('沙漠' + '骆驼' ); console .log ('今天' + 18 ); console .log ('pink' + true ); console .log (12 + 12 ); console .log ('12' + 12 );
+ 号总结口诀:数值相加 ,字符相连
1 2 3 4 5 console .log ('pink老师' + 18 + '岁' ); var age = 19 ;console .log ('pink老师' + age + '岁' );
案例1 弹出一个输入框,需要用户输入年龄,之后弹出一个警示框显示“您今年 xx 岁啦”(xx 表示刚才输入的年龄)
这是利用 JS 编写的一个非常简单的交互效果程序。
1 2 3 4 5 6 7 var age = prompt ('请输入您的年龄' );var str = '您今年已经' + age + '岁了' ;alert (str);
布尔型 Boolean 布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
1 2 3 4 var flag = true ; var flag1 = false ; console .log (flag + 1 ); console .log (flag1 + 1 );
Undefined 和 Null 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
1 2 3 4 5 var str;console .log (str); var variable = undefined ;console .log (variable + 'pink' ); console .log (variable + 1 );
一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null)
1 2 3 4 var space = null ;console .log (space + 'pink' ); console .log (space + 1 );
获取检测变量的数据类型 typeof
可用来获取检测变量的数据类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var num = 10 ;console .log (typeof num); var str = 'pink' ;console .log (typeof str); var flag = true ;console .log (typeof flag); var vari = undefined ;console .log (typeof vari); var timer = null ;console .log (typeof timer); var age = prompt ('请输入您的年龄' );console .log (age);console .log (typeof age);
也可以根据控制台的颜色分辨
1 2 3 4 5 console .log (18 ); console .log ('18' ); console .log (true ); console .log (undefined ); console .log (null );
数据类型转换 1.转换为字符串
方式
说明
案例
toString()
转成字符串
var num=1;alert(num.toString());
String()强制转换
转成字符串
var num=1;alert(String(num));
加号拼接字符串
和字符串拼接的结果都是字符串
var num=1;alert(num+”我是字符串”);
toString() 和 String() 使用方式不一样。
三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。
1 2 3 4 5 6 7 8 9 var num = 10 ;var str = num.toString ();console .log (str); console .log (typeof str); console .log (String (num)); console .log (num + '' );
2.转换为数字型(重点)
方式
说明
案例
parselnt(string)函数
将string类型转成整数数值型
parselnt(‘78’)
parseFloat(string)函数
将string类型转成浮点数数值型
parseFloat(‘78.21’)
Number()强制转换函数
将string类型转换为数值型
Number(‘12’)
js隐式转换(-*/)
利用算术运算隐式转换为数值型
‘12’-0
注意 parseInt 和 parseFloat 单词的大小写
,这2个是重点
隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var age = prompt ('请输入您的年龄' );console .log (parseInt (age)); console .log (parseInt ('3.14' )); console .log (parseInt ('3.94' )); console .log (parseInt ('120px' )); console .log (parseInt ('rem120px' )); console .log (parseFloat ('3.14' )); console .log (parseFloat ('120px' )); console .log (parseFloat ('rem120px' )); var str = '123' ;console .log (Number (str)); console .log (Number ('12' )); console .log ('12' - 0 ); console .log ('123' - '120' ); console .log ('123' * 1 );
3.案例1——计算年龄
要求在页面中弹出一个输入框,我们输入出生年份后, 能计算出我们的年龄。
1 2 3 var year = prompt ('请输入你的出生年份' );var age = '2023' - year;alert ('你的年龄是:' + age + '岁' );
4.案例2——简单加法器
计算两个数的值, 用户输入第一个值后,继续弹出第二个输入框并输入第二个值,最后通过弹出窗口显示出两 次输入值相加的结果。
1 2 3 4 var dyz = prompt ('请输入第一个值:' );var dez = prompt ('请输入第二个值:' );var jsz = parseFloat (dyz) + parseFloat (dez); alert ('结果是:' + jsz);
转换为布尔型
方式
说明
案例
Boolean()函数
其他类型转成布尔值
Boolean(’‘true);
代表空
、否定
的值会被转换为 false ,如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true
1 2 3 4 5 6 7 console .log (Boolean ('' )); console .log (Boolean (0 )); console .log (Boolean (NaN )); console .log (Boolean (null )); console .log (Boolean (undefined )); console .log (Boolean ('小白' )); console .log (Boolean (12 ));
课后作业 依次询问并获取用户的姓名、年龄、性别
1 2 3 4 var dys = prompt ('请输入您的姓名:' );var dyz = prompt ('请输入您的年龄:' );var dez = prompt ('请输入您的性别:' );alert ('您的姓名是:' + dys + '\n' + '您的年龄是:' + dyz + '\n' + '您的性别是:' + dez);
运算符 运算符
(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:
算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符
算术运算符 算术运算使用的符号,用于执行两个变量或值的算术运算。
算术运算符优先级:先乘除后加减,有小括号先算小括号里面的
判断一个数是能被整除:它的余数是0
就说明这个数能被整除,这就是%取余运算符的主要用途。
运算符
描述
实例
+
加
10 + 20 = 30
-
减
10 - 20 = -10
*
乘
10 * 20 = 200
/
除
10 / 20 = 0.5
%
取余数(取模)
返回除法的余数 9 % 2 = 1
1 2 3 4 5 6 7 8 console .log (1 + 1 ); console .log (1 - 1 ); console .log (1 * 1 ); console .log (1 / 1 ); console .log (4 % 2 ); console .log (5 % 3 ); console .log (3 % 5 );
浮点数的精度问题:浮点数值的最高精度是 17 位小数
,但在进行算术计算时其精确度远远不如整数。
所以:不要直接判断两个浮点数是否相等 !
1 2 3 4 5 6 7 console .log (0.1 + 0.2 ); console .log (0.07 * 100 ); var num = 0.1 + 0.2 ;console .log (num == 0.3 );
递增和递减运算符 如果需要反复给数字变量添加或减去1,可以使用递增(++)
和递减( – )运算符来完成。
在 JavaScript 中,递增(++)和递减( – )既可以放在变量前面,也可以放在变量后面。放在变量前面
时,我 们可以称为前置递增(递减)运算符
,放在变量后面
时,我们可以称为后置递增(递减)运算符
。
注意:递增和递减运算符必须和变量配合
使用。
1 2 3 4 5 var num = 1 ;num = num + 1 ; num = num + 1 ; console .log (num);
前置递增运算符 ++num
前置递增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。
使用口诀:先自加,后返回值
1 2 3 4 5 6 7 8 var age = 10 ;++age; console .log (age); var p = 10 ;console .log (++p + 10 );
后置递增运算符 num++
后置递增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单。
使用口诀:先返回原值,后自加
1 2 3 4 5 6 7 8 var num = 10 ;num++; console .log (num);var age = 10 ;console .log (age++ + 10 ); console .log (age);
练习 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var a = 10 ;++a; var b = ++a + 2 ; console .log (b); var c = 10 ;c++; var d = c++ + 2 ; console .log (d); var e = 10 ;var f = e++ + ++e; console .log (f);
比较运算符 比较运算符(关系运算符)是两个数据进行比较时所使用的运算符
,比较运算后,会返回一个布尔值
(true / false)作为比较运算的结果。
运算符名称
说明
案例
结果
<
小于号
1 < 2
true
>
大于号
1 > 2
false
>=
大于等于号(大于或者等于)
2 >= 2
true
<=
小于等于号(小于或者等于)
3 <=2
false
==
判等号(会转型)
37 == 37
true
!=
不等号
37 !=37
false
=== !==
全等 要求值和数据类型都一致
37 === ‘37’
false
1 2 3 4 5 6 7 8 9 10 11 12 13 14 console .log (3 >= 5 ); console .log (2 <= 4 ); console .log (3 == 5 ); console .log ('pink老师' == '刘德华' ); console .log (18 == 18 ); console .log (18 == '18' ); console .log (18 != 18 ); console .log (18 === 18 ); console .log (18 === '18' );
符号
作用
用法
=
赋值
把右边给左边
==
判断
判断两边值是否相等(注意此时有隐式转换)
===
全等
判断两边的值和数据类型是否完全相同
逻辑运算符 逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断。
1 2 3 4 5 6 7 8 9 console .log (3 > 5 && 3 > 2 ); console .log (3 < 5 && 3 > 2 ); console .log (3 > 5 || 3 > 2 ); console .log (3 > 5 || 3 < 2 ); console .log (!true ); console .log (!false );
短路运算(逻辑中断) 短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果
时,就不再继续运算
右边的表达式的值;
逻辑与 语法: 表达式1 && 表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值为假,则返回表达式1
1 2 3 4 5 6 7 8 console .log (123 && 456 ); console .log (0 && 456 ); console .log (0 && 1 + 2 && 456 * 56789 ); console .log ('' && 1 + 2 && 456 * 56789 );
逻辑或 语法: 表达式1 || 表达式2
如果第一个表达式的值为真,则返回表达式1
如果第一个表达式的值为假,则返回表达式2
1 2 3 4 5 6 7 8 console .log (123 || 456 ); console .log (123 || 456 || 456 + 123 ); console .log (0 || 456 || 456 + 123 ); var num = 0 ;console .log (123 || num++); console .log (num);
赋值运算符 用来把数据赋值给变量的运算符。
赋值运算符
说明
案例
=
直接赋值
var usrName = ‘我是值’;
+=
加、减一个数后再赋值
var age=10; age += 5; // 15
*=、/=、%=
乘、除、取模后再赋值
var age=2; age *= 5; // 10
1 2 3 4 var age = 10 ;age += 5 ; age -= 5 ; age *= 10 ;
运算符优先级
优先级
运算符
顺序
1
小括号
()
2
一元运算符
++ – !
3
算术运算符
先 * / % 后 + -
4
关系运算符
> >= < <=
5
相等运算符
== != === !==
6
逻辑运算符
先&& 后
7
赋值运算符
=
8
逗号运算符
,
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
1 2 3 console .log (4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144 ) && true )
流程控制 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行 顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制代码按照一定结构顺序来执行
流程控制主要有三种结构,分别是顺序结构 、分支结构 和循环结构 ,代表三种代码执行的顺序。
顺序流程控制:顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行
, 程序中大多数的代码都是这样执行的。
分支流程控制 分支结构:由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到 不同的结果。
JS 语言提供了两种分支结构语句:if
语句、switch
语句
if 语句 语法结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 if (条件表达式) { } if (3 < 5 ) { alert ('沙漠骆驼' ); } if (3 > 5 ) { alert ('沙漠骆驼' ); }
执行思路
如果 if 里面的条件表达式结果为真 true, 则执行大括号{}里面的执行语句
如果if 条件表达式结果为假,则不执行大括号里面的语句,则执行if 语句后面的代码
案例 弹出一个输入框,要求输入年龄,如果年龄大于等于18岁,允许进网吧。
1 2 3 4 5 6 7 var age = prompt ("请输入您的年龄" );if (age >= 18 ) { alert ("允许" ) }
if else 语句(双分支语句) 语法结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 if (条件表达式) { } else { } var age = prompt ("请输入您的年龄" );if (age >= 18 ) { alert ("允许" ) } else { alert ("拒绝" ) }
执行思路
案例 1.接收用户输入的年份,如果是闰年就弹出闰年,否则弹出平年
算法:能被4整除且
不能整除100的为闰年(如2004年就是闰年,1901年不是闰年)或者
能够被 400 整除的就是闰年
1 2 3 4 5 6 7 8 9 10 var year = prompt ("请您输入要检测的年份:" );if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ) { alert ("您输入的年份是闰年" ) } else { alert ("您输入的年份是平年" ) }
2.判断是否中奖:接收用户输入的姓名,来判断是否中奖,如果输入的是刘德华,则提示中了5块钱,否则提示没有中奖。
1 2 3 4 5 6 var name = prompt ("请输入您的姓名:" );if (name == '刘德华' ) { alert ("恭喜您中了5块钱" ) } else { alert ("谢谢参与" ) }
if else if 语句(多分支语句) 语法结构 1 2 3 4 5 6 7 8 9 10 11 if (条件表达式1 ) { } else if (条件表达式2 ) { } else if (条件表达式3 ) { } else { }
执行思路
如果条件表达式1满足,就执行语句1,执行完毕后,退出整个if 分支语句。
如果条件表达式1不满足,则判断条件表达式2,满足的话,执行语句2,以此类推。
如果上面的所有条件表达式都不成立,则执行else 里面的语句。
注意
多分支语句还是多选1,最后只能有一个语句执行。
else if 里面的条件理论上是可以任意多个的。
else if 中间有个空格了。
案例 判断成绩等级
要求:接收用户输入的分数,根据分数输出对应的等级字母A、B、C、D、E.。
其中:
90分(含)以上,输出:A
80分(含)~90分(不含),输出:B
70分(含)~80分(不含),输出:C
60分(含)~70分(不含),输出:D
60分(不含),输出:E
1 2 3 4 5 6 7 8 9 10 11 12 var fs = prompt ("请输入您的分数:" );if (fs >= 90 ) { alert ("A" ) } else if (fs >= 80 && fs < 90 ) { alert ("B" ) } else if (fs >= 70 && fs < 80 ) { alert ("C" ) } else if (fs >= 60 && fs < 70 ) { alert ("D" ) } else { alert ("E" ) }
三元表达式 三元表达式也能做一些简单的条件选择。有三元运算符组成的式子我们称为三元表达式。
一元:++num 二元: 3 + 5
语法结构 1 2 3 4 5 条件表达式 ? 表达式1 : 表达式2 var num = 10 ;var result = num > 5 ? '是的' : '不是的' console .log (result);
执行思路 如果条件表达式结果为真,则返回表达式1的值,如果条件表达式结果为假,则返回表达式2的值。
案例 数字补0:用户输入数字,如果数字小于10,则在前面补0,比如01,09,如果数字大于10,则不需要补0,例如20。
1 2 3 4 5 6 7 var num = prompt ("请您输入0~59之间的一个数字" );var result = num < 10 ? '0' + num : num;alert (result);
switch 语句 switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值
的选项时,就可以使用 switch。
语法结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 switch (表达式) { case value1 : 执行语句1 ; break ; case value2 : 执行语句2 ; break ; ... default : 执行最后的语句; } switch (2 ) { case 1 : console .log ('这是1' ); break ; case 2 : console .log ('这是2' ); break ; case 3 : console .log ('这是3' ); break ; default : console .log ('没有匹配结果' ); }
执行思路 利用我们的表达式的值和 case 后面的选项值相匹配,如果匹配上,就执行该case 里面的语句,如果都没有匹配上,那么执行 default里面的语句。
注意
我们开发里面,表达式我们经常写成变量。
我们num 的值 和 case 里面的值相匹配的时候是全等
,必须是值和数据类型一致才可以 num === 1。
break 如果当前的case里面没有break,则不会退出switch,是继续执行下一个case。
案例 查询水果:用户在弹出框里面输入一个水果,如果有就弹出该水果的价格,如果没有该水果就弹出“没有此水果”。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var fruit = prompt ('请您输入查询的水果:' );switch (fruit) { case '苹果' : alert ('苹果的价格是 3.5/斤' ); break ; case '榴莲' : alert ('榴莲的价格是 35/斤' ); break ; default : alert ('没有此水果' ); }
区别 switch 语句和 if else if 语句的区别:
一般情况下,它们两个语句可以相互替换。
switch…case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)。
switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得 判断多少次。
当分支比较少时,if… else语句的执行效率比 switch语句高。
当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。
作业 ①判断时间阶段。
通过弹出框提示用户输入时间信息,根据用户输入的时间弹出问候信息;
如: 用户输入的时间在6-12之间 弹出“上午好”; 用户输入的时间在13-18之间 弹出“下午好”; 用户输入的时间在19-23之间 弹出“晚上好”; 用户输入的时间在0-5之间 弹出“这是休息时间,不要说话!”;
1 2 3 4 5 6 7 8 9 10 11 12 var time = prompt ('请输入时间点:' );if (time >= 6 && time <= 12 ) { alert ("上午好" ); } else if (time >= 13 && time <= 18 ) { alert ("下午好" ); } else if (time >= 19 && time <= 23 ) { alert ("晚上好" ); } else if (time >= 0 && time <= 5 ) { alert ("这是休息时间,不要说话!" ); } else { alert ("请输入0-24之间的数字表示时间点" ) }
②比较两个数的最大值(用户依次输入2个值,最后弹出最大的那个值)
1 2 3 4 5 6 7 8 9 10 11 12 var num1 = Number (prompt ('请输入第一个数' ));var num2 = Number (prompt ('请输入第二个数' ));if (num1 > num2) { alert ("最大值:" + num1); } else { alert ("最大值:" + num2); }
③用户输入一个数,来判断是奇数还是偶数。(偶数能被2整除)
1 2 3 4 5 6 var num = Number (prompt ('请输入一个数' ));if (num % 2 == 0 ) { alert (num + '为偶数!' ); } else { alert (num + '为奇数。' ); }
④假设这个月1号是星期一,提示用户输入本月的日期(即1日-31日),返回用户输入日期是星期几。(利用%和7取余,再判定是星期几)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var date = prompt ('请输入日期数' );if (date == 1 || date % 7 == 1 ) { alert ("今天是星期一" ); } else if (date == 2 || date % 7 == 2 ) { alert ("今天是星期二" ); } else if (date == 3 || date % 7 == 3 ) { alert ("今天是星期三" ); } else if (date == 4 || date % 7 == 4 ) { alert ("今天是星期四" ); } else if (date == 5 || date % 7 == 5 ) { alert ("今天是星期五" ); } else if (date == 6 || date % 7 == 6 ) { alert ("今天是星期六" ); } else if (date == 7 || date % 7 == 0 ) { alert ("今天是星期天" ); }
⑤接收班长口袋里的钱数?若大于等于2000,请大家吃西餐。若小于2000,大于等于1500,请大家吃快餐。若小于1500,大于等于1000,请大家喝饮料。若小于1000,大于等于500,请大家吃棒棒糖。否则提醒班长下次把钱带够。
1 2 3 4 5 6 7 8 9 10 11 12 var money = Number (prompt ('请输入一个数' )); if (money >= 2000 ) { alert ("请大家吃西餐" ); } else if (money >= 1500 && money < 2000 ) { alert ("请大家吃快餐" ); } else if (money >= 1000 && money < 1500 ) { alert ("请大家喝饮料" ); } else if (money >= 500 && money < 1000 ) { alert ("请大家吃棒棒糖" ); } else { alert ("班长下次把钱带够" ); }
⑥分数转换,给一个分数,判定等级。大于等于90A,大于等于80小于90B,大于等于70小于80 C,大于等于60小于70D,小于60E
1 2 3 4 5 6 7 8 9 10 11 12 var fs = prompt ("请输入您的分数:" );if (fs >= 90 ) { alert ("A" ) } else if (fs >= 80 && fs < 90 ) { alert ("B" ) } else if (fs >= 70 && fs < 80 ) { alert ("C" ) } else if (fs >= 60 && fs < 70 ) { alert ("D" ) } else { alert ("E" ) }
循环 循环的目的:在实际问题中,有许多具有规律性的重复操作
,因此在程序中要完成这类操作就需要重复执行某些语句
。
JS 中的循环,主要有三种类型的循环语句:
for 循环
while 循环
do…while 循环
for 循环 在程序中,一组被重复执行的语句被称之为循环体
,能否继续重复执行,取决于循环的终止条件
。由循环体及循环的终止条件组成的语句,被称之为循环语句
。
语法结构 1 2 3 4 5 6 for (初始化变量; 条件表达式; 操作表达式) { }
1 2 3 4 5 6 7 8 for (var i = 1 ; i <= 100 ; i++) { console .log ('你好吗' ); }
断点调试 断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12–> sources –>找到需要调试的文件–>在程序的某一行设置断点
Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
F11: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。
for 循环重复相同的代码 1 2 3 4 5 6 7 8 9 10 for (var i = 1 ; i <= 10 ; i++){ console .log ('学习!' ); } var num = prompt ('请输入次数:' );for ( var i = 1 ; i <= num; i++) { console .log ('学习!' ); }
for 循环重复不相同的代码 for 循环可以重复执行不同的代码 因为我们有计数器变量 i
的存在 i每次循环值都会变化
例如:我们想要输出1个人 1~100岁
1 2 3 for (var i = 1 ; i <= 100 ; i++) { console .log ('这个人今年' + i + '岁了' ); }
1 2 3 4 5 6 7 8 9 10 for (var i = 1 ; i <= 100 ; i++) { if (i == 1 ) { console .log ('这个人今年1岁了,他出生了' ); } else if (i == 100 ) { console .log ('这个人今年100岁了,他' ); } else { console .log ('这个人今年' + i + '岁了' ); } }
for 循环重复某些相同操作 1-100之间所有整数的累加和
分析:
需要循环100次,我们需要一个计数器 i
我们需要一个存储结果的变量 sum ,但是初始值一定是 0
核心算法:1 + 2 + 3 + 4 …. ,sum = sum + i ;
1 2 3 4 5 6 var sum = 0 ; for (var i = 1 ; i <= 100 ; i++) { sum += i; } console .log (sum);
案例
求1-100之间所有数的平均值
1 2 3 4 5 6 7 8 var sum = 0 ; var average = 0 ;for (var i = 1 ; i <= 100 ; i++) { sum += i; } average = sum / 100 ; console .log (average);
求1-100之间所有偶数和奇数的和
1 2 3 4 5 6 7 8 9 10 11 12 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);
求1-100之间所有能被3整除的数字的和
1 2 3 4 5 6 7 8 var result = 0 ;for (var i = 1 ; i <= 100 ; i++) { if (i % 3 == 0 ) { result += i; } } console .log ('1~100之间能够被3整数的数字的和是:' + result);
求学生成绩
要求用户输入班级人数,之后依次输入每个学生的成绩,最后打印出该班级总的成绩以及平均成绩。
弹出输入框输入总的班级人数(num)
依次输入学生的成绩( 保存起来 score), 此时我们需要用到for 循环
, 弹出的次数跟班级总人数有关系 条件表达式 i <= num
进行业务处理: 计算成绩。 先求总成绩( sum), 之后求平均成绩( average)
弹出结果
1 2 3 4 5 6 7 8 9 10 11 var num = prompt ('请输入班级的总人数:' ); var sum = 0 ; var average = 0 ; for (var i = 1 ; i <= num; i++) { var score=prompt ('请您输入第' + i + '个学生成绩' ); parseFloat (score); } average=sum / num; alert ('班级总的成绩是' + sum); alert ('班级平均分是:' + average);
一行打印五个星星
采取追加字符串的方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var str = '' ;for (var i = 1 ; i <= 5 ; i++) { str = str + '★' } console .log (str);var num = prompt ('请输入星星的个数' );var str = '' ;for (var i = 1 ; i <= num; i++) { str = str + '★' } console .log (str);
双重for 循环 很多情况下,单层 for 循环并不能满足我们的需求,比如我们要打印一个 5 行 5 列的图形、打印一个倒直角三角形等,此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构
,例如在for循环语句中,可以再嵌套一个for 循环,这样的 for 循环语句我们称之为双重for循环。
语法结构 1 2 3 4 5 6 7 8 for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) { for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) { } }
1 2 3 4 5 6 7 8 for (var i = 1 ; i <= 3 ; i++) { console .log ('这是外层循环第' + i + '次' ); for (var j = 1 ; j <= 3 ; j++) { console .log ('这是里层的循环第' + j + '次' ); } }
打印五行五列星星 核心:
内层循环负责一行打印五个星星
外层循环负责打印五行
1 2 3 4 5 6 7 8 9 10 var str = '' ;for (var i = 1 ; i <= 5 ; i++) { for (var j = 1 ; j <= 5 ; j++) { str = str + '★' ; } str = str + '\n' ; } console .log (str);
案例
打印n行n列的星星
1 2 3 4 5 6 7 8 9 10 var hang = prompt ('请输入您打印几行星星:' );var lie = prompt ('请输入您打印几列星星:' );var str = '' ;for (var i = 1 ; i <= hang; i++) { for (var j = 1 ; j <= lie; j++) { str = str + '⭐' ; } str = str + '\n' ; } console .log (str);
打印倒三角形
1 2 3 4 5 6 7 8 9 10 11 var str = '' ;for (var i = 1 ; i <= 10 ; i++) { for (var j = i; j <= 10 ; j++) { str = str + '⭐' ; } str = str + '\n' ; } console .log (str);
打印正三角形
1 2 3 4 5 6 7 8 var str = '' ;for (var i = 1 ; i <= 10 ; i++) { for (var j = 1 ; j <= i; j++) { str = str + '⭐' ; } str = str + '\n' ; } console .log (str);
打印九九乘法表
1 2 3 4 5 6 7 8 var str = '' ;for (var i = 1 ; i <= 9 ; i++) { for (var j = 1 ; j <= i; j++) { str += j + '×' + i + '=' + i * j + '\t' ; } str = str + '\n' ; } console .log (str);
i =1时,j <= 1所以 j 只循坏一次,然后 j = 1,j 只能等于1,所以就是第一行1 x 1 = 1;
i =2时,j <= 2所以 j 循坏两次,然后 j = 1,j 可取数:1、2,所以就是第二行1 x 1 = 1 1 x 2 = 2;
以此类推
while 循环 while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。
语法结构
1 2 3 4 5 6 7 8 9 var num = 1 ;while (num <= 100 ) { console .log ('学习' ); num++; }
案例
打印人的一生,从1岁到100岁。
1 2 3 4 5 var i = 1 ;while (i <= 100 ) { console .log ('这个人今年' + i + '岁了' ); i++; }
计算 1 ~ 100 之间所有整数的和
1 2 3 4 5 6 7 var sum = 0 ;var j = 1 ;while (j <= 100 ) { sum += j; j++ } console .log (sum);
弹出一个提示框, 你爱我吗? 如果输入我爱你,就提示结束,否则,一直询问。
1 2 3 4 5 var message = prompt ('你爱我吗?' );while (message !== '我爱你' ) { message = prompt ('你爱我吗?' ); } alert ('我也爱你啊!' );
do while 循环 do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
语法结构 1 2 3 4 5 do { } while (条件表达式)
1 2 3 4 5 6 7 var i = 1 ;do { console .log ('how are you?' ); i++; } while (i <= 100 )
案例
打印人的一生,从1岁到100岁。
1 2 3 4 5 var i = 1 ;do { console .log ('这个人今年' + i + '岁了' ); i++; } while (i <= 100 )
计算 1 ~ 100 之间所有整数的和
1 2 3 4 5 6 7 var sum = 0 ;var j = 1 ;do { sum += j; j++; } while (j <= 100 ) console .log (sum);
弹出一个提示框, 你爱我吗? 如果输入我爱你,就提示结束,否则,一直询问。
1 2 3 4 do { message = prompt ('你爱我吗?' ); } while (message !== '我爱你' ) alert ('我也爱你啊!' );
continue continue 关键字
用于立即跳出本次循环
,继续下一次循环
(本次循环体中 continue 之后的代码就会少执行一次)。
例如,吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子,其代码实现如下:
1 2 3 4 5 6 7 8 for (var i = 1 ; i <= 5 ; i++) { if (i == 3 ) { continue ; } console .log ('我正在吃第' + i + '个包子' ); }
1 2 3 4 5 6 7 8 9 var sum = 0 ;for (var i = 1 ; i <= 100 ; i++) { if (i % 7 == 0 ) { continue ; } sum += i; } console .log (sum);
break break
关键字用于立即跳出整个循环
(循环结束)。
例如,吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了,其代码实现如下:
1 2 3 4 5 6 7 8 for (var i = 1 ; i <= 5 ; i++) { if (i == 3 ) { break ; } console .log ('我正在吃第' + i + '个包子' ); }
作业
求1-100之间所有数的总和与平均值
1 2 3 4 5 6 7 8 var sum = 0 ;var average = 0 ;for (var i = 1 ; i <= 100 ; i++) { sum += i; } average = sum / 100 ; console .log (sum);console .log (average);
求1-100之间所有偶数的和
1 2 3 4 5 6 7 var sum = 0 ;for (var i = 1 ; i <= 100 ; i++) { if (i % 2 == 0 ) { sum += i; } } console .log (sum);
求100以内7的倍数的总和
1 2 3 4 5 6 7 var sum = 0 ;for (var i = 1 ; i <= 100 ; i++) { if (i % 7 == 0 ) { sum += i; } } console .log (sum);
使用for 循环打印矩形,要求每次只能输出一个☆
☆☆☆☆☆
☆☆☆☆☆
☆☆☆☆☆
☆☆☆☆☆
1 2 3 4 5 6 7 8 var str = '' ;for (var i = 1 ; i <= 5 ; i++) { for (var j = 1 ; j <= 5 ; j++) { str = str + '★' } str = str + '\n' } console .log (str);
使用for循环打印三角形
☆
☆☆
☆☆☆
☆☆☆☆
☆☆☆☆☆
1 2 3 4 5 6 7 8 var str = '' ;for (var i = 1 ; i <= 5 ; i++) { for (var j = 1 ; j <= i; j++) { str = str + '★' } str = str + '\n' } console .log (str);
使用for循环打印99乘法表
1 2 3 4 5 6 7 8 var sum = '' ;for (var i = 1 ; i <= 9 ; i++) { for (var j = 1 ; j <= i; j++) { sum = sum + j + 'x' + i + '=' + j * i + '\t' ; } sum = sum + '\n' } console .log (sum);
接收用户输入的用户名和密码,若用户名为 “admin” ,密码为 “123456” ,则提示用户登录成功! 否则,让用户一直输入。
1 2 3 4 5 6 7 var message1 = prompt ('请输入用户名' );var message2 = prompt ('请输入密码' );while (message1 !== 'admin' && message2 !== '123456' ) { var message1 = prompt ('请输入用户名' ); var message2 = prompt ('请输入密码' ); } alert ('登录成功!' );
求整数1~100的累加值,但要求跳过所有个位为3的数【用continue实现】。
1 2 3 4 5 6 7 8 var sum = 0 ;for (var i = 1 ; i <= 100 ; i++) { if (i % 10 == 3 ) { continue ; } sum += i; } console .log (sum);
简易ATM 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var yue = 100 ;while (true ) { var message = prompt ('请输入您要的操作:\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出' ); if (message == '1' ) { var cunqian = parseFloat (prompt ('请您输入存的钱数:' )); yue += cunqian; alert ('您现在的钱数是:' + yue); } else if (message == '2' ) { var quqian = parseFloat (prompt ('请您输入取的钱数:' )); yue -= quqian; alert ('您现在的钱数是:' + yue); } else if (message == '3' ) { alert ('您现在的钱数是:' + yue); } else if (message == '4' ) { alert ('正在退出' ); break } }
数组 数组是指一组数据的集合
,其中的每个数据被称作元素
,在数组中可以存放任意类型的元素
。数组是一种将一组数据存储在单个变量名下
的优雅方式。
1 2 3 4 var num = 10 ; var arr = [1 ,2 ,3 ,4 ,5 ];
数组的创建方式 JS 中创建数组有两种方式:
利用 new 创建数组 1 2 var 数组名 = new Array () ;var arr = new Array ();
这种方式暂且了解,等学完对象再看
注意 Array () ,A 要大写
利用数组字面量创建数组 1 2 3 4 var 数组名 = [];var 数组名 = ['小白' ,'小黑' ,'大黄' ,'瑞奇' ];
数组的字面量是方括号 [ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式
数组中可以存放任意类型 的数据,例如字符串,数字,布尔值等。
1 2 3 4 var arr = []; var arr1 = [1 ,2 ,'学习' ,true ];
数组的索引 索引 (下标) : 用来访问数组元素的序号(数组下标从 0 开始
)。
1 2 var arr = ['小白','小黑','大黄','瑞奇']; 索引号: 0 1 2 3
数组可以通过索引
来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]
”的形式来获取数组中的元素。 这里的访问
就是获取得到的意思
1 2 3 4 5 var arr1 = [1 ,2 ,'学习' ,true ];console .log (arr1);console .log (arr1[2 ]); console .log (arr1[3 ]); console .log (arr1[4 ]);
练习:定义一个数组,里面存放星期一、星期二…… 直到星期日(共7天),在控制台输出:星期日,请同学们自己动手完成。
1 2 var arr = ['星期一' , '星期二' , '星期三' , '星期四' , '星期五' , '星期六' , '星期日' ,];console .log (arr[6 ]);
遍历数组 遍历
: 就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。 我们可以通过 for
循环索引遍历数组中的每一项
1 2 3 4 5 6 var arr = ['red' , 'green' , 'blue' ];for (var i = 0 ; i < 3 ; i++) { console .log (arr[i]); }
数组长度 使用“数组名.length
”可以访问数组元素的数量(数组长度)。
1 2 var arr = ['关羽' , '张飞' , '马超' , '赵云' , '黄忠' , '刘备' , '姜维' ];console .log (arr.length );
1 2 3 4 5 6 7 8 9 var arr = ['关羽' , '张飞' , '马超' , '赵云' , '黄忠' , '刘备' , '姜维' , 'pink' ];for (var i = 0 ; i < arr.length ; i++) { console .log (arr[i]); }
注意:
数组的长度是元素个数
,不要跟索引号
混淆
arr.length 动态监测
数组元素的个数
案例 1.数组求和及平均值
求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。
1 2 3 4 5 6 7 8 var arr = [2 , 6 , 1 , 7 , 4 ];var sum = 0 ;var average = 0 ;for (var i = 0 ; i < arr.length ; i++) { sum += arr[i]; } average = sum / arr.length ; console .log (sum, average);
2.数组最大值
求数组[2,6,1,77,52,25,7]中的最大值。
思路:
①声明一个保存最大元素的变量 max。
②默认最大值可以取数组中的第一个元素。
③遍历这个数组,把里面每个数组元素和 max 相比较。
④如果这个数组元素大于max 就把这个数组元素存到 max 里面,否则继续下一轮比较。
⑤最后输出这个 max。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var arr = [2 , 6 , 1 , 77 , 52 , 25 , 7 ];var max = arr[0 ];for (var i = 1 ; i < arr.length ; i++) { if (arr[i] > max) { max = arr[i]; } } console .log ('该数组里面的最大值是:' + max);var arr = [2 , 6 , 1 , 77 , 88 , 25 , 7 ];var min = arr[0 ];for (var i = 1 ; i < arr.length ; i++) { if (arr[i] < min) { min = arr[i]; } } console .log ('该数组里面的最小值是:' + min);
3.数组转换为字符串
要求:将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素转换为字符串,并且用|或其他符号分割。
输出: ‘red|green|blue|pink’
1 2 3 4 5 6 7 8 9 10 var arr = ['red' , 'green' , 'blue' , 'pink' ];var str = arr[0 ];for (var i = 1 ; i < arr.length ; i++) { str = str + '|' + arr[i]; } console .log (str);
数组中新增元素 通过修改 length 长度新增数组元素
可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的
1 2 3 4 5 6 7 var arr = ['red' , 'green' , 'blue' ];console .log (arr.length ); arr.length = 5 ; console .log (arr);console .log (arr[3 ]); console .log (arr[4 ]);
通过修改数组索引新增数组元素
可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值,否则会覆盖掉以前的数据
1 2 3 4 5 6 7 8 9 10 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);
案例 1.数组新增元素
新建一个数组,里面存放10个整数( 1~10), 要求使用循环追加的方式输出: [1,2,3,4,5,6,7,8,9,10]
1 2 3 4 5 var arr = [];for (var i = 0 ; i < 10 ; i++) { arr[i] = i + 1 ; } console .log (arr);
2.筛选数组
要求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来,放入新数组。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 var arr = [2 , 0 , 6 , 1 , 77 , 0 , 52 , 0 , 25 , 7 ];var newArr = [];var j = 0 ;for (var i = 0 ; i < arr.length ; i++) { if (arr[i] >= 10 ) { newArr[j] = arr[i]; j++; } } console .log (newArr);var arr = [2 , 0 , 6 , 1 , 77 , 0 , 52 , 0 , 25 , 7 ];var newArr = [];for (var i = 0 ; i < arr.length ; i++) { if (arr[i] >= 10 ) { newArr[newArr.length ] = arr[i]; } } console .log (newArr);
数组案例 删除指定数组元素 要求:将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后,形成一个不包含 0 的新数组。
1 2 3 4 5 6 7 8 var arr = [2 , 0 , 6 , 1 , 77 , 0 , 52 , 0 , 25 , 7 ];var newArr = [];for (var i = 0 ; i < arr.length ; i++) { if (arr[i] >= 1 ) { newArr[newArr.length ] = arr[i]; } } console .log (newArr);
翻转数组 要求: 将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放。
输出: [‘purple’, ‘pink’, ‘blue’, ‘green’, ‘red’]。
1 2 3 4 5 6 7 8 9 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);
数组排序(冒泡排序) 冒泡排序:是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。
例如,我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序,输出: 1,2,3,4,5。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var arr = [5 , 4 , 3 , 2 , 1 ];for (var i = 0 ; i <= arr.length - 1 ; i++) { for (var j = 0 ; j <= arr.length - i - 1 ; j++) { if (arr[j] < arr[j + 1 ]) { var temp = arr[j]; arr[j] = arr[j + 1 ]; arr[j + 1 ] = temp; } } } console .log (arr);
函数 在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。
虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数
。
函数
:就是封装了一段可被重复调用执行的代码块
。通过此代码块可以实现大量代码的重复使用。
封装:函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。(简单理解:封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包))
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var sum = 0 ;for (var i = 1 ; i <= 100 ; i++) { sum += i; } console .log (sum);var sum = 0 ;for (var i = 10 ; i <= 50 ; i++) { sum += i; } console .log (sum);function getSum (num1, num2 ) { var sum = 0 ; for (var i = num1; i <= num2; i++) { sum += i; } console .log (sum); } getSum (1 , 100 );getSum (10 , 50 );getSum (1 , 1000 );
函数的使用 函数在使用时分为两步:声明函数和调用函数。
声明函数 1 2 3 4 5 6 7 8 9 function 函数名() { } function sayHi ( ) { console .log ('hi~~' ); }
(1) function 声明函数的关键字 全部小写
(2) 函数是做某件事情,函数名一般是动词 sayHi
(3) 函数不调用自己不执行
调用函数
调用函数的时候千万不要忘记加小括号
案例 1.利用函数计算1-100之间的累加和
1 2 3 4 5 6 7 8 9 10 function getSum ( ) { var sum = 0 ; for (var i = 1 ; i <= 100 ; i++) { sum += i; } console .log (sum); } getSum ();
函数的参数 1 2 3 4 5 6 7 function cook ( ) { console .log ('酸辣土豆丝' ); } cook ();cook ();
形参和实参 1 2 3 4 5 6 7 8 9 10 11 12 13 function 函数名(形参1 ,形参2. ..) { } 函数名(实参1 ,实参2. ..); function cook (aru ) { console .log (aru); } cook ('酸辣土豆丝' );cook ('大肘子' );
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参 ,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参 。
参数的作用 : 在函数内部
某些值不能固定,我们可以通过参数在调用函数时传递
不同的值进去。
案例 1.利用函数求任意两个数的和
1 2 3 4 5 function getSum (num1, num2 ) { console .log (num1 + num2); } getSum (1 , 3 ); getSum (3 , 8 );
2.利用函数求任意两个数之间
的和
1 2 3 4 5 6 7 8 9 function getSums (start, end ) { var sum = 0 ; for (var i = start; i <= end; i++) { sum += i; } console .log (sum); } getSums (1 , 100 ); getSums (1 , 10 );
3.注意点
多个参数之间用逗号隔开
形参可以看做是不用声明的变量
函数形参和实参个数不匹配问题 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function getSum (num1, num2 ) { console .log (num1 + num2); } getSum (1 , 2 ); getSum (1 , 2 , 3 ); getSum (1 );
函数的返回值 return 语句 有的时候,我们会希望函数将值返回给调用者,此时通过使用 return 语句就可以实现。
return 语句的语法格式如下:
1 2 3 4 function 函数名() { return 需要返回的结果; } 函数名();
(1) 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名() 通过return 实现的。
(2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function getResult ( ) { return 666 ; } getResult (); console .log (getResult ());function cook (aru ) { return aru; } console .log (cook ('大肘子' ));function getSum (num1, num2 ) { return num1 + num2 } console .log (getSum (5 , 6 )); console .log (getSum (1 , 2 ));
案例 1.利用函数求任意两个数的最大值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 function getBig (num1, num2 ) { if (num1 > num2) { return num1; } else { return num2; } } function getMax (num1, num2 ) { return num1 > num2 ? num1 : num2; } console .log (getBig (1 , 8 ));
2.利用函数求任意一个数组中的最大值
求数组 [5,2,99,101,67,77] 中的最大数值。
1 2 3 4 5 6 7 8 9 10 11 12 13 function getArrMax (arr ) { var max = arr[0 ]; for (var i = 1 ; i <= arr.length ; i++) { if (arr[i] > max) { max = arr[i]; } } return max; } var re = getArrMax ([3 , 77 , 44 , 99 , 143 ]);console .log (re);
return 终止函数 return 语句之后的代码不被执行。
return 只能返回一个值
。如果用逗号隔开多个值,以最后一个为准。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function getSum (num1, num2 ) { return num1 + num2; alert ('我是不会被执行的哦!' ) } console .log (getSum (1 , 2 ));function fn (num1, num2 ) { return num1, num2; } console .log (fn (1 , 2 )); function getResult (num1, num2 ) { return [num1 + num2, num1 - num2, num1 * num2, num1 / num2]; } var re = getResult (1 , 2 ); console .log (re);
函数没有 return 返回 undefined 函数都是有返回值的。
如果有return 则返回 return 后面的值
如果没有return 则返回 undefined
1 2 3 4 5 6 7 8 function fun1 ( ) { return 666 ; } console .log (fun1 ()); function fun2 ( ) {} console .log (fun2 ());
作业 ① 写一个函数,用户输入任意两个数字的任意算术运算(简单的计算器小功能),并能弹出运算后的结果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getCount ( ) { var num1 = parseFloat (prompt ('请输入第一个数字' )); var num2 = prompt ('请输入运算符' ); var num3 = parseFloat (prompt ('请输入第二个数字' )); if (num2 == '-' ) { return num1 - num3; } else if (num2 == '+' ) { return num1 + num3; } else if (num2 == '*' ) { return num1 * num3; } else if (num2 == '/' ) { return num1 / num3; } } var re = getCount ();alert ('结果为' + re);
② 写一个函数,用户输入任意两个数字的最大值,并能弹出运算后的结果。
1 2 3 4 5 6 7 var num1 = parseInt (prompt ('输入数字' )); var num2 = parseInt (prompt ('输入数字' ));function getMax (num1, num2 ) { return num1 > num2 ? num1 : num2; } var str = getmax (num1,num2);alert (str);
③ 写一个函数,用户输入任意三个不同数字的最大值,并能弹出运算后的结果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var num1 = parseInt (prompt ('请输入第一个数字' )); var num2 = parseInt (prompt ('请输入第二个数字' ));var num3 = parseInt (prompt ('请输入第三个数字' ));function getMax (num1, num2, num3 ) { if (num1 > num2 && num1 > num3) { return num1; } else if (num2 > num1 && num2 > num3) { return num2; } else if (num3 > num1 && num3 > num2) { return num3 } } var str = getMax (num1, num2, num3);alert ('最大值为' + str);
④ 写一个函数,用户输入一个数判断是否是素数,并返弹出回值。
素数又称质数,一个大于1的正整数
,如果除了1
和它本身
以外,不能被其他正整数整除,就叫素数。
1 2 3 4 5 6 7 8 9 10 11 12 var num = parseInt (prompt ('请输入一个数字' )); function getSu ( ) { for (var i = 2 ; i < num; i++) { if (num % i == 0 ) { return num + '不是质数' } } return num + '是质数' } var str = getSu ();alert (str);
arguments 的使用 当我们不确定有多少个参数传递的时候,可以用 arguments
来获取。在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象
。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参
。
1 2 3 4 5 6 function fn ( ) { console .log (arguments ); console .log (arguments .length ); console .log (arguments [2 ]); } fn (1 ,2 ,3 );
arguments展示形式是一个伪数组
,因此可以进行遍历。伪数组具有以下特点:
具有数组的 length 属性
按照索引的方式进行存储的
它没有真正数组的一些方法 pop() push() 等等
1 2 3 4 5 6 7 function fn ( ) { for (var i = 0 ; i < arguments .length ; i++) { console .log (arguments [i]); } } fn (1 ,2 ,3 );
只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
案例 利用函数求任意个数的最大值
1 2 3 4 5 6 7 8 9 10 11 function getMax ( ) { 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 ));
函数案例 1.利用函数封装方式,翻转任意一个数组 1 2 3 4 5 6 7 8 9 10 11 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 , 3 , 4 , 6 , 9 ]);console .log (arr1);var arr2 = reverse (['red' , 'pink' , 'blue' ]);console .log (arr2);
2.利用函数封装方式,对数组排序 – 冒泡排序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function sort (arr ) { for (var i = 0 ; i < arr.length - 1 ; i++) { for (var j = 0 ; j < arr.length - i - 1 ; j++) { if (arr[j] > arr[j + 1 ]) { var temp = arr[j]; arr[j] = arr[j + 1 ]; arr[j + 1 ] = temp; } } } return arr; } var arr1 = sort ([1 , 4 , 2 , 9 ]);console .log (arr1); var arr2 = sort ([11 , 7 , 22 , 999 ]);console .log (arr2);
3.判断闰年 要求:输入一个年份,判断是否是闰年(闰年:能被4整除并且不能被100整除,或者能被400整除)
1 2 3 4 5 6 7 8 9 10 function isRunYear (year ) { var flag = false ; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ) { flag = true ; } return flag; } console .log (isRunYear (2000 )); console .log (isRunYear (1999 ));
4.函数可以调用另外一个函数 因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。
1 2 3 4 5 6 7 8 9 10 11 function fn1 ( ) { console .log (111 ); fn2 (); console .log ('fn1' ); } function fn2 ( ) { console .log (222 ); console .log ('fn2' ); } fn1 ();
5.用户输入年份,输出当前年份2月份的天数 如果是闰年,则2月份是 29天, 如果是平年,则2月份是 28天。(闰年:能被4整除并且不能被100整除,或者能被400整除)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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; }
函数的两种声明方式 自定义函数方式(命名函数) 利用函数关键字 function 自定义函数方式。
1 2 3 4 5 function fn ( ) { } fn ();
因为有名字,所以也被称为命名函数。
调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面。
函数表达式方式(匿名函数) 1 2 3 4 5 6 7 var fun = function (aru ) { console .log ('我是函数表达式' ); console .log (aru); } fun ('pink老师' );
因为函数没有名字,所以也被称为匿名函数
这个fn 里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的
函数调用的代码必须写到函数体后面
作用域 JavaScript作用域:就是代码名字(变量)在某个范围内起作用和效果,出了这个范围就不起效果,目的是为了提高程序的可靠性,更重要的是减少命名冲突。
JavaScript(es6前)中的作用域有两种:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script> var num = 10 ; console .log (num); alert (num); </script> function fn ( ) { var num = 20 ; console .log (num); } fn ();
变量的作用域 在JavaScript中,根据作用域的不同,变量可以分为两种:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var num = 10 ; console .log (num);function fn ( ) { console .log (num); } fn ();function fun (aru ) { var num1 = 10 ; num2 = 20 ; } fun ();
从执行效率来看全局变量和局部变量:
全局变量只有浏览器关闭的时候才会销毁,比较占内存资源
局部变量 当我们程序执行完毕就会销毁, 比较节约内存资源
JS 没有块级作用域 Js的作用域: 全局作用域 局部作用域 现阶段我们Js 没有 块级作用域
块级作用域(用{}包含的) if {} for {}
1 2 3 4 5 6 if (true ){ int num = 123 ; system.out.print(num); } system.out.print(num);
Js中没有块级作用域(在ES6之前)。
1 2 3 4 if (3 < 5 ) { var num = 10 ; } console .log (num);
作用域链
只要是代码,就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
1 2 3 4 5 6 7 8 9 10 11 12 13 var num = 10 ;function fn ( ) { var num = 20 ; function fun ( ) { console .log (num); } fun (); } fn ();
案例 1.结果是几?
1 2 3 4 5 6 7 8 9 function f1 ( ) { var num = 123 ; function f2 ( ) { console .log ( num ); } f2 (); } var num = 456 ;f1 ();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 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); console .log (b); } } } fn1 ();
预解析 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 console .log (num); console .log (num); var num = 10 ;function fn ( ) { console .log (11 ); } fn (); fun (); var fun = function ( ) { console .log (22 ); }
1.JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
预解析: 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面。
代码执行: 按照代码书写的顺序从上往下执行。
2.预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
变量提升 :就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作。
函数提升 :就是把所有的函数声明提升到当前作用域的最前面,不调用函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 console .log (num); var num = 10 ;var num; console .log (num); num = 10 ; fun (); var fun = function ( ) { console .log (22 ); } var fun; fun (); fun = function ( ) { console .log (22 ); }
1 2 3 4 5 6 fn (); function fn ( ) { console .log (11 ); }
案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var num = 10 ;fun ();function fun ( ) { console .log (num); var num = 20 ; } var num;function fun ( ) { var num; console .log (num); num = 20 ; } num = 10 ; fun ();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var num = 10 ;function fn ( ){ console .log (num); var num = 20 ; console .log (num); } fn ();var num;function fn ( ){ var num; console .log (num); num = 20 ; console .log (num); } num = 10 ; fn ();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var a = 18 ;f1 ();function f1 ( ) { var b = 9 ; console .log (a); console .log (b); var a = '123' ; } var a;function f1 ( ) { var b; var a; b = 9 ; console .log (a); console .log (b); a = '123' ; } a = 18 ; f1 ();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 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; a = b = c = 9 ; console .log (a); console .log (b); console .log (c); } f1 (); console .log (c); console .log (b); console .log (a);
对象 现实生活中:万物皆对象,对象是一个具体的事物
,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性
和方法
组成的。
属性:事物的特征, 在对象中用属性 来表示(常用名词)
方法:事物的行为, 在对象中用方法 来表示(常用动词)
为什么需要变量?
保存一个值时,可以使用变量
,保存多个值(一组值)时,可以使用数组
。如果要保存一个人的完整信息呢?
例如,将“张三疯”的个人的信息保存在数组中的方式为:
1 var arr = [‘张三疯’, ‘男', 128,154];
JS 中的对象表达结构更清晰,更强大。张三疯的个人信息在对象中的表达结构如下:
1 2 3 4 5 6 7 8 9 张三疯.姓名 = ‘张三疯'; 张三疯.性别 = ‘男' ; 张三疯.年龄 = 128 ; 张三疯.身高 = 154 ; person.name = ‘张三疯'; person.sex = ‘男' ; person.age = 128 ; person.height = 154 ;
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object):
利用字面量
创建对象
利用 new Object
创建对象
利用构造函数
创建对象
字面量创建对象 对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
创建对象 1 2 3 4 5 6 7 8 9 var obj = { uname : '张三疯' , age : 18 , sex : '男' , sayHi : function ( ) { console .log ('hi~' ); } }
1.{ } 里面采取键值对
的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
2.多个属性或者方法中间用逗号隔开的。
3.方法冒号后面跟的是一个匿名函数
使用对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var obj = { uname : '张三疯' , age : 18 , sex : '男' , sayHi : function ( ) { console .log ('hi~' ); } } console .log (obj.uname );console .log (obj['age' ]);obj.sayHi ();
练习 请用对象字面量的形式创建一个名字为可可的狗对象。
具体信息如下:
姓名:可可
类型(type):阿拉斯加犬
年龄:5岁,
颜色:棕红色。
技能:汪汪汪(bark) ,演电影 (showFilm)
1 2 3 4 5 6 7 8 9 10 11 12 var obj = { uname : '可可' , type : '阿拉斯加犬' age : 5 , color : '棕红色' , skill : '汪汪汪(bark),演电影 (showFilm)' } console .log (obj.uname );console .log (obj.age );console .log (obj.type );console .log (obj.color );console .log (obj.skill );
变量、属性、函数、方法总结 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var num = 10 ;var obj = { age : 18 , } console .log (obj.age ); console .log (age); var obj = { age : 18 , fn : function ( ) { } } function fn ( ) { }
new Object 创建对象 1 2 3 4 5 6 7 8 9 10 11 12 13 var obj = new Object (); obj.uname = '张三疯' ; obj.age = 18 ; obj.sex = '男' ; obj.sayHi = function ( ) { console .log ('hi~' ); } console .log (obj.uname );console .log (obj['sex' ]);obj.sayHi ();
练习 请用new Object 形式创建一个鸣人对象。
具体信息如下:
姓名:鸣人
性别:男
年龄:19岁
技能(skill):影分身术
1 2 3 4 5 6 7 8 9 10 var obj = new Object (); obj.uname = '鸣人' ; obj.age = 19 ; obj.sex = '男' ; obj.skill = '影分身术' ; console .log (obj.uname );console .log (obj.age );console .log (obj.sex );console .log (obj.skill );
构造函数创建对象 为什么 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var ldh = { uname : '刘德华' , age : 55 , sing : function ( ) { console .log ('冰雨' ); } } var zxy = new Object ();obj.uname = '张学友' ; obj.age = 58 ; obj.sing = function ( ) { console .log ('李香兰' ); }
上面的代码可以看出前面两种创建对象的方式一次只能创建一个对象,然后我们一次创建一个对象,里面很多的属性和方法是大量相同的,我们只能复制,因此,我们可以利用函数的方法 重复这些相同的代码,我们就把这个函数称为构造函数
。
为什么叫构造函数:又因为这个函数不一样,里面封装的不是普通代码,而是对象
。
所以说:构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。
创建对象 语法格式:
1 2 3 4 5 function 构造函数名() { this .属性 = 值; this .方法 = function ( ) {} } new 构造函数名();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function Star (uname, age, sex ) { this .name = uname; this .age = age; this .sex = sex; this .sing = function (sang ) { console .log (sang); } } var ldh = new Star ('刘德华' , 18 , '男' ); console .log (typeof ldh); console .log (ldh.name );console .log (ldh['sex' ]);ldh.sing ('冰雨' ); var zxy = new Star ('张学友' , 19 , '男' );console .log (zxy.name );console .log (zxy.age );zxy.sing ('李香兰' );
。构造函数名字首字母要大写
我们构造函数不需要return 就可以返回结果。
我们调用构造函数 必须使用 new
。
我们只要new Star() 调用函数就创建一个对象 ldh {}。
我们的属性和方法前面必须添加 this
。
练习 利用构造函数创建两个英雄对象。函数中的公共部分包括:姓名属性(name),类型属性(type),血量属性(blood)和攻击方式(attack)。
英雄对象的信息如下 :
廉颇 力量型 500血量 攻击 :近战
后羿 射手型 100血量 攻击: 远程
1 2 3 4 5 6 7 8 9 10 function Star (uname, type, blood, attack ) { this .name = uname; this .type = type; this .blood = blood; this .attack = attack; } var lp = new Star ('廉颇' , '力量型' , '500血量' , '近战' );console .log (lp);var hy = new Star ('后羿' , '射手型' , '100血量' , '远程' );console .log (hy);
构造函数和对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function Star (uname, age, sex ) { this .name = uname; this .age = age; this .sex = sex; this .sing = function (sang ) { console .log (sang); } } var ldh = new Star ('刘德华' , 18 , '男' ); console .log (ldh);
new关键字 new关键字执行过程:
new 构造函数可以在内存中创建了一个空的对象。
2. this 就会指向刚才创建的空对象。
3. 执行构造函数里面的代码,给这个空对象添加属性和方法。
4. 返回这个对象。
遍历对象 1 2 3 4 5 6 7 8 9 var obj = { name : 'pink老师' , age : 18 , sex : '男' , } console .log (obj.name );console .log (obj.age );console .log (obj.sex );
for...in
语句用于对数组或者对象的属性进行循环操作。
其语法如下:
1 2 3 4 5 6 7 8 9 var obj = { name : 'pink老师' , age : 18 , sex : '男' , } for (var k in obj){ console .log (k); console .log (obj[k]); }
我们使用 for in 里面的变量 我们喜欢写 k
或者 key
作业
创建一个电脑对象
有颜色(color)、重量(weight)、品牌(brand)、型号(type)等属性,
有看电影(watch)、听音乐(listen)、打游戏(play)和敲代码(coding)等方法。
题目描述:
颜色、重量、品牌、型号是属性;看电影、听音乐、打游戏、敲代码是方法,在调用方法时分别打印 “我在看电影/听音乐/打游戏/敲代码”。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var computer = { color : 'black' , weight : '2.42kg' , brand : 'hp' , type : '光影精灵' , skill : function ( ) { console .log ('我在看电影' ); console .log ('我在听音乐' ); console .log ('我在打游戏' ); console .log ('我在敲代码' ); } }; console .log (computer.color );console .log (computer.weight );console .log (computer.brand );console .log (computer.type );computer.skill ();
创建一个按钮对象,该对象中需要包含宽,高,背景颜色和点击行为。
1 2 3 4 5 6 7 8 9 10 11 12 var an = { width : '20cm' , height : '20cm' , color : 'blue' , chick : function (chick ) { console .log ('写的代码点击就成功' ); } } console .log (an.width );console .log (an.height );console .log (an.color );an.chick ();
创建一个车的对象,该对象要有重量、颜色、牌子,可以载人、拉货和耕田。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var car = { weight : '200kg' , color : 'blue' , paizi : '凯迪拉克' , gn : function (gn ) { console .log ('载人' ); console .log ('拉货' ); console .log ('耕田' ); } } console .log (car.weight );console .log (car.color );console .log (car.paizi );car.gn ();
内置对象 JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象。
前面两种对象是JS 基础 内容,属于 ECMAScript;第三个浏览器对象属于我们JS独有的
内置对象
就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法),最大的优点就是帮助我们快速开发。
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等。
查文档 学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。
Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN Web Docs (mozilla.org)
查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过 demo 进行测试
Math 对象 Math对象不是构造函数,所以我们不需要new 来调用,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。
1 2 3 4 5 6 Math .PI Math .floor () Math .ceil () Math .round () Math .abs () Math .max ()/Math .min ()
注意:上面的方法必须带括号
圆周率、最大和最小值 1 2 3 4 5 console .log (Math .PI ); console .log (Math .max (1 , 99 , 3 )); console .log (Math .max (-1 , -10 )); console .log (Math .max (1 , 99 , 'pink老师' )); console .log (Math .max ());
封装自己的数学对象(案例) 利用对象封装自己的数学对象,里面有 PI、最大值和最小值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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 ));
绝对值、三个取整方法 1 2 3 4 5 console .log (Math .abs (1 )); console .log (Math .abs (-1 )); console .log (Math .abs ('-1' )); console .log (Math .abs ('pink' ));
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 console .log (Math .floor (1.1 )); console .log (Math .floor (1.9 )); console .log (Math .ceil (1.1 )); console .log (Math .ceil (1.9 )); console .log (Math .round (1.1 )); console .log (Math .round (1.5 )); console .log (Math .round (1.9 )); console .log (Math .round (-1.1 )); console .log (Math .round (-1.5 ));
随机数方法 random() random() 方法可以随机返回一个小数,其取值范围是 [0,1)
,左闭右开 0 <= x < 1。
1 2 3 console .log (Math .random ());
得到一个两数之间的随机整数,包括两个数在内。
1 2 Math .floor (Math .random () * (max - min + 1 )) + min;
1 2 3 4 5 6 7 8 9 10 function getRandom (min, max ) { return Math .floor (Math .random () * (max - min + 1 )) + min; } console .log (getRandom (1 , 10 )); var arr = ['张三' , '张三丰' , '张三疯子' , '李四' , '李思思' , 'pink老师' ];console .log (arr[getRandom (0 , arr.length - 1 )]);
猜数字游戏(案例) 程序随机生成一个 1~ 10 之间的数字,并让用户输入一个数字,
1. 如果大于该数字,就提示,数字大了,继续猜;
2. 如果小于该数字,就提示数字小了,继续猜;
3. 如果等于该数字,就提示猜对了, 结束程序。
分析:
①随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
②需要一直猜到正确为止,所以一直循环。
③用while 循环合适更简单。
④核心算法:使用 if else if 多分支语句来判断大于、小于、等于。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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 ; } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getRandom (min, max ) { return Math .floor (Math .random () * (max - min + 1 )) + min; } var random = getRandom (1 , 50 );for (i = 1 ; i <= 10 ; i++) { var num = prompt ('你来猜? 输入1~50之间的一个数字,只有10次机会哦' ); if (num > random) { alert ('你猜大了,还有' + (10 - i) + '次机会' ); } else if (num < random) { alert ('你猜小了,还有' + (10 - i) + '次机会' ); } else { alert ('你好帅哦,猜对了' ); break ; } }
日期对象 Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用。Date 实例用来处理日期和时间。
Date() 日期对象,是一个构造函数,必须使用new 来调用创建我们的日期对象。
1 2 3 var arr = new Array (); var obj = new Object ();
1 2 3 4 5 6 7 8 9 var date = new Date ();console .log (date); var date1 = new Date (2023 , 8 , 09 );console .log (date1); var date2 = new Date ('2023-8-9 17:03:18' );console .log (date2);
日期格式化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var date = new Date ();console .log (date.getFullYear ()); console .log (date.getMonth ()); console .log (date.getMonth () + 1 ); console .log (date.getDate ()); console .log (date.getDay ()); var year = date.getFullYear ();var month = date.getMonth () + 1 ;var date1 = date.getDate ();var day = date.getDay ();var arr = ['星期日' , '星期一' , '星期二' , '星期三' , '星期四' , '星期五' , '星期六' ];console .log ('今天是:' + year + '年' + month + '月' + date1 + '日 ' + arr[day]);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var date = new Date ();console .log (date.getHours ()); console .log (date.getMinutes ()); console .log (date.getSeconds ()); 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 ());
获取日期的总的毫秒形式 Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数。
我们经常利用总的毫秒数来计算时间,因为它更精确。
获得Date总的毫秒数(时间戳) ,不是当前时间的毫秒数,而是距离1970年1月1号过了多少毫秒数
1 2 3 4 5 6 7 8 9 var date = new Date ();console .log (date.valueOf ()); console .log (date.getTime ());var date1 = +new Date (); console .log (date1);console .log (Date .now ());
倒计时(案例) 分析:
①核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。
②用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
③把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
转换公式如下:
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function countDown (time ) { var nowTime = +new Date (); var inputTime = +new Date (time); var times = (inputTime - nowTime) / 1000 ; var d = parseInt (times / 60 / 60 / 24 ); d = d < 10 ? '0' + d : d; var h = parseInt (times / 60 / 60 % 24 ); h = h < 10 ? '0' + h : h; var m = parseInt (times / 60 % 60 ); m = m < 10 ? '0' + m : m; var s = parseInt (times % 60 ); s = s < 10 ? '0' + s : s; return d + '天' + h + '时' + m + '分' + s + '秒' ; } console .log (countDown ('2023-8-10 23:00:00' ));
数组对象 创建数组对象的两种方式
1 2 3 4 5 6 7 8 9 var arr = [1 , 2 , 3 ];console .log (arr[0 ]);var arr1 = new Array (2 , 3 ); console .log (arr1);
检测是否为数组 instanceof 运算符 它可以用来检测是否为数组。
Array.isArray(参数); H5新增的方法 ie9以上版本支持。
1 2 3 4 5 6 7 8 9 var arr = [];console .log (arr instanceof Array ); var obj = {};console .log (obj instanceof Array ); console .log (Array .isArray (arr)); console .log (Array .isArray (obj));
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 function reverse (arr ) { var newArr = []; for (var i = arr.length - 1 ; i >= 0 ; i--) { newArr[newArr.length ] = arr[i]; } return newArr; } console .log (reverse ([1 , 2 , 3 ])); console .log (reverse (1 , 2 , 3 )); function reverse (arr ) { 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 ));
添加删除数组元素的方法
push() 1 2 3 4 5 6 7 var arr = [1 , 2 , 3 ];arr.push (4 , 'pink' ); console .log (arr); var arr = [1 , 2 , 3 ];console .log (arr.push (4 , 'pink' ));
push 是可以给数组追加新的元素
push() 参数直接写数组元素就可以了
push完毕之后,返回的结果是新数组的长度
原数组也会发生变化
unshift() 1 2 3 4 5 6 7 var arr = [1 , 2 , 3 ];arr.unshift ('red' ); console .log (arr); var arr = [1 , 2 , 3 ];console .log (arr.unshift ('red' , 'purple' ));
unshift是可以给数组前面追加新的元素
unshift() 参数直接写 数组元素就可以了
unshift完毕之后,返回的结果是 新数组的长度
原数组也会发生变化
pop() 1 2 3 4 5 6 7 var arr = [1 , 2 , 3 ];arr.pop (); console .log (arr); var arr = [1 , 2 , 3 ];console .log (arr.pop ());
pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
pop() 没有参数
pop完毕之后,返回的结果是 删除的那个元素
原数组也会发生变化
shift 1 2 3 4 5 6 7 var arr = [1 , 2 , 3 ];arr.shift (); console .log (arr); var arr = [1 , 2 , 3 ];console .log (arr.shift ());
shift是可以删除数组的第一个元素 记住一次只能删除一个元素
shift() 没有参数
shift完毕之后,返回的结果是 删除的那个元素
原数组也会发生变化
筛选数组(案例) 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800],要求把数组中工资超过2000的删除,剩余的放到新数组里面。
1 2 3 4 5 6 7 8 9 var arr = [1500 , 1200 , 2000 , 2100 , 1800 ];var newArr = [];for (var i = 0 ; i < arr.length ; i++) { if (arr[i] < 2000 ) { newArr.push (arr[i]); } } console .log (newArr);
数组排序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var arr = ['pink' , 'red' , 'blue' ];arr.reverse (); console .log (arr);var arr = [3 , 2 , 5 , 8 ];arr.sort (); console .log (arr); var arr1 = [13 , 4 , 77 , 1 , 7 ];arr.sort (); console .log (arr); var arr1 = [13 , 4 , 77 , 1 , 7 ];arr1.sort (function (a, b ) { return b - a; }); console .log (arr1);
数组索引方法
1 2 3 4 5 6 7 8 9 10 11 var arr = ['red' , 'green' , 'blue' , 'pink' ];console .log (arr.indexOf ('blue' )); var arr = ['red' , 'green' , 'blue' , 'pink' , 'blue' ];console .log (arr.indexOf ('blue' )); var arr = ['red' , 'green' , 'pink' ];console .log (arr.indexOf ('blue' ));
1 2 3 4 5 6 var arr = ['red' , 'green' , 'pink' ];console .log (arr.lastIndexOf ('blue' )); var arr = ['red' , 'green' , 'blue' , 'pink' , 'blue' ];console .log (arr.indexOf ('blue' ));
数组去重(重点案例) 有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’],要求去除数组中重复的元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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);
数组转换为字符串
1 2 3 4 5 6 7 8 var arr = [1 , 2 , 3 ];console .log (arr.toString ()); var arr1 = ['green' , 'blue' , 'pink' ];console .log (arr1.join ()); console .log (arr1.join ('-' )); console .log (arr1.join ('&' ));
其他
1 2 3 4 5 6 7 8 var arr = ['a' , 'b' , 'c' ];var arr1 = ['d' , 'e' , 'f' ];var arr2 = ['你' , '学' , '习' ];var arr3 = arr.concat (arr1); var arr4 = arr.concat (arr1, arr2); console .log (arr3);console .log (arr4);
1 2 3 var arr = ['a' , 'b' , 'c' , 'd' , 'e' , 'f' ];console .log (arr.slice (0 , 3 ));
1 2 3 4 5 var arr = ['a' , 'b' , 'c' , 'd' ];arr.splice (1 , 1 , 'z' ); console .log (arr);
字符串对象 1 2 3 4 5 var str = 'andy' ;console .log (str.length );
为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
基本包装类型 基本包装类型 就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
步骤(原因):
1 2 3 4 5 6 var temp = new String ('andy' );str = temp; temp = null ;
字符串的不可变 指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
1 2 3 4 5 6 7 8 9 10 var str = 'andy' ;console .log (str); str = 'red' ; console .log (str); var str = '' ;for (var i = 1 ; i <= 1000000000 ; i++) { str += i; } console .log (str);
根据字符返回位置 字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
1 2 3 4 var str = '改革春风吹满地,春天来了' ;console .log (str.indexOf ('春' )); console .log (str.indexOf ('春' , 3 ));
返回字符位置(案例) 查找字符串”abcoefoxyozzopp”中所有o出现的位置以及次数
1 2 3 4 5 6 7 8 9 10 11 12 13 var str = "abcoefoxyozzopp" ;var index = str.indexOf ('o' );var num = 0 ;while (index !== -1 ) { console .log (index); num++; index = str.indexOf ('o' , index + 1 ); } console .log ('o出现的次数是: ' + num);
根据位置返回字符(重点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var str = 'andy' ;console .log (str.charAt (3 )); for (var i = 0 ; i < str.length ; i++) { console .log (str.charAt (i)); } var str = 'andy' ;console .log (str.charCodeAt (0 )); var str = 'andy' ;console .log (str[0 ]);
返回字符位置(案例) 1 2 3 4 5 6 7 8 9 10 var o = { age : 18 } if (o['age' ]) { console .log ('里面有该属性' ); } else { console .log ('没有该属性' ); }
判断一个字符串 ‘abcoefoxyozzopp’ 中出现次数最多的字符,并统计其次数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 var str = 'abcoefoxyozzopp' ;var o = {};for (var i = 0 ; i < str.length ; i++) { var chars = str.charAt (i); if (o[chars]) { o[chars]++; } else { o[chars] = 1 ; } } console .log (o); var max = 0 ;var ch = '' ;for (var k in o) { if (o[k] > max) { max = o[k]; ch = k; } } console .log (max);console .log ('最多的字符是' + ch);
字符串操作方法(重点)
1 2 3 4 5 6 7 var str = 'andy' ;console .log (str.concat ('red' )); var str1 = '改革春风吹满地' ;console .log (str1.substr (2 , 2 ));
其他方法 replace()方法 replace() 方法用于在字符串中用一些字符替换另一些字符。其使用格式如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 var str = 'andy' ;console .log (str.replace ('a' , 'b' )); var str = 'andyandy' ;console .log (str.replace ('a' , 'b' )); var str1 = 'abcoefoxyozzopp' ;while (str1.indexOf ('o' ) !== -1 ) { str1 = str1.replace ('o' , '*' ); } console .log (str1);
split()方法 split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。例如下面代码:
1 2 3 4 5 var str2 = 'red, pink, blue' ;console .log (str2.split (',' ));var str3 = 'red&pink&blue' ;console .log (str3.split ('&' ));
作业 给定一个字符串,如:“abaasdffggghhjjkkgfddsssss3444343”,问题如下:
字符串的长度
取出指定位置的字符,如:0,3,5,9等
查找指定字符是否在以上字符串中存在,如:i,c,b等
替换指定的字符,如:g替换为22,ss替换为b等操作方法
截取指定开始位置到结束位置的字符串,如:取得1-5的字符串
找出以上字符串中出现次数最多的字符和出现的次数
遍历字符串,并将遍历出的字符两头添加符号“@”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 var str = 'abaasdffggghhjjkkgfddsssss3444343' ;console .log (str.length ); console .log (str.charAt (0 ) + str.charAt (3 ) + str.charAt (5 ) + str.charAt (9 ));var index = str.indexOf ('i' );if (index !== -1 ) { console .log ('存在' ); } else { console .log ('不存在' ); } while (str.indexOf ('g' ) !== -1 ) { str = str.replace ('g' , '22' ); } console .log (str);console .log (str.substr (1 , 5 )); var o = {};for (var i = 0 ; i < str.length ; i++) { var chars = str.charAt (i); if (o[chars]) { o[chars]++; } else { o[chars] = 1 ; } } var max = 0 ;var ch = '' ;for (var k in o) { if (o[k] > max) { max = o[k]; ch = k; } } console .log (max);console .log ('最多的字符是' + ch);var strArr = str.split ('' ); var newStr = '' ; for (var i = 0 ; i < strArr.length ; i++) { var newChar = '@' + strArr[i] + '@' ; newStr += newChar; } console .log (newStr);
简单数据类型与复杂类型 简单类型又叫做基本数据类型或者值类型
,复杂类型又叫做引用类型
。
值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型
string ,number,boolean,undefined,null
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型
通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等
1 2 3 4 var timer = null ;console .log (typeof timer);
堆和栈 堆栈空间分配区别:
栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放到堆里面
注意:JavaScript中没有堆栈的概念,通过堆栈的方式,可以让大家更容易理解代码的一些执行方式,便于将来学习其他语言。
简单类型的内存分配
值类型(简单数据类型): string ,number,boolean,undefined,null
值类型变量的数据直接存放在变量(栈空间)中
简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
简单类型传参 函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。
1 2 3 4 var num = 10 ;num = 20 ; console .log (num);
1 2 3 4 5 6 7 8 function fn (a ) { a++; console .log (a); } var x = 10 ;fn (x);console .log (x);
复杂类型传参 函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。
1 2 3 4 5 6 7 8 9 10 11 12 13 function Person (name ) { this .name = name; } function f1 (x ) { console .log (x.name ); x.name = "张学友" ; console .log (x.name ); } var p = new Person ("刘德华" );console .log (p.name ); f1 (p);console .log (p.name );