目录
[03- call，apply，bind方法的使用场景](#03- call，apply，bind方法的使用场景)
01-数组的操作方法
javascript
<script>
var arr = [1, 2, 3, 2, 4, 5, 5, 1, 6, 7, 8, 9];
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// 1.forEach() 遍历数组
// arr.forEach(function (value, index, arr) {
// // 遍历的元素
// // console.log(value);
// // 索引
// // console.log(index);
// // console.log(arr);
// });
// 2.map() 遍历数组
// var newArr = arr.map(function (value, index, arr) {
// // return返回值
// return value + "map";
// });
// console.log(newArr);
// 3.filter() 过滤数组
// var newArr = arr.filter(function (value, index, arr) {
// return value % 2 == 0;
// });
// console.log(newArr);
// var data = ["小米14", "iphone 15", "小米12", "huawei Mate60", "huawei P60"];
// var huawei = data.filter(function (value, index, arr) {
// return value.includes("huawei")
// });
// console.log(huawei);
// 4.some() 数组中 是否有满足条件的元素true false; 一旦发现满足条件的元素，后面的将不再被遍历
// var res = arr.some(function (value, index, arr) {
// console.log(value);
// return value > 5;
// });
// console.log(res);
// 5.every() 数组中每个元素是否都符合条件; 一旦发现不满足条件的元素，后面的将不再被遍历
// var res = arr.every(function (value, index, arr) {
// console.log(value);
// return value < 5;
// });
// console.log(res);
// 6.find() 找一个满足条件的值; 一旦找到符合条件的元素，立即返回，后面不再遍历；找不到返回 undefined
// var res = arr.find(function (value, index, arr) {
// console.log(value);
// return value > 5;
// });
// console.log(res);
// 7.reduce() 累加器 total作为上次操作的结果
// var sum = arr.reduce(function (total, value, index, arr) {
// console.log(total);
// return total + value;
// },0)
// console.log(sum);
// 数组去重
// var resArr = arr.reduce(function (total, value) {
// console.log(total);
// if (total.includes(value)) {
// return total;
// } else {
// total.push(value);
// return total;
// }
// }, []);
// console.log(resArr);
// 数组元素累乘
var res = arr.reduce(function (total, value) {
return total * value;
}, 1);
console.log(res);
</script>02-call，apply，bind方法改变this指向
javascript
<script>
var num = 10;
function fun(a, b) {
console.log(this);
// 普通函数 this 指向 window
console.log(this.num + a + b);
}
var obj = {
num: 20
}
fun(1, 2);
// Function.prototype.call()
// call() 改变this 指向，参数以 逗号 分割，会立即调用函数执行
fun.call(obj, 1, 2);
</script>
<script>
var num = 10;
function fun(a, b) {
console.log(this);
// 普通函数 this 指向 window
console.log(this.num + a + b);
}
var obj = {
num: 20
}
fun(1, 2);
// Function.prototype.apply();
// apply() 改变this 指向，参数以数组形式传递，立即调用函数执行
fun.apply(obj, [1, 2]);
</script>
<script>
var num = 10;
function fun(a, b) {
console.log(this);
// 普通函数 this 指向 window
console.log(this.num + a + b);
}
var obj = {
num: 20
}
fun(1, 2);
// Function.prototype.bind()
// bind() 改变 this 指向，参数以逗号隔开，不会立即调用函数执行,需要手动调用
fun.bind(obj, 1, 2)();
// call() apply() bind()
// 相同点：都可以改变 this 指向
// 不同点：call() apply()之间，都会立即调用函数执行，call()的参数以逗号分隔，apply()的 参数以数组形式传递
// call() bind()之间，参数都以逗号分割，call()会立即调用函数执行，bind()需要手动调用
</script>03- call，apply，bind方法的使用场景
javascript
<script>
// 数据类型的判断
// 最精准的判断方法
// Object.prototype.toString.call();
var obj = {};
var arr = [];
var date = new Date();
var num = 10;
console.log(Object.prototype.toString.call(obj)); // "[object Object]"
console.log(Object.prototype.toString.call(arr)); // "[object Array]"
console.log(Object.prototype.toString.call(date)); // "[object Date]"
console.log(Object.prototype.toString.call(num)); // "[object Number]"
</script>
<script>
// apply() 参数以数组形式传递，立即调用函数执行
// Math.max() 传入参数的最大值
console.log(Math.max(2, 3, 5, 7, 1, 7, 9, 0, 4, 7));
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 求数组中的最大值最小值
console.log(Math.min.apply(Math, arr));
</script>
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
// bind() 不会立即调用函数执行，一般用于改变定时器中的this 指向
// 循环绑定事件
var btn = document.querySelectorAll("button");
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
var time = 5;
this.disabled = true;
this.innerHTML = "请" + time + "s之后再次点击";
this.timeId = setInterval(function () {
console.log(this);
if (time > 1) {
time--;
// this
this.innerHTML = "请" + time + "s之后再次点击";
} else {
// this
this.removeAttribute("disabled");
this.innerHTML = "点击";
clearInterval(this.timeId)
}
}.bind(this), 1000)
}
}
</script>04-constructor判断数据类型
javascript
<script>
var num = 10;
// console.log(num.constructor);
console.log(num.constructor == Number);
var arr = [];
console.log(arr.constructor == Array);
// null undefined 不能用constructor判断数据类型
// 判断数据类型的方法
// typeof instanceof Object.prototype.toString.call() constructor
</script>05-create继承
javascript
<script>
// Object.create() 继承
var father = {
money: 20000
}
var son = Object.create(father, {
name: {
enumerable: true,
writable: true,
configurable: true,
value: "小张"
}
});
console.log(son);
</script>