常用js方法|学习记录

yyyooi
154 阅读8分钟

注意

var str = '123'
var arr = ['1', '2', '3']

利用arr[i-1] = 1

str不会改变字符串 arr会改变数组

数组

const arr = [1, 2, 2, 3];
const arr2 = [4, 5, 6];

- 会改变原数组

  • arr.push(8); // [1, 2, 3, 8]

  • arr.pop(); // 默认弹出的是栈顶的元素

  • arr.unshift(1); // 首部增加元素

  • arr.shift(); // 首部减少元素

  • arr.reverse(); // [3, 2, 2, 1]

  • const result = arr.splice(0, 2, 3, 4); // 表示从第0个位置开始，删除两个元素，并且从第0个位置开始增加两个元素3，4

  • arr.splice(0, 2, 3, 4)会返回将删除的元素作为返回值返回

  • arr.splice(3); // 如果只传递一个参数 则表示从索引为1开始删除所有元素

splice(start, deleteCount, item1, item2……)

start参数 开始的位置
deleteCount要截取的个数
后面的items为要添加的元素
如果deleteCount为0，则表示不删除元素，从start位置开始添加后面的几个元素到原始的数组里面。
返回值为由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
这个方法会改变原始数组，数组的长度会发生变化

*/

  • arr.sort(); // 默认情况下是升序排列
  • arr.sort((a, b) => b - a); // 传递回调函数改变其排序顺序

- 不会改变原数组

  • arr.concat(arr2); // 数组拼接
  • arr.indexOf(2); // 在数组中寻找该值出现的第一个位置 返回其下标 若不存在返回-1
  • arr.lastIndexOf(2); // 在数组中寻找该值出现的最后一个位置
  • arr.includes(2); // 判断是否存在该值 存在则true 反之返回false
  • arr.join(); // 将数组转化成字符串，并返回该字符串，不传值则默认逗号隔开，原数组不变。
  • arr.join("@");
  • arr.slice(1, 3); // 截取[1,3)索引的元素
  • arr.toString(); // ‘1, 2, 3, 4, 5’ 将数组转化成字符串，并返回该字符串，逗号隔开

- 创建二维数组

  var res = new Array(numRows); //表格有numRows行
  for (var i = 0; i < res.length; i++) {
    res[i] = new Array(i + 1).fill(1); //每行有i+1列
  }

字符串

www.w3school.com.cn/js/js_strin…

var str = "abcdefgc";
var str2 = "hijklmn";

- 不改变原字符串

  • str.charAt(2); // c 返回指定位置
  • var str3 = str.concat(str2);
  • str.indexOf("c"); // 2
  • str.lastIndexOf("c"); // 7
  • str.slice(1); // slice(start, end) [start,end) 不传参数表示数组的浅拷贝， 传递1个参数表示 从a至末尾 2个参数表示从[a,b)

/* 简单理解：浅拷贝是指只是单纯的值的传递，当被拷贝的值改变时，浅拷贝之后的也会发生改变 深拷贝是对地址的改变 */

  • str.split(""); // 与python不同的是 可以传递空字符串
  • // 注意 substr已经被弃用
  • str.substring(2, 4);

/* substr(), substring() 这两个方法的功能都是截取一个字符串的片段，并返回截取的字符串。 substr和substring这两个方法不同的地方就在于参数二，substr的参数二是截取返回出来的这个字符串指定的长度，substring的参数二是截取返回这个字符串的结束点，并且不包含这个结束点。而它们的参数一，都是一样的功能，截取的起始位置。
注意事项：substr的参数二如果为0或者负数，则返回一个空字符串，如果未填入，则会截取到字符串的结尾去。substring的参数一和参数二为NAN或者负数，那么它将被替换为0 */

  • str.toLowerCase(); // 小写
  • str.toUpperCase(); // 大写
  • includes、startsWith、endsWith，es6的新增方法，
    includes 用来检测目标字符串对象是否包含某个字符，返回一个布尔值，
    startsWith用来检测当前字符是否是目标字符串的起始部分，
    相对的endwith是用来检测是否是目标字符串的结尾部分。
const str = 'Excuse me, how do I get to park road?'
console.log(str.includes("ef")); // 输出：true
console.log(str.startsWith("a")); // 输出： true
console.log(str.endsWith("c")); // 输出： true
  • console.log(str.repeat(3)); // abcdefabcdefabcdef
  • str.charAt() var chars = str.charAt(i) // chars 是 字符串的每一个字符
  • a = a.padStart(maxLen, '0') 字符串补全
  • image.png
  • 自动重复：可以使用 repeat 方法来使同一个字符串输出多次（被连续复制多次）：
const sourceCode = 'repeat for 3 times;'
const repeated = sourceCode.repeat(3) 
console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

正则表达式

const strreg = "2018年结束了，2019年开始了，2020年就也不远了";
const reg = /\d+/g; // 这里是定义匹配规则，匹配字符串里的1到多个数字
  • match

console.log(strreg.match(reg)); // 输出符合匹配规则的内容，以数组形式返回 ['2018', '2019', '2020']
console.log(strreg.match("20")); // 不使用正则 ["20", index: 0, input: "2018年结束了，2019年开始了"]

/*
注意事项:如果match方法没有找到匹配，将返回null。
如果找到匹配，则match方法会把匹配到以数组形式返回，
如果正则规则未设置全局修饰符g，则 match方法返回的数组有两个特性：input和index。
input属性包含整个被搜索的字符串。index属性包含了在整个被搜索字符串中匹配的子字符串的位置。
*/

  • replace

// replace接收两个参数，参数1定位规则 参数2更换规则
// 参数一是需要替换掉的字符或者一个正则的匹配规则，
// 参数二，需要替换进去的字符，在实际的原理当中，参数二，你可以换成一个回调函数。\

const rex = /\d+/g; // 这里是定义匹配规则，匹配字符串里的1到多个数字
const strreg2 = strreg1.replace(rex, "****");
// console.log(strreg2) // 输出："****年结束了，****年开始了,****年也不远了"
const strreg3 = strreg1.replace(rex, function (item) {
  console.log(arguments); // 会返回匹配到的子字符串、子字符串的位置、原字符串
  const arr = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
  let newStr = "";
  item.split("").map(function (i) {
    // item接收到的是匹配到的子字符串 在此处做分割后每一个都去和arr做map映射
    newStr += arr[i];
  });
  return newStr;
});
// console.log(strreg3) // 输出：贰零壹捌年结束了，贰零壹玖年开始了,贰零贰零年也不远了
  • search
  • console.log(str.search(reg)); // 输出 0 这里搜索到的第一项是从位置0开始的

** 常见的正则表达式**

blog.csdn.net/qq897319645…

  • / 表示一个字符边界
  • ^ 匹配输入的开始
`^`除了表示字符串的开头，还有另外一个含义，即当在一组方括号里使用`^`时，它表示”非”或”排除”的意思，常常用来剔除某个字符。
eg：[^a-z]表示除了a-z
  • $ 匹配输入的结束
  • * 表达一个表达式出现0次或者多次 等价于{0,}
  • + 匹配前面一个表达式 1 次或者多次。等价于 {1,}。
  • ? 匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。
  • . 默认匹配除换行符之外的任何单个字符
  • \d 匹配一个数字。等价于 [0-9]。
  • \D 匹配一个非数字字符
  • \s 匹配一个空白字符，包括空格、制表符、换页符和换行符
  • \S 匹配一个非空白字符
  • g 全局匹配
  • i 表示不区分大小写
  • *表示前边的表达式可以为空 +表示不可以为空
  • ()和[]的区别
()和[]有本质的区别
()内的内容表示的是一个表达式，()本身不匹配任何东西，也不惜那是匹配任何东西，只是把括号内的内容作为
同一个表达式来处理，例如(ab){1,3},就表示ab一起连续出现最少1次，最多三次。如果没有括号的话，ab{1,3},
就表示a 后面紧跟的b出现的最少一次，最多三次。另外，括号在匹配模式中也跟重要。这个就不延伸了。
[]表示匹配字符在[]中，并出现一次，并且reshuffle字符写在[]会被当成普通字符来匹配，例如[(a)],会匹配'('、'a'、')'、这三个字符。

const str1 = "2018年结束了，2019年开始了，2020年就也不远了";
const rex1 = /^[0-9]+$/;
  • 判断字符
// 加号表示 前边的表达式出现1次或者多次，^表示输入的开始 $表示输入的结束
由26个英文字母组成的字符串：^[A-Za-z]+$ 
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
  • 用户名正则
const reg = /^[A-Za-z0-9_-/{4-16}$/

- 密码强度

// 密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
const pasreg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/
.默认匹配除换行符之外的字符
*出现0或多次
?出现0或1次
()
=
  • 整数正则
/^\d+$/ 正整数
/^-\d+$/ 负整数
/^-?\d+$/ 整数 ?表示-可以出现0次或者1次
  • 判断数字（可以是整数 也可以是浮点数）
/^\d*\.?\d+$/正数 *表示出现0次或者多次 \.?表示.可以出现0次或者1次
/^-\d*\.?\d+$/ 负数
/^-?\d*\.?\d+$/ 数字
  • email正则
/^([A-Za-z_\-\.])+\@([A-Za-z_\.\-])+\.([A-Za-z]{2,4})$/
  • 手机号正则
/^/1[34578]\d{9}/$/

- 身份证号正则

/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
// (18|19|([23]\d))\d{2} 年
// ((0[1-9])|(10|11|12)) 月
// (([0-2][1-9])|10|20|30|31) 日
  • URL正则
/^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

一些遍历方法 这些方法都不改变原数组/字符串/对象

数组，字符串是可迭代对象； 对象是可枚举的

  • for()
const arr = [1, 2, 3, 5, 8];
const str = '12345'
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
  • while/do while
  • while先条件判断再执行循环语句 而dowhile先执行语句再条件判断
let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}
let j = 0
do {
  console.log(arr[j]);
  j++;
} while (j < arr.length);
console.log('-----');

for each for of for in的区别 juejin.cn/post/684490…

  • forEach()
arr.forEach((item, index) => { // 不可以遍历字符串 不可以使用break continue
    if(item < 2)  return
    console.log(`索引:${index},数值:${item}`);
    arr[5] = 0
})
console.log(arr);
  • for in ES5标准
  • 此方法遍历数组效率低，主要是用来循环遍历对象的属性。
  • 遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串。
  • Object.defineProperty，建立的属性，默认不可枚举。
  • obj.hasOwnProperty(attr)用来判断是否是自身的属性 即可枚举属性
const foo = {
    name: 'bar',
    sex: 'male'
}
Object.defineProperty(foo, "age", {value: 18})
for(const key in foo){
    console.log(`可枚举属性：${key}`); // name sex
}
console.log(`age属性：${foo.age}`); // age 18
  • for of // es6新增
for(const value of arr){
    console.log(value);
}

for...in 和 for...of 区别？
（1）for…in 用于可枚举数据，如对象、数组、字符串
（2）for…of 用于可迭代数据，如数组、字符串、Map、Set

  • every/some 返回一个布尔值 要有值去接收
  • every判断每一个值都是否符合 some只要有一个值符合则返回true
const res = arr.every((item, index) => {
    return item > 2 // 注意 需要有return去返回值才可以
})
console.log(res); // false

const res1 = arr.some((item, index) => {
    return item > 2 // 注意 需要有return去返回值才可以
})
console.log(res); //true
  • filter 过滤掉不要的 返回需要的
const res2 = arr.filter((item) => item > 2)
console.log(res2);
  • map映射 对原数组按照map中定义的规则进行映射更改
const res3 = arr.map((item) => item + 2)
console.log(res3);
  • reduce对当前数组从左到右做累加
  • reduceRight对当前数组从右到左做累加
const res4 = arr.reduce((sum, item) => {
    console.log(`当前sum：${sum}，下一个要加的${item}`);
    return sum + item // sum表示当前的结果 item表示下一个数字
})
console.log(res4);
  • object.keys 遍历对象的可枚举属性 是在自身上的
console.log(Object.keys(foo)); // ['name', 'sex']
  • Object.getOwnPropertyNames() 遍历对象的所有的属性，包括不可枚举属性
console.log(Object.getOwnPropertyNames(foo)) // ['name', 'sex', 'age']

字符串转变成数组的方法

(5条消息) 字符串转换为数组的4 个方法_前端开发博客的博客-CSDN博客

集合

(5条消息) Set简述与集合操作_Hairy377的博客-CSDN博客

json对象

(5条消息) JSON对象_JSON.parse()方法_json.parse后还是json对象_Hairy377的博客-CSDN博客

字典

js中的字典是建立在数组的基础上构建的。

(5条消息) js中字典的使用_js 字典_HWQlet的博客-CSDN博客

哈希表

JavaScript的对象（Object），本质上是键值对的集合

（Hash结构） (5条消息) new Map()的详细介绍与用法_ocean_stars的博客-CSDN博客

(5条消息) JS对象中常见的方法_js对象方法_要不要买菜啊的博客-CSDN博客

链表

节点构建

function ListNode(val, next) {
  this.val = val === undefined ? 0 : val;
  this.next = next === undefined ? null : next;
}

数字

四舍五入

(n1 + n2).toFixed(2) // 注意，toFixed为四舍五入

image.png

avatar
文章
阅读
粉丝