Fork me on GitHub

高程笔记

本节主要讲述高程笔记

按值访问

Undefined,Null,Boolean,Number,String

引用类型

引用类型的值是保留在内存中的对象,不允许直接访问内存中的位置,在操作对象时,实际上是在操作对象的引用而不是实际的对象

基本类型

不能给基本类型的值添加属性,报错(undefined)

只能给引用类型值动态的添加属性

复制变量值的不同

基本类型值的复制

1
2
var num1=5;
var num2=num1;

num2中的5和num1的5是完全独立的,该值只是num1中5的一个副本,此后,这两个变量可以参与任何操作而不相互影响。

引用类型值的复制

1
2
3
4
var obj1=new Object();
var obj2=obj1;
obj1.name = "Nick";
alert(obj2.name); /* Nick */

当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在变量对象中的值复制一份放到为新分配的空间中

不同的是,这个值的副本实际上是一个指针,而这个指针只想存储在堆中的一个对象。

复制结束后,两个变量实际上将引用同一个对象。

因此,改变其中一个变量,就会影响另一个变量

检测数组

问题:instanceof

它假定只有一个全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不用的全局执行环境,从而存在两个以上不同版本的Array构造函数。

解决办法 Array.isArray()

1
2
3
4
var arr = [1, 2, 3, 3];
if (Array.isArray(arr)) {
alert(arr) /* 1,2,3,4 */
}

数组转字符串方法

toString()

返回由数组中每个值的字符串形式拼接而成的一个以逗号分割的字符串

1
2
3
4
var arr=[1,2,3,3];
if(Array.isArray(arr)){
console.log(arr.toString()) /* 1,2,3,4 */
}

join()

  • 使用不同的分隔符来构建这个字符串
  • join方法只接受一个参数,即用来做分隔符的字符串,然后返回包含所有数组项的字符串
1
2
3
4
5
6
var arr = [1, 2, 3, 3];
if (Array.isArray(arr)) {
console.log(arr.toString()) /* 1,2,3,4 */
console.log(arr.valueOf()) /* [1,2,3,4] */
console.log(arr.join('-')) /* 1-2-3-3 */
}

slice()

  • 接受两个参数,返回项的起始和结束位置
  • 接受一个参数时,返回指定位置开始到当前数组末尾的所有项
  • 接受两个参数时,返回起始和结束位置之间的项,但是不包括结束位置的项
  • slice不影响原始数组
1
2
3
4
var arr = [1, 2, 3, 4];

console.log(arr.slice(1)) /* 2,3,4*/
console.log(arr.slice(1, 2)) /* 2,3,4 */

splice()

  • 主要用于向数组的中部插入项
  • 接受2个参数,起删除的作用,要删除的第一项的位置和要删除的项数
  • 接受3个参数,起插入的作用,起始位置,要删除的项数,要插入的项,如果要插入多个项,可以再传入第四,第五,以至任意多个项
  • 始终都会返回一个数组,该数组中包含从原始数组中删除的项
1
2
3
4
5
6
7
var arr = [1, 2, 3, 4];

var arr1 = arr.splice(1, 1, 'ok');


console.log(arr1) /* 2 */
console.log(arr) /* [1, "ok", 3, 4] */

数组的归并方法reduce和reduceRight

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4];

var sum = arr.reduce(function(pre, next, index, array) {
return pre + next
})

console.log(sum)
  • 接受4个参数,前一个值,当前值,项的索引和数组对象。

日期格式化方法

1
2
3
4
5
6
7
8
9
10
11
var time = new Date();

console.log(time.toDateString()) /* 日、月、年 Sat Sep 22 2018*/
console.log(time.toTimeString()) /* 时分秒 13:11:01 GMT+0800 (中国标准时间) */
console.log(time.toLocaleDateString()) /*以特定地区的格式显示日,月,年 2018/9/22 */
console.log(time.toLocaleTimeString()) /*以特定地区的格式显示 时分秒 下午1:12:29 */
console.log(time.toUTCString()) /*完整的UTC日期 Sat, 22 Sep 2018 05:13:02 GMT */


console.log(time.toString()) /*完整日期 Sat Sep 22 2018 13:13:39 GMT+0800 (中国标准时间) */
console.log(time.toLocaleString()) /*完整日期 2018/9/22 下午1:13:58 */

call()和apply()

  • 接受参数的方式不同
  • 在使用call()方法时,传递给函数的参数必须逐个列出来
  • apply()方法接受两个参数:一个是在其中运行函数的作用域,另一个是参数数组(可以是Array实例,也可以是arguments对象)

扩展函数赖以运行的作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.color = 'red';
var o = {
color: 'blue'
}

function sayColor() {
console.log(this.color)
}
sayColor(); /* red */

sayColor.call(this); /* red */

sayColor.call(window) /* red */

sayColor.call(o) /* blue */

sayColor.call(this)和sayColor.call(window),是两种显示得在全局作用域中调用函数的方式,结果当然都会显示red

当运行sayColor.call(o)时,函数的执行环境不一样,因为此时函数体内的this对象指向了o,于是结果显示的是blue

使用call()和apply()来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系

bind()方法

创建一个函数的实例,其this值会被绑定到传给bind()函数的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.color = 'red';
var o = {
color: 'blue'
}

function sayColor() {
console.log(this.color)
}
sayColor(); /* red */

sayColor.call(this); /* red */

sayColor.call(window) /* red */

sayColor.call(o) /* blue */


var objectSayColor = sayColor.bind(o);
objectSayColor();

基本包装类型

特殊的引用类型

BooleanNumberString

案例解析

1
2
var s1 = 'some text';
var s2 = s1.substring(2);
  • 这个例子中的变量s1包含一个字符串,字符串当然是基本类型值。而下一行调用了s1的substring()方法,并将返回的结果保存在s2中

  • 基本类型值不是类型,因而从逻辑上讲它们不应该有方法,其实,为了让我们实现这种直观的操作,后台已经自动完成了一系列的处理

1
2
3
4
5
6
7
8
/* 创建String类型的一个实例 */
var s1 = new String('some text');

/* 在实例上调用指定的方法 */
var s2 = s1.substring(2);

/* 销毁这个实例 */
s1 = null;

经过此番处理,基本的字符串值就变得跟对象一样了。

区别

主要的区别:——>对象的生存期

  • 使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中
  • 而自动创建的基本包装类型的对象,则只存在与一行代码的执行瞬间,然后立即销毁
  • 这意味着我们不能在运行时为基本类型值添加属性和方法
1
2
3
var s1 = 'some text';
s1.color = 'red';
alert(s1.color)

返回类型

Object构造函数也会像工厂方法一样,根据传入值的类型返回基本包装类型的实例

1
2
var obj = new Object("some text");
alert(obj instanceof String) //true

Number类型检测的不同

1
2
3
4
5
6
7
8
var numObj = new Number(10);
var numValue = 10;

console.log(typeof numObj); /*引用类型 object */
console.log(typeof numValue); /*基本类型 number */

console.log(numObj instanceof Object); /* true */
console.log(numValue instanceof Number) /* false */
方法 用处 第一个参数 第二个参数 第三个参数
charAt() 返回给定位置的字符 索引
charCodeAt() 返回给定位置的字符编码 索引
concat() 拼接字符串 字符串1 字符串2 字符串3
slice() 剪切字符串 起始位置 结束位置
substr() 剪切字符串 起始位置 结束位置
substring() 剪切字符串 起始位置 结束位置
indexof() (从开头向后搜索子字符串)返回子字符串的位置(没有就返回-1)
lastIndexOf() (从结尾向前搜索子字符串)返回子字符串的位置(没有就返回-1)
trim() 删除前置及后缀的所有空格
toLowerCase() 字符串转大写
toLocaleLowerCase() 字符串转大写
toUpperCase() 字符串转大写
toLocaleUpperCase() 字符串转大写

单体内置对象

定义:

  • 由ECMAScript实现提供的,不依赖宿主环境的对象,这些对象在程序执行之前就已经存在了

Global对象

  • encodeURI()
  • encodeURIComponent()
  • decodeURI()
  • decodeURIConponent()

Math()对象

案例

1
2
3
4
5
var max = Math.max(3, 54, 32, 16);
console.log(max); /* 54 */

var min = Math.min(3, 54, 32, 16);
console.log(min); /* 3 */
1
2
3
4
5
var values = [1, 2, 3, 4, 5, 6, 7, 8];

var max = Math.max.apply(this, values);

console.log(max); /* 8 */

舍入方法

方法 说明
Math.ceil() 向上舍入
Math.round() 四舍五入
Math.floor() 向下舍入
Math.random() 返回>=0 && < 1的随机数
Math.abs 返回num的绝对值
Math.exp(num) 返回Math.E的num次幂
Math.log(num) 返回num的自然对数
Math.pow(num,power) 返回num的power的次幂
Math.sqrt(num) 返回num的平方根
Math.acos(x) 返回x的反余弦值
Math.asin(x) 返回x的反正余弦值
Math.atan(x) 返回x的反正切值
Math.atan2(y,x) 返回y/x的反正切值
Math.cos(x) 返回x的余弦值
Math.sin(x) 返回x的正弦值
Math.tan(x) 返回x的正切值