Object对象

Misaka10032Javascript基础Object对象Function函数作用域Date日期Math数学Array数组字符串大约 17 分钟

对象

基本数据类型都是单一的值，值和值之间没有任何联系，构不成整体。

对象是一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

内建对象

由 ES 标准中定义的对象，在任何的 ES 的实现中都可以使用。

Math String Number Boolean

平时使用的强制类型转换实际上调用的就是 String、Number 这些内建对象的方法

宿主对象

JS 运行环境提供的对象，主要指浏览器提供的对象：BOM、DOM。

自定义对象

自行创建对象，使用构造函数。new Object()

  • 常规语法：对象.属性名

  • 属性名：不强制要求遵守标识符命名规范。

  • 写法：

obj.name="***"

obj["name"]="***"

obj={name:"***",

​		gender:"***",

​		age:***"

};

  1. 对象字面值的属性名可以加引号也可以不加，建议不加。

  2. 如果要使用一些特殊的名字，则必须加引号。

  3. 属性名和属性值是一组一组的键值对结构。

  4. 键值之间使用 : 连接，多个键值对之间使用 , 隔开

  5. 如果一个属性之后没有其他的属性，就不要写 ,

函数

函数也是一个对象，函数可以封装一些功能（代码），在需要时可以执行这些功能。

语法

var fun = new Function();

实际开发中很少使用构造函数来创建函数对象。更多使用函数声明创建。

function 函数名([形参 1, 形参 2, ……]) {

​ 语句……

}

参数

1.调用函数时解析器不会检查实参类型，所以要注意是否有可能接收到非法参数。

2.同时解析器也不会检查实参的数量。多余的实参不会被赋值。

3.如果实参的数量少于形参的数量，则没有对应实参的形参将是 undefined。

4.实参可以是任意数据类型，可以是对象，也可以是函数。

注意：

  • fun()：是调用函数的意思，相当于使用函数返回值

  • fun：是函数对象，相当于直接使用函数对象

返回值

1.返回值可以是任意数据类型，可以是对象也可以是函数。

2.返回值 return 如果不跟任何值则返回 undefined，不写 return 也返回 undefined。

IIFE 立即执行函数

语法：(function() { * * * * * *})();

函数定义完，立即被调用，这种函数叫做立即执行函数。往往只会执行一次。

方法

函数可以成为对象的属性，如果一个函数作为一个对象的属性保存，那么称这个函数是这个对象的方法。

var obj = {
  test: function () {
    console.log("hello");
  },
};
// "hello"
obj.test();

作用域

作用域指一个变量的作用范围

全局作用域

  1. 全局作用域指直接编写在 script 标签中的 js 代码。

  2. 全局作用域在页面打开时创建，在页面关闭时销毁。

  3. 在全局作用域中有一个全局对象 window，它代表的是一个浏览器窗口，由浏览器创建，可直接使用。

  4. 全局作用域中创建的变量都会作为 window 对象属性保存，创建的函数作为 window 对象方法保存。

  5. 变量声明提前，使用 var 关键字声明的变量，会在所有代码执行之前被声明（但是不赋值）。但是如果声明变量时不使用 var 关键字，则变量不会被声明提前。

  6. 函数声明提前，使用函数声明形式创建的函数 function 函数 K{}，它会在所有代码执行之前声明。但是使用函数表达式 var fun = function(){}创建的函数，能提前声明对象，但不会被赋值。

  7. 全局作用域中的变量都是全局变量，在页面的任意部分都可以访问得到。

// undefined，不会报错
console.log(carName);
var carName = " Volvo";

// 此处可调用 carName 变量
function myFunction() {
  // 函数内可调用 carName 变量
}

函数作用域

  1. 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。

  2. 每调用一次函数就会创建一个新的函数作用域，他们之间相互独立。

  3. 函数作用域中可以访问到全局作用域变量，在全局作用域中无法访问到函数作用域的变量。

  4. 函数作用域中操作变量时，会先在自身作用域中寻找，如果有就直接使用，没有则向上一级作用域寻找直到向全局作用域寻找。如果全局作用域仍未找到，则报错 ReferenceError。

  5. 在函数中要访问全局变量可以使用 window 对象。

  6. 在函数作用域也有提前声明特性，使用 var 关键字声明变量，会在函数中所有代码执行前提前声明。函数声明同理。

  7. 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

  8. 定义形参就相当于在函数作用域中声明了变量

以下实例中 carName 在函数内，但是为全局变量。

// 此处可调用 carName 变量

function myFunction() {
  carName = "Volvo";
  // 此处可调用 carName 变量
}

数组 Array

数组是一个对象，使用数字作为索引操作元素，不同于普通对象使用字符串作为属性名操作。

常见特性

  • 如果读取不存在的索引，不会报错而是返回 undefined。

  • 对非连续数组，length 获取数组最大索引+1 长度。（尽量不要创建非连续数组）

  • 修改的 length 大于原长度，多余部分会空出来。

  • 给数组最后一个元素后面添加元素：arr[length] = xxx;

字面量

数组中的元素可以是任意数据类型

var arr = [];

var arr2 = new Array( );

小区别：

arr = [10] 创建一个单元素 10 的数组

arr = new Array(10) 创建一个长度为 10 的数组

常用数组方法

1. push

该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度

可以将要添加的元素作为方法的参数传递，这些元素会自动添加到数组末尾

该方法会将数组新的长度作为返回值返回

2. pop

该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

3. unshift

向数组开头添加一个或多个元素，并返回新的数组长度

向前边插入元素以后，其他的元素索引会依次调整

4. shift

可以删除数组的第一个元素，并将被删除的元素作为返回值返回

5. slice

可以用来从数组提取指定元素

该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

参数：

1.截取开始的位置索引，包含开始索引

2.截取结束的位置索引，不包含结束索引

  • 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

  • 索引可以传递一个负值，如果传递一个负值，则从后往前计算

6. splice

可以用于删除数组中的指定元素

使用 splice() 会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值数组返回

参数：

  1. 表示开始位置的索引

  2. 表示删除的数量

  3. 第三个及以后可以传递一些新的元素，这些元素将会自动插入到开始位置索引前

7. concat

可以连接两个或多个数组，并将新的数组返回

该方法不会对原数组产生影响

8. join

该方法可以将数组转换为一个字符串

该方法不会对原数组产生升影响，而是将转换后的字符串作为结果返回

在 join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符。如果不指定连接符，则默认使用 , 作为连接符。

9. reverse

该方法用来反转数组（前边的去后边，后边的去前边）

该方法会直接修改原数组

10. sort

可以用来对数组中的元素进行排序

也会影响原数组，默认会按照 Unicode 编码进行排序

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

  • 我们可以在 sort()添加一个回调函数，来指定排序规则

回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参自动调用回调函数，使用哪个元素调用不确定，但肯定的是数组中 a 一定在 b 前面

  • 浏览器会根据回调函数的返回值来决定元素的顺序：

  1. 如果返回一个大于 0 的值，则元素会交换位置

  2. 如果返回一个小于 0 的值，则元素位置不变

  3. 如果返回一个 0，则认为两个元素相等，也不交换位置

11. indexOf

检索一个数组是否含有指定元素。

如果数组中含有该元素，则返回其第一次出现的数组元素索引。如果没有返回-1。

可以指定第二个参数，指定开始查找的位置。

12. lastIndexOf

可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索

注意： 该方法将从后向前检索字符串，但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。

开始检索的位置在字符串的 start 处或字符串的结尾（没有指定 start 时）。

如果没有找到匹配字符串则返回 -1 。

日期 Date

在 JS 中使用 Date 对象表示一个时间

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

日期格式 new Date("01/01/2021 00:00:00"); （括号内参数仅为 1 个，表示为毫秒）

方法描述
getDate()从 Date 对象返回一个月中的某一天(1~31)
getDay()从 Date 对象返回一周中的某一天(0~6)
getMonth()从 Date 对象返回月份(0~1)
getFullYear()从 Date 对象以四位数字返回年份
getYear()请使用 getFullYear()方法代替
getHours()返回 Date 对象的小时(0~23)
getMinutes()返回 Date 对象的分钟(0~59)
getSeconds()返回 Date 对象的秒数(0~59)
getMilliseconds()返回 Date 对象的毫秒(0~999)
getTime()返回 1970 年 1 月 1 日至今的毫秒数
Date.now()立即获取当前日期相对 1970 年 1 月 1 日的毫秒数时间戳

数学 Math

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

对象属性

值描述
E返回算术常量 e，即自然对数的底数(约等于 2.718)
LN2返回 2 的自然对数(约等于 0.693)
LN10返回 10 的自然对数(约等于 2.302)
LOG2E返回以 2 为底的 e 的对数(约等于 1.414)
LOG10E返回以 10 为底的 e 的对数(约等于 0.434)
PI返回圆周率(约等于 3.14159)
SQRT1_2返回 2 的平方根的倒数(约等于 0.707)
SQRT2返回 2 的平方根(约等于 1.414)

对象方法

方法描述
abs(x)返回数的绝对值
acos(x)返回数的反余弦值
asin(x)返回数的反正弦值
atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x)返回从 x 轴到点(x,y)的角度（介于 -PI/2 与 PI/2 弧度之间）
ceil(x)对数进行上舍入（进一法）
cos(x)返回数的余弦值
exp(x)返回 e 的指数
floor(x)对数进行下舍入（取余法）
log(x)返回数的自然对数(底为 e)
max(x,y)返回 x 和 y 中的最大值
min(x,y)返回 x 和 y 中的最小值
pow(x,y)返回 x 的 y 次幂
random()返回 0~1 之间的随机数
round(x)把数四舍五入为最接近的整数
sin(x)返回数的正弦
sqrt(x)返回数的平方根
tan(x)返回角的正切
toSource(x)返回该对象的源代码
valueOf()返回 Math 对象的原始值

生成 x~y 之间的随机数公式：

Math.round(Math.random() * (y-x) + x)

包装类

js 的包装类指 String() Number() Boolean()

注意：实际应用中基本不会使用基本数据类型对象，因为使用时会带来不可预期的结果。

包装类的实际应用：对基本数据类型的值去调用属性和方法时，浏览器临时使用包装类将其转换为对象，再调用属性和方法，调用完毕后转为基本数据类型。

字符串 String

之所以把字符串放到对象章节，是因为字符串底层也是以字符数组的形式保存的。字符串很多方法与数组方法有异曲同工之处。

字符串获取

1.charAt()

返回字符串中指定位置的字符，根据索引获取指定字符。

2.charCodeAt()

获取指定位置字符的字符编码（Unicode 编码）。

3.String.formCharCode()

根据字符编码去获取字符。

字符串拼接

concat()

返回值：拼接两个或多个字符串，作用和 + 一样。

目录查找

1.indexOf()

检索一个字符串是否含有指定内容。

如果字符串中含有其内容，则返回其第一次出现的索引。如果没有返回-1。

可以指定第二个参数，指定开始查找的位置。

2.lastIndexOf()

从后往前寻找索引

也可以指定开始查找的位置，此处指定位置为正向指定。

字符串截取

1.slice()

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

string.slice(start, end);
参数描述
start必须。要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end可选。紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

该方法的两个参数均为位置坐标，和 subtring 比较像，区别就是该方法支持负数，并且不会交换位置，始终是从 start 到 end，如果该区间不存在，那么返回''。

  • slice() 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(1,5)
< "1234"
  • 当start或者end为负值时，定位方式和substr一，从右往左数，从1开始。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(1,-1)
//起始点从第1（包括）开始，结束点为从右往左数第1个（不包括）
< "12345678"
  • start到end的顺序始终是从左到右，如果最终start的位置在end的右边，那么返回''。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(2,1)
//2所在的位置是'2'，1所在的位置是'1'，从2=>1，方向相反，返回为空
< ""
> a.slice(-2,1)
//-2所在的位置是'8'，1所在的位置是'1'，从8=>1，方向相反，返回为空
< ""
> a.slice(-2,-1)
//-2所在的位置是'8'，-1所在的位置是'9'，从8=>9，方向正常，返回为'8'
< "8"
  • 其他情况和substring处理方式一致 。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice('xx','5.5')
// => a.slice(0,5)
< "01234"

2.substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

string.substring(start, stop);
参数描述
start必需。一个 非负的整数 ，规定要提取的子串的第一个字符在 string​​ 中的位置。
stop可选。一个 非负的整数 ，比要提取的子串的最后一个字符在 ​string​​ 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。
  • substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(1,5)
< "1234"
  • 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串(即长度为 0 的字符串)。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(1,1)
< ""
  • 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,1)
//=>a.substring(1,5)
< "1234"
  • 如果 start 和 stop 有负数，那么会把该参数自动转为 0，然后继续上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,-1)
//=> a.substring(5,0)
//=> a.substring(0,5)
< "1234"
  • 如果 start 和 stop 有正小数(负数直接进行第 4 条)，那么会把该参数向下取整，然后继续上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,2.5)
//=> a.substring(5,2)
//=> a.substring(2,5)
< "234"
  • 如果 start 和 stop 有字符串，那么会先进行 parseInt()，如果转换结果为 NaN，那么就转换为 0，其余情况继续上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,'2.5')
//=> a.substring(5,2)
//=> a.substring(2,5)
< "234"
> a.substring(5,'ss')
//=> a.substring(5,NaN)
//=> a.substring(5,0)
//=> a.substring(0,5)
< "01234"

3.substr()

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

string.substr(start, length);
参数描述
start必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 string 的开始位置到结尾的字串。

该方法与 substring()最大的区别在于第二个参数是你需要截取字符串的长度，而不是位置。

  • substr() 方法返回的子串从 start 处的字符开始(包括)往后截取 length 长度，如果超过最末端就到最末端结束。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a.substr(1,15)
// 只会到最末端，多了没用
< "123456789"
  • start 可以取负值，表示从字符串尾部往头部开始数(从右到左，注意是从 1 开始，比如-1 指字符串中最后一个字符)，但是截取长度还是从左到右，如果超过最末端就到最末端结束。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(-4,2)
// -4表示从右开始数第4个，就是'6'，然后取2个长度的字符串，就是'67'
< "67"
  • 如果 length 为负值，那么会直接当成 0 处理，最终返回""。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(4,-2)
//=> a.substr(4,0)
< ""
  • 如果 start 或者 length 为小数，那么会截取小数部分。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1.2,5.2)
//=> a.substr(1,5)
< "12345"
  • 如果 start 和 length 有字符串，那么会先进行 parseInt()，如果转换结果为 NaN，那么就转换为 0，其余情况继续上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr('aa','5')
//=> a.substr(0,5)
< "01234"

字符串拆分

split()

将字符串拆分为数组

参数：需要一个字符串作为参数，将会根据该字符串拆分数组。