Web前端-JavaScript(内置对象)

2023-12-23 08:34:27

1 内置对象

1.1 概述

  1. JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象

  2. 内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的最基本而必要的功能(属性和方法),

    内置对象最大的优点就是帮助我们快速开发

  3. JavaScript 提供了多个内置对象:Math、 Date 、Array、String等

1.2 Math对象

Math 对象它具有数学相关的属性和方法。跟数学相关的运算可以使用 Math 中的成员。

属性、方法名功能
Math.PI圆周率
Math.floor()向下取整
Math.ceil()向上取整
Math.round()四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs()绝对值
Math.max()/Math.min()求最大和最小值
Math.random()/Math.pow()/Math.sqrt()获取范围在[0,1)内的随机值//求指数次幂/求平方根

求1-10之间的随机整数所使用的公式

Math.floor(  (Math.random() * 10)  ) + 1 

求10-20之间的随机整数所使用的公式

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}
  • 案例猜数字小游戏

? 1.随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。

? 2.猜随机数,猜对了,提示猜对了,猜错了,提示猜大了还是猜小了,一共三次机会,

var random = getRandom(1, 10);
var i = 0;

while (true) { // 死循环
    i++;
    var num = prompt('你来猜? 输入1~10之间的一个数字');
    if (num > random) {
        alert('你猜大了');
    } else if (num < random) {
        alert('你猜小了');
    } else {
        alert('你好帅哦,猜对了');
        break; // 退出整个循环结束程序
    }
    if (i == 3) {
        alert('你的次数用完了');
        break
    }
}

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

1.3 Date对象

  1. Date 用来处理日期和时间
  2. Date是一个构造函数,所以使用时需要实例化才能使用其中方法和属性
  • 获取当前时间必须实例化:
var now = new Date();  

? 注意:如果创建实例时并未传入参数,则得到的日期对象是当前时间对应的日期对象

  • 获取指定时间的日期对象
var now = new Date('2019/5/1');
  • Date()构造函数有四种基本形式
1.new Date();
2.new Date(dateString);
3.new Date(value);
4.new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
// 1. var today = new Date()

// 2.var today = new Date('1988-10-20 21:15:15')
// console.log(today.getTime());//获取是 时间戳

// 3. var today = new Date(1598162024651)

// 4. var today = new Date(1987, 10, 20)
// console.log(today.valueOf());//转成时间戳
  • 使用Date实例的方法和属性

    方法名说明
    getFullYear()获取当前年
    getMonth()获取当前月(0 -11)
    getDate()获取当前日期
    getDay()获取当前星期(周日0 - 周六6)
    getHours()获取当前小时
    getMinutes()获取当前分钟
    getSeconds()获取当前秒钟
var date = new Date();
console.log(date);
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());

1.4 Array对象

数组判断
  • instanceof 运算符

    • instanceof 可以判断一个对象是否是某个构造函数的实例

      var arr = [1, 23];
      var obj = {};
      console.log(arr instanceof Array); // true
      console.log(obj instanceof Array); // false
      
  • Array.isArray()

    • 判断一个对象是否为数组

      js
      var arr1 = new Array()
      var arr2 = []
      var arr3 = {}
      console.log(Array.isArray(arr1));//true
      console.log(Array.isArray(arr2));//true
      console.log(Array.isArray(arr3));//false 
      
  • valueOf()

    • 返回对象本身
    var arr = [1, 2, 3]
    console.log(arr.valueOf());
    
添加删除
方法名说明返回值
push(param1…)向数组末尾添加一个或多个元素,会修改原数组返回新数组长度
pop()删除数组最后一个元素,会修改原数组返回删除的元素值
unshift(param1…)向数组开头添加一个或多个元素,会修改原数组返回新数组长度
shift()删除数组的第一个元素,会修改原数组返回删除的元素值
数组排序
方法名说明是否修改原数组
reverse()颠倒数组中的顺序,无参数改变,返回新数组
sort()对数组中元素排序改变,返回新数组

注意:sort方法需要传入参数来设置升序、降序排序

var arr = [1, 2, 3, 4]
arr.reverse();
console.log(arr);//[4,3,2,1]

arr.sort()
console.log(arr);//[1,2,3,4]

function desc(a, b) {
    // return a - b //升序
    return b - a //降序
}
arr.sort(desc)
console.log(arr);
数组转字符串
方法说明返回值
toString()把数组转换为字符串,逗号分隔每一项返回一个字符串
join(‘分隔符’)把数组中所有元素转换为一个字符串返回一个字符串
var arr = [1, 2, 3, 4]
console.log(arr);//[1,2,3,4]
console.log(arr.toString())//1,2,3,4

arr = arr.join('。')
console.log(arr)//1。2。3。4

注意:join方法如果不传入参数,则按照 “ , ”拼接元素,同toString方法

数组索引方法
方法名说明返回值
indexOf()查找数组给定元素的第一个索引如果存在,返回索引号,如果不存在,则返回-1
lastIndexOf()查找数组给定元素的最后一个索引如果存在,返回索引号,如果不存在,则返回-1
var array = ["c", "a", "z", "a", "x", "a"]
//console.log(array.indexOf("a"));//1
//console.log(array.indexOf("a", 2)); //表示从索引为2的位置开始查找a 的位置
//console.log(array.lastIndexOf("a"));//5
清空数组
// 方式1 推荐 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);//从索引0的位置开始,要删除的个数
其它方法
方法说明返回值
concat()连接2个或者多个数组,不影响原数组,返回一个新数组
slice(start,end)数组截取返回被截取项目的新数组
splice(start,length)数组删除,start:开始索引,删除元素的长度返回被截取项目的新数组
var array1 = [1, 2, 3]
var array2 = [4, 5, 6]
var newArr = array1.concat(array2)
console.log(newArr);
var array1 = ["red", "green", "blue", "yellow"];
array1 = array1.splice(1, 2)
console.log(array1);//green,blue
var array = [10, 20, 30, 40];
var arrayNew = array.splice(1, 2);
console.log(array);//10 40
console.log(arrayNew);//20 30

1.5 String对象

字符串的不可变

? 指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。

? 当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,

? 由于字符串的不可变,在大量拼接字符串的时候会有效率问题

根据字符返回位置
方法名说明
indexOf(‘要查找字符’, 开始位置)返回指定内容在字符串中的位置,找不到返回-1,
lastIndexOf()从后往前找,只找第一个匹配的
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春'));//
console.log(str.indexOf('春', 3)); //从索引号是 3的位置开始往后查找
根据位置返回字符
  • charAt(index) 返回指定位置的字符,index是字符串的索引号
var str = '未来可期';
console.log(str.charAt(1));//来
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
     console.log(str.charAt(i));
}
字符串操作方法
方法名说明
concat()连接两个或多个字符串,拼接字符串,等效+
substr(start,length)从start位置开始,length截取的长度
slice(start,end)从start位置开始,截取到end位置,end取不到
substring(start,end)从start位置开始,截取到end位置,end取不到,和slice相同,但是不接受负值
var str1 = 'codingfuture';
var str2 = '未来可期';
        
var newStr = str1.concat(str2);
console.log(newStr);//codingfuture未来可期

var res = newStr.substr(0, 3)
console.log(res);//cod

res = newStr.slice(3, 5)
console.log(res);//in

res = newStr.substring(3, 5);
console.log(res);//in
替换方法
  • .替换字符 replace(‘被替换的字符’, ‘替换为的字符’) 它只会替换第一个字符
var str = '未来可期';
console.log(str.replace('未', 'codingfuture'));
分割方法
  • 23字符串.split(“分割字符”), 返回数组
var str = '未&来&可&期';
console.log(str.split('&'));//['未', '来', '可', '期']

2 数据类型存储方式

2.1 数据类型分类:

  • 简单数据类型:string ,number,boolean,undefined,null
  • 复杂数据类型:Object、Array、function、Date

2.2 堆栈

  • 堆栈空间分配区别:

    • 栈:由操作系统自动分配的空间,用来存储简单数据类型。

    • 堆:由操作系统自动分配的空间,用来存储存储复杂类型。

      JS中没有堆和栈的概念,我们是通过堆栈的方式让大家更容易理解一点代码的执行方式,将来也方便学习其他语言

  • 简单数据类型的存储方式

    • 简单数据类型声明在栈中,数据存储在栈中

      var n1 = 10;
      var n2 = n1;
      n1 = 20;
      console.log(n2); 
      
  • 复杂数据类型的存储方式

    • 复杂数据类型声明在栈中,数据存储在堆中,
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    var p1 = new Person("zs", 18)
    console.log(p1);
    var p2 = p1;
    console.log(p2);
    p1.name = "ls"
    console.log(p2.name);
    

2.3 简单数据类型传参

? 值传递:是把值赋值一份传递给了函数,所以函数内改变的只是赋值的那一份

var x = 10;
fn(x);
console.log(x);
function fn(a) {
    a++;
    console.log(a);
}

2.4 复杂数据类型传参

? 引用传递:是把地址赋值一份传递给了函数

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p = new Person('张学友', 18)
fn(p);
console.log(p.name);
function fn(people) {
    people.name = '刘德华';
}

文章来源:https://blog.csdn.net/apple_73204060/article/details/135077642
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。