Web前端-JavaScript（内置对象）

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 = '刘德华';
}