Array Math Date String 的常用api
javaScript 种有3种对象 自定义对象, 浏览器对象, 内置对象
一、数组对象
Section titled “一、数组对象”可以将一组数据的集合存放在单个变量下,一种数据结构,是一组数据的集合
属于Object类型
数据里面的数据,叫数组元素
数组中可以存放任意不同类型的元素 例: 数子,字符串,布尔
提示:使用delete 也可以删除元素
Section titled “提示:使用delete 也可以删除元素”1、创建数组的3种方式
Section titled “1、创建数组的3种方式”-
new关键字创建
var array=new Array(); -
字面量创建
var array=[1,2,3,4,5]; -
新增语法
var array = Array.of(1, 3, 4, 5)
2、数组的获取填加修改移除元素
Section titled “2、数组的获取填加修改移除元素”遍历:就是将数组中的所有元素都访问一次
- 添加/修改元素
- 修改数据的长度
array.length=5未满足元素的话为empty空元素为undefined - 通过index索引获取数字中的元素,可以使用delete操作符进行删除。
- arr[index] 添加元素的时候会自动扩容 可以用于数组的拷贝 筛选数组
- 修改数据的长度
var array=[1,6,2,7,4,10,45,98]var newArr=new Array();//修改length长度使用修改索引号添加元素for (var i=0; i<array.length; i++) { if(array[i]>10){ //这里每次都会扩充数组的大小 newArr[newArr.length] = array[i] }}console.log(newArr.join(","))3、数组的实例属性
Section titled “3、数组的实例属性”js中的数组和字符串获取长度都是用
length属性,,java中数组中的length是属性,String中的length()是方法
- 当我们修改数组的时候,
length属性会自动更新。 - 数组的
length是可读可写的 - 如果我们手动设置
length为,一个大于默认length的数值,那么会增加数组的长度。会使用空元素 (empty) 填充 - 但是如果我们减少它,数组就会被截断。
- 清空数组最简单的方法就是:
arr.length = 0;。
4、数组的静态方法
Section titled “4、数组的静态方法”用来判断某个变量是否是一个数组对象
根据一组参数来创建新的数组实例,支持任意的参数数量和类型
方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
- 参数一:一个可迭代对象
- 参数二:是一个回调函数,同map功能相似。-
- 知识点:快速创建
1-100的数组const arr = Array.from({length: 10}, (k, idx) => idx); - 类似方法:
Array.prototype.slice.call($(".option-js:checked"))也可以将可迭代对象转换成数组
var bar=function(){ return Array.from(arguments)}var rs=bar(123,12,123)console.log(rs.join(","))//output 123,12,123
//参数二const arr = [123, 32, 43, 5, 76, 87, 10]const arr2 = Array.from(arr, (val) => { return val > 10 && val})console.log(arr2)//output [123,32,43,false,76,87,false]5、数组高阶函数(也是数组的实例方法)
Section titled “5、数组高阶函数(也是数组的实例方法)”都可以链式调用
创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
-
参数:函数 , 执行callback的时候,this会指向这个对象类型
-
返回值:一个新的数组
-
callback()参数:元素的值, 元素的索引,被遍历的数组本身,
-
callback return:Boolean 返回true代表这个元素通过
-
注意:当箭头函数的函数体只有一个
return语句时,可以省略return关键字和方法体的花括号带上{}表示没有返回值const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];/* 注意:当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号带上{}表示没有返回值*/const result = words.filter(word => word.length > 6);//返回true代表这个元素通过//const result = words.filter(word =>{return word.length > 6});console.log(result);// expected output: Array ["exuberant", "destruction", "present"]
返回一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值
注意:不会改变数组长度,没有return的值会返回undefined
-
参数:函数 , thisArg(可选)、 执行callback的时候,需要this指向的对象类型
-
返回值:新的数组,注意不会修改数组长度,没有返回值默认undefined
-
callback()参数:元素的值, 元素的索引,被遍历的数组本身
- currentValue callback 数组中正在处理的当前元素。
- index(可选)、当前元素的索引。
- array (可选)、方法调用的数组。
-
callback return:元素值
const array1 = [1, 4, 9, 16];// pass a function to mapconst map1 = array1.map(x => x * 2);console.log(map1);// expected output: Array [2, 8, 18, 32]
对数组中的每个元素执行一个由您提供的reduce函数(升序执行),将其结果汇总为单个返回值
- 参数:
- 函数
- initialValue 指定初始化值-第一次遍历的值,否则将使用数组的第一个元素array[0]
- 返回值:使用 “
reduce” 回调函数遍历整个数组后的结果—元素。 - callback()参数:
-
previousValue:上一次调用callbackFn时的返回值。在第一次调用时,若指定了初始值initialValue,其值则为initialValue,否则为数组索引为 0 的元素array[0]。 -
currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值initialValue,其值则为数组索引为 0 的元素array[0],否则为array[1]。
-
-
currentIndex:数组中正在处理的元素的索引。若指定了初始值initialValue,则起始索引号为 0,否则从索引 1 起始。 -
array:用于遍历的数组。
-
callback return:值
const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4const init = 0;const sunstr = array1.reduce((previousValue, currentValue) => previousValue + currentValue,init);console.log(sunstr);// expected output: 10
6、数组的实例方法
Section titled “6、数组的实例方法”方法使用注意事项:有
thisArg参数的方法使用箭头函数,this会指向window,
Array.at(index) [ES13-ES2022] 新增
Section titled “Array.at(index) [ES13-ES2022] 新增”可以获数组索引位置的值,兼容性比较差,node16版本之后才会兼容 允许有负值, 浏览器的话 要ES13之后才支持
- 负值就不是索引了而是位置
我觉得不好用,是用来填充替换数组中指定为位置的元素3个参数,包前不包后
- start:默认0,为负数的时候就是array.length+start, 指定起始填充替换的索引位置
- end:默认array.length为负数的时候就是array.length+end, 指定结束填充替换的索引位置
- value:替换的值
-
测试一个数组内的所有元素 是否都能通过 某个指定函数的测试。它返回一个布尔值
有一个不通过就返回 false , 和 some 相反,some是有一个通过就可以
const isBelowThreshold = (currentValue) => currentValue < 40;//有一个没有通过的话就会返回falseconst array1 = [1, 30, 39, 29, 10, 13];console.log(array1.every(isBelowThreshold));//output true
find方法对数组中的每一项元素执行一次callback函数,直至有一个 callback 返回true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回undefined用于查找引用类型的数组。
-
callback参数:element,index,array
-
callback返回值:
直至有一个 callback 返回
true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回undefined稀疏数组也会遍历
-
参数:callback,执行callback的时候,需要this指向的对象
-
返回值:返回第一个为true的对象或原始类型的值
//那个元素先满足函数要求那个就最先返回const array1 = [5, 12, 8, 130, 44];//只能返回一个为true的对象 这里省略的returnconst found = array1.find(element => element > 10);
console.log(found);// expected output: 12返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1
-
和
Array.prototype.some():很像区别就是返回值some返回的是booleanfindIndex返回的是index -
callback: 返回值boolean
const array1 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 13;console.log(array1.findIndex(isLargeNumber));// expected output: 3
- 将一个数组的所有元素连接成一个字符串并返回这个字符串
- 返回一个包含数组中每个索引键的
Array Iterator对象
- 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回
-1
- 返回指定元素在数组中的最后一个的索引,如果不存在则返回
-1
用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
- 参数:既可以是迭代对象,也可以是参数列表
//可以用来拷贝数组, 修改不会影响被拷贝的数组, 深拷贝var arr=array.concat();console.log(arr.join(","))
const array1 = ['a', 'b', 'c'];const array2 = ['d', 'e', 'f'];const array3 = array1.concat(array2);console.log(array3);// expected output: Array ["a", "b", "c", "d", "e", "f"]
let arr = [1,2,[3,[123,3]]]console.log([].concat(...arr))//output [ 1, 2, 3, [ 123, 3 ] ]方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
- 用来截取数组,正值的话参数是索引位置,开区间
( ]闭区间 包前不包后 - 参数可以是负值,负值的话就是按照位置来选中了. 同样是 ( ]
- 也可以用来拷贝数组, 修改不会影响被拷贝的数组, 浅拷贝
注意:要区分起始位置和结束位置, 即使为负值的时候也是自前向后确定起始位置和结束位置
Array.prototype.flat()[ES10-pure浅拷贝] 平坦的意思
Section titled “Array.prototype.flat()[ES10-pure浅拷贝] 平坦的意思”暂时没有想到可以按照一个 可指定 的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
理解:递归一个属性结构的数组,数组中包含数组中的数据 全部取出来 返回一个新的数组
参数:number类型的 ,指定递归的深度 默认深度为 1
-
使用的场景(有用)
在一个函数同时接收,数组类型参数和 参数列表类型(剩余参数) 的时候使用
例:bind() 函数
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());// expected output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));Array.prototype.flatMap() [ES10] (浅拷贝)
Section titled “Array.prototype.flatMap() [ES10] (浅拷贝)”flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
-
理解: 其实就是和
map的用法一样,先进行map之后将返回的数组加了一层 flat 的处理因为是先map,所以遍历的元素如果是数组元素,那么value参数也是数组类型,就是这个数组在返回的时候就给直接flat了
- flatMap 方法的 flat 深度只能是默认的 1不能修改
好处就是不会像不确定map一样 不改变源数组使用undefined占位
- 参数返回值同其他方法一样
const flatMapArr = arr.flatMap(function(value) { if(Array.isArray(value)) { return value } })-
定义:
foreach又叫做增强for循环,相当于for循环的简化版,因此在一些较复杂的循环中不适用。const array1 = ['a', 'b', 'c'];array1.forEach(element => console.log(element));//不能对数组进行修改删除 -
特点:
-
foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高。
-
foreach与for循环的明显差别在于foreach循环时循环对象(数组、集合)被锁定,不能对循环对象中的内容进行增删改操作。
-
描述:
forEach()方法按升序为数组中含 有效值 的每一项执行一次callback函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上(null, 和undefined也算有效值,只有逗号和逗号之间没有元素的时候会过滤)(垃圾!!!))。在forof 和 fori 循环中没有写无效得值会被赋值 undefined
const array = [1,3,,7];//array[2]会被跳过 empty元素默认是undefined类型
-
-
参数:
callback,执行callback的时候,需要this指向的对象 -
Callback参数:(“element”, “index”, “当前处理的数组对象”)
判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false
方法用原地算法对数组的元素进行排序,并返回数组。也会直接改变数组,返回的数组也是被操作数组的引用,默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
如果没有指明
compareFunction,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。如果指明了
compareFunction,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:
- 如果
compareFunction(a, b)小于 0 ,那么 a 会被排列到 b 之前;- 如果
compareFunction(a, b)等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);- 如果
compareFunction(a, b)大于 0 , b 会被排列到 a 之前。compareFunction(a, b)必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
//sort 方法可以使用 函数表达式 方便地书写:items.sort(function(a, b) { var nameA = a.name.toUpperCase(); // ignore upper and lowercase var nameB = b.name.toUpperCase(); // ignore upper and lowercase if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; }
// names must be equal return 0;});
//要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列var numbers = [4, 2, 5, 1, 3];numbers.sort(function(a, b) { return a - b;});console.log(numbers);
也可以写成:var numbers = [4, 2, 5, 1, 3];numbers.sort((a, b) => a - b);console.log(numbers);
// [1, 2, 3, 4, 5]将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组
7、数组添加删除的方法(5个)
Section titled “7、数组添加删除的方法(5个)”将一个或多个元素添加到数组的末尾,并返回该数组的新长度
从数组中弹出最后一个元素,并返回该元素的值
- 使用场景,获取到删除的元素进行逻辑删除,之后在该元素获取逻辑数据,进行物理删除
(从数组中弹出第一个元素,并返回该元素的值)
取出队列首端的一个元素,整个数组元素向前前移动;
(将一个或多个元素添加到数组的头部,并返回该数组的新长度),比较向压栈的操作
在首端添加元素,整个其他数组元素向后移动;
7.5、Array.prototype.splice():[浅拷贝-返回删除的元素数组)
Section titled “7.5、Array.prototype.splice():[浅拷贝-返回删除的元素数组)”splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 “修改” 或 “删除” 的元素(重点)。此方法会改变原数组。第一个参数索引位置可以为负值,同样负值代表位置
array.splice("")- 参数一(index):正值index , 负值的时候表示的是倒数的位置不是索引了”,”
- 参数二(deleteCount):可以接受负值,但是只要为负值的话就等于1,删除元素的个数0则是不删除”, “插入的元素…
- 参数三(element…):可变参数,允许在预期零个或多个参数
注意:要区分起始位置和结束位置, 即使为负值的时候也是自前向后确定起始位置和结束位置
提示:coderwhy: push/pop 方法运行的比较快,而 shift/unshift 比较慢。
Section titled “提示:coderwhy: push/pop 方法运行的比较快,而 shift/unshift 比较慢。”8、数组的简单算法
Section titled “8、数组的简单算法”8.1、冒泡排序
Section titled “8.1、冒泡排序”//这里是要比较的次数、比较的次数就是 arr.length-1次 例 5个数 比较的次数就是4次for(var i = 0; i<arr.length-1; i++) { //比较的就不用再比较了 for(var j = 0; j<arr.length-i-1; j++) { //升序 同样这里比较的次数也是元素的个数减1 if(arr[j]>arr[j+1]) { /* var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; */ arr[j] = arr[j] + arr[j+1]; arr[j+1] = arr[j] - arr[j+1]; arr[j] = arr[j] - arr[j+1]; } }}console.log(arr.join(","))8.2、二分查找
Section titled “8.2、二分查找”待更新
关键词可不可
能够被4整除,不被100整除,可以被400整除的就是闰年
二、Math对象(7个)
Section titled “二、Math对象(7个)”具体方法查看mdn
ceil():天花板
floor():地板
random():返回一个随机浮点数 (0-1] 0.5154356673724982
//(5到50) 不用ceil 在里面加1也行console.log(Math.ceil(Math.random() * 50 - 5) + 5);console.log(Math.floor(Math.random() * 50 - 5 + 1) + 5);round():四舍五入
max():返回一组数的最大值,参数一组数字
Math.PI: 圆周率
Math.pow(2,3): 2的3次方
三、Date日期对象
Section titled “三、Date日期对象”
Date对象只能通过构造函数来创建
时间表示的基本概念
Section titled “时间表示的基本概念”最初,人们是通过观察太阳的位置来决定时间的,但是这种方式有一个最大的弊端就是不同区域位置大家使用的时间是不一致的。
- 相互之间没有办法通过一个统一的时间来沟通、交流。
- 之后,人们开始制定的标准时间是英国伦敦的皇家格林威治( Greenwich )天文台的标准时间(刚好在本初子午线经过的地方),这个时 间也称之为GMT(Greenwich Mean Time)。
- 其他时区根据标准时间来确定自己的时间,往东的时区(GMT+hh:mm),往西的时区(GMT+hh:mm);
- 但是,根据公转有一定的误差,也会造成GMT的时间会造成一定的误差,于是就提出了根据原子钟计算的标准时间UTC(Coordinated Universal Time)
- 目前GMT依然在使用,主要表示的是某个时区中的时间,而UTC是标准的时间。
Date 构造函数重载(3种)
Section titled “Date 构造函数重载(3种)”-
new Date()空构造的话返回的是当前时间var time = new Date("1998-10-25 17:30:00.00")console.log(time);console.log(new Date())//output 2022-05-13T08:37:39.616Z -
new Date()构造函数可以添加 数字类型的和字符串类型和Unix时间戳console.log(new Date(1998,10,1,18,30,30))console.log(new Date("1998-10-25 8:30:33"))//output: 1998-11-01T10:30:30.000Z//output: 1998-10-25T00:30:33.000Z
Date常用的静态方法(1个)
Section titled “Date常用的静态方法(1个)”Data.now(): 返回自 1970-1-1 00:00:00 UTC(世界标准时间)至今所经过的毫秒数。就是获取时间戳, 是h5新增的方法
Data.parse(String)
Unix时间戳(5个)
Section titled “Unix时间戳(5个)”作用:为了防止浏览器缓存。 URL后面添加随机数或时间戳通常用于防止浏览器(客户端)缓存页面。 浏览器缓存是基于URL进行缓存的,如果页面允许缓存,则在缓存时效前再次访问相同的URL,浏览器就不会再次发送请求到服务器端,而是直接从缓存中获取指定资源。 而当URL 的末尾追加了随机数或时间戳,就会保证每次都会实际生成新请求且 Web 服务器不会尝试缓存来自服务器的响应。
获得Unix时间戳的方法:
Section titled “获得Unix时间戳的方法:”- 对象.getTime();
- 对象.valueof();
- var date = new Date();
- +date
- Date.now()
Data.parse(dateString)时间的表示方式
Section titled “Data.parse(dateString)时间的表示方式”日期的表示方式有两种:RFC 2822 标准 或者 ISO 8601 标准。
对应的实例方法
RFC 2822 标准 :
toUTCString()
- ISO 8601 标准:
toISOString()ref utc 星期 天 月份 年
-
默认打印的时间格式不确定,应该根据电脑的设置的表示方式:
-
我们也可以将其转化成ISO 8601标准的:
- YYYY:年份,0000 ~ 9999
- MM:月份,01 ~ 12
- DD:日,01 ~ 31
- T:分隔日期和时间,没有特殊含义,可以省略
- HH:小时,00 ~ 24
- mm:分钟,00 ~ 59
- ss:秒,00 ~ 59
- .sss:毫秒
- Z:时区
-
Date.parse()
字符串格式要满足一种:RFC 2822 标准 或者 ISO 8601 标准。
var time = Date.parse("1998-10-25 17:30:00.00")console.log(time);
Date常用的实例方法方法(8个)
Section titled “Date常用的实例方法方法(8个)”返回值都是number
getFullYear() 方法根据本地时间返回指定日期的年份。
getMonth(): 根据本地时间,返回一个指定的日期对象的月份,为基于0的值(0表示一年中的第一月)记得+1。
date.getDate(); 返回的是几号
getHours() 方法根据本地时间,返回一个指定的日期对象的小时。
getMinutes() 方法根据本地时间,返回一个指定的日期对象的分钟数。
getSeconds() 方法根据本地时间,返回一个指定的日期对象的秒数。
date.getDay(); 3周一返回的是1周六返回的是6 但是周日返回的是0
getMilliseconds() 方法,根据本地时间,返回一个指定的日期对象的毫秒数。
四、基本包装类型
Section titled “四、基本包装类型”JavaScript的原始类型并非对象类型,所以从理论上来说,它们是没有办法获取属性或者调用方法的。
简单数据类型为什么会有lenght属性呢?
- JavaScript为了可以使其可以获取属性和调用方法,对其封装了对应的包装类型
- 常见的包装类型有:String、Number、Boolean、Symbol、BigInt类型,基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
1、包装类型的使用过程
Section titled “1、包装类型的使用过程”当调用一个原始类型的属性或者方法时的过程
- 根据原始值,创建一个原始类型对应的包装类型对象;
- 调用对应的属性或者方法,返回一个新的值;
- 创建的包装类对象被销毁;
- 通常JavaScript引擎会进行很多的优化,它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用。
- 注意事项:null、undefined没有任何的方法,也没有对应的“对象包装类”
五、包装类型String (16个)
Section titled “五、包装类型String (16个)”
- 字符串在定义后是不可以修改的
- 字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
- 是可迭代对象: 字符串/数组
- 字符串是可迭代对象但是不能使用数组中括号的方法添加属性
length属性
Section titled “length属性”- 表示字符串长度空字符串为0
- 静态属性值为1,
String.length - 注意:字符串是不可变的所有设置length没有意义
1、 查找字符串索引(3个)
Section titled “1、 查找字符串索引(3个)”-
indexOf() : 起始位置查找,返回第一次出现的 index 没有找到返回-1,第二个参数可以指定在那个 index 开始找
-
lastIndexOf():起始位置查找,返回最后一次出现的 index 没有找到返回-1,第二个参数可以指定在那个 index 开始找
-
search: 起始位置查找,返回第一次出现的 index 没有找到返回-1
- 只有一个参数,不能指定起始位置
- 既兼容 字符串 也兼容 regexp 表达式
(应用场景)获取str里f字符都出现在那个位置
Section titled “(应用场景)获取str里f字符都出现在那个位置”//获取str里f字符都出现在那个位置var str = "jaslfjsfdagfjasljgalg"var index = str.indexOf("g")while(index !== -1){ index = str.indexOf("g",index + 1) console.log(index)}String是一个可迭代对象,js在内部实现了一个方法(后面会讲) 所以可以使用 for…of…
for(let item of msg) { console.log(item);}2、根据index返回字符(一个)
Section titled “2、根据index返回字符(一个)”- charAt( index ) : 没有找到会返回空串
- str[ index ] ie8+ 和 H5支持 和CharAt等效
- charCodeAt( index ): 这个返回指定索引位置的ASCII码
(应用场景)获取每个字符在字符串中出现的次数
Section titled “(应用场景)获取每个字符在字符串中出现的次数”//获取每个字符在字符串中出现的次数var o = {}for( var i = 0; i < str.length; i++) { if(o[str.charAt(i)]) { o[str.charAt(i)]++
} else { o[str.charAt(i)] = 1 }}console.log(o)3、字符串操作的方法(5个)
Section titled “3、字符串操作的方法(5个)”| 方法名 | 描述 | 值类型 | 特点 |
|---|---|---|---|
| concat(str1,str2,str3…) | concat()方法用于连接两个或多个字符串。 | string,可以使用链式调用 | 等效于+,+更常用 |
| substr(start, length) | 从start位置开始(索引号), length 取的个数 | 数字number类型start可以为负值: start是index位置 、负值的之后表示的是位置 | 部分浏览器和node不支持-使用要慎重 |
| slice(start, end) | 从start位置开始,截取到end位置,end取不到(他们俩都是索引号) 区间:(] | start/end可以为负值**: 注意start不要大于end(正负值都一样)**start/end是索引位置,end负值的时候是位置 | 开发推荐使用 |
| substring(start, end) | 从start位置开始,截取到end位置,end取不到基本和slice相同但是不接受负值 区间:(] | 数字类型,不接受负值 start, | |
| trim() | 删除首尾空格 | 无 |
3.1、trim() 注意:异步请求的数据,不能直接使用trim() 会阻止js代码的执行
Section titled “3.1、trim() 注意:异步请求的数据,不能直接使用trim() 会阻止js代码的执行”4、替换字符串及字符串转换成数组(2个)
Section titled “4、替换字符串及字符串转换成数组(2个)”-
split(“分隔符”) :
str.split("")-
参数一 : separator以什么字符串进行分割,也可以是一个正则表达式;
-
参数二 : limit限制返回片段的数量;
-
-
replace(“被替换的字符串”, “替换为字符串”)
-
参数一:字符串
-
参数二:可以是替换的字符串也可以是,正则,或者function
-
// param match 的字符串 第二个是匹配字符第一次出现的时候索引位置var str = msg.replace("why", (variable, str2) => { console.log("replace", variable, str2);})- [ES12新增]replaceAll() 替换所有匹配的字符串
- [ES12新增] trimStart、trimEnd
大小写转换(2个)
Section titled “大小写转换(2个)”是生成一个新的字符串
- toUpperCase(): 转大写
- toLowerCase(): 转小写
5、es5之后新增(6个)
Section titled “5、es5之后新增(6个)”-
(es7)str. includes(): 返回值 Boolean - 判断一个数组是否包含一个指定的值,如果包含则返回true,否则返回false -
str.startWith(): 返回值 Boolean - 是否以匹配字符开头的 -
str.endWith(): 返回值 Boolean- 是否以匹配字符结尾的 -
str.at(): 或取指定索引的元素,允许有负值负值代表位置,但是兼容性比较差 node16版本之后才可以使用 -
(ES8)str.padEnd():不兼容ie 在原字符串的起始位置进行填充指定的字符串,第一参数为填充字符的数量,并返回一个新的字符串- 参数1
targetLength:当前字符串需要填充到的目标长度 Number类型 - 参数2
padString:填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的缺省值为 ” “(U+0020)。
- 参数1
-
(ES8)str.padStrat(): 不兼容ie 在原字符串的起始位置进行填充指定的字符串,第一参数为填充字符的数量,并返回一个新的字符串var str = "4";var str2 = str.padStart(2, "0")console.log(str, str2)//output 4, 04
六、包装类型Number
Section titled “六、包装类型Number”Number属性
Section titled “Number属性”- Number.
MAX_SAFE_INTEGER:JavaScript 中最大的安全整数 (2^53 - 1); - Number.
MIN_SAFE_INTEGER:JavaScript 中最小的安全整数 -(2^53 - 1) - 最小正数值:
Number.MIN_VALUE,这个值为: 5e-324,小于这个的数字会被转化为0 - 最大正数值:
Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
Number实例方法(4)
Section titled “Number实例方法(4)”-
方法一:toString(base),将数字转成字符串,并且按照base进制进行转化
- base 的范围可以从 2 到 36,默认情况下是 10;
- 注意:如果是直接对一个数字操作,需要使用..运算符;
-
方法二:toFixed(digits),格式化一个数字,保留digits位的小数;
- digits的范围是0到20(包含)之间;
- 返回的是一个String类型的字符串
- 四舍五入
-
方法三:parseInt(str)`
parseInt() 可以将字符转换成整数类型,
特点:将字符串解析成整数,可以将字符串数字后面的非数字元素位置后面的所有字符自动去除,前提**必须是数字开头的**,否则是NaN
也有对应的全局方法parseInt();
例:120px parseInt()-> 120
-
方法四:
parseFloat("123.4fsajdflajsflajslf");parseFloat() 可以将字符转换成浮点类型,
特点:将字符串解析成浮点数,可以将字符串数字后面的非数字元素位置后面的所有字符自动去除,前提**必须是数字开头的**,否则是NaN
也有对应的全局方法(winidow)parseFloat;
例:123.4fsajdflajsflajslf parseInt()-> 123.4
Number补充
Section titled “Number补充”当字面量数值类型想要使用包装类的方法的时候可以使用
..来调用
例:
123..toFixed(2)七、Object对象
Section titled “七、Object对象”1、Object 静态方法
Section titled “1、Object 静态方法”1.1、Object() 构造函数(重要)
Section titled “1.1、Object() 构造函数(重要)”可以用于原始数据类型转换,也是很重要的。
-
将原始数据类型转换成包装类型
对象类型的转换还是对象类型
方法将所有可枚举(
Object.propertyIsEnumerable()返回 true)和自有(Object.hasOwnProperty()返回 true)属性从一个或多个源对象复制到目标对象,返回修改后的对象。
-
属性从一个或多个源对象复制到目标对象,返回修改后的目标对象。不会返回新的对象
-
如果目标对象与源对象具有相同的 key,则目标对象中的属性将被源对象中的属性覆盖,后面的源对象的属性将类似地覆盖前面的源对象的属性。
-
第一个参数为目标对象不为
undefined和null的话就不会报错
返回一个新对象,该对象的原型对象指向 参数对象
参数:
- 参数是对象类型,要作为返回对象的原型 Person.prototype
- 对象类型,属性为属性描述符
1.4、Object.is() 判断否为同一个值。
Section titled “1.4、Object.is() 判断否为同一个值。”-
比较对象还是比较的应用类型
-
可以比较null和undefined NaN
-
返回值:boolean类型
Object.is(value1, value2);将对象转化为数组,方法返回一个给定对象自身 可枚举属性 的 键值对数组
-
和
for...in的区别在于 in 操作符不仅会遍历对象中的属性也会便利 原型对象中可枚举的属性 -
一般只用于对象 和 entries 之间的转化
-
可以针对对象、数组、字符串进行操作
for(let temp of Object.entries(obj)) {let [key, value] = tempconsole.log(key, value)}entries 数组
Section titled “entries 数组”返回的
entries是数组类型 **索引会作为key 元素值会作为value **entries 字符串
Section titled “entries 字符串”返回的
entries是数组类型 key ** 是 字符串对应的索引位置**,而value,对应的是 字符
1.6、Object.fromEntries()
Section titled “1.6、Object.fromEntries()”静态方法,将一个”键值对列表“转换成对象
- 只有一个参数就是可迭代对象
- 使用场景:将
formData对象转searchParam对像在通过fromEntries转成普通对像
const params = new URLSearchParams(`ordersDetail.skuId=&ordersDetail.prodId=&ordersDetail.productNumber=&order.firstName=&order.lastName=&order.countryPhoneName=&order.countryPhoneCode=&order.phone=&order.countryName=&order.country=&order.provinceName=&order.province=&order.cityName=&order.city=&order.addressFirst=&order.addressSecond=&order.zipcode=&ids=[30,31]`)console.log(Object.fromEntries(params))
//output{ 'ordersDetail.skuId': '', 'ordersDetail.prodId': '', 'ordersDetail.productNumber': '', 'order.firstName': '', 'order.lastName': '', 'order.countryPhoneName': '', 'order.countryPhoneCode': '', 'order.phone': '', 'order.countryName': '', 'order.country': '', 'order.provinceName': '', 'order.province': '', 'order.cityName': '', 'order.city': '', 'order.addressFirst': '', 'order.addressSecond': '', 'order.zipcode': '', ids: '[30,31]'}2、对象实例方法
Section titled “2、对象实例方法”2.1、hasOwnProperty
Section titled “2.1、hasOwnProperty”指示对象自身属性中是否具有指定的属性(不是判断目标对象的原型中的属性)
- 参数:要判断的属性 (字符串类型)
- 返回值: boolean
obj.hasOwnProperty(attribute) // 返回布尔值2.2、isPrototypeOf
Section titled “2.2、isPrototypeOf”方法用于测试一个对象是否存在于另一个对象的原型链上。
- 判断自己在不在,参数对象的原型链上
- 参数:在该对象的原型链上搜寻当前对象