一、初识JavaScript
1.1 JavaScript基本概念
1、JavaScript概述
JavaScript主要用于开发交互式的网页
2、JavaScript由来
1995，网景通信公司的创始人马克·安德森招募一名大将布兰登·艾奇，为网景导航者浏览器开发了JavaScript
3、JavaScript组成
ECMAScript、DOM、BOM三个部分组成
4、JavaScript特点
简单容易使用、可以跨平台、支持面向对象
1.2 开发工具
JavaScript的开发工具主要包括浏览器和代码编辑器，浏览器用于执行、调试JavaScript代码，代码编辑器用于代码编写浏览器一般由渲染引擎和JavaScript引擎组成
代码编辑器 (任选其一)
Visual Studio Code编辑器
https://code.visualstudio.com/
HbuilderX 编辑器
1.3 JavaScript基本使用
1、JavaScript代码引入方式行内式
<a href="javascript:alert('Hello');">test</a>
嵌入式
<script> javascript代码 </script>
外链式
<script src="test.js"></script>
2、常用输入输出语句
类型 语句 说明 输出 alert() 用于在浏览器中弹出警告框 document.write() 用于在网页中输出内容 console.log() 用于在控制台中输出信息 confirm() 用于提示是否确认事件 输入 prompt() 用于浏览器中弹出输入框，用户可以输入内容
3、注释单行注释：“//”
多行注释：“/**/”
二、JavaScript基本语法
2.1 变量
2.1.1 什么是变量？
变量指的是程序在内存中申请的一块用来存放数据的空间。变量由变量名和变量值组成，通过变量名可以访问变量的值
2.1.2 变量的命名规则
命名规则
-不能以数字开头，且不能含有+、-等运算符
-严格区分大小写
-不能使用JavaScript中的关键字命名
为了提高代码的可读性
要求“见其名知其意”，使用字母、数字、下划线和美元符号来命名，采用驼峰命名方法
多学一招：常见的关键字
JavaScript中常见的关键字
break case catch class const continue debugger default delete do else export extends finally for function if import in instanceof new return switch switch this throw try typeof var void this with yield enum let ——
未来保留关键字
implements package public interface private static protected —— ——
2.1.3 变量的声明赋值
先声明后赋值JavaScript中变量通常使用var关键字声明。变量声明完成后，默认值会被设定为undefined，表示未定义
//声明变量 var myName; var age,sex; //为变量赋值 myName = '小明'; age = 18; sex = '男';声明的同时并赋值
var myName = '小明';
【案例】交换两个变量的值
<script>
var leftHand = '筷子';
var rightHand = '勺子';
var temp = leftHand;
leftHand = rightHand;
rightHand = temp;
console.log(leftHand);
console.log(rightHand);
</script>
2.2 数据类型
2.2.1 数据类型分类
数据类型分类
| 数据类型 | 基本数据类型 | boolean（布尔型） |
| number（数字型） | ||
| string（字符串型） | ||
| null（空型） | ||
| undefined（未定义型） | ||
| bigInt（大整数型） | ||
| symbol（符号型） | ||
| 复杂数据类型 | object（对象型） |
2.2.2 常用数据类型
布尔型（boolean）只有true（表示成功或成立）和false（表示失败或不成立）
var flag1 = true; var flag2 = false;
数字型（number）JavaScript中共的数字可以分为整数和浮点数，数字前面可以用“+、-”表示正、负
//整数 var bin = 0b11010; //二进制 var oct = 032; //八进制 var dec = 26; //十进制 var hex = 0x1a; //十六进制 //浮点数 //标准格式 var fnum1 = -7.26; var fnum2 = 7.26; //科学计数法 var fnum3 = 3.14E6; var fnum4 = 8.96E-3; //JavaScript中的最大值和最小值 //Number.MAX_VALUE 最大值 //Number.MIN_VALUE 最小值字符串型（string）
JavaScript中使用单引号（''）或双引号（“”）来标注字符串
//单引号字符串 var num = ''; //空字符串 var slogan = '知识'; //双引号字符串 var total = ""; //空字符串 var str = "知识就是力量";字符串的单引号、双引号可以嵌套使用（不推荐）
如果单引号中使用单引号，或双引号中使用双引号，需要使用"\"对单引号或双引号进行转义
//单引号中包含双引号 var color = '"red"blue'; //"red"blue //双引号中包含单引号 var food = "'pizza'bread"; //'pizza'bread //单引号中包含单引号 var say1 = 'I\'m...'; //I'm... //双引号中包含双引号 var say2 = "\"Tom\""; //"Tom"JavaScript中常用的转义字符
转义字符 含义 \' 一个单引号字符 \" 一个双引号字符 \n 换行符 \t 水平制表符 \f 换页符 \b 退格符 \xhh 由两位十六进制数字hh表示的ISO-8859-1字符。如“\x61”表示“a” \v 垂直制表符 \r 回车符 \\ 反斜线 \0 空字符 \uhhhh 由 4位十六进制数字hhhh表示Unicode字符。如“\u597d”表示“好”
空型（null）空型只有一个特殊的null值，表示变量未指向对象，null小写才表示空型
var a = null; console.log(a); //null
未定义型（undefined）未定义型只有一个特殊的值undefined，表示声明的变量还未被赋值
var a; console.log(a); //undefined
多学一招：数字型中的特殊值Infinity（无穷大）-Infinity（无穷小）和NaN（Not a Number ，非数字）
2.2.3 数据类型检测
JavaScript提供了typeof操作符，可以利用typeof操作符进行数据检测，typeof操作符以字符串形式返回检测结果语法1：
typeof 需要进行数据类型检测的数据
语法2：
typeof(需要进行数据类型检测的数据)
console.log(typeof 2); //number console.log(typeof '2'); //string console.log(typeof true); //boolean console.log(typeof null); //object 历史遗留问题 console.log(typeof undefined); //undefined
2.2.4 数据类型转换
数据转换为布尔型数据
使用Boolean()可以将给定数据转换为布尔型数据，转换时代表空或者否定的值（如空字符串、数字0、NaN、null和undefined）会被转换为false，其余的值会被转换为true
数据转换为数字型数据
JavaScript提供了parseInt()、parseFloat()和Number()，可以将数据转换为数字型数据
parseInt()
parseInt()会直接省略数据的小数部分，返回数据的整数部分，使用parseInt()将数据转换为数字型数据
console.log(parseInt('123.4')); //123需要注意的是，使用parseInt()进行数据类型转换时，parseInt()会自动识别进制
console.log(parseInt('0xF'); //15如果“0xF”省略0x开头，parseInt()将无法自动识别，此时可以通过第2个参数设置进制数，进制数的取值为2~36
console.log(parseInt('F')); //NaN console.log(parseInt('F',16)); //15parseFloat()
parseFloat()会将数据转换为数字型数据中的浮点数
console.log(parseFloat('123.4'); //123.4 console.log(parseFloat('3.14e-2'); //3.14Number()
Number()用于将数据转换为数字型数据
console.log(Number('123.a'); //NaN console.log(Number('123.4'); //123.4不同类型数据转换为数字型数据的结果
待转换数据 parseInt()转换结果 parseFloat()转换结果 Number()转换结果 纯数字字符串 对应的数字 对应的数字 对应的数字 空字符串 NaN NaN 0 null NaN NaN 0 undefined NaN NaN NaN false NaN NaN 0 true NaN NaN 1
数据转换为字符串型数据JavaScript提供的String()或toString()进行转换，前者可以将任意类型数据转换为字符串型数据，后者只能将除null和undefined之外的数据类型转换为字符串型数据，toString()在进行数据类型转换时，可以通过参数设置，将数字转换为指定进制的字符串
var num1 = 12,num2 = 26; console.log(String(num1)); console.log(num1.toString()); console.log(num2.toString(2));
2.3 运算符
2.3.1 算术运算符
JavaScript中常用的算术运算符
运算符 运算 示例 结果 + 加 1+1 2 - 减 6-2 4 * 乘 6*6 36 / 乘 3/2 1.5 % 取模（取余） 5%7 5 ** 幂运算 2**3 8 ++ 自增（前置） a=2;b=++a; a=3;b=3 ++ 自增（后置 a=2;b=a++; a=3;b=2 -- 自减（前置） a=2;b=--a; a=1;b=1 -- 自减（后置） a=;b=a--; a=1;b=2
注意：在进行取模运算时，运算结果的正负取决于被模数（%左边的数）的正负，与模数（%右边的数）的正负无关· ··
多学一招 toFixed()方法
使用toFixed()方法可以规定浮点数的小数位，语法如下：
numObj.toFixed(digits)
numObj表示数字型数据或变量；digits表示小数点后数字的个数，超过该参数值会发生四舍五入，参数值介于0~20（包括20），如果忽略该参数，则默认值为0，该方法的返回值的结果是字符串
多学一招 隐式转换
JavaScript中，加号“+”可以用于字符串拼接，使用' '空字符和加号“+”连接其它数据，可以隐式转换为字符串类型，字符串通过算术运算符也可以隐式转换为数字类型
//利用隐式转换将数据转换为数字型数据
console.log('12'-0); //12
console.log('12'*1); //12
console.log('12'/1); //12
//利用隐式转换将数据转换为字符串型数据
console.log(12+''); //12
console.log(true+''); //true
console.log(null+''); //null
console.log(undefined+''); //undefined
【案例】根据用户输入的数据完成求和运算
<script>
var num1 = prompt('请输入第一个要进行运算的数据：');
var num2 = prompt('请输入第二个要进行运算的数据：');
var result = (Number(num1) + Number(num2)).toFixed(2);
if(result == 'NaN'){
alert('请输入合法的数据');
}else{
alert(result);
}
</script>
2.3.2 赋值运算符
小提示：当“+=”运算符左右两边同为字符串型数据或有一边为字符串型数据时，将进行字
符串拼接并赋值
2.3.3 比较运算符
注意：“==”和“!=”在比较不同类型的数据时，首先会自动将要进行比较的数据转换为相同的数据类型，然后进行比较，而运算符“===”和“!==”在比较不同数据类型的数据时，不会进行数据类型的转换
2.3.4 逻辑运算符
JavaScript中常用的逻辑运算符
运算符 运算 示例 结果 && 与 a&&b 如果a的值为true，则输出b的值；如果a的值为false，则输出a的值 || 或 a||b 如果a的值为true，则输出a的值；如果a的值为false，则输出b的值 ！ 非 a!b 若a为true，则结果为false，否则相反 注意：逻辑运算符在使用时，是按从左到右的顺序进行求值，因此运算时需要注意，可能会出现“短路”的情况。“短路”指的是，如果通过左表达式能够确定最终值，则不运算右表达式的值
2.3.5 三元运算符
三元运算符也称为三元表达式，使用问号“?”和冒号“:”两个符号来连接，根据条件表达式的值来决定问号后面的表达式和冒号后面的表达式哪个被执行，语法如下：条件表达式 ? 表达式1 : 表达式2
var age = 18; var status = age >= 18 ? '已成年' : '未成年'; console.log(status); //已成年
2.3.6 位运算符
位运算符用来对数据进行二进制运算，在运算时，位运算符会将参与运算的操作数视为由二进制数（0和1）组成的32位的串
注意：JavaScript中的位运算仅能对数字型的数据进行运算。在对数字进行位运算之前，程序会将所有的操作数转换为二进制，然后逐位运算例如：
使用“~15”对15进行按位“非”运算，过程如下：
~ 0000000 0000000 0000000 00001111
11111111 11111111 11111111 11111000
上述运算结果为补码，符号位（最左边的一位）是1表示负数，为了将其转换为十进制，我们需要计算其原码
11111111 11111111 11111111 11110000 补码
11111111 11111111 11111111 11101111 反码（补码减1）
10000000 00000000 00000000 00010000 原码
计算原码之后得到“~15”的结果对应的十进制数字为-16
2.3.7 运算符优先级
JavaScript中运算符的优先级
结合方向 运算符 无 （） 左 . [] new(有参数，无结合性) 右 new(无参数) 无 ++(后置) --(后置) 右 ! ~ -（负数） +（正数）++（前置）--（前置）typeof void delete 右 ** 左 * / % 左 + - 左 << >> >>> 左 < <= > >= in instatnceof 左 == != === !== 左 & 左 ^ 左 | 左 && 左 || 右 ?: 右 = += *= /= % <<= >>= >>>= &= ^= |= 左 ,
小提示：运算符优先级高低由上到下递减，同一个单元格的运算符具有相同的优先级，左结合方向表示同级运算符的执行顺序方向从左向右，右结合方向则表示同级运算符的执行顺序从右向左，小括号“()”是优先级最高的运算符，运算时，要先计算小括号内的表达式。当表达式中有多个小括号时，最内层小括号中的表达式优先级最高
【案例】计算圆的周长和面积
<script>
var r = prompt('请输入圆的半径');
r = Number(r);
var c = 2 * 3.14 * r;
var s = 3.14 * r * r;
alert('圆的周长为：' + c.toFixed(2));
alert('圆的面积为：' + s.toFixed(2));
</script>
2.5 流程控制
2.5.1 选择结构
if 语句语法格式1：
if(条件表达式){
语句块;
}
语法格式2:
if(条件表达式){
语句块1;
}else{
语句块2;
}
语法格式3：
if(条件表达式1){
语句块1;
}else if(条件表达式2){
语句块2 }
...
else if(条件表达式n){
语句块n;
} else{
语句块n+1;
}
<script> var score = 90; if(score >= 90){ console.log('优秀'); }else if(score >= 80){ console.log('良好'); }else if(score >= 70){ console.log('中等'); }else if(score >= 60){ console.log('良好'); }else{ console.log('不及格'); } </script>
switch语句语法格式
switch(表达式){
case 常量1：
执行语句;
break;
case 常量2：
执行语句;
break;
...
default
执行语句;
break;
}
<script> var week = 6; switch(week){ case 1: console.log('星期一'); break; case 2: console.log('星期二'); break; case 3: console.log('星期三'); break; case 4: console.log('星期四'); break; case 5: console.log('星期五'); break; case 6: console.log('星期六'); break; case 7: console.log('星期日'); break; default: console.log('请输入合法数1~7其中一个'); } </script>
【案例】查询水果的价格
<script>
var fruit = prompt('请输入要查询的水果');
switch(fruit){
case '苹果':
alert('苹果的价格是4元/斤');
break;
case '香蕉':
alert('香蕉的价格是3元/斤');
break;
case '西瓜':
alert('西瓜的价格是2元/斤');
break;
case '葡萄':
alert('葡萄的价格是10元/斤');
break;
default:
alert('没有此水果');
}
</script>2.5.2 循环结构
循环结构之一：while循环1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件 变量或表达式为boolean
③循环体
④迭代部分2、while的格式
①
while(②){
③
④
}执行过程：①→②→③→④→②→③→...→②
for和while可以相互转换
循环结构之一：do-while循环
1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件 变量或表达式为boolean
③循环体
④迭代部分2、while的格式
①
do{
③
④
}while(②);执行过程：①→③→④→②→③→④...→②
循环结构之一：for循环
1、java中规范了3种循环结构：for、while、do-while
2、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件 变量或表达式为boolean
③循环体
④迭代部分3、for循环的格式
for(①;②;④){
③；
}
执行过程：①→②→③→④→②→③→...→②“无限”循环的结果的使用
1、格式：while(true)或for(;;)
嵌套循环的使用
1、嵌套循环：是指一个循环结构A的循环体是另一个循环结构B
-外层循环：循环结构A
-内层循环：循环结构B2、说明：
①内层循环充当外层循环的循环体
②两层嵌套循环，外层循环控制行数，内层循环处理列数
③外层执行m次，内层循环执行n，内层循环的循环体执行m*n次
④实际开发基本不会出现三层循环，三层的循环结构少见
2.5.3 跳转语句
break和continue关键字的使用
使用范围 在循环结构中的作用 相同点
break： switch-case 在此关键字的后面不能声明执行语句
循环结构中 结束（或跳出）当前循环结构
continue： 循环结构中 结束（或跳出）当次循环2、带标签的break和continue
3、开发中，break的使用频率要远高于continue
【案例】输出金字塔
<script>
var str = '';
var level = prompt('请设置金字塔的层数');
//获取输入的纯数字，其余情况皆转为NaN
level = parseInt(level) && Number(level);
//判断用户输入是否合法
if(isNaN(level)){
alert('金字塔层数必须是纯数字');
}
//循环遍历金字塔的层数
for(var i = 1;i <= level;++i){
//计算“*”前的空格并累加到str中
var blank = level - i;
for(var k = 0;k < blank; ++k){
str += ' ';
}
//计算“*”的数量并累加到str中
var star = i * 2 - 1;
for(var j = 0;j < star; ++j){
str += '*';
}
//换行
str += '\n';
}
console.log(str);
</script>
三、数组
3.1 数组基本概念
java中的数组：储存很多数据的容器，特点：1.所有的数据的类型必须要一致
2.长度无法更改
javaScript中的数组：储存很多数据的容器，
特点：1.所有的数据的类型可以不一致
2.长度可以随意更改
数组是存储一系列值的集合，它是由一个或多个元素组成的，各元素之间使用逗号“,”分隔。
数组中的每个元素由“索引”和“值”构成。
索引：也可称为“下标”，用于识别元素，以数字表示，默认情况下从0开始依次递增。
值：元素的内容，可以是任意类型的数据。
3.2 如何创建数组
js中创建数组的两种方式：都要掌握1.静态声明:声明数组的同时，将元素值都定下来。
var arr = [1,2,3,4,5,6,7]; //java是大括号 JS是中括号
var arr = []; //创建一个长度为0的空数组
2.动态声明：暂时只声明，赋值放到后续进行
var arr = new Array();//声明了一个空数组（长度为0）
arr[0] = 1; arr[1] = 2;
动态声明的注意事项：
写法1：var arr = new Array(); 创建了一个长度为0的空数组
写法2：var arr = new Array(10); 创建了一个长度为10的空数组
写法3：var arr = new Array(1,2,3,4,5); 创建了一个长度为0的空数组
注意事项：写法2和写法3的区分。如果括号内部只有一个数字，就表示长度，而非值
如果有若干个，才表示值
3.3 数组的基本操作
//常见的数组操作1:获取指定位置的元素 语法:arr[index] 下标从0开始//常见的数组操作2:获取数组的长度，通过属性，xxx.length
// 注意事项:Java中获取数组长度通过方法：xxx.length()
//常见的数组操作3:遍历数组,根据for循环进行遍历
var arr = [1,2,3,"语文" , true , 22.22 , undefined , null];
// console.log(arr[5]);//获取下标为5的元素
// console.log(arr.length);
// for(var i = 0 ;i<arr.length;i++){
// console.log(arr[i]);
// }
//常见的数组操作4:随意地更改数组的长度
console.log("数组修改之前的长度为" + arr.length);
//方法1: 简单操作直接修改 ,不推荐
// arr.length = 100;
// console.log("数组修改之后的长度为" + arr.length);
//方法2:直接在数组的后面添加元素即可
arr[8] = "新元素1";
arr[9] = "新元素2";
arr[19] = "新元素3";
//修改元素
arr[0] = 111;
console.log("数组修改之后的长度为" + arr.length);
for(var i = 0 ;i<arr.length;i++){
console.log(arr[i]);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
//删除数组中指定的元素
var arr = [1,2,3,4,5];
// console.log(arr);
// delete arr[2];//准确地说法应该是: 讲指定位置的元素 修改成 empty而已 并没有实现真正的删除.
// console.log(arr);
//如何实现真正的删除: Java也好JS也好 都没有直接提供相对的方法.
//思路:创建一个新的数组,然后旧数组遍历 赋值给新数组.然后遍历的时候进行判断,如果到了那个值不想要,跳过
// var arr1 = [ ];
// var index = 0;
// for(var i = 0 ; i<arr.length;i++){
// if (arr[i]==3) {
// continue;
// }
// arr1[index] = arr[i];
// index++;
// }
// console.log(arr);
// console.log(arr1);
3.4 找出最大小值
var arr =[12,324,543,654,6,547,3,5443,534,5654,654,654,7,5,765];//查找出最大值和最小值
var max = arr[0];
var min = arr[0];
for(var i = 0 ;i<arr.length;i++){
if( arr[i] > max ){
max = arr[i];
}
if(arr[i]<min){
min = arr[i];
}
}
console.log(max + "~~" + min);
3.5 菲波那切数列
/*该数列又称为为兔子数列， 源自于澳大利亚的兔子衍生事件
若干年以前 一位农夫不小心弄丢了一对兔子，然后2年以后他的农场就没了
原因：兔子不仅可以公母繁殖，还可以公公 母母繁殖
兔子的繁殖能力特别强，强到什么地步 如下：
每对兔子 每第三个月都能够产下一对兔子。然后后续每个月都能产下一对兔子
问第10个月有多少对兔子：假设一开始就一对。
月份 对数
1 1
2 1
3 2 原有的一对 + 生下来的1对
4 3 原有的一对 + 生下来的2对
5 5 原有的一对 + 生下来的3对 + 最开始生下来的又生了
6 8
7 13
8 21
*/
//规律: 从第三个月开始 每个月的兔子数 = 前第1个月 + 前第2个月
//要求:显示前10对兔子的对数
var arr = new Array(10);
arr[0] = 1;
arr[1] = 1;
for(var i = 2;i<arr.length;i++){
arr[i] = arr[i-1] + arr[i-2];
}
console.log(arr)
3.6 数组排序
//数组的排序非常重要: 成绩 销量 热度 等等属性 都需要进行排序var arr = [78,6213,5544,5432,213,654,756,767,654,876,87,69789,789,78];
//要求:从小到大排序.
//最常见的排序算法 : 冒泡排序
//相邻的两个数比较然后根据需求进行替换
//步骤1: 需要判断多少轮 arr.length-1
for(var i = 0 ; i<arr.length-1;i++){
//步骤2:比较 第i个数 和 后续的数一一比较 问题:比较多少次 arr.length-1-i
for(var j = i+1 ; j<arr.length;j++){
if(arr[i]>arr[j]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
3.7 二维数组
/*javaScript中的数组：数据的类型可以不一致
也就是意味着数组里面可以再次存储数组 来实现二维甚至多维数组
一般来说掌握二维数组就够了。
二维数组：可以看成 几行几列
*/
//声明二维数组的语法:
//语法1: var arr = new Array( new Array(10) , new Array(9) , new Array(12) );
//语法2: var arr = [ [1,3] , [11,22,33] , [33,22,55] ];
/*
var arr = [
[1,2],
[2,3,4],
[4,5,6]
]
*/
//例题:如何创建一个二维数组,要求长度为100 且二维数组里面的每个数组长度也为100,暂时不知道元素内容
//写法1： 不推荐 var arr = new Array( new Array(10) , new Array(10) , new Array(10) , ... ,new Array(10) );
//写法2:
// var arr = new Array(100);//仅仅是一个一维数组
// for(var i = 0 ; i<100;i++){
// arr[i] = new Array(100);
// }
// console.log(arr);
//遍历二维数组思路: 先将二维数组看成一维数组
// var arr = [ [1,2,3,4] , [5,6,7,8] , [11,22,33,44] ];
// //如何遍历
// //1.先遍历总长度
// for(var i = 0 ; i<arr.length ; i++){
// //2.在遍历数组里面的数组
// for(var j = 0 ; j<arr[i].length ; j++){
// console.log(arr[i][j]);
// }
// }
// //如何获取二维数组中指定的数
// var index = arr[1][2] ; //7
// var index = arr[2][1] ; //22
//利用二维数组实现杨辉三角 姓名为杨辉吃饱了没事做,发明的一个三角形
//将杨辉三角的前10行打印在页面上.
/*
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
1 5 10 10 5 1
1 6 15 20 15 6 1
*/
//思路:1.找规律 几行几列的三角形 10行 和 "和行数相等的" 列
//第几行就有几列
//转换成二维数组,我们应该创建一个 长度为10的二维数组 ,然后数组里面的长度随之改变
var arr = new Array(10);
for(var i = 0;i<arr.length;i++){
arr[i] = new Array(i+1);
}
//以上就声明了一个可以容纳的容器
//赋值:
for(var i = 0 ; i<arr.length;i++){//i行数
for(var j = 0 ; j<arr[i].length ; j++){//j列数
if( j==0 || j==i ){
arr[i][j] = 1;
}else{
arr[i][j] = arr[i-1][j] + arr[i-1][j-1];
}
}
}
//以上知识点 均没有实际意义,单纯就是提升自己思维能力.解决问题的能力
for(var i = 0 ; i<arr.length;i++){
for(var j = 0 ; j<arr[i].length ; j++){
document.write(arr[i][j] + " ");
}
document.write("<br>");
}
四、函数
4.1 函数的相关概念
/*JavaScript的函数理解为Java里面的方法，
把一些经常复用的代码，抽取出来封装在一个函数中。
提高程序的可读性，减少开发者的工作量，便于后期的维护。
Java中的方法的语法：
public 返回类型 方法名(数据类型 变量名 , 数据类型 变量 ...){
}
js中函数的分类：
A.内置函数（JS提供的）: console.log(); alert() confirm parseInt... ：
B.自定义函数（程序员自己写的）
其中自定义函数的声明语法如下：
function 方法名(变量名，变量名...){
}
调用： 方法名(参数列表);
函数定义与调用的编写顺序不分前后。
你可以先调用函数，再声明函数
*/
//声明一个无参函数
function a1(){
console.log(123);
}
a1();
//声明一个指定个数的有参函数
function a2(a,b,c){
console.log(a+b+c);
}
a2(1,2,3);
//声明一个若干个数的有参函数
function a3(... a){
for(var i = 0 ; i<a.length ; i++){
console.log(a[i]);
}
}
a3(1,1.1,true,undefined,null,"你好");
//有返回值的函数
function a4(a,b){
return a + b;
}
var sum = a4(10,20);
alert(sum)
4.2 变量的作用域
/*和Java一样 JS的变量也分为局部变量和全局变量（Java的叫法是成员变量，只是概念和全局类似）
*/
function info() {
var age = 18;
}
info();
console.log(age);
//思考以上代码的执行结果是什么
//A.18 B.报错 C.null D.undefined
//答案:B 提示:age is not defined 表示未定义
//原因如下:age是在函数里面定义的理解为局部变量.但是console.log是在函数外调用的.
/*
全局变量：在所有函数之外声明（script标签内部的最开始几行），它的作用域称为全局作用域，在同一个页面文件中的所有脚本内都可以使用。
局部变量：在函数体内利用var关键字声明的变量称为局部变量，仅在该函数体内有效。
*/
4.3 函数进阶
//以下知识点掌握即可:用的很少,但是看到了需要知道意思.//函数的声明 一般就是上面两个知识点即可.就是利用function声明
//不仅有函数 还有一个叫做函数表达式的东西
//函数表达式指的是将函数赋值给变量的表达式，
// 通过“变量名()”的方式即可完成函数的调用，小括号“()”内可以传入参数，示例代码如下。
//函数的写法:
function a1(a){
console.log("我被调用了。参数是" + a)
}
a1(123);
//函数表达式的写法:
var abc = function (a){
console.log("我被调用了。参数是" + a)
};
abc(567);
4.4 匿名函数
// 匿名函数自调用:HTML页面解析之后 自动执行的一段代码.只会执行一次.//例如跳转网页之后提示:登录成功 加载成功
//语法如下:
// (function(){
// alert("登录成功！！！");
// })();
//下面是函数叫做a的函数
function a(){
alert(123);
}
//匿名函数指的就是:没有函数名的函数 但是又拥有了变量名
var a = function(){
alert(456);
}
4.5 箭头函数
//箭头函数了解即可:和函数表达式一样 比较鸡肋, 但是需要能看懂它.//以下3个函数的实际意义完全一样.
function sum(a,b){
return a + b;
}
var fn = (a, b) => a + b;
var fn = (a,b) => {
return a + b;
};
4.6 递归函数
//递归函数:了解即可. 函数的内部调用自己函数本身.//优点:代码简化. 缺点:难得想
//例如声明一个函数 求1-N的和
function sum(n){
var sum = 0;
for(var i = 1 ;i<=n;i++){
sum = sum + i;
}
return sum;
}
var i = sum(100);
alert(i);
//递归的核心1:鸿沟(临界值)
function sumDg(n){
if(n==1){
return 1
}else{
return n + sumDg(n-1);
}
}
alert(sumDg(100));
//案例:求菲不拉切序列 1 1 2 3 5 8 13 21
//求第N项值
function dg(n){
if(n==1 || n == 2){
return 1;
}else{
return dg(n-1) + dg(n-2);
}
}
五、对象
5.1 对象的概念
/*
在JavaScript中，对象属于复杂数据类型，
它是由属性和方法组成的一个对象。
属性是指对象的特征。
方法是指对象的行为。
下面以学生的特征和行为为例进行说明。
学生的特征：姓名、年龄和性别，这些特征可以用对象的属性来表示。
学生的行为：打招呼、唱歌、写作业，这些行为可以用对象的方法来表示。
*/
//将10个学生的成绩输出在页面上。
var arr = [1,2,32,543,65,35,35,654,46,31];
for(var i = 0 ;i<arr.length;i++){
if(i==arr.length-1){
document.write(arr[i] );
}else{
document.write(arr[i] + ',');
}
}
document.write("<hr>");
//将10个学生的全部信息(id name age sex)输出在页面上。
//传统的思路:定义40个变量 或者4个数组 或者二维数组等等
//按照对象的思想:10个学生理解10个对象 将10个对象放在一个数组里面即可
var s1 = {id:1001,name:"张三1" , age:18};
var s2 = {id:1002,name:"张三2" , age:18};
var s3 = {id:1003,name:"张三3" , age:18};
var s4 = {id:1004,name:"张三4" , age:18};
var s5 = {id:1005,name:"张三5" , age:18};
var s6 = {id:1006,name:"张三76" , age:18};
var s7 = {id:1007,name:"张三7" , age:18};
var s8 = {id:1008,name:"张三8" , age:18};
var s9 = {id:1008,name:"张三9" , age:18};
var s10 = {
id :10010,
name:"张三",
age:20,
};
var arr = [s1,s2,s3,s4,s5,s6,s7,s8,s9,s10];
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i] );
// }else{
// document.write(arr[i] + ',');
// }
// }
//注意:上述写法 打印的仅仅是外观的Object而非内部的属性。
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }else{
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }
// }
//以上写法较为麻烦
for(var i = 0 ;i<arr.length;i++){
for(var sx in arr[i]){
document.write(arr[i][sx]);
}
document.write("<br>")
}
5.2 创建对象
//判断一个变量是否为对象的小技巧:通过console.log打印.//如果打印的是一行字符串 就说明是基本数据类型
//如果打印的是一个可以折叠的数据 就表示对象
// var a = 11;
// console.log(a);
// var arr = [1,2,3,4];
// console.log(arr);
/*
如何创建一个JS的对象：
方法1：使用对象的字面量创建对象（理解为直接赋值）
例如：var arr = [1,2,3];，//静态声明数组 字面量创建
就是用大括号“{}”来标注对象成员，
每个对象成员使用键值对的形式保存，即 “key: value”的形式。
多个成员通过逗号隔开
键指的就是独一无二的属性
*/
// var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' } ;
// //其中键可以选择性的加引号
// console.log(student1);
// //如何访问对象里面的值的方法1: 通过对象名.属性名即可
// console.log(student1.id + "~" + student1.name + "~" + student1.age );
// //如果存在一些命名不规范的变量 无法通过对象名.属性名访问
// // console.log(student1.sex-sex);这行代码是报错的
// //访问对象里面的值的方法2:通过对象名[属性名]
// console.log(student1['sex-sex']);
// console.log(student1['name']);
//创建对象的补充:如果一开始只知道有对象,但是不知道它有什么属性或属性值,
//那么可以先创建一个空对象壳子
// var s123 = {};
// //后续再声明属性的同时进行赋值
// s123.id = 123;
// s123.name = "Lisi";
// s123.age = "男";
// console.log(s123.id);//123
// console.log(s123.dasd);//undefined
//创建对象的方法2:
//第一步:创建对象的函数(想象成Java的构造函数)
// function Person(id,name,age){
// this.id = id;
// this.name = name;
// this.age = age;
// }
// //第二步:new对象
// var p1 = new Person(123,"王五" , 20);
// console.log(p1);
//使用场景:如果对象很多 就用方法2 反之方法1
//补充:对象由:属性和方法
// var s1 = {
// id :11,
// name:"张三",
// age :18,
// study : function(){
// alert("成功调用了这个对象的这个方法");
// }
// };
// alert(s1.id);
// s1.study();
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
this.eat = function(){
alert("我吃拉面");
}
}
//第二步:new对象
var p1 = new Person(123,"王五" , 20);
p1.eat();
//创建对象的方法3:
//如果谁不知道给对象取什么名字,就叫做Object
var o = new Object();
o.id=1231;
o.name="李四";
console.log(o);
5.3 如何遍历一个对象
// var arr = [1,2,4,3];// console.log(arr);
var s10 = {
id :10010,
name:"张三",
age:20,
sex:'男',
height : 188,
weight :200
};
// console.log(s10);
//由于直接输出s10将只会显示object我们需要内部的属性值/
//方法1:如果只需要某一个属性值, 直接通过s10.属性名即可
//方法2:如果所有的属性值都需要,那么也可以通过s10.属性名 只是比较麻烦.
//学习:如何遍历对象:语法如下:
// for(var i = 0;i<a10.length;i++){
// //错误的写法:1.对象的键并不是012 其次对象并没有长度
// }
//i表示对象的下标(属性) s10表示遍历的对象
for(var i in s10){
console.log(s10[i]);
}
5.4 值对象和引用对象
//JS的参数传递 也分为值传递和引用传递var a = 111;
var b = "你好";
var c = true;
var d = [1,2,3];
function change(a,b,c,d){
a = 222;
b = "我好";
c = false;
d[0] = 123;
}
change(a,b,c,d);
console.log(a);//111
console.log(b);//你好
console.log(c);//true
console.log(d[0]);//123
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
