JavaScript那些磨人的小妖精

JavaScript常见知识点积累，包括数据类型、数值转换、对象、原型与原型链、作用域与闭包等等，持续整理更新，如有错误请指正，甚是感激

本文链接：JavaScript那些磨人的小妖精

作者：狐狸家的鱼

GitHub：八至

数据类型

一共有七种数据类型，主要为两大类：原始类型、对象类型

1.基础类型（原始值）

• 数值number：用于任何类型的数字，包括整数或浮点数
• 字符串string：字符串
• 布尔值boolean：逻辑类型，true和false
• 空值null：未知的值
• 无定义undefined：未定义的值
• symbol：创建对象的唯一标识符（ES6新增）

2.复杂类型（对象值）

• 对象object：复杂的数据结构

3.instance操作符

用来比较两个操作数的构造函数。

4.隐式转换

显示转换主要涉及三种转换：

• 值->原始值：ToPrimitive()
• 值->数字：ToNumber()
• 值->字符串：ToString()

内置类型的构造函数隐式转换

• 转换为字符串：‘‘+10===‘10‘//true 将一个值加上空字符串可以转换为字符串类型
• 转化为数字：+‘10‘ === 10//true 使用一元的加号操作符，把字符串转换为数字
• 转换为布尔值：使用否操作符两次

!!‘foo‘;   // true
!!‘‘;      // false
!!‘0‘;     // true
!!‘1‘;     // true
!!‘-1‘     // true
!!{};      // true
!!true;    // true

运算符

• 算术运算符：加减乘除（+-*/）、指数（**）、余数（%）、自增(++)、自减（--）、数值、负数值
• 比较运算符：大于(>)、小于(<)、大于或等于(>=)、小于或等于(<=)、相等(==)、严格相等(===)、不相等(!=)、严格不相等(!==)
• 布尔运算符：取反(!)、且(&&)、或(||)、三元(? :)
• 二进制位运算符

数组Array

对象允许存储键值化的集合,可以存储任何类型的元素

1.方法

添加/移除元素 pop/push、shift/unshift

• unshift：在数组首部添加一个元素
• shift：取出并返回第一个元素
• push：在末尾添加一个元素
• pop:取出并返回最后一个元素

添加/删除/插入元素splice()/slice()

arr.splice(index[], deleteCount, elem1, ..., elemN])

• 从索引位置删除几个元素，并用另外的元素替换它们。
• 将 deleteCount 设置为 0，splice 方法就能够插入元素而不用删除 arr.slice(start, end)
• 从所有元素的开始索引 "start" 复制到 "end" (不包括 "end") 返回一个新的数组

合并数组concat()

arr.concat(arg1, arg2...)

查询数组 sort()

• 1.indexOf/lastIndexOf 和 includes
  • arr.indexOf(item, from) 从索引 from 查询 item，如果找到返回索引，否则返回 -1
  • arr.lastIndexOf(item, from) 和上面相同，只是从尾部开始查询
  • arr.includes(item, from) 从索引 from 查询 item，如果找到则返回 true
• 2.find 和 findIndex

  let result = arr.find(function(item, index, array) {
  // 如果查询到返回 true
  });

  • item是元素
  • index是它的索引
  • array是数组本身

返回true停止查询，返回item，没有查询到结果则返回undefined。

arr.findIndex与之一样，不过返回的是元素索引而不是元素本身。

过滤数组filter()

返回所有匹配元素组成的数组

let results = arr.filter(function(item, index, array) {
  // 在元素通过过滤器时返回 true
});

转换数组

• map()

迭代并返回数组中每个元素调用函数并返回符合结果的数组

let result = arr.map(function(item, index, array) {
  // 返回新值而不是当前元素
})

• sort():数组排序
• reverse():颠倒数组，然后返回它

迭代forEach

允许为数组的每个元素运行一个函数

arr.forEach(function(item, index, array) {
  // ... do something with item
});

遍历数组

• 老方法for循环：for(let i=0; i<arr.length; i++)
• for...of：不能获取当前元素的索引,只能访问 items
• for...in（不推荐）
• forEach

对象(Object)

• 对象是用来存储键值对和属性的实体
• 对象是单个实物的抽象

1.属性的getter和setter

属性分为两种：数据属性和访问器属性。

当读取属性值时，用getter，当设置属性值时，使用setter。

2.对象操作

• 访问属性的方法
  • 点符号：obj.property
  • 方括号：obj["property]
• 删除属性：delete obj.property
• 检查属性是否存在：key in obj
• 遍历对象：for(let key in obj)
• 对象根据引用来复制或者赋值：变量存储的不是对象的“值”，而是值的“引用”（内存地址）。所以复制变量或者传递变量到方法中只是复制了对象的引用。 所有的引用操作（像增加，删除属性）都作用于同一个对象
• 深拷贝使用Object.assign或者_.cloneDeep(obj)

3.原型与原型链

原型prototype

每个函数都有一个prototype属性，指向对象。

function foo()
typeof foo.prototype; //Object

对于构造函数来说，生成实例的时候，该prototype属性会自动成为实例对象的原型

作用

对象的属性和方法定义在原型上，那么所有实例对象都能共享，节省内存。

function Person(name){
  this.name = name;
}
person.prototype.sex = ‘male‘;

let jack = new Person(‘jack‘);
let mark = new Person(‘mark‘);

jack.sex;//‘male‘
mark.sex;//‘male‘

构造函数Person的prototype属性，就是实例对象jack和mark的原型对象，它俩都共享了该属性。

原型对象的属性不是实例对象自身的属性。修改原型对象时，会体现在所有实例对象上，因为原型对象是共享的。

如果实例对象自身有某个属性或方法，实例对象不会取原型对象上获取。 如果

原型链

形成一个原型链：对象到原型，原型到原型...

• 所有对象都有自己的原型对象prototype
  • 对象可以充当其他对象的原型
  • 原型对象本身也是对象，所有它也有自己的原型
• 所有对象的原型最终上溯到Object.prototype，继承它的属性
• Obejct.prototype的原型是null，也就是没有自己的原型，原型链的尽头就是null

Object.getPrototypeOf(Object.prototype)
// null

• 读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。
• 如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overriding）

原型方法

• Object.create():j接受一个对象作为参数，然后以它的原型返回一个实例对象，完全继承原型对象的属性
• Object.setPrototypeOf：为参数对象设置原型，返回该参数对象。接受两次参数，第一个为现有对象，第二个为原型对象
• Object.getPrototypeOf：返回参数对象的原型
• Object.prototype.isPrototypeOf()：判断该对象是否为参数对象的原型
• Object.prototype._proto_：返回该对象的原型。_proto_属性指向当前对象的原型对象，即构造函数的prototypr属性

let Person = function(){};
let people = new Person();
Object.getPrototypeOf(people);//Person.prototype

• 获取实例对象obj的原型对象有三种方法：
  • obj._proto_
  • obj.constructor.prototype
  • Objct.getPrototyprOf(obj)
• Object.getOwnPropertyNames：返回一个数组，元素是参数对象本身所有属性的键名
• Object.prototype.hasOwnProperty()：返回布尔值，判断某个属性在对象自身还是在原型链上

hasOwnPrototype属性(推荐用于遍历对象属性)

• 判断一个对象是否包含自定义属性而不是原型链上的属性
• hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数

constructor属性

• prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数

function Person(){};
Person.prototype.constructor;//Person

• constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承
• 修改了原型对象，一般会同时修改constructor属性

instanceof运算符

• 返回一个实例，检验对象是否为某个构造函数的实例
• instanceof运算符只能用于对象，不适用原始类型的值
• 对于undefined和null，instanceOf运算符总是返回false

对象拷贝

• 确保拷贝后的对象与元对象具有相同原型
• 确保拷贝后的对象与原对象具有相同的实例属性

let copyObj = origin => {
 return Obejct.create(
  Object.getPrototypeOf(origin),
  Obejct.getOwnPropertyDescriptors(origin)
 );
}

this关键字

1.涵义

• this在构造函数中，表示实例对象
• 不管在什么场合，它总是返回一个对象
• this就是属性或方法“当前”所在的对象
• this的指向是可变的，因为属性所在的当前对象可变
• this的实质就是在函数体内部，指代函数当前运行环境
• 在全局环境执行，this指向全局环境
• 在obj环境执行，指向obj

function Person(){
 return "我是" + this.name;
}
let jack = {
 name:"jack",
 resume:Person
};
let mark = {
  name:"mark",
  resume:Person
 };
 jack.resume();//"我是jack"
 mark.resume();//"我是mark"

2.使用场合

• (1)全局环境：只要全局环境下使用this，它指向的是顶层对象window
• (2)构造函数：指向实例对象
• (3)对象的方法：指向方法运行时所在的对象
• (4)显示设置this：当使用Function.prototype的call/apply方法时，函数内的ths·会被显示设置为函数调用的第一个参数

3.绑定this的方法

• call()：可以指定函数内部this的指向（即函数执行时所在的作用域），函数在指定作用域中调用该函数，
  • 其参数是一个对象，为空时，null和undefined传入全局对象
  • 其参数是一个原始值，会自动转为对应的包装对象，然后传入call方法

let obj = {};
let person = function (){
 return this;
}
person();//window
person.call(obj);//obj

全局环境运行函数person时，this指向全局环境（window），call方法改变this指向对象obj

• apply：与call类型，唯一不同就是它接收一个数组作为函数执行时的参数

function.apply(thisValue, [...arr]);

第一个参数是this指向的对象，为null或undefined时，传入全局对象。

第二个参数是数组，其元素依次作为参数传入原函数。

• bind()：将函数体内的this绑定到某个对象，然后返回一个新函数

let person = function(name, sex){
 return "我叫" + name + "," + sex;
}
let obj = {
 name:"jack"，
 sex:21
}
let new = person.bind(obj);
new();//我叫jack，21

4.this使用注意点

• 避免多层套用this
• 避免数组处理方法中使用this
• 避免回调函数中使用this
• 函数声明时的this只有等到调用时才会有值
• 箭头函数没有this，在箭头函数内部访问的都是来自外部的this值

JavaScript那些磨人的小妖精

原文：https://www.cnblogs.com/suRimn/p/10635800.html