WEB前端05-JavaScrip基本对象

JavaScript对象

1.Function对象

• 函数的创建

//方法一：自定义函数
function 函数名([参数]) {
	函数体
	[return 表达式]
}

//方法二：匿名函数
(function([参数]) {
	函数体
	[return 表达式]
});
**使用场景一：定义后直接调用使用(只使用一次)
(function(a,b){
    return a + b;
})(1,2);
**使用场景二：作为其他对象的方法
document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});

//方法三：箭头函数
(参数) => {
    // 函数体
    return 结果;
}
* 如果只有一个参数，() 可以省略，如果没有参数，() 还是要保留
* 如果函数体内只有一行代码，{} 可以省略
* 如果这一行代码就是结果，return 可以省略
document.getElementById("p1").onclick = () => {
    console.log("鼠标单击了...");
}

//方法四：默认参数的函数
function 函数名(参数1 = 参数值1, 参数2 = 参数值2) {}
此时，传递参数有默认值，如果传递参数会覆盖默认值，不传递则会使用默认值(或者传递undefined)

• 函数的特点

1.在定义函数的时候无需指定函数的返回值和函数的参数类型
2.函数是一个对象，如果定义同名函数会覆盖函数
3.在JS中，方法的调用只与方法的名称有关，和参数列表无关(即可以选择是否有参数列表，调用函数时传入参数个数随便)
4.在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
function add() {
	let sum = 0; 
    for (let index = 0; index < arguments.length; index++) {
		sum += arguments[index];
    }
    return sum;
}

• 函数对象的概述

1. 可以参与赋值(将对象值赋值给一个变量)

function abc() {
    console.log("bb");
}
document.getElementById("p1").onclick = abc;

2. 有属性、有方法，执行 console.dir(abc)，输出结果如下

ƒ abc()
    arguments: null
    caller: null
    length: 0
    name: "abc"
    ➡prototype: {constructor: ƒ}
    [[FunctionLocation]]: VM1962:1
    ➡[[Prototype]]: ƒ ()
    ➡[[Scopes]]: Scopes[1]

3. 可以作为方法参数

function a() {
    console.log('a')
}

function b(f) {          
    console.log('b')
    f();                 // 调用函数对象
}
b(a)

4. 可以作为方法返回值

function c() {
    console.log("c");
    function d() {
        console.log("d");
    }
    return d;
}

c()()

• 函数的属性

length：表示定义的形参列表的参数个数
如：function add(a, b, c) {}
	alert(a.length)
结果：3

• 函数的作用域

* 以函数为分界线划定作用域，所有函数之外是全局作用域
* 查找变量时，由内向外查找
  * 在内层作用域找到变量，就会停止查找，不会再找外层
  * 所有作用域都找不到变量，报错
* 作用域本质上是函数对象的属性，可以通过 console.dir 来查看调试

函数的闭包：函数定义时，它的作用域已经确定好了，因此无论函数将来去了哪，都能从它的作用域中找到当时那些变量。闭包就是指函数能够访问自己的作用域中变量

• let 与 var作用域

如果函数外层引用的是 let 变量，那么外层普通的 {} 也会作为作用域边界，最外层的 let 也占一个 script 作用域

如果函数外层引用的是 var 变量，外层普通的 {} 不会视为边界

如果 var 变量出现了重名，则他俩会被视为同一作用域中的同一个变量

var e = 10; 
if(true) {
    var e = 20;
    console.log(e);	// 打印 20
}
console.log(e);		// 因为是同一个变量，还是打印 20

如果是 let，则视为两个作用域中的两个变量

let e = 10; 
if(true) {
    let e = 20;	
    console.log(e);	// 打印 20
}
console.log(e);		// 打印 10

要想里面的 e 和外面的 e 能区分开来，最简单的办法是改成 let，或者用函数来界定作用域范围

var e = 10; 
if(true) {
    function b() {
        var e = 20;
    	console.log(e);
    }
    b();
}
console.log(e);	

2.字符串对象

• 字符串对象的定义

方法一：
var 变量名 = "字符串"/'字符串'/`字符串`
方法二：
var 变量名 = new String("字符串")

• 字符串对象的属性

constructor：字符串对象的函数模型
length：字符串的长度
prototype：添加字符串对象的属性

• 字符串对象的方法

方法	描述
charAt(索引)	返回索引字符
indexOf(要查找的字符串，[起始索引])	返回要查找的字符串的首个位置
lastIndexOf()	返回要查找的字符串的最终位置
substr(开始位置，[长度])	截取字符串的长度
substring(开始位置，结束位置)	截取字符串的长度
split(分隔符)	分割字符串
replace(要查找的字符串,新字符串)	在字符串对象中，将指定的字符串替换为新字符串
toLowerCase()	字符串对象转换为小写
toUpperCase()	字符串对象转换为大写

//区分三种字符串截取函数
slice：
slice(a,b)的作用是截取a位置（含）到b位置（不含）之间的字符串，被截取的字符串不变，返回截取后获得的子字符串。比如a是0，b是3，则截取0、1、2三个位置的字符。b为可选参数，不填则表示截取到字符串的尾部。a或b为负数时表示从右往左排，即-1表示最右侧的位置，依次类推。

substring()
a或b为负数时，自动转换为0；a大于b时，编译器会自动对调两者。

substr()
a表示开始位置（包含）；b表示截取的长度，可选。不填则截取到字符串结尾处；
a为负数时表示从右往左排，即-1表示最右侧的位置，依次类推。

//字符串拼接的两种方法
let name = "张三";
let age = 18;
方法一：使用加号进行拼接
let url = "/text?name=" + name +"&age=" + age;
方法二：使用模板占位进行拼接(使用反引号进行引用)
let url = `/test?name=${name}&age=${age}`;

3.数学对象

• 数学对象的属性

E/LN2/LN10/PI/SORT2

• 数学对象的方法

• 保留小数

数学.toFixed(x)//保留x位小数
数字.toPrecision(x)//保留x位数字

4.日期对象

• 日期对象的创建

方法一：
var date1 = new Date()//获取本地时间
方法二：
var date2 = new Date(日期字符串)//创建指定的时间对象
方法三：
var date3 = new Date(年,月,日,[时,分,秒,毫秒])//多参数创建指定的时间对象
方法四：
var date4 = new Date(100000000)//通过毫秒创建时间(1970:00:00)

• 日期对象的相关方法

常用日期和时间的获取

设置日期及时间

window对象中和时间有关的方法

①SetTimeout：用于设置一个计时器，在指定的时间间隔后调用函数或计算表达式，且仅执行一次。
setTimeout(函数名，间隔的毫秒数)

② clearTimeOut：清除由setTimeout()方法所设置的计时器。
clearTimeout(setTimeout返回的id值)

• 时间对象格式化

5.数组对象

数组对象是一个有序的数据集合，使用单独的变量名来存储 一系列的数据。在JavaScript中，定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存放到一个数组中

• 数组对象的创建

//空数组：
var a = new Array();

//声明长度为n的数组：
var b = new Array(n);

//通过参数列表赋值，创建数组
var c = new Array(元素1，元素2，元素3...)
var d = [1,2,3,4]

• 数组对象的属性

arr.length//获得数组的长度

• Js数组特点

1.Js中的数组类型可以变
2.Js中的数组长度可以变

• 数组的操作

操作1：遍历数组元素

//方法一：返回的i是数组中非undefind的
for (i in arr) {
	document.write(arr[i] + "<br/>")
}

//方法二：返回数组中非undefind的值
arr.forEach(function(e){
    document.write(e)
})
arr.forEach((e) => document.write(e)})

原理：
let arr = [1,2,3,4];
//函数规则
function print(e) {
    documnet.write(e);
}
//forEach函数
function forEach(fn) {//forEach：高阶函数 fn：回调函数
	for (let i = 0; i < arr.length; i++) {
        fn(i);
    }    
}
//调用forEach函数
forEach(print);

//方法三：返回数组中所有的元素
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

操作2：添加数组元素

1.直接修改数组的长度
myArray.length = n

2.通过索引添加
a[index] = n

操作3：删除元素的值

1.直接修改数组的长度
myArray.length = n

2.通过delete删除
delete myArray[1]

• 数组对象的方法

方法	描述
concat()	连接两个或多个数组，并返回已连接数组的副本。
copyWithin()	将数组中的数组元素复制到指定位置或从指定位置复制。
entries()	返回键/值对数组迭代对象。
every()	检查数组中的每个元素是否通过测试。
fill()	用静态值填充数组中的元素。
filter()	使用数组中通过测试的每个元素创建新数组。
find()	返回数组中第一个通过测试的元素的值。
findIndex()	返回数组中通过测试的第一个元素的索引。
forEach()	为每个数组元素调用函数。
from()	从对象创建数组。
includes()	检查数组是否包含指定的元素。
indexOf()	在数组中搜索元素并返回其位置。
isArray()	检查对象是否为数组。
join()	将数组的所有元素连接成一个字符串。
keys()	返回 Array Iteration 对象，包含原始数组的键.
lastIndexOf()	在数组中搜索元素，从末尾开始，并返回其位置。
map()	使用为每个数组元素调用函数的结果创建新数组。
pop()	删除数组的最后一个元素，并返回该元素。
push()	将新元素添加到数组的末尾，并返回新的长度。
reduce()	将数组的值减为单个值（从左到右）。
reduceRight()	将数组的值减为单个值（从右到左）。
reverse()	反转数组中元素的顺序。
shift()	删除数组的第一个元素，并返回该元素。
slice()	选择数组的一部分，并返回新数组。
some()	检查数组中的任何元素是否通过测试。
sort()	对数组的元素进行排序。
splice()	从数组中添加/删除元素。
toString()	将数组转换为字符串，并返回结果。
unshift()	将新元素添加到数组的开头，并返回新的长度。
valueOf()	返回数组的原始值。

6.RegExp正则表达式对象

**正则表达式：**定义字符串的组成规则

• 单个字符规则

[规则]:表示对单个字符的限制
[a]//表示字符串必须是a
[ab]//表示字符串为a或b
[a-bA-Z0-9_]//表示单个字符可以是a~b A~Z 0~9 _
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]

• 量词的规则

?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
	* m如果缺省： {,n}:最多n次
	* n如果缺省：{m,} 最少m次

• 开始与结束

以^开始，以$结束

• 正则对象的创建

//方法一：
let reg = new RegExp("正则表达式");
//方法二：
let reg = /正则表达式/
例子：
let regExp = new RegExp("\\w{6,12}");
let regExp2 = /^\w{6,12}$/;

• 正则对象的方法

正则对象.text(字符串);//用于检验正则表达式是否合法，返回true或者false

8.Global全局对象

全局对象，这个Global中封装的方法不需要对象就可以直接调用： 方法名()

eval(“字符串”)函数

功能：将eval中的字符串参数作为脚本代码去执行

isFinite(数字)函数

检查某个值是否为有穷大的数。
➢参数为有限值，返回值为ture。
➢参数为非数字或者正、负无穷大，返回值为false。

isNaN()函数

检查某个值是否为数字(NaN与任何数逻辑运算均为NaN)
➢参数为数字，返回值为false 。
➢参数为非数字，返回值为ture 。

parseInt(任意参数，[转换的进制])函数

➢参数第一个字符为数字字符串，返回值为number 。
➢参数为非数字，返回值为NAN
➢将参数为非数字前的数字转成NaN返回

encodeURI():url编码
decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多

decodeURIComponent():url解码

根据meta标签中charset编码方式对文字进行编码
decodeURI对服务器发送的内容进行解码

9.Object对象

• 定义格式

//方法一：在对象内部定义方法和属性
let 对象名 = {
    //定义属性
	属性名1：属性值1，
	属性名2：属性值2，
	//定义方法
    /*1.可以采用匿名函数定义方法*/
	函数名称：function(形参列表){}
	/*2.简化的定义方式*/
	函数名称(形参列表){}
}

//方法二：在对象外部定义属性和方法
let 属性名1 = 属性值;
let 属性名2 = 属性值;
let 方法名 = function(形参列表){}；
let 对象名 = {属性名1，属性名2，方法名}；

• get和set方法

let stu = {
    name: null,
    get name() {
        console.log("进入了get");
        return this._name;
    },
    set name(name) {
        console.log("进入了set");
        this._name = name;
    }
}
//在定义get和set方法的，在修改name属性的时候会自动调用get和set方法
stu.name = "yhw"
console.log(stu.name)
//在实践中，开发者经常使用_开头来表示某个属性是私有的，以便区分公共属性。这是一种约定俗成的做法，并没有强制规定。将name改为_name也可正常运行

• 属性的增删改

js 的对象，它的属性和方法可以随时加减

let stu = {name:'张三'};
// 添加属性
stu.age = 18;					
// 删除属性
delete stu.age;					
// 添加方法
stu.study = function() {		
    console.log(this.name + "在学习");
}
// 添加get和set方法：需要借助 Object.definePropery
Object.defineProperty(对象名, "属性名", {
//因为Object.definePropery方法已经定义了属性名，所以，无需再次在get和set方法定义属性名
    get(){
        return this.属性名;
    },
    set(a){
        this.属性名 = a;
    }
});

• this关键字

js 中的 this 也是隐式参数，但它与函数运行时上下文相关

//情况一：当单独定义一个函数，使用this关键字全局对象 window被当作了this
function study() {
    console.log(this.name);
}//此时this.name为空字符串(==window.name)

//情况二：如果作为对象的方法，this表示的是对象本身
let stu = {
    name:"lisi";
    study() {
         console.log(this.name);
    }
}//此时this.name为lisi(==stu.name)

//情况三：动态指定this
let stu = {name:"zhangsan"};
study.call(stu);//通过call指定study函数内的this为stu对象，因此会输出zhangsan

this关键字的一种易错情况

但是可以通过箭头函数解决这一问题，在**箭头函数**内出现的 this和它外层 this相同
let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(e => {
            console.log(this.name + "与" + e + "在玩耍");
        })
    }    
}

• 继承：原型继承

let father = {
    f1: '父属性',
    m1: function() {
        console.log("父方法");
    }
}

let son = Object.create(father);

console.log(son.f1);  // 打印 父属性
son.m1();			  // 打印 父方法

• father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找
• son 自己可以添加自己的属性和方法
• son 里有特殊属性 __proto__ 代表它的父对象，js 术语： son 的原型对象
• 不同浏览器对打印 son 的 __proto__ 属性时显示不同
  • Edge 打印 console.dir(son) 显示 [[Prototype]]
  • Firefox 打印 console.dir(son) 显示 <prototype>

出于方便的原因，js 又提供了一种基于函数的原型继承

函数职责

1. 负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法

2. 函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象

   **注意！**名字有差异，这个属性的作用就是为新对象提供原型

function cons(f2) {
    // 创建子对象(this), 给子对象提供属性和方法
    this.f2 = f2;
    this.m2 = function () {
        console.log("子方法");
    }
}
// cons.prototype 就是父对象
cons.prototype.f1 = "父属性";
cons.prototype.m1 = function() {
    console.log("父方法");
}

配合 new 关键字，创建子对象

let son = new cons("子属性")

子对象的 __proto__ 就是函数的 prototype 属性

10.JSON对象

概念：JavaScript Object Notation, Javascript 对象标记法，是通过JavsScript对象标记法书写的文本

**作用：**多用于数据载体，在网络中进行数据传输

格式：

var 变量名 = ‘{"key1":value1, "key2":value2}';
value的数据类型为:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true or false)
数组(在方括号中)
对象(在花括号中)
null

方法：

• 将JSON转换为JS对象

var obj  = JSON.parse(userString);

• 将JS对象转换为JSON字符串

var jsonStr = JSON.stringify(jsObject);

• json 中只能有 null、true|false、数字、字符串（只有双引号）、对象、数组
• json 中不能有除以上的其它 js 对象的特性，如方法等
• json 中的属性必须用双引号引起来