文章目录
1. 数组
一组数据的集合,将一组数据存在一个变量内
var num = [1,2,3,4,5]; // num 变量内存储 5 个值
1. 创建数组
a.new创建;
var 数组名 = new Array();
var arr = new Array(); // 创建一个新的空数组
b.数组字面量创建;
var 数组名 = [];
var arr = [1, 2, 'IU', true]; // 数组中可放任意的值,数组里面的值用逗号隔开,数组中的值称为数组元素
2. 获取数组中的元素(提取数组元素中的某一项)
索引(下标):用来访问数组元素的序号(数组下标从0开始)
表达形式:数组名[索引号]
var arr = ['小白','小黑','小黄','小红'];
索性号 0 1 2 3
console.log(arr[3]); // 输出为小红
3. 遍历数组(提取数组中的全部元素)
将数组中的每个元素访问一次;利用循环,可一次性将数组中的元素全部提取出来
var arr = ['小白','小黑','小黄','小红'];
for (var i = 0; i < 4; i++){
console.log(arr[i]);
} // 因为数组索引号从0开始,所以i=0;且索引号到3结束,所以i<4;
4. 数组长度
a. 使用“数组名.length“可以访问数组元素的数量
b. 数组的长度是元素的个数,不能加等于号
var arr = ['小白','小黑','小黄','小红'];
for (var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
❤️案例:求[2,6,1,7,4]里面所有元素的和以及平均值
var sum = 0;
var aver = 0;
var arr = [2, 6, 1, 7, 4];
for (var i = 0; i < arr.length; i++) {
sum = sum + arr[i]; // i是计数器,这里需要的是数组元素相加,所以应该为sum+arr[i];
}
aver = sum / arr.length; // 用sum/数组元素个数即可得出平均值;
console.log(sum,aver); // 输出多个变量用逗号隔开
❤️案例:求[2, 6, 1, 77, 52, 25, 7]中的最大值
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = arr[0]; // 设置一个存储最大值的变量为数组元素中的第一个数
for (var i =1; i < arr.length; i++){ // 因为已经将数组元素中的第一个数赋值给max,所以i可以从索引号1开始比较
if (arr[i] > max){
max = arr[i]; // 设置if条件:当数组元素大于max的值时,替换掉max中的原值,即可得出最大值
}
}
❤️案例:将数组['red', 'blue', 'green']输出为:red|blue|green|
var arr = ['red', 'blue', 'green'];
var str = '';
var sep = '|';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + sep;
}
5. 数组中新增元素
a. 通过修改length长度新增数组元素
var arr = ['red', 'blue', 'green'];
arr.length = 5; // 把数组长度修改为5,数组中应该有5个元素,后面增加的值为默认值:undefined;
b. 通过修改数组索引新增数组元素
var arr = ['red', 'blue', 'green'];
arr[3] = 'IU'; // 输出arr数组元素为4个,新增一组元素:IU;
arr[0] = 'yellow' // 输出第一个数组元素被替换为yellow;
arr = 'hz' // 如果直接给数组名赋值会覆盖掉前面的数组元素;
❤️案例:设置一个数组,数组元素为1~10;
var arr = []; // 设置一个空数组
for (var i = 0; i < 10; i++) { // 索引从0开始,所以i=0;1-10位10个数,所以i<10;
arr[i] = i + 1; // 因为从0开始,所以需i+1;因需输出数组,所以需arr[i]=i;
}
❤️案例:将数组[2, 0, 6, 1, 77, 0, 52, 25, 7]中大于等于10的数组成一个新的数组
方法A:
var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
var arr1 = []; // 将新数组设置一个变量赋值为空数组;
var j = 0; // 设置一个新数组的索引变量为0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
arr1[j] = arr[i]; // 新数组应该从0开始依次递增
j++;
}
}
方法B:
var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
var arr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
arr1[arr1.length] = arr[i]; // 设arr1.length检测数组元素,
}
}
6. 数据排序(冒泡排序)
是一种简单算法,可以将一系列数据按照一定的顺序进行排列(从小到大或从大到小)
// 将数组从小到大排列
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; i++){ //里层循环管理的是每一次交换时的次数
// 内部交换两个变量值,前一个与后一个相比较
if(arr[j] > arr[j + 1]){
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
// 方法二
var arr = [1,3,2,5,4];
arr.sort(); // 只能实现个位数从小到大排序
console.log(arr); // 输出为[1,2,3,4,5];
arr.sort(function(a,b){ // 可以实现多位数排序
return a - b; // 升序排列
return b - a; // 降序排列
})
7. 翻转数组
将数组[2, 0, 6, 1, 77, 0, 52, 25, 7]内容反过来输出
var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
var arr1 = [];
for (var i = arr.length - 1; i >= 0; i--) {
// 将新数组的最后一个(arr.length - 1)给新数组索引第0个元素(arr1.length);新数组元素索引从0开始所以i>=0;采取递减形式
arr1[arr1.length] = arr[i];
}
// 方法二
var arr =[1,2,3,4];
arr.reverse();
console.log(arr); // 输出为[4,3,2,1]
2. javascrip 函数
1. 函数的概念
a. 封装一段可以被重复执行调用的代码块,为了让大量代码重复使用
b. 封装:把一个或多个功能通过函数进行封装,对外只提供一个简单的函数接口
2. 函数的使用
a. 申明函数 // 函数时做某些事,函数名一般用动词;函数不调用自己不执行
function 函数名(){
// 函数体(函数代码);
}
b. 调用函数 // 调用函数时勿忘加小括号
函数名();
❤️案例:利用函数计算1~100总和
function getSum(num1,num2){
var sum = 0;
for (var i = num1; i <= num2; i++){
sum += i;
}
}
getSum(1,100); // 1~100的总和
getSum(10,50); // 10~50的总和
3. 函数的参数
// 参数的作用:在函数内部的值不固定时,可通过参数在调用函数时传递不同的值进去
function 函数名(形参1,形参2...){
// 在声明函数的小括号内是形参(形式上的参数)
}
函数名(实参1,实参2...); // 在函数调用的小括号内是实参(实际的参数)
形参与实参的执行过程:
function cook(aru){ // 形参类似于一个变量,是接收实参的
console.log(aru);
}
cook('IU');
a. 先进行函数调用,在进行函数判断
b. 调用函数后,实参的值赋值给形参,进行代码输出
❤️案例:利用函数求任意两个的和
function getSum(num1, num2){
console.log(num1 + num2);
}
getSum(1,100); // 输出为101,多个参数用逗号隔开
⚠️ 函数实参与形参个数不匹配的情况
function getSum(num1, num2){
console.log(num1 + num2);
}
getSum(1,2,3); // 输出为3,多出的实参3,不会加入运算
getSum(1); // 输出为NaN,num2未赋值为undefined,数值+undefined=NaN
4. 函数的返回值
a. return语句:将函数返回值返回给函数调用者
b. return是终止函数,return后的代码不会执行;
c. return只会返回一个值,多个值的情况会返回最后一个值;
d. 函数中没有return返回的值为undefined;
function 函数名(){
return 需要返回的结果; // 当函数遇到return会把后面的结果返回给函数的调用者;函数名()=return后面的结果;
}
函数名();
function cook(aru){
return aru;
}
console.log(cook('IU')); // 输出为IU
❤️案例:求两个数的最大值
function getMax(num1,num2){
if(num1 > num2){
return num1;
} else {
return nmu2;
}
}
console.log(getMax(1,2)); // 输出为2
❤️案例:利用函数求数组中的最大值
function getMax(arr){
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (age[i] > max) {
max = age[i];
}
}
return max;
}
var re = getMax([5,2,99,101]); // 实际开发中常用一个变量接收函数的返回结果
console.log(re); // 输出为101;
5. arguments 的使用
a. 当不确定有多少个参数传递的情况下,可以用arguments来获取
b. arguments是当前函数的一个内置对象,argumets对象中存储了传递的所有实参
c. 展示形式是一个伪数组(不是真正意义上的数组),伪数组的特性:
i. 具有数组的length属性;
ii. 按照索引的方式进行存储;
iii. 没有真正数组的一些方法;
function fn(){
console.log(arguments); // 里面存储了所有传递过来的实参。输出[1,2,3];
console.log(arguments[2]); // 输出为3
}
fn(1,2,3);
function age(){
for (var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
}
❤️案例:利用函数求最大值
function getMax(){
var max = arguments[0];
for (var i = 1; i < arguments.length; i++){
if(arguments[i] > max){
max = arguments;
}
}
return max;
}
6. 函数相互调用
function fn1(){
fn2(); // 在fn1中调用fn2函数
}
fn1();
function fn2(){
}
// 用户输入年份,输出当前年份2月份的天数
function backDay() {
var year = prompt('请输入一个年份');
if (isRunYear(year)) { // 调用isRunYear函数
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;
}
7. 函数的两种声明方式
a. 利用函数关键字自定义函数
function fn(){} // 定义函数
fn(); // 调用函数
b. 函数表达式(匿名函数)
var 变量名 = function(){} // 利用变量定义函数
变量名(); // 调用函数
var fun = function(aru){
console.log(aru);
}
fun('IU'); // 输出IU
❤️案例
// 利用函数翻转任意数组
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); // 输出结果为[5,4,3,2,1]
// 利用函数封装冒泡排序
function aort(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] = remp;
}
}
}
return arr;
}
var arr1 = aort([1,2,3,4,5]);
console.log(arr1);
// 输入年份,判断是否为闰年
function isRunYear(year){
// 如果是闰年返回true 否则返回false
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
flag = true;
}
return flag;
}
3. javaScrip作用域
a. 代码名字(变量)在某个范围内起作用和效果
b. 目的是为了提高程序的可靠性,更重要的是减少命名冲突
1. js作用域(es5)的分类
a. 全局作用域:整个script标签中或一个单独的js文件(在全局下都能调用)
b. 局部作用域:在函数内部就是局部作用域(只在函数内起作用和效果)
c. 在不同作用域下相同变量名不会冲突
d. es5中js没有块级作用域。es6中有(块级作用域是{}中的内容)
2. 变量作用域的分类
a. 全局变量:整个script标签中或一个单独的js文件(在全局下都能调用)
b. 局部变量:在函数内部就是局部作用域(只在函数内起作用和效果)
c. 如果在函数内部没有声明,直接赋值的变量也属于全局变量
d. 函数的形参也属于局部变量
e. 全局变量只有浏览器关闭时才会销毁,占内存资源大;局部变量在程序执行完毕就会销毁,比较节约内存资源
3. 作用域链
var num = 1;
function fun(){
var num = 2;
function fn(){
console.log(num); // 输出为2,作用域链会一层层向外查找相应的数据;
}
}
4. javaScrip预解析
a. js引擎运行js分为两步:预解析和代码执行
b. 预解析:js引擎会把js里面的var还有function提升到当前作用域的最前面
c. 代码执行:按照代码书写的顺序从上往下执行
a. 变量预解析(变量提升):将所有的变量声明提升到当前的作用域最前面,不提升赋值操作
console.log(num);
var num = 10; // 输出为undefined
b. 函数预解析(函数提升):将所有的函数声明提升到当前的作用域最前面,不调用函数
fun();
function fun(){
console.log(11);
} // 可正常输出11结果
❤️案例:
var num = 10;
fun();
function fun(){
console.log(num);
var num = 20;
}
// 执行代码如下:
var num; // 变量提升到全局的最前面
function fun(){ // 函数提升到全局的最前面
var num; // 变量提升到当前函数作用域的最前面
console.log(num); // 输出结果为undefined,当前num未赋值
num = 20;
}
num = 10;
fun();