2.JavaScript内置对象
2.1、Number
-
方法介绍
-
Number
| 方法名 | 说明 |
|---|---|
| parseFloat() | 将传入的字符串浮点数转为浮点数 |
| parseInt() | 将传入的字符串整数转为整数 |
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Number</title>
</head>
<body></body>
<script>//1. parseFloat() 将传入的字符串浮点数转为浮点数document.write(Number.parseFloat("3.14") + "<br>");//2. parseInt() 将传入的字符串整数转为整数document.write(Number.parseInt("100") + "<br>");document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止
</script>
</html>2.2、Math
-
方法介绍
-
Math
| 方法名 | 说明 |
|---|---|
| ceil(x) | 向上取整 |
| floor(x) | 向下取整 |
| round(x) | 把数四舍五入为最接近的整数 |
| random() | 随机数，返回的是0.0-1.0之间范围(含头不含尾) |
| pow(x,y) | 幂运算x的y次方 |
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Math</title>
</head>
<body></body>
<script>//1. ceil(x) 向上取整document.write(Math.ceil(4.4) + "<br>"); // 5//2. floor(x) 向下取整document.write(Math.floor(4.4) + "<br>"); // 4//3. round(x) 把数四舍五入为最接近的整数document.write(Math.round(4.1) + "<br>"); // 4document.write(Math.round(4.6) + "<br>"); // 5//4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)document.write(Math.random() + "<br>"); // 随机数//5. pow(x,y) 幂运算 x的y次方document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>2.3、String
-
方法说明
-
构造方法
-
String
-
| 构造方法 | 说明 |
|---|---|
| String(value) | 根据指定字符串创建对象 |
| let s = "字符串" | 直接赋值 |
成员方法
| 成员方法 | 说明 |
|---|---|
| length 属性 | 获取字符串长度 |
| charAt(index) | 获取指定索引处的字符 |
| indexOf(value) | 获取指定字符串出现的索引位置找不到为-1 |
| substring(start,end) | 根据指定索引范围截取字符串(含头不含尾) |
| split(value) | 根据指定规则切割字符串，返回数组 |
| replace(old,new) | 使用新字符串替换老字符串 |
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>String</title>
</head>
<body></body>
<script>//1. 构造方法创建字符串对象let s1 = new String("hello");document.write(s1 + "<br>");//2. 直接赋值let s2 = "hello";document.write(s2 + "<br>");//属性//1. length 获取字符串的长度document.write(s2.length + "<br>");//成员方法//1. charAt(index) 获取指定索引处的字符document.write(s2.charAt(1) + "<br>");//2. indexOf(value) 获取指定字符串出现的索引位置document.write(s2.indexOf("l") + "<br>");//3. substring(start,end) 根据指定索引范围截取字符串(含头不含尾)document.write(s2.substring(2,4) + "<br>");//4. split(value) 根据指定规则切割字符串，返回数组let s3 = "张三,23,男";let arr = s3.split(",");for(let i = 0; i < arr.length; i++) {document.write(arr[i] + "<br>");}//5. replace(old,new) 使用新字符串替换老字符串let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";let s5 = s4.replace("你妹的","***");document.write(s5 + "<br>");
</script>
</html>2.4、Array
-
成员方法
-
Array
| 成员方法 | 说明 |
|---|---|
| push(元素) | 添加元素到数组的末尾 |
| pop() | 删除数组末尾的元素 |
| shift() | 删除数组最前面的元素 |
| includes(元素) | 判断数组是否包含给定的值 |
| reverse() | 反转数组中的元素 |
| sort() | 对数组元素进行排序 |
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Array</title>
</head>
<body></body>
<script>let arr = [1,2,3,4,5];//1. push(元素) 添加元素到数组的末尾arr.push(6);document.write(arr + "<br>");//2. pop() 删除数组末尾的元素arr.pop();document.write(arr + "<br>");//3. shift() 删除数组最前面的元素arr.shift();document.write(arr + "<br>");//4. includes(元素) 判断数组中是否包含指定的元素document.write(arr.includes(2) + "<br>");//5. reverse() 反转数组元素arr.reverse();document.write(arr + "<br>");//6. sort() 对数组元素排序arr.sort();document.write(arr + "<br>");</script>
</html>3、This
3.1函数内部的this指向
这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同
一般指向我们的调用者.
| 调用方式 | this 指向 |
|---|---|
| 普通函数调用 | window |
| 构造函数调用 | 实例对象 原型对象里面的方法也指向实例对象 |
| 对象方法调用 | 该方法所属对象 |
| 事件绑定方法 | 绑定事件对象 |
| 定时器函数 | window |
| 立即执行函数 | window |
3.2改变函数内部 this 指向
3.2.1 call方法
call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向
应用场景: 经常做继承.
var o = {name: 'andy'
}function fn(a, b) {console.log(this);console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为33.2.2 apply方法
apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。
应用场景: 经常跟数组有关系
var o = {name: 'andy'
}function fn(a, b) {console.log(this);console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为33.2.3 bind方法
bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数
如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind
应用场景:不调用函数,但是还想改变this指向
var o = {name: 'andy'};function fn(a, b) {console.log(this);console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数 this指向的是对象o 参数使用逗号隔开3.2.4 call、apply、bind三者的异同
-
共同点 : 都可以改变this指向
-
不同点:
-
call 和 apply 会调用函数, 并且改变函数内部this指向.
-
call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
-
bind 不会调用函数, 可以改变函数内部this指向.
-
-
应用场景
-
call 经常做继承.
-
apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
-
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
-
