JavaScript的学习|青训营笔记

用户3598481607327
84 阅读8分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天

主要从数组、函数、作用域、对象来了解JavaScript。

数组

创建数组

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

数组里面的数据一定用逗号分隔

访问数组

  • 数组可以通过索引来访问、设置、修改对应的数组元素。索引号从0开始，格式是：数组名[索引号]
  • arr.length可以获取数组的长度
  • 找到数组最大的元素
 var arr = [2,6,1,77,52,25,7];
        var max = arr[0];
        for (i = 0;i < arr.length;i++) {
            if (max >= arr[i]){
                continue;
            }
            max = arr [i];
        }
        console.log(max);
  • 如果索引号不存在则追加数组元素，如果索引号已存在则替换该索引的数据
var arr1 = ['red','pink','green'];
console.log(arr1);
arr1[3] = 'yellow';
console.log(arr1);
arr1[3] = 'blue';
console.log(arr1);

image.png

常用数组方法

  • push() 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
var arr = ['第一','第二'];
console.log(arr);
var narr =arr.push('地方','sd','秋天');
console.log(arr);
console.log(narr);

image.png

  • pop() 该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
var arr = ['第一','第二','第三'];
var narr =arr.pop();
console.log(arr);
console.log(narr);

image.png

  • shift() 该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
var arr = ['第一','第二','第三'];
var narr =arr.shift();
console.log(arr);
console.log(narr);

image.png

  • unshift()该方法向数组开头添加一个或多个元素，并返回新的数组长度
 var arr = ['第一','第二','第三'];
 var narr =arr.unshift('第四','第五');
 console.log(arr);
 console.log(narr);

image.png

  • splice() 该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回。第一个参数表示开始位置的索引，第二个参数表示要删除的元素数量，第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边。
 var arr = ['第一','第二','第三','第四','第五'];
        var narr =arr.splice(1,3);
        console.log(arr);
        console.log(narr);
        var arr = ['第一','第二','第三','第四','第五'];
        var narr =arr.splice(1,3,'地雷','分数');
        console.log(arr);
        console.log(narr);

image.png

  • slice(start，end) 该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回。第一个参数截取开始的位置的索引，包含开始索引。第二个参数截取结束的位置的索引，不包含结束索引，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素。索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。
var arr = ['第一','第二','第三','第四','第五'];
        var narr =arr.slice(1,3);
        console.log(arr);
        console.log(narr);

image.png

  • concat() 该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
        var arr1 = ['第一','第二','第三'];
        var arr2 = ['第四','第五'];
        var arr3 = arr1.concat(arr2,'但是','多次');
        console.log(arr3);

image.png

  • reverse()该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组
var arr1 = ['第一','第二','第三','第四','第五'];
        var arr3 = arr1.reverse();
        console.log(arr3);

image.png

  • join()该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符
var arr1 = ['第一','第二','第三','第四','第五'];
        var arr3 = arr1.join('**');
        console.log(arr3);

image.png

  • sort()该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序
var arr1 = ['a','f','z','g','b'];
        var arr3 = arr1.sort();
        console.log(arr3);

image.png

即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。

函数

函数的使用

无参数时

//声明函数
function 函数名(){
//函数体代码
}
//调用函数
函数名();

有参数时

//声明函数
function 函数名(形参1,形参2){
//函数体代码
}
//调用函数
函数名(实参1,实参2);

如果实参个数等于形参个数，输出正确结果。如果实参个数多于形参个数，会取到形参的个数。如果实参个数多于形参个数，多于的形参定义为undefined，最终的结果为NaN。

函数返回值

可以使用 return 来设置函数的返回值，return后的值将会作为函数的执行结果返回，可以定义一个变量，来接收该结果。

在函数中return后的语句都不会执行，如果return语句后不跟任何值就相当于返回一个undefined，如果函数中不写return，则也会返回undefined，return后可以跟任意类型的值。

arguments的使用

  • 里面存储了所有传递过来的实参
  • 具有数组的length属性
  • 按照索引的方式进行存储的
  • 没有真正数组的一些方法pop()、push()等
function fn(){
            console.log(arguments);
            console.log(arguments.length);
        }

        fn(1,2,3);

image.png

嵌套函数

在函数中声明的函数就是嵌套函数，嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。

function fu() {
    function zi() {
        console.log("我是儿子")
    }
    zi();
}

fu();

匿名函数

没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。

var fun = function () {
    alert("我是一个匿名函数");
}

fun();

作用域

作用域指一个变量的作用的范围，在JS中一共有两种作用域：

  • 全局作用域

全局作用域在页面打开时创建，在页面关闭时销毁。全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到

  • 函数作用域

调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。每调用一次函数就会创建一个新的函数作用域，它们之间是互相独立的。在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量。

对象

对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。

创建对象

方法一：利用对象字面量创建对象

//创建一个空对象
var obj={};

//创建一个非空对象
var obj={
    uname:'天天',
    age:19,
    sex:'男',
    sayHi:function(){
    console.log('hi');
    }
}
//调用属性
console.log(obj.uname);
console.log(obj['age']);
//调用方法
obj.sayHi();

调用对象的属性可以对象名.属性名或者是 对象名['属性名']，调用对象的方法为对象名.方法名()

方法二：利用new Object创建对象

var obj=new Object();
obj.uname='得儿';
obj.sayHi=function(){
    console.log('hi');
}

利用等号赋值的方法，去添加对象的属性和方法

方法一和方法二一次创建一个对象

方法三：利用构造函数创建对象

//构造函数的语法格式
function 构造函数名(){
   this.属性=值;
   this.方法=function(){}
}
new 构造函数名();

构造函数名字首字母要大写，构造函数不需要return就可以返回结果。

function Star(uname,age) {
            this.name=uname;
            this.age=age;
            this.sing=function(sang){
                console.log(sang);
            }
            
        }
        var ldh =new Star('刘德华',46);
        ldh.sing('冰雨');
        var zxy =new Star('张学友',56);
        zxy.sing('李香兰');
        console.log(ldh);
        console.log(zxy);

image.png

Date对象

使用Date对象来表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

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

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

image.png

Math对象

Math和其它的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法。

Math.PI //圆周率
Math.floor() //向下取整
Math.ceil()  //向上取整
Math.round()  //就近取整 -3.5结果是-3
Math.abs()  //绝对值
Math.max()/Math.min()  //求最大和最小值

总结

今天又进一步学习了JavaScript的基础知识，主要从JavaScript的数组、函数、作用域、对象来学习。掌握了创建数组和数组的一些常用方法，了解了函数的使用方法，掌握三个方法来创建对象。

avatar
文章
阅读
粉丝