JavaScript基础学习（4） | 字节青训营笔记

拿奖去喝AD钙
171 阅读14分钟

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

这是一篇非常适合小白一起学习的文章，都是非常基础的知识。    😀😁😀😁😀😁

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻1、JavaScript对象

🍻1.1、什么是对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。

对象是由属性和方法组成的。

属性： 事物的特征，在对象中用属性来表示。（常用名词）

方法： 事物的行为，在对象中用方法来表示。（常用动词）

🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

为什么需要对象：

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组，如果保存一个人的完整信息？

例如，将"张三疯"的个人信息保存到数组中的方式为:

var arr=['张三疯','男',128，154];

js中的对象表达结构更清晰，更强大。张三疯的个人信息在对象的表达结构如下：

image.png

🍻1.2、创建对象的三种方式

  • 利用字面量创建对象

  • 利用new Object创建对象

  • 利用构造函数创建对象

🍻1.2.1、利用字面量创建对象

利用字面量来创建对象{}

var obj={};//创建了一个空的对象
var obj={
names:'qw',
age:23,
sex:'男',
sayHi:function(){
    console.log('hi');
}

}

注意：

（1）里面的属性或者方法我们采取键值对的形式 键 属性名 : 值 属性值。

（2）多个属性或者方法中间用逗号隔开的。

（3）方法冒号后面跟的是一个匿名函数。

🍻1.2.2、利用new Object创建对象

var obj = new Object(); //创建一个空的对象
        obj.name = '张三';
        obj.age = 19;
        obj.sex = '男';
    obj.func = function(){
        console.log('hei~');
    }
    console.log(obj.name);
    console.log(obj['sex']);
    obj.func();

注意：

（1）我们是利用 等号 = 赋值的方法 添加对象的属性和方法

（2）每个属性和方法之间用 ; 分号结束

🍻1.2.3、利用构造函数创建对象

🙈🙈🙈🙈🙈 我们为什么需要使用构造函数？ 🙈🙈🙈🙈🙈

  • 🙈因为前面两种创建对象的方式一次只能创建一个对象。

  • 🙈因为我们一次创建一个对象，里面很多的属性和方法是大量相同的，我们只能复制。

  • 🙈因此我们可以利用函数的方法，重复这些相同的代码，我们就把这个函数称为构造函数。

  • 🙈因为这个函数不一样，里面封装的不是普通代码，而是 对象

构造函数： 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

构造函数的语法格式：

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

示例：

创建对象 相同的属性：名字 年龄 性别 相同的方法：唱歌

 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.age);
    console.log(ldh['sex']);
    ldh.sing('冰雨');

    var zxy = new Star('张学友',19,'男');
    console.log(zxy.name);
    console.log(zxy.age);
    console.log(zxy['sex']);
    zxy.sing('李香兰');

     var lm = new Star('黎明',20,'男');
     console.log(lm.name);
     console.log(lm.age);
     console.log(lm['sex']);
     lm.sing('相逢在雨中');
        
     var gfc = new Star('郭富城',21,'男');
     console.log(gfc.name);
     console.log(gfc.age);
      console.log(gfc['sex']);
    gfc.sing('望乡');

image.png

注意：

  • 👀1.构造函数名字首字母要大写。

  • 👀2.我们构造函数不需要return 就可以返回结果。

  • 👀3.我们调用构造函数 必须使用 new。

  • 👀4.我们只要new Star() 调用函数就创建一个对象 ldh {}。

  • 👀5.我们的属性和方法前面必须添加 this。

注意

new在执行时会做四件事：

1.在内存中创建一个新的空对象。

2.让this指向这个新的对象。

3.执行构造函数里面的代码，给这个新对象添加属性和方法。

4.返回这个新对象（所以构造函数里面不需要return）.

🍻1.2.4、使用对象

（1）调用对象的属性 我们采取 对象名.属性名。

 console.log(obj.name);

（2）调用属性还有一种方法 对象名[‘属性名’]。

console.log(obj['age']);

（3）调用对象的方法 func 对象名.方法名() 一定要加括号。

obj.func();

obj.sayHi();

🍻1.2.5、遍历对象属性

遍历对象 for in 遍历我们的对象

 for (变量 in 对象){

  }

注意： 我们使用 for in 里面的变量

for…in语句用于对数组或者对象的属性进行循环操作。

  var obj = {
        name: 'pink老师',
        age: 18,
        sex: '男',
        fn:function(){}
    }
	//遍历
  for(var i in obj){
        console.log(i);   // i 变量 输出  得到的是  属性名
        console.log(obj[i]);  // obj[i]  得到的是  属性值
    }

image.png

🍻1.2.6、构造函数和对象

  • 构造函数 Star() 明星 泛指的某一大类 类似于Java语言里面的 类（class）

 function Star(uname,age,sex){
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }

  • 对象 new Star() 特指某一个 是一个具体的事物

    var ldh = new Star('刘德华',18,'男');  //调用函数返回的是一个对象
console.log(ldh);

  • 我们利用构造函数创建对象的过程我们也称为对象的实例化。

🍻1.2.7、JavaScript对象小结

  • 👀1、对象可以让代码结构更清晰。

  • 👀2、对象复杂数据类型object。

  • 👀3、本质：对象就是一组无序的相关属性和方法的集合。

  • 👀4、构造函数泛指某一大类。

  • 👀5、对象实例特指一个事物。

  • 👀6、for…in语句用于对对象的属性进行循环操作。

注意：

请不要把字符串、数值和布尔值声明为对象！

如果通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象：

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

🍻1.3、JavaScript构造函数和函数的区别

构造函数不仅只出现在JavaScript中，它同样存在于很多主流的程序语言里，比如c++、Java、PHP等等。与这些主流程序语言一样，构造函数在js中的作用，也是用来创建对象时初始化对象，并且总与new运算符一起使用。

  • 1.命名的方法不同

普通函数使用的是小驼峰命名法，而构造函数使用的是大驼峰命名法，即首字大小写的区别

function fn(){
    var a =1;
  }//普通函数

  function Fn(){
    var a =1;
  }//构造函数
  • 2.调用方式的不同

任何函数只要使用new关键字来调用，那么它就是一个构造函数 而如果不使用new关键字来调用，那么它就是一个普通函数

   //普通函数
    function person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sayHello = function () {
            console.log('你好，我叫' + this.name);
        }
    }
    //普通函数的调用方法
    person('qw', 15, '男');
    window.sayHello(); //你好,我叫qw
    console.log(age); //15


    //构造函数
    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sayHello = function () {
            console.log('你好，我叫' + this.name);
        }
    }
    var p = new Person('qw',15,男');
    p.sayHello();//你好我叫qw
    console.log(p.age);//15
  • 3.this关键字的指向不同

普通函数和构造函数中this的指向位置不同，普通函数中this指向为window，而构造函数中this指向的是实例，也就是只想的是 自己

//普通函数
    function fn(){
        console.log(this);//打印结果为 Window
    }
    fn();

    //构造函数
    function Fn(){
        console.log(this);//打印结果为 Fn{}
    }
    var f = new Fn();
  • 4.返回结果的不同

普通函数不写return的情况下返回结果为undefined,构造函数返回结果为构造函数的内容,不需要写return，就可以返回结果。

 function fn(a,b){
        this.a = a;
        this.b = b;
        //不写return
    }
    var result = fn(1,2);
    console.log(result);//输出结果为undefined
    
    //构造函数
    function Fn(a,b){
        this.a = a;
        this.b = b;
        this.sayHi = function(){
            console.log(this.a);
            
        }
        //不写return
    }
    var f = new Fn(1,2);
    console.log(f); //输出结果为Fn{a:1,b:2,sayHi:f}

🍻1.4、练习

练习一：

image.png

       
var computer={
    computer_color:'red',
    computer_weight:115,
    computer_brand:'华为',
    computer_Model:'Model',
    Watch_movies:function(){
        console.log('我爱看电影 ');
    },
    Listen_to_music:function(){
        console.log('我爱听音乐 ');
    },
    Play_games:function(){
        console.log('我爱打游戏  ');
    },
    Knock_code:function(){
        console.log('我爱敲代码 ');
    }
};
console.log(computer.computer_color);
console.log(computer.computer_weight);
console.log(computer.computer_brand);
console.log(computer.computer_Model);
computer.Watch_movies();
computer.Listen_to_music();
computer.Play_games();
computer.Knock_code();

image.png

🍻2、JavaScript内置对象

🍻2.1、初始内置对象

  • JavaScript中的对象分为三种： 自定义对象、内置对象、浏览器对象

内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常见的或是最基本而必要的功能（属性和方法）

JavaScript提供了多个内置对象，常见的内置对象有Math，Data，Array，String等。

🍻2.2、查看文档

MDN的使用

image.png

下面是官方网址：

MDN Web Docs (mozilla.org)

方法：

1、查阅该方法的功能

2、查看里面参数的意义和类型

3、查看返回值的意义和类型

4、推国demo进行测试

🍻2.3、Math对象

Math

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

Math 用于 Number 类型。它不支持 BigInt。

描述

与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。Math 的常量是使用 JavaScript 中的全精度浮点数来定义的。

属性

  • Math.E

    欧拉常数，也是自然对数的底数，约等于 2.718。

  • Math.LN2

    2 的自然对数，约等于 0.693。

  • Math.LN10

    10 的自然对数，约等于 2.303。

  • Math.LOG2E

  • 以 2 为底的 E 的对数，约等于 1.443。

  • Math.LOG10E

  • 以 10 为底的 E 的对数，约等于 0.434。

  • Math.PI

  • 圆周率，一个圆的周长和直径之比，约等于 3.14159。

  • Math.SQRT1_2

  • 二分之一 ½ 的平方根，同时也是 2 的平方根的倒数 12，约等于 0.707。

  • Math.SQRT2

  • 2 的平方根，约等于 1.414。

方法

🍻2.3.1、Math.max()

Math.max()  函数返回一组数中的最大值。

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

const array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

语法

Math.max(value1[,value2, ...])

参数

  • value1, value2, ...

    一组数值

** 返回值**

返回给定的一组数字中的最大值。如果给定的参数中至少有一个参数无法被转换成数字，则会返回 NaN。

描述

由于 max 是 Math 的静态方法，所以应该像这样使用：Math.max()，而不是创建的 Math 实例的方法（Math 不是构造函数）。

如果没有参数，则结果为  Infinity。

如果有任一参数不能被转换为数值，则结果为 NaN。

示例

使用 Math.max()

Math.max(10, 20);   //  20
Math.max(-10, -20); // -10
Math.max(-10, 20);  //  20

下面的方法使用 apply 方法寻找一个数值数组中的最大元素。getMaxOfArray([1,2,3]) 等价于 Math.max(1, 2, 3)，但是你可以使用 getMaxOfArray() 作用于任意长度的数组上。

function getMaxOfArray(numArray) {
    return Math.max.apply(null, numArray);
}

或者通过使用最新的扩展语句spread operator，获得数组中的最大值变得更容易。

var arr = [1, 2, 3];
var max = Math.max(...arr);

🍻2.3.2、Math.abs()

Math.abs(x)  函数返回指定数字 “x“ 的绝对值。如下：

Math.abs ( x ) = | x | = { xif x ≥ 0- xif x < 0

语法

Math.abs(x);

参数

  • x

    一个数值

说明

由于 Math.abs() 是 Math 中的一个静态方法，你应该通过 Math.abs() 调用。（Math 不是构造器）

示例

Math.abs() 函数的行为

传入一个非数字形式的字符串或者 undefined/empty 变量，将返回 NaN。传入 null 将返回 0。

Math.abs('-1');     // 1
Math.abs(-2);       // 2
Math.abs(null);     // 0
Math.abs('');       // 0
Math.abs([]);       // 0
Math.abs([2]);      // 2
Math.abs([1,2]);    // NaN
Math.abs({});       // NaN
Math.abs('string'); // NaN
Math.abs();         // NaN

🍻2.3.3、Math.random()

Math.random()  函数返回一个浮点数， 伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

语法

Math.random()

返回值

一个浮点型伪随机数字，在0（包括 0）和1（不包括）之间。

示例

请注意，由于 JavaScript 中的数字是 IEEE 754 浮点数字，具有最近舍入（ round-to-nearest-even）的行为，因此以下函数的范围 (不包括Math.random() 本身) 并不准确。如果选择了非常大的边界 (2^53 或更高), 在极罕见的情况下会计算通常 - 排除（usually-excluded）的上界。（注：round-to-nearest-even 采用最近舍入的去偶数舍入的方式，对.5 的舍入上，采用取偶数的方式）

得到一个大于等于 0，小于 1 之间的随机数

function getRandom() {
  return Math.random();
}

得到一个两数之间的随机数

这个例子返回了一个在指定值之间的随机数。这个值不小于 min（有可能等于），并且小于（不等于）max。

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

得到一个两数之间的随机整数

这个例子返回了一个在指定值之间的随机整数。这个值不小于 min （如果 min 不是整数，则不小于 min 的向上取整数），且小于（不等于）max。

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}

**备注：**也许很容易想到用 Math.round() 来实现，但是这会导致你的随机数处于一个不均匀的分布，这可能不符合你的需求。

得到一个两数之间的随机整数，包括两个数在内

上一个例子提到的函数 getRandomInt() 结果范围包含了最小值，但不含最大值。如果你的随机结果需要同时包含最小值和最大值，怎么办呢？getRandomIntInclusive() 函数可以实现。

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}

🍻2.4、 Date对象

创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp，即自 1970 年 1 月 1 日（UTC）起经过的毫秒数。

语法

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

**备注：**创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date(); 若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

*参数 Date()构造函数有四种基本形式

没有参数

如果没有提供参数，那么新创建的 Date 对象表示实例化时刻的日期和时间。

Unix 时间戳

  • value

    一个 Unix 时间戳Unix Time Stamp，它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数，忽略了闰秒。请注意大多数 Unix 时间戳功能仅精确到最接近的秒。

  • 时间戳字符串 dateString

    表示日期的字符串值。该字符串应该能被 Date.parse() 正确方法识别（即符合 IETF-compliant RFC 2822 timestamps 或 version of ISO8601）。

    **备注：**由于浏览器之间的差异与不一致性，强烈不推荐使用Date构造函数来解析日期字符串 (或使用与其等价的Date.parse)。对 RFC 2822 格式的日期仅有约定俗成的支持。 对 ISO 8601 格式的支持中，仅有日期的串 (例如 "1970-01-01") 会被处理为 UTC 而不是本地时间，与其他格式的串的处理不同。

分别提供日期与时间的每一个成员

当至少提供了年份与月份时，这一形式的 Date() 返回的 Date 对象中的每一个成员都来自下列参数。没有提供的成员将使用最小可能值（对日期为1，其他为0）。

  • year

    表示年份的整数值。 0 到 99 会被映射至 1900 年至 1999 年，其它值代表实际年份。参见 示例。

  • monthIndex

    表示月份的整数值，从 0（1 月）到 11（12 月）。

  • date可选

    表示一个月中的第几天的整数值，从 1 开始。默认值为 1。

  • hours 可选

    表示一天中的小时数的整数值 (24 小时制)。默认值为 0（午夜）。

  • minutes 可选

    表示一个完整时间（如 01:10:00）中的分钟部分的整数值。默认值为 0。

  • seconds 可选

    表示一个完整时间（如 01:10:00）中的秒部分的整数值。默认值为 0。

  • milliseconds 可选

    表示一个完整时间的毫秒部分的整数值。默认值为 0。

使用注释

**备注：**参数monthIndex 是从“0”开始计算的，这就意味着一月份为“0”，十二月份为“11”。

**备注：**当 Date 作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1) 等于 new Date(2014, 1, 1)，它们都表示日期 2014-02-01（注意月份是从 0 开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70) 等于 new Date(2013, 2, 1, 1, 10)，都表示同一个时间：2013-03-01T01:10:00。

**备注：**当 Date 作为构造函数调用并传入多个参数时，所定义参数代表的是当地时间。如果需要使用世界协调时 UTC，使用 new Date(Date.UTC(...)) 和相同参数。

简介

  • 如果没有输入任何参数，则 Date 的构造器会依据系统设置的当前时间来创建一个 Date 对象。
  • 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有指定 day 参数）或者 0（如果没有指定 day 以外的参数）。
  • JavaScript 的时间由世界标准时间（UTC）1970 年 1 月 1 日开始，用毫秒计时，一天由 86,400,000 毫秒组成。Date 对象的范围是 -100,000,000 天至 100,000,000 天（等效的毫秒值）。
  • Date 对象为跨平台提供了统一的行为。时间属性可以在不同的系统中表示相同的时刻，而如果使用了本地时间对象，则反映当地的时间。
  • Date 对象支持多个处理 UTC 时间的方法，也相应地提供了应对当地时间的方法。UTC，也就是我们所说的格林威治时间，指的是 time 中的世界时间标准。而当地时间则是指执行 JavaScript 的客户端电脑所设置的时间。
  • 以一个函数的形式来调用 Date 对象（即不使用 new 操作符）会返回一个代表当前日期和时间的字符串。

Data的属性和方法

🍻3、总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

今日的JavaScript基础知识学习就到此为止了，这是我第四天学习JavaScript，四天的JavaScript的基础学习基本结束了，明天将会学习JavaScript的重点知识，但是还是要复习一下前几天学习的知识，才能更好的掌握JavaScript。希望大家一起进步，这篇文章是非常适合小白学习的，我们一起努力学习，成为更好的自己，每天进步一点点。！！！

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

avatar
文章
阅读
粉丝