javascript 学习笔记

基本类型

类型检测

typeof 用于返回 原始类型 number/string/boolean 及 funciton object undefined

instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。也可以理解为是否为某个对象的实例，typeof 不能区分数组，但 instanceof 则可以。

值类型与对象: 只有对象才有方法使用，但在 JS 中也可以使用值类型调用方法，因为它会在执行时将值类型转为对象。

let hd = "houdunren";
let cms = new String("hdcms");
console.log(typeof hd, typeof cms); //string object

String

转义符号

有些字符有双层含义，需要使用\进行转换

符号 说明
\t 制表符
\n 换行符
\ \ 斜杠符号
\‘ 单引号
\“ 双引号

连接运算符

使用 + 可以连接多个内容组合成字符串，经常用于组合输出内容使用。
使用 += 在字符串上追回字符内容

模板字面量

使用 ` ...${varname}` 符号包裹的字符串中可以写入引入变量与表达式

标签模板

let lesson = 'css';
let web = '后盾人';
tag `访问${web}学习${lesson}前端知识`;

function tag(strings, ...values) {
    console.log(strings); //["访问", "学习", "前端知识"]
    console.log(values); // ["后盾人", "css"]
}

获取长度

使用 length 属性可以获取字符串长度

大小写转换

toLocaleLowerCase()根据任何特定于语言环境的大小写映射， 该方法返回转换为小写的调用字符串值

toLocaleUpperCase()根据任何特定于语言环境的大小写映射， 该方法返回转换为大写的调用字符串值

toLowerCase()方法返回转换为小写的调用字符串值

toUpperCase()方法返回转换为大写的调用字符串值（如果不是 1，则该值将转换为字符串）

移除空白

使用 var.trim()

trim()方法从字符串的两端删除空格

trimEnd()方法从字符串的末尾删除空格 trimRight()是这个方法的别名

trimStart()方法从字符串的开头删除空格。trimLeft()是这个方法的别名

valueOf()方法返回 String 对象的原始值

查找字符串

at 返回字符串索引的值

charAt 方法返回一个新字符串
根据从 0 开始位置获取字符var.charAt(3)
使用数字索引获取字符串 'houd'[3]

indexOf 返回 String 指定值第一次出现的调用对象内的索引，从开始获取字符串位置，监测不到时返回-1, 'houd'.indexOf("o")

lastIndexOf 最后一次出现的调用对象内的索引,从结尾来搜索字符串位置 'houd'.lastIndexOf("o")

startsWith 是否是指定位置开始，第二个参数为查找的开始位置。

endsWith 确定字符串是否以指定字符串的字符结尾，第二个参数为查找的结束位置，返回 true 或 false。

includes() 方法执行区分大小写的搜索，以确定是否可以在另一个字符串中找到一个字符串，字符串是否包含指定的值，第二参数指开始查找位置 'houd'.includes("o",1),返回 true 或 false

search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索

let str = "baidu.com";
console.log(str.search("com"));
console.log(str.search(/\.com/i));

match 方法检索字符串与正则表达式的匹配结果

matchAll 返回与正则表达式匹配字符串的所有结果的迭代器

截取字符串

substring()方法返回 string 开始和结束索引之间的部分 ，或返回到字符串的末尾。

slice()方法提取字符串的一部分并将其作为新字符串返回，而不修改原始字符串

slice、substring 第二个参数为截取的结束位置

substr()方法返回字符串的一部分，从指定的索引开始，然后扩展给定数量的字符，第二个参数指定获取字符数量

替换字符串

replace()方法返回一个新字符串，其中 a 的部分或全部匹配项被 apattern 替换 replacement。的 pattern 可以是一个字符串或一 RegExp，并且 replacement 可以是字符串或一个函数被调用为每个匹配。如果 pattern 是字符串，则仅替换第一次出现。

replaceAll()方法返回一个新字符串，其中 a 的所有匹配项都 pattern 替换为 a replacement。的 pattern 可以是一个字符串或一 RegExp，并且 replacement 可以是字符串或一个函数被调用为每个匹配。

重复生成

repeat()方法构造并返回一个新字符串，该字符串包含调用它的字符串的指定数量的副本，并连接在一起。replace 方法用于字符串的替换操作 根据参数重复生成

padEnd 用给定的字符串（重复，如果需要）填充当前字符串，以便结果字符串达到给定的长度。

const str1 = 'Breaded Mushrooms';

console.log(str1.padEnd(25, '.'));
// expected output: "Breaded Mushrooms........"

padStart()方法用另一个字符串填充当前字符串（多次，如果需要），直到结果字符串达到给定长度。从当前字符串的开头应用填充。

const str1 = '5';

console.log(str1.padStart(2, '0'));
// expected output: "05"
类型转换

split() 方法用于将字符串分割成数组，类似 join 方法的反函数

特殊编码处理

String.charCodeAt 返回 UTF 编码

String.codePointAt 返回一个非负整数，即 UTF-16 代码点值

String.fromCharCode()方法返回从指定的 UTF-16 代码单元序列创建的字符串。

String.fromCodePoint()方法返回使用指定的代码点序列创建的字符串

console.log(String.fromCodePoint(9731, 9733, 9842, 0x2F804));
// expected output: "☃★♲你"

normalize()方法返回字符串的 Unicode 规范化形式。

const name2 = '\u0041\u006d\u0065\u0301\u006c\u0069\u0065';
console.log(`${name1}, ${name2}`);
其他

toString()方法返回一个表示指定对象的字符串

concat 字符串参数连接到调用字符串并返回一个新字符串

localeCompare 返回一个数字，指示引用字符串在排序顺序中是在给定字符串之前、之后还是相同。

String.raw()方法是模板文字的标记函数。这类似于 rPython 中的前缀，或@ C# 中字符串字面量的前缀

const file = String.raw`c:\Development\profile\aboutme.html`;
console.log(`The file was uploaded from: ${filePath}`);
// expected output: "The file was uploaded from: C:\Development\profile\aboutme.html"

已经弃用的方法

anchor big blink bold italics strike fixed fontcolor fontsize
fixed创建一个<tt>HTML 元素，使字符串以固定间距字体显示
fontcolor 方法通过生成带有 HTML<font>元素的字符串来更改字符串的颜色。
link()方法创建一个字符串，该字符串表示一个<a>HTML 元素的代码
small()方法创建一个<small> HTML 元素，使字符串以小字体显示。
fontsize()方法创建一个<font> HTML 元素，使字符串以指定的字体大小显示

sup()方法创建一个<sup>HTML 元素，使字符串显示为上标
toSource()方法返回一个表示对象源代码的字符串

var worldString = 'Hello, world';

console.log(worldString.blink());   // <blink>Hello, world</blink>
console.log(worldString.bold());    // <b>Hello, world</b>
console.log(worldString.italics()); // <i>Hello, world</i>
console.log(worldString.strike());  // <strike>Hello, world</strike>
console.log(worldString.fixed()); // "<tt>Hello, world</tt>"
console.log(worldString.fontcolor('red') +  ' is red in this line');
// '<font color="FF00">Hello, world</font> is red in hexadecimal in this line'
console.log('Click to return to ' + hotText.link(url));
// Click to return to <a href="https://developer.mozilla.org/">MDN</a>
console.log(worldString.small());     // <small>Hello, world</small>
console.log(worldString.big());       // <big>Hello, world</big>
console.log(worldString.fontsize(7)); // <font size="7">Hello, world</fontsize>

Array 数组方法

at 在 返回该处索引的所处的值，允许正整数和负整数，根据索引查值

concat 合并数组

constructor 构造者，构造函数 构造器

copyWithin 内部复制 改变原数组

参数 描述
target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数

entries 包含数组中每个索引键值对

every 用于递归的检测元素，要所有元素操作都要返回真结果才为真。

some 使用 some 函数可以递归的检测元素，如果有一个返回 true，表达式结果就是真。第一个参数为元素，第二个参数为索引，第三个参数为原数组。

fill填充

参数：

    1. value 必须填充的值
    1. start 可选，开始填充的位置
    1. end 可选，停止填充的位置，默认为 array.length

filter 筛查数组符合条件的所有元素，并返回一个新数组

参数：

array.filter(function(currentValue,index,arr), thisValue)

find 查找 发现 函数验证返回满足条件的第一个元素,如果找不到返回值为undefined

findIndex 查找索引 函数验证返回满足条件的第一个元素的索引

flat 平坦平面的意思 按照指定深度循环数组，将元素中的子数组元素合并为一个新数组 [0,1,2,[3,4]] 转化后 [1,2,3,4] 可以指定要展开几层嵌套例如 Array.flat(1) Array.flat(2) 展开任意层级的所有嵌套 Array.flat(Infinity)

flatMap 平面地图 使用映射函数映射每个元素，然后将结果压缩成一个新数组
如果用 arr.map()他会返回按照元素个数的数组而不是一个整体的数组，如果用 flatMap 他会返回一个整个的数组，但是功能和 map 一样

from 类数组也就是可以 entries 的类型，转换为数组

forEach 对每一个元素执行一次给定的函数,但是没有返回值。

includes 包含 判断一个数组是否可能包含一个指定的值，根据情况，如果可以返回真实，否则返回虚假。

indexOf 索引 返回第一个查找的元素的索引，如果没找到返回-1

isArray 判断是否是 array 类型

keys 关键 返回包含数组中的键值对的索引键

latIndexOf 最后一个索引 查找数组所有满足条件的最后一个的索引

length 长度

map 使用 map 映射可以在数组的所有元素上应用函数，用于映射出新的值。

  • 数组中的元素为原始数组元素调用函数处理后的值。
  • 方法按照原始数组元素顺序依次处理元素。
  • map 不会改变原始数组。

of 创建一个具有数量参数的新数组，Array.of() 和 Array 构造函数之间的区别在于处理实例：Array.of(7) 创建一个具有单个元素 7的数组，而 Array(7) 创建一个长度为 7 个的空数组

reduce 使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始

  • 第一个参数是执行函数，第二个参数为初始值
  • 传入第二个参数时将所有元素循环一遍
  • 不传第二个参数时从第二个元素开始循环
参数 说明
prev 累加器（acc） 第一个参数是执行函数，上次调用回调函数返回的结果
cur 当前元素值 第二个参数为初始值
index 当前的索引
array 原数组

数组排序

reverse 反转 颠倒位置

sort 种类 排序 返回新数组，
如果省略参数则，默认排序是将元素转换字符串后比较他们的 UTF-16 代码单元值序列构建的,

  • 参数一：第一个用于比较的元素
  • 参数二：第二个用于比较的元素
    num.sort((a, b) => a - b)

join 连接 结合 将一个数组或者类数组连接成一个字符串并返回

数组字符串

toLocaleString 返回一个字符串表示数组中的元素

toString 返回一个字符串，表示指定数组及其元素

toLocaleString 与 toString 最大的区别是在转换时间格式上有区别

sd.toLocaleString()
"2017/2/15 上午11:21:31"

sd.toString()
"Wed Feb 15 2017 11:21:31 GMT+0800 (CST)"

数组添加删除

unshift 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

push 添加推入 将一个或多个元素添加到数组中，并增加数组长度

shift 移动 从数组中删除第一个元素,并将其返回

pop 弹出 从数组中删除最后一个元素，并返回该元素

//示例代码
  const ar = [2]
  ar.unshift(1)
  // 从头添加
  console.log('unshift: ' + ar)
  // 从后面添加
  ar.push(3)
  console.log('push: ' + ar)
  //从前删除
  ar.shift()
  console.log('shift: ' + ar)
  // 从后删除
  ar.pop()
  console.log('pop: ' + ar)

slice 切片 返回新数组，通过 begin 和 end 进行原数组的拷贝

  • begin 从此处开始
  • end 在此处结束

splice 接合 可以通过删除或者替换现有元素或原地添加新的元素来修改数组，并以数组形式返回被修改的内容，会改变原数组
参数

  • start 开始位置
  • deleteCount 表示要移除的与元素个数
  • item，item2 任选，表示要添加的元素

values 方法返回一个新的 Array Iterator 迭代器对象

Symbol

用于防止属性名冲突而产生的，symbol 值是唯一的，独一无二不会重复

symbol 不可以添加属性，可传入字符串用于描述

let hd = Symbol('is name');

Symbol.for

根据描述获取 Symbol，如果不存在则新建一个 Symbol

  • 使用 Symbol.for 会在系统中将 Symbol 登记
  • 使用 Symbol 则不会登记

Symbol.keyFor

Symbol.keyFor 根据使用Symbol.for登记的 Symbol 返回描述，如果找不到返回 undefined

et hd = Symbol.for("is name ");
console.log(Symbol.keyFor(hd)); //is name

let edu = Symbol("is for name");
console.log(Symbol.keyFor(edu)); //undefined

对象属性

Symbol 是独一无二的所以保证对象属性的唯一

  • Symbol 声明和访问使用形式操作
  • 不能使用. 语法，因为.语法是操作字符串属性的

Boolean

隐式转换

数据类型 true false
String 非空字符串 空字符串
Number 非 0 的数值 0，NaN
Array 数组不参与比较时 参与比较的空数组
Object 所有对象
undefined 无 undefin
null 无 null
NaN 无 NaN

显示转换

使用 !! 转换布尔类型

Number

Number.isInteger(1.2) 判断是否为整数

Number.isNaN(1.2) 判断是否为无效数值，也可以使用 Object.is(res,NaN)

parseInt(' 99badi')提取字符串开始去除空白后的数字转为整数

parseFloat(' 99badi')转换字符串为浮点数，忽略字符串前面空白字符

toFixed(2) 可对数值舍入操作，参数指定保存的小数位

Math

使用 Math.min(1,2,3) 与 Math.max(1,2,3) 可以取得最小与最大值。

使用Math.max.apply(Math, [1, 2, 3]) 来从数组中取值

取最接近的向上整数 Math.ceil(1.111)

得到最接近的向下整数Math.floor(1.555)

四舍五入处理 Math.round(1.5)

Math.floor(Math.random() * 5) 方法用于返回 >=0 且 <1 的随机数（包括 0 但不包括 1

Set

用于存储任何类型的唯一值，无论是基本类型还是对象引用

使用 add 添加元素，不允许重复添加 hd.add('hdcms')

获取元素数量 hd.size

检测元素是否存在 hd.has('hdcms')

使用 delete 方法删除单个元素，返回值为 boolean 类型 hd.delete("hdcms")

使用 clear 删除所有元素 hd.clear()

可以使用点语法 或 Array.form 静态方法将 Set 类型转为数组，这样就可以使用数组处理函数了 Array.from(set)

移除 Set 中大于 5 的数值 new Set([...hd].filter(item => item < 5))

去除字符串重复 [...new Set("houdunren")].join("")

遍历数据

使用 keys()/values()/entries() 都可以返回迭代对象，因为 set 类型只有值所以 keys 与 values 方法结果一致。

const hd = new Set(["hdcms", "houdunren"]);
console.log(hd.values()); //SetIterator {"hdcms", "houdunren"}
console.log(hd.keys()); //SetIterator {"hdcms", "houdunren"}
console.log(hd.entries()); //SetIterator {"hdcms" => "hdcms", "houdunren" => "houdunren"}

可以使用 forEach 遍历 Set 数据，默认使用 values 方法创建迭代器。

WeakSet

WeakSet 结构同样不会存储重复的值，它的成员必须只能是对象类型的值。

  • 垃圾回收不考虑 WeakSet，即被 WeakSet 引用时引用计数器不加一，所以对象不被引用时不管 WeakSet 是否在使用都将删除
  • 因为 WeakSet 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行 forEach( )遍历等操作
  • 也是因为弱引用，WeakSet 结构没有 keys( )，values( )，entries( )等方法和 size 属性
  • 因为是弱引用所以当外部引用删除时，希望自动删除数据时使用 WeakMap

apply/call/bind

原理分析

构造函数中的 this 默认是一个空对象，然后构造函数处理后把这个空对象变得有值。可以改变构造函数中的空对象，即让构造函数 this 指向到另外一个对象

apply/call

call 与 apply 用于显示设置函数的上下文，两个方法作用一样都是将对象绑定到 this，只是在传递参数上有所不同。

  • apply 用数组传参
  • call 需要分别传参
  • 与 bind 不同 call/apply 会立即执行函数
show.call(lisi, '后盾人');
show.apply(wangwu, ['HDCMS']);

bind

bind()是将函数绑定到某个对象，比如 a.bind(b) 可以理解为将 a 函数绑定到 b 对象上即 b.a()

  • 与 call/apply 不同 bind 不会立即执行
  • bind 是赋值函数行为会返回新函数

工厂函数

在函数中返回对象的函数称为工厂函数，工厂函数有以下优点

  • 减少重复创建相同类型对象的代码
  • 修改工厂函数的方法影响所有同类对象

构造函数

和工厂函数相似构造函数也用于创建对象，它的上下文为新的对象实例。

  • 构造函数名每个单词首字母大写即 Pascal 命名规范
  • this 指当前创建的对象
  • 不需要返回 this 系统会自动完成
  • 需要使用 new 关键词生成对象

对象函数

在 JS 中函数也是一个对象

查看特征

  • 使用 Object.getOwnPropertyDescriptor 查看对象属性的描述。
  • 使用 Object.getOwnPropertyDescriptors 查看对象所有属性的描述
  • 属性包括以下四种特性
特性 说明 默认值
configurable 能否使用 delete、能否需改属性特性、或能否修改访问器属性 true
enumerable 对象属性是否可通过 for-in 循环，或 Object.keys() 读取 true
writable 对象属性是否可修改 true
value 对象属性的默认值 undefined

设置特征

使用 Object.defineProperty 方法修改属性特性，通过下面的设置属性 name 将不能被遍历、删除、修改。
使用 defineProperty 可以模拟定义私有属性，从而使用面向对象的抽象特性。

使用 Object.defineProperties 可以一次设置多个属性，具体参数和上面介绍的一样。

Object.preventExtensions 禁止向对象添加属性

Object.isExtensible判断是否能向对象中添加属性

封闭对象 Object.seal() 方法封闭一个对象，阻止添加新属性并将所有现有属性标记为 configurable: false

冻结对象 Object.freeze 冻结对象后不允许添加、删除、修改属性，writable、configurable 都标记为 false

Object.isFrozen()方法判断一个对象是否被冻结

属性访问器

getter 方法用于获得属性值，setter 方法用于设置属性，这是 JS 提供的存取器特性即使用函数来管理属性。

  • 用于避免错误的赋值
  • 需要动态监测值的改变
  • 属性只能在访问器和普通属性任选其一，不能共同存在
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容