JavaScript速记

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

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

作者:狐狸家的鱼

GitHub:八至

数据类型

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

1.基础类型(原始值)

  • 数值number:用于任何类型的数字,包括整数或浮点数
  • 字符串string:字符串
  • 布尔值boolean:逻辑类型,truefalse
  • 空值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/pushshift/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.属性的gettersetter

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

当读取属性值时,用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'

构造函数Personprototype属性,就是实例对象jackmark的原型对象,它俩都共享了该属性。

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

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

原型链

形成一个原型链:对象到原型,原型到原型...

  • 所有对象都有自己的原型对象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运算符只能用于对象,不适用原始类型的值
  • 对于undefinednullinstanceOf运算符总是返回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.prototypecall/apply方法时,函数内的ths·会被显示设置为函数调用的第一个参数

3.绑定this的方法

  • call():可以指定函数内部this的指向(即函数执行时所在的作用域),函数在指定作用域中调用该函数,
    • 其参数是一个对象,为空时,nullundefined传入全局对象
    • 其参数是一个原始值,会自动转为对应的包装对象,然后传入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指向的对象,为nullundefined时,传入全局对象。

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

  • 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
posted @ 2019-04-01 13:18  狐狸家的鱼  阅读(364)  评论(0编辑  收藏  举报