JavaScript 基础
jsliang 求职系列 - 01 - JavaScript 基础
事件
javaScript事件（四）event的公共成员（属性和方法）
typeof 与 instanceof之间的区别
1、typeof能够检测出了null之外的原型类型（String、Number、Boolean、Undefined），对于对象类型能判断出function、其他的都为Object
2、判断一个值是否为数组，使用Array.isArray()
3、如果需要判断一个值是否为null，最直接就是与null比较
无论是typeof还是instanceof都不能准确判断出正确的类型。
一句话理解javascript的this指向
JS中的各种位置
clientHeight：表示可视区域的高度，不包含 border 和滚动条
offsetHeight：表示可视区域的高度，包含了 border 和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分
clientTop：表示边框 border 的厚度，在未指定的情况下一般为0
scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标（CSS 定位的元素或 body 元素）距离顶端的高度。
作者：jsliang
JS 拖拽
setTimeout 实现 setInterval
const say = () =>{
console.log('say');
setTimeout(say,299);
};
setTimeout(say,299);
清楚这个定时器：
let i = 0;
const timeList = [];
const say = () =>{
console.log(i++);
timeList.push(setTimeout(say,299));
}
setTimeout(say,299);
setTimeout(() => {
for(let i = 0;i < timeList.length; i++){
clearTimeout(timeList[i]);
}
},1000)
实现Sleep
如下，实现1000ms后执行其他内容：
const sleep = time => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(time);
}, time);
});
};
console.log('before sleep');
sleep(3000).then((res) => {
console.log('世界是否美好不决定于世界，决定于你！');
});
TODO 函数式编程
题集
数组常见API
- push：数组尾部添加元素
- unshift：数组头部添加元素
- pop：数组尾部移除元素
- shift：数组头部移除元素
- splice：删除数组元素
- slice：截取数组元素
- indexOf：查找某元素第一次出现的位置
- lastIndexof：查找某元素最后一次出现的位置
- findIndex：查找元素第一次出现的位置
- forEach：遍历元素
- map：遍历元素
- filter：过滤元素
- some：包含某元素
- every：所有元素和某元素一致
- includes：查看是否包含某元素
- concat：合并元素
- join：合并元素，变成字符串
- toString：变成字符串
- sort：元素排序
数组去重
//const arr = [1,1,2,3,3]
//期望得到 [1,2,3]
let arr1 = Array.from(new Array(100000), (x, index)=>{
return index
})
let arr2 = Array.from(new Array(50000), (x, index)=>{
return index+index
})
function distinct(a, b) {
// 数组去重
}
/*
let arr1 = [12,3,4,566,7,7,7,65,55,5,55,5,32];
let arr2 = [2,3,4,56,7,7,9,65,55,5,55,5,32];
*/
let start = new Date().getTime()
console.log('开始数组去重')
function distinct1(a, b) {
let arr = a.concat(b);
return arr.filter((item,index)=>{
console.log(item,arr.indexOf(item),index)
return arr.indexOf(item) === index
})
}
function distinct2(a, b) {
let arr = a.concat(b);
for(let i = 0,len=arr.length;i< len ;i++){
for(let j = i+1;j < len;j++){
if(arr[i] === arr[j]){
arr.splice(j,1);
j--;
len--;
}
console.log('i',i,'j',j,)
}
}
return arr;
}
function distinct3(a, b) {
let arr = a.concat(b);
let result = [];
for( let i of arr){
!result.includes(i) && result.push(i)
}
return result;
}
function distinct4(a, b) {
let arr = a.concat(b);
arr = arr.sort();
let result = [arr[0]]
for(let i = 1 ;i<arr.length;i++){
arr[i]!==arr[i-1] && result.push(arr[i])
}
return result
}
function distinct5(a, b) {
let arr = a.concat(b);
return Array.from(new Set(arr))
}
function distinct(a, b) {
let arr = a.concat(b);
let obj = {};
let result = [];
for(i of arr){
if(!obj[i]){
obj[i]=1;
result.push(i)
}
}
return result;
}
console.log('去重后的长度', distinct(arr1,arr2))
let end = new Date().getTime()
console.log('耗时', end - start)
深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame
原型与原型链
手写New
//手写new
function myNew(func,...args){
//1 判断方法体
if(typeof func !== 'function'){
throw '第一个参数必须为function';
}
//2 创建新对象
const obj = {};
//3 这个对象的_proto_ 指向 func 这个类的原型对象
//即实例可以访问构造函数原型< constructor.prototype >所在原型链上的属性
obj.__proto__ = Object.create(func.prototype);
//为了兼容IE可以让步骤2和3合并
//const obj = Object.create(func.prototype);
//4 通过apply绑定this执行并获取运行后的结果
let result = func.apply(obj,args);
//5 如果构造函数返回的结果是引用数据类型，则返回运行后的结果
//否则返回新创建的obj
const isObject = typeof result === 'object' && typeof result !== null;
const isFunction = typeof result === 'function';
return isObject || isFunction ? result : obj;
}
// 测试
function Person(name) {
this.name = name;
return function() { // 用来测试第 5 点
console.log('返回引用数据类型');
};
}
// 用来测试第 2 点和第 3 点
Person.prototype.sayName = function() {
console.log(`My name is ${this.name}`);
}
//const me = myNew(Person, 'jsliang'); // 用来测试第 4 点
const me = new Person('jsliang')
me.sayName(); // My name is jsliang
console.log(me); // Person {name: 'jsliang'}
// 用来测试第 1 点
// const you = myNew({ name: 'jsliang' }, 'jsliang'); // 报错：第一个参数必须是方法体
/*
他这个是验证好几步骤的。。。你跟着他的步骤来就行。非本步骤的代码注释掉就行
构造函数return的话 他就是返回的对象 一般情况下不return 就返回的是this，this上有你原型上的方法
但是你return了一个对象，他就会把返回的对象作为this返回
你理解new的实现原理，就知道为什么构造函数返回一个对象，会导致这个错误了
*/
