技术教程 编程教程 JS刷题自制参考知识 正文

JS刷题自制参考知识

2023-03-08,,

（建议复制到本地，需要看的时候打开Typora，大纲点击要查的内容即可，我一般记不清某个方法的时候就查一下。）

基础

Typescript

TypeScript是一个开源的、渐进式包含类型的JavaScript超集，由微软创建并维护。创建它的目的是让开发者增强JavaScript的能力并使应用的规模扩展变得更容易。它的主要功能之一是为JavaScript变量提供类型支持。在JavaScript中提供类型支持可以实现静态检查，从而更容易地重构代码和寻找bug。最后，TypeScript会被编译为简单的JavaScript代码。

使用

npm install -g typescript

创建以.ts为扩展名的文件再使用tsc命令来编译它，如：

tsc example.ts

内容

类型推断

// 给变量设置类型

let age: number = 20;

//简洁写法

let age = 20;  // 自动推断为number

当声明了一个变量但没有设置其初始值，可以为其设置一个类型

let language : string;

接口

    给变量设置一个类型，符合这个描述的对象都是接口符合的目标
    和其他语言中的接口一个意思
// 1 类型限制

interface Person{

    name: string;

    age: number;

}

function printName(person: Person){

    console.log(person.name)

}

// 2 类与接口

interface Comparable{

    compareTo(b): number;

}

class MyObject implements Comparable{

    age: number;

	compareTo(b): number{

    	if(this.age === b.age){

        	return 0;

    	}

    	return this.age > b.age ? 1 : -1;

	}

}

泛型

修改上面的接口，指定接口内函数的参数类型。

interface Comparable<T>{

    compareTo(b: T): number;

}

class MyObject implements Comparable<MyObject>{

    age: number;

    compareTo(b: MyOBject): number{

        if(this.age === b.age){

        	return 0;

    	}

    	return this.age > b.age ? 1 : -1;

    }

}

数据结构

数组 Array

构造

// 使用Array构造函数

new Array()  // 创建空数组

new Array(20)   // 创建包函 20 项的数组

new Array( 'red', 'gray', 'pink') // 创建带有三个字符串的数组

// 使用数组字面量构造

let demo = [ ]  // 创建空数组

let demo1 = [20]   // 创建包函 20 项的数组

let demo2 = [ 'red', 'gray', 'pink' ] // 创建带有三个字符串的数组

常用API

静态

Array.from(element)

将element转化为数组，适用于字符串、集合、映射等等。

转字符串

join([sep])

把数组里面的元素拼接成字符串。

sep为间隔符，默认为逗号。

toString()

把数组里面的元素拼接成字符串，以逗号间隔。

concat(arr1 [, arr2, ...])

连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

slice(start[, end])

截取从start到end的数组，返回新的子数组。

支持负数，含头不含尾。（end省略表示一直到结尾）

reverse()

翻转数组，直接修改原数组。

sort([sortFunc])

排序，直接修改原数组。

默认排序顺序为按字母升序。（使用数字排序要通过函数参数！）

sortFunc规定排序顺序，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 返回一个小于 0 的值，则a 排在 b 之前。
若 返回 0，则a和b的位置相对不变，不是所有浏览器都遵守。
若 返回一个大于 0 的值，则a排在b之后。

按数字升序排序：arr.sort((a, b) => a - b)

按数字降序排序：arr.sort((a, b) => b - a)

查找

下面3个函数的 start 为合法的数组下标，接受负数，负数超出数组下标有效，正数超出数组下标无效。

indexOf(value [, start])

返回value在数组中首次出现的位置，没有找到返回-1

检查是否包含某值：

if(arr.indexOf(el) !== -1){}

// 会导致对NaN的误判

[NaN].indexOf(NaN)  // -1

[NaN].includes(NaN) // true
lastIndexOf(value [, start])

返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

includes(value [, start])

返回一个布尔值，表示某个数组是否包含给定的值。

find( func(cur [, index [, arr]]) )

返回通过测试（函数内判断）的数组的第一个元素的值。

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined

findIndex( func(cur [, index [, arr]]) )

返回传入通过测试（函数内判断）的数组第一个元素位置。

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

增删

splice(start, deleteCount [, value1, value2...])

直接修改原数组。

返回所有被删除元素组成的子数组。

如果deleteCount是0，表示插入元素，插入的元素在start之前。

如果deleteCount不为0，表示删除从 start 开始并包含 start 的deleteCount个元素。

arr.unshift(value1 [, value2, ...])

在数组的最开头插入元素。

修改原数组。返回新数组的length。

arr.shift()

弹出数组最开头的元素。

修改原数组。

返回被弹出的元素。

arr.push(value1[,value2,arr1])

在数组末尾追加元素。

修改原数组。返回新数组的length。

追加进去的数组不会被打散。

arr.pop()

弹出数组最末尾的元素。

修改原数组。

返回被弹出的元素。

迭代

以下3个函数还有第2个可选参数thisValue，对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

因不常用，在下文省略。

filter( func(cur [, index [, arr]]) )

返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。相当于过滤。

不会对空数组进行检测。

不会改变原始数组。

let arr = [1, 2, 3, 4, 5]

let newArr = arr.filter(cur => cur%2===0)

// [2, 4]
map( func(cur [, index [, arr]]) )

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。相当于映射到一个新数组。

按照原始数组元素顺序依次处理元素。

不会对空数组进行检测。

不会改变原始数组。

let arr = [1, 2, 3, 4, 5]

let newArr = arr.map(cur => cur**2)

// [1, 4, 9, 16, 25]
reduce( func(total, cur [, index [, arr]]), [initValue] )

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。相当于汇总。

initValue是total的初始值。

对于空数组是不会执行回调函数。

let arr = [1, 2, 3, 4, 5]

let sum = arr.reduce((total, cur) => total + cur)  // 15

reduceRight()与本方法相同，只不过是从末尾开始累积。

forEach( func(cur [, index [, arr]]) )

没有返回值，本质上等同于 for 循环，对每一项执行 func 函数。

如果cur操作的是基本数据类型，则不改变原数组的值；如果cur是引用类型的对象，则会修改原数组的值。

不支持 continue，用 return false 或 return true 代替。

不支持 break，用 try catch/every/some 代替

空数组不会执行回调函数。

let arr1 = [1, 2, 3, 4, 5]

arr1.forEach(cur => {cur=1})

// 不改变

arr1.forEach((cur, index) => {arr1[index]=1})

// 改变 [1, 1, 1, 1, 1]

let arr2 = [1, '2', [3], {a: 4}]

arr2.forEach(cur => {cur=1})

// 不改变

let arr3 = [{a: 1}, {a: 2}, {a: 3}, {a: 4}, {a: 5}]

arr3.forEach(cur => {cur.a = 1})

// 改变  [{a: 1}, {a: 1}, {a: 1}, {a: 1}, {a: 1}]

注意：字符串不可修改，只能替换。

every( checkFunc(cur [, index [, arr]]) )

用于检测数组所有元素是否都符合指定条件（通过函数提供）。

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

some( checkFunc(cur [, index [, arr]]) )

用于检测数组是否有部分元素符合指定条件（通过函数提供）。

如果数组中检测到有一个元素满足，则整个表达式返回 true ，且剩余的元素不会再进行检测。
如果所有元素都不满足条件，则返回 false。

keys()

从数组创建一个包含数组键（下标）的可迭代对象（是Iterator! 并非Array）。

for(i of arr.keys()){...}

values()

返回一个数组的迭代对象，该对象包含数组的值。

for(i of arr.values()){...}

entries()

返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

for(i of arr.entries()){...}

集合 Set

Set是ES6新的数据结构，是值的集合，但成员的值是唯一的，没有重复的值。你可以按照插入的顺序来遍历它。

可使用 for of 遍历，可用使用 ... 展开。

构造

let s = new Set()

new Set([1, 2, 4, 5])  // Set(5) { 1, 2, 4, 5}

new Set("China")  // Set(5) {'C', 'h', 'i', 'n', 'a'}

new Set(s)  // 克隆一个Set

实例属性

size

返回元素数量。

实例方法

has(value)

如集合中含有value，返回true，否则返回false.

增删

add(value)

将value添加到集合中。

delete(value)

将value从集合中删除，成功返回true，失败返回false.

clear()

删除集合中所有元素。

迭代

forEach( func [, this])

为集合中的每个元素都执行func函数。

values()

返回值的可迭代对象。

keys()

和 values() 一样。注意：这和数组不同。

entries()

返回一个可迭代对象，包含一个 [value, value] 的数组。

并交差(自定义函数判断)

// 是否超集

function isSuperset(set, subset) {

    for (let elem of subset) {

        if (!set.has(elem)) {

            return false

        }

    }

    return true

}

// 并集

function union(setA, setB) {

    let _union = new Set(setA)

    for (let elem of setB) {

        _union.add(elem)

    }

    return _union

}

// 交集

function intersection(setA, setB) {

    let _intersection = new Set()

    for (let elem of setB) {

        if (setA.has(elem)) {

            _intersection.add(elem)

        }

    }

    return _intersection

}

// 返回两个集合中不重复的元素集合,即会移除两个集合中都存在的元素。

function symmetricDifference(setA, setB) {

    let _difference = new Set(setA)

    for (let elem of setB) {

        if (_difference.has(elem)) {

            _difference.delete(elem)

        } else {

            _difference.add(elem)

        }

    }

    return _difference

}

// 返回A与B的差集，即返回A删除 A与B交集的元素 后的集合。

function difference(setA, setB) {

    let _difference = new Set(setA)

    for (let elem of setB) {

        _difference.delete(elem)

    }

    return _difference

}

// Examples

const setA = new Set([1, 2, 3, 4])

const setB = new Set([2, 3])

const setC = new Set([3, 4, 5, 6])

isSuperset(setA, setB)          // returns true

union(setA, setC)               // returns Set {1, 2, 3, 4, 5, 6}

intersection(setA, setC)        // returns Set {3, 4}

symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6}

difference(setA, setC)          // returns Set {1, 2}

// intersect can be simulated via

const intersection = new Set([...mySet1].filter(x => mySet2.has(x)))

// difference can be simulated via

const difference = new Set([...mySet1].filter(x => !mySet2.has(x)))

映射 Map

Map是存储ES6中键值对的数据集，可以按插入顺序遍历。

可使用 for of

构造

const map1 = new Map();

map1.set('a', 1);

map1.set('b', 2);

map1.set('c', 3);

// 可以被克隆

const original = new Map([[1, 'one']])

const clone = new Map(original)

console.log(clone.get(1))       // one

console.log(original === clone) // false (useful for shallow comparison)

// 深拷贝，两map互不影响，也不相等。

与对象的比较

Map Object
意外的key 不包含任何key Object 包含原型，所以它有默认键。 Note: 从ES5开始，可以通过 Object.create(null) 绕过，但很少这样做。
键的类型 任何类型(包括functions, objects, or any primitive). NaN 也可以是key 必须是 String 或者 Symbol
键的顺序 插入顺序 虽然现在普通Object 的键是有序的，但情况并非总是如此，而且顺序很复杂。因此，最好不要依赖属性顺序。
Size size属性 手动确认
Iteration 可迭代 Object不可迭代，所以不能直接使用 for of 遍历 Note: 通过获取可迭代对象如 Object.keys()， Object.values() 来进行迭代。
表现 在涉及频繁添加和删除键值对的场景中表现更好。 未针对频繁添加和删除键值对进行优化。
序列化和解析 没有序列化和解析的本地支持。 (但你可以使用JSON.stringify()的replacer 参数，以及JSON.parse()的 reviver 参数。 可以参考How do you JSON.stringify an ES6 Map?). Object转Json： JSON.stringify() Json转Object : JSON.parse()

实例属性

size

返回元素数量。

实例方法

has(key)

如集合中含有key，返回true，否则返回false.

增删

set(key, value)

将键值对添加到集合中。

也可以使用 对象名[键名] = 值 来添加。

get(key)

获取key对应的value，如未找到则返回 undefined

delete(key)

将键为key的键值对从集合中删除，成功返回true，失败返回false.

clear()

删除集合中所有元素。

迭代

forEach( func [, this])

为集合中的每个元素都执行func函数。

values()

返回值的可迭代对象。

keys()

和 values() 一样。注意：这和数组不同。

entries()

返回一个可迭代对象，包含一个 [value, value] 的数组。

使用实例

const myMap = new Map()

myMap.set(0, 'zero')

myMap.set(1, 'one')

for (const [key, value] of myMap) {

  console.log(key + ' = ' + value)

}

// 0 = zero

// 1 = one

myMap.forEach(function(value, key) {

  console.log(key + ' = ' + value)

})

// 0 = zero

// 1 = one

// Use Array.from() to transform a map into a 2D key-value Array

console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray

JS刷题自制参考知识的相关教程结束。

《JS刷题自制参考知识.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!