基本类型
类型检测
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
创建一个HTML 元素,使字符串以固定间距字体显示
fontcolor
方法通过生成带有 HTML元素的字符串来更改字符串的颜色。
link()
方法创建一个字符串,该字符串表示一个HTML 元素的代码
small()
方法创建一个 HTML 元素,使字符串以小字体显示。
fontsize()
方法创建一个 HTML 元素,使字符串以指定的字体大小显示
sup()
方法创建一个HTML 元素,使字符串显示为上标
toSource()
方法返回一个表示对象源代码的字符串
var worldString = 'Hello, world';
console.log(worldString.blink()); //
console.log(worldString.bold()); // Hello, world
console.log(worldString.italics()); // Hello, world
console.log(worldString.strike()); // Hello, world
console.log(worldString.fixed()); // "Hello, world"
console.log(worldString.fontcolor('red') + ' is red in this line');
// 'Hello, world is red in hexadecimal in this line'
console.log('Click to return to ' + hotText.link(url));
// Click to return to MDN
console.log(worldString.small()); // Hello, world
console.log(worldString.big()); // Hello, world
console.log(worldString.fontsize(7)); // Hello, world
Array 数组方法
at
在 返回该处索引的所处的值,允许正整数和负整数,根据索引查值
concat
合并数组
constructor
构造者,构造函数 构造器
copyWithin
内部复制 改变原数组
参数 | 描述 |
---|---|
target | 必需。复制到指定目标索引位置。 |
start | 可选。元素复制的起始位置。 |
end | 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数 |
entries
包含数组中每个索引键值对
every
用于递归的检测元素,要所有元素操作都要返回真结果才为真。
some
使用 some 函数可以递归的检测元素,如果有一个返回 true,表达式结果就是真。第一个参数为元素,第二个参数为索引,第三个参数为原数组。
fill
填充
参数:
-
- value 必须填充的值
-
- start 可选,开始填充的位置
-
- 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 提供的存取器特性即使用函数来管理属性。
- 用于避免错误的赋值
- 需要动态监测值的改变
- 属性只能在访问器和普通属性任选其一,不能共同存在