投稿
  1. 极客之音首页
  2. 技术随笔

JavaScript入门到精通（三）连载

飞熊 • • 技术随笔 • 阅读 244

生活中，最使人疲惫的往往不是道路的遥远，而是心中的郁闷;最使人痛苦的往往不是生活的不幸，而是希望的破灭;最使人颓废的往往不是前途的坎坷，而是自信的丧失;最使人绝望的往往不是挫折的打击，而是心灵的死亡。所以我们要有自己的梦想，让梦想的星光指引着我们走出落漠，走出惆怅，带着我们走进自己的理想。

导读：本篇文章讲解 JavaScript入门到精通（三）连载，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：JavaScript专栏

🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

入门JavaScript

今天只有两个目的，搞懂数组和函数这俩大模块。也是干货满满，希望对你有所帮助吧，话不多说，直接开始。

1.数组

嗯~，以举例代码表示吧，由浅入深，带你深入了解数组以及操作数组的方式。

1.1 创建数组的方式

//利用new创建数组
var arr = new Array();
//利用数组字面量创建数组[]
var arr = [];

1.2 遍历数组

var arr = ['red','yello','green','blue'];
for(var i =0;i<arr.length;i++){
    console.log(arr[i]);
}

JavaScript入门到精通（三）连载

1.3 计算数组的和以及平均值

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);

JavaScript入门到精通（三）连载

1.4 计算数组元素的最大值

var arr = [2,5,1,4,6,8,0];
var max = arr[0];
for(var i=1;i<arr.length;i++){
    if(arr[i]>max){
        max = arr[i];
    }
}console.log('该数组里面的最大值是：'+max);

JavaScript入门到精通（三）连载

1.5 数组转换成字符串

var arr = ['red','green','blue','pink'];
var str = '';
for (var i = 0; i<arr.length; i++){
    str+=arr[i]+'|';
}console.log(str);

JavaScript入门到精通（三）连载

1.6 通过修改length长度新增数组元素

var arr = ['red','greed','yellow','blue'];
arr.length = 5; 
console.log(arr[4]); //声明变量未给值，默认就是undefined

JavaScript入门到精通（三）连载

1.7 新增数组元素，修改索引号，追加数组元素

var arr1 = ['red','greed','blue'];
arr1[3] = 'yellow';
console.log(arr1);
arr1[0] = 'orange' //这里替换原来的数组元素
console.log(arr1);
arr1='什么我不知道';
console.log(arr1);//不能直接给数组名赋值，否则里面的数组元素都会没有

JavaScript入门到精通（三）连载

1.8 存放数组1~10个数

var arr = [];
for(var i = 0;i<10;i++){
    arr[i]=i+1;
}console.log(arr);

JavaScript入门到精通（三）连载

1.9  筛选数组 例：找到大于10

//遍历原来旧数组找到自己想要的元素并追加到新数组当中
var arr = [2,0,6,1,77,0,54,32,25,7];
var newArr = [];
var j = 0;
for(var i=0;i<arr.length;i++){
    if(arr[i]>10){
        //新数组应该从零开始，依次递增
        //方法一
        newArr[j]=arr[i];
        j++;
        //方法二，刚开始newArr.length就是0,newArr.length会根据数组个数的增加而增加
        //newArr[newArr.length]=arr[i]; 
    }
}console.log(newArr);

JavaScript入门到精通（三）连载

1.10 删除数组的指定元素

var arr = [2,0,6,1,77,0,54,32,25,7];
var newArr = [];
for(var i = 0;i<arr.length;i++){
    //如果arr[i]不等于0执行下面语句，相当于删除0，如果删除数组没有元素，整句输出
    if(arr[i] !=0){ 
        newArr[newArr.length]=arr[i];
    }
}console.log(newArr);

JavaScript入门到精通（三）连载

1.11 翻转数组

var arr = ['red','greed','yellow','blue'];
var newArr = [];
for(var i = arr.length-1;i>=0;i--){
    newArr[newArr.length] = arr[i];
}console.log(newArr);

JavaScript入门到精通（三）连载

1.12 经典案例 冒泡排序

var arr = [2,4,5,1,3];
for(var i = 0;i<=arr.length;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);

JavaScript入门到精通（三）连载

 数组的基本操作差不多就这些，后期遇到其它的在补充。

JavaScript入门到精通（三）连载

2.函数

2.1 定义：

函数就是封装了一段可以被重复执行调用的代码块  目的：就是让大量代码重复使用

2.2 函数形参与实参的关系

function getSum (num1, num2) { //在声明函数的小括号里面是 形参 （形式上的参数）
    var sum = 0;
    for (var i = num1; i < num2; i++) {
        sum += i;
    } console.log(sum);
}
//1.如果实参的个数和形参一致，正常输出结果
getSum(1, 50); //在函数调用的小括号里面是实参（实际上的参数）

//2.如果实参的个数多于形参的个数，会取到形参的个数
getSum(1, 50, 30);

//3.如果实参的个数小于形参的个数，多于的形参定义为undefined 最终的结果可能是 NaN或0
getSum(1);

// 所以尽量形参个数匹配实参个数

JavaScript入门到精通（三）连载

2.3 函数的返回值语句

定义：我们希望函数将值返回给调用者，此时通过使用return语句实现

//函数返回值格式
function 函数名(){
    return 需要返回的结果；
}
函数名();

举例：两数求和；求两数的最大值；利用函数求数组[5,2,99,101,67,77]中的最大值。

//两数求和
function getSum (num1, num2) {
    return num1 + num2;
} console.log(getSum(1, 3));

//求两数最大值
function getMax (num1, num2) {
    // if(num1>num2){
    //     return num1;
    // }else{
    //     return num2;
    // }
    return num1 > num2 ? num1 : num2;
}console.log(getMax(1, 9));

//利用函数求数组[5,2,99,101,67,77]中的最大值。
function getArrMax (arr) {
    var max = arr[0];
    for (var i = 1; i <= arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}
// getArrMax([5,2,99,101,67,77])实参是一个数组传递过去
// 在实际开发中，经常用一个变量来接受 函数返回的结果 使用更简单
var re = getArrMax([5, 2, 99, 101, 67, 77]);
console.log(re);

JavaScript入门到精通（三）连载

注意事项：

1. return 终止函数

function getSum (num1, num2) {
    return num1 + num2; //return 后面的代码不会被执行
    alert('我真的想被执行啊！')
}
console.log(getSum(1, 4));

JavaScript入门到精通（三）连载

2. return 只能返回一个值，而且是最后的一个值

function fn (num1, num2) {
    return num1, num2; //返回的结果只能是一个值
}
console.log(fn(1, 2));

JavaScript入门到精通（三）连载

3. 求任意两个数的加减乘除结果

function getResult (num1, num2) {
    return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1, 2); //返回的是一个数组
console.log(re);

JavaScript入门到精通（三）连载

4. 函数如果有return 则返回的是return后面的值，如果函数没有return 则返回undefined

function fun () {
    // return 666;
} console.log(fun());

JavaScript入门到精通（三）连载

5. 补充： break、continue、return的区别

break：结束当前的循环体（for、while）

continue：跳出本次循环、继续执行下次循环（如for、while）

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

2.4 arguments使用

定义：只有函数才有arguments对象 而且是每个函数都内置好了这个arguments

function fn () {
    console.log(arguments); //里面存储了所有传递过来的参数
    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);
// 伪数组 并不是真正意义上的数组
// 1.具有数组的length属性
// 2.按照索引的方式进行存储的
// 3.它没有真正数组的一些方法 pop() push() 等等

JavaScript入门到精通（三）连载

 案例：利用arguments求任意个数的最大值

function getMax() {
    var max = arguments[0];
    for(var i = 0;i<arguments.length;i++){
        if(arguments[i]>max){
            max = arguments[i];
        }
    }return max;
}
console.log(getMax(1,2,3));
console.log(getMax(1,56,6,65,64));
console.log(getMax(1,2,3,42,44,422));

JavaScript入门到精通（三）连载

2.5 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,3,2,6,9]); 
console.log(arr1);

JavaScript入门到精通（三）连载

2.6 函数冒泡排序 sort排序

function sort(arr) {
    for(var i = 0;i<arr.length;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([7,4,6,9]);
console.log(arr1);

JavaScript入门到精通（三）连载

2.7 函数判断闰年

function isRunYear(year) {
    // 如果是闰年我们返回 true 否则 返回 false
    var flag = false;
    if(year%4 == 0 && year % 100 == 0 || year % 400 == 0){
        flag = true;
    }
    return flag;
}
console.log(isRunYear(2000));
console.log(isRunYear(2003));

JavaScript入门到精通（三）连载

 2.8 函数是可以相互调用的

function fun1() {
    console.log(11);
    fun2();
    console.log('fun1');
}
fun1();
function fun2() {
    console.log(22);    
    console.log('fun2');
}

 JavaScript入门到精通（三）连载

案例：用户输入年份，输出当前年份的2月份的天数

function backDay() {
    var year = prompt('请输入年份:')
    if(isRunYear(year)){ //调用函数需要加小括号
        alert('当前年份是闰年2月份有29天');
    }else{
        alert('当前年份是平年2月份有28天');
    }
}backDay();

//判断是否为闰年
function isRunYear(year) {
    // 如果是闰年我们返回 true 否则 返回 false
    var flag = false;
    if(year%4 == 0 && year % 100 == 0 || year % 400 == 0){
        flag = true;
    }
    return flag;
}

JavaScript入门到精通（三）连载

JavaScript入门到精通（三）连载

2.9 函数的2种声明方式

1.利用函数关键字自定义函数(命名函数)

function fn() {
    
}
fn();

2.函数表达式

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

补充：fun是变量名 不是函数名，函数表达式声明方式和声明变量差不多,只不过变量里面存放的是值 而 函数表达式里面存的是函数，函数表达式也可以进行传递参数。

到这JS的数组和函数的基本操作讲完了，后期遇到进阶部分在加以补充。

JavaScript入门到精通（三）连载

🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

JavaScript入门到精通（三）连载

喜欢的可以点赞关注加评论，你的支持就是博主写作的最大动力！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140147.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！