以下文章来源于前端之神 ,作者林三心不学挖掘机
一位前端小菜鸡,写过100多篇原创文章,全网有5w+个前端朋友,梦想是成为”前端之神“~
金三银四快要到来了,希望各位想找工作的朋友们要做好准备啊,今天就带着大家来复习一下JavaScript的50个「基础」知识点哦
console.log(Number.MAX_SAFE_INTEGER)
// 9007199254740991
console.log(Number.MIN_SAFE_INTEGER)
// -9007199254740991
闭包是一个函数,是一个能让外部访问到函数内部的函数
闭包的例子
function a () {
let num = 0
// 这是个闭包
return function () {
return ++num
}
}
const b = a()
console.log(b()) // 1
console.log(b()) // 2
原型链是一条引用的链,实例的隐式原型指向构造函数的显式原型,可以使用A instanceof B来判断B是否在A的原型链上。
console.log(name) // undefined
var name = 'Sunshine_Lin'
if (false) {
var age = 23
}
console.log(age) // undefined 不会报错
console.log(fun) // function fun() {}
function fun() {}
if (false) {
function fun2(){}
}
console.log(fun2) // undefined 不会报错
console.log(fun) // function fun() {}
var fun = 'Sunshie_Lin'
function fun() {}
console.log(fun) // 'Sunshie_Lin'
isNaN:除了判断NaN为true外,还会把不能转成数字判断为true,例如'dasd'Number.isNaN:只会判断NaN为true使用hasOwnProperty判断
function Person(name) {
this.name = name
}
Person.prototype.age = 23
const person = new Person('Sunshine_lin')
for (const key in person) { console.log(key) } // name age
// 使用 hasOwnProperty
for (const key in person) {
person.hasOwnProperty(key) && console.log(key)
} // name
valueOf比较偏向于计算,toString偏向于显示toStringtoString,强转数字时优先调用valueOftoStringvalueOf基本数据类型:存在栈内存里引用数据类型:指针存栈内存,指向堆内存中一块地址,内容存在堆内存中装箱:把基本数据类型转化为对应的引用数据类型的操作
看以下代码,s1只是一个基本数据类型,他是怎么能调用indexOf的呢?
const s1 = 'Sunshine_Lin'
const index = s1.indexOf('_')
console.log(index) // 8
原来是JavaScript内部进行了装箱操作
var temp = new String('Sunshine_Lin')
const index = temp.indexOf('_')
temp = null
console.log(index) // 8
拆箱:将引用数据类型转化为对应的基本数据类型的操作
通过valueOf或者toString方法实现拆箱操作
var objNum = new Number(123);
var objStr =new String("123");
console.log( typeof objNum ); //object
console.log( typeof objStr ); //object
console.log( typeof objNum.valueOf() ); //number
console.log( typeof objStr.valueOf() ); //string
console.log( typeof objNum.toString() ); // string
console.log( typeof objStr.toString() ); // string
相同点
不同点
typeof:能判断string、number、undefined、boolean、function、object(null是object)Object.prototype.toString.call():能判断大部分数据类型instanceOf不同数据类型底层都是用二进制来表示的,二进制前三位为000则会被判断为object,而null二进制全是0,所以被判断成object
==:比较过程会进行隐式转换===:值相同,类型相同才会为true转string类型:+(字符串连接符)转number类型:++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !== (关系运算符)转boolean:!(逻辑非运算符)隐式转换,变成NaN >= NaN,NaN不等于自身也不大于自身
隐式转换,变成0 >= 0,为true
[] == false[] == 0'' == 00 == 0不对,JavaScript存在精度丢失问题,由于有些小数无法用二进制表示,所以只能取近似值,解决方法有:
toFixed匿名函数,就是没有名字的函数,比如:
(function(x, y){
alert(x + y);
})(2, 3)
三种
xxx.onclick = function (){}<xxx onclick=""></xxx>xxx.addEventListener('click', function(){}, false)决定事件是捕获阶段执行还是冒泡阶段执行
true:捕获false:默认,冒泡函数声明:享受函数提升函数表达式:归类于变量声明,享受变量提升函数提升优先级 > 变量提升优先级console.log(fun) // fun () {}
// 函数表达式
var fun = function(name) {}
// 函数声明
function fun () {}
console.log(fun) // fun (name) {}
事件冒泡:由最具体的元素接收,并往上传播事件捕获:由最不具体的元素接收,并往下传播DOM事件流:事件捕获 -> 目标阶段 -> 事件冒泡Ajax:是对XMLHttpRequest(XHR)的封装Axios:是基于Promise对XHR对象的封装Fetch:是window的一个方法,基于Promise,与XHR无关,不兼容IE$(document).ready、DOMContentLoaded:DOM树构建完毕,但还没有请求静态资源load:静态资源请求完毕function stopBubble(e) {
if (e.stopPropagation) {
e.stopPropagation()
} else {
window.event.cancelBubble = true;
}
}
function stopDefault(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
}
当子元素都需要绑定相同事件时,可以将事件绑在父元素上,优点有:
// 使用 Map 去重
function quchong1(arr) {
const newArr = []
arr.reduce((pre, next) => {
if (!pre.get(next)) {
pre.set(next, 1)
newArr.push(next)
}
return pre
}, new Map())
return newArr
}
// 使用 Set 去重
function quchong (arr) {
return [...new Set(arr)]
}
Number.isNaN判断前置工作
// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || 'Animal';
// 实例方法
this.sleep = function(){
console.log(this.name + '正在睡觉!');
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃:' + food);
};
核心:将父类的实例作为子类的原型
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat();
console.log(cat.name); // cat
cat.eat('fish') // cat正在吃:fish
cat.sleep() // cat正在睡觉!
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
优点:
new Animal()这样的语句之后执行,不能放构造器中核心:使用父类的构造器来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
function Cat(name) {
Animal.call(this);
this.name = name || 'Tom';
}
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom正在睡觉!
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
优点:
原型链继承中,子类实例共享父类引用属性的问题核心:为父类实例添加新特性,作为子类实例返回
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
var cat = new Cat();
console.log(cat.name) // Tom
cat.sleep() // Tom正在睡觉!
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
优点:
new 子类()还是子类(),返回的对象具有相同效果 缺点:核心:就一个一个拷贝
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
this.name = name || 'Tom';
}
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom正在睡觉!
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
优点:
核心:通过父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom正在睡觉!
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
优点:
构造继承的缺陷,可以继承实例属性/方法,也可继承原型属性/方法核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造时,就不会初始化两次实例方法/属性,避免继承组合的缺点
function Cat(name) {
Animal.call(this);
this.name = name || 'Tom';
}
// 创建一个没有实例方法的类
var Super = function () { };
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
// Test Code
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom正在睡觉!
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
优点:
const obj = new Object()
obj.name = 'Sunshine_Lin'
const obj = { name: 'Sunshin_Lin' }
function createObj(name) {
const obj = new Object()
obj.name = name
return obj
}
const obj = createObj('Sunshine_Lin')
function Person(name) {
this.name = name
}
const person = new Person('Sunshine_Lin')
function Person(name) {
this.name = name
console.log(this)
}
// this指向当前person实例对象
const person = new Person('Sunshine_Lin')
function fn() {
console.log(this)
}
fn() // 浏览器window,node里global
const target = {
fn: function () { console.log(this) }
}
target.fn() // target
// 这种就是改变了this了
const fn = target.fn
fn() // 浏览器window,node里global
const obj = {
name: '林三心',
fn: () => {
console.log(this.name)
}
}
console.log(obj.fn()) // undefined
const obj1 = {
name: '林三心',
sayName: function() {
console.log(this.name)
}
}
const obj2 = {
name: 'Sunshin_Lin'
}
// 改变sayName的this指向obj2
obj1.sayName.call(obj2) // Sunshin_Lin
// 改变sayName的this指向obj2
obj1.sayName.apply(obj2) // Sunshin_Lin
// 改变sayName的this指向obj2
const fn = obj1.sayName.bind(obj2)
fn() // Sunshin_Lin
| 方法 | 作用 | 是否影响原数组 |
|---|---|---|
| push | 在数组后添加元素,返回长度 | ✅ |
| pop | 删除数组最后一项,返回被删项 | ✅ |
| shift | 删除数组第一项,返回被删项 | ✅ |
| unshift | 数组开头添加元素,返回长度 | ✅ |
| reserve | 反转数组,返回数组 | ✅ |
| sort | 排序数组,返回数组 | ✅ |
| splice | 截取数组,返回被截取部分 | ✅ |
| join | 将数组变字符串,返回字符串 | ❌ |
| concat | 连接数组 | ❌ |
| map | 相同规则处理数组项,返回新数组 | ❌ |
| forEach | 遍历数组 | ❌ |
| filter | 过滤数组项,返回符合条件的数组 | ❌ |
| every | 每一项符合规则才返回true | ❌ |
| some | 只要有一项符合规则就返回true | ❌ |
| reduce | 接受上一个return和数组下一项 | ❌ |
| flat | 数组扁平化 | ❌ |
| slice | 截取数组,返回被截取区间 | ❌ |
| 方法 | 作用 |
|---|---|
| Math.max(...arr) | 取arr中的最大值 |
| Math.min(...arr) | 取arr中的最小值 |
| Math.ceil(小数) | 小数向上取整 |
| Math.floor(小数) | 小数向下取整 |
| Math.round(小数) | 小数四舍五入 |
| Math.sqrt(num) | 对num进行开方 |
| Math.pow(num, m) | 对num取m次幂 |
| Math.random() * num | 取0-num的随机数 |
后面出一篇文章专门讲
略
在JS中有三种类型的弹出框可用,分别是:
var date = new Date();
var n = date.toISOString();
console.log(n);
// YYYY-MM-DDTHH:mm:ss.sssZ
BOM就是browser object model,浏览器对象模型
| api | 作用 | 代表方法或属性 |
|---|---|---|
| window.history | 操纵浏览器的记录 | history.back() history.go(-1) |
| window.innerHeight | 获取浏览器窗口的高度 | |
| window.innerWidth | 获取浏览器窗口的宽度 | |
| window.location | 操作刷新按钮和地址栏 | location.host:获取域名和端口 location.hostname:获取主机名 location.port:获取端口号 location.pathname:获取url的路径 location.search:获取?开始的部分 location.href:获取整个url location.hash:获取#开始的部分 location.origin:获取当前域名 location.navigator:获取当前浏览器信息 |
BOM全称Browser Object Model,即浏览器对象模型,主要处理浏览器窗口和框架。
DOM全称Document Object Model,即文档对象模型,是 HTML 和XML 的应用程序接口(API),遵循W3C 的标准,所有浏览器公共遵守的标准。
JS是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM的根节点。
可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。
substr() 函数的形式为substr(startIndex,length)。它从startIndex返回子字符串并返回'length'个字符数。
var s = "hello";
( s.substr(1,4) == "ello" ) // true
substring() 函数的形式为substring(startIndex,endIndex)。它返回从startIndex到endIndex - 1的子字符串。
var s = "hello";
( s.substring(1,4) == "ell" ) // true
“use strict”是Es5中引入的js指令。使用“use strict”指令的目的是强制执行严格模式下的代码。在严格模式下,咱们不能在不声明变量的情况下使用变量。早期版本的js忽略了“use strict”。
<END>
【新产品上架】 🕚
推荐阅读:
每日打卡赢积分兑换书籍入口