js的常用方法

咸鱼!

已于 2023-08-10 14:34:05 修改

阅读量204

点赞数 3

文章标签： javascript 前端

于 2023-02-28 14:26:10 首次发布

本文链接：https://blog.csdn.net/NewBie96/article/details/129257033

版权

String类型

slice( )

提取字符串片段,并在新的字符串中返回被提取的部分

var str = 'ABCDEFGH'
console.log(str.slice(2,4)) // 返回 'CD' 2为字符串开始位置,4为字符串结束位置(不包含4,前一位结束)
console.log(str.slice(-1,4)) //返回空字符串 ''
console.log(str.slice(100,400))//返回空字符串 ''

split( )

把字符串分割成数

let str = 'ABC-DEF-GHI'
console.log(str.splic('')) //返回 ['A', 'B', 'C', '-', 'D', 'E', 'F', '-', 'G', 'H', 'I']
console.log(str.splic('-')) //返回  ['ABC', 'DEF', 'GHI']
//可通过某个字符进行切割

substr( )

从起始位置到结束位置(包含结束位置,空字符串不占位置)

let str ='AB CD EF'
console.log(str.substr(1,6)) //返回 'B CD E' 包括结束的位置,且空字符串不占位置

substring( )

获取字符串中两个指定索引之间的字符

let str = 'ABC DEF G'
console.log(str.substring(1,6))  //返回 'BC DE' 空字符串占位置,不包含结束的索引 ,到5结束

charAt( )

返回在指定位置的字符

var str = 'ABCDEFG'
var str1 = str.charAt(4) //字符串的下标从1开式,返回E
var str2 = str.charAt(2,4) // 传入两个参数不会报错,但第二个参数无效 ,返回C

indexOf( )

检索字符串,返回的字符串在字符串的下标

var str = 'ABCDEFG'
console.log(str.indexOf('C')) //返回下标2
console.log(str.indexOf('Y')) //字符串中找不到返回 -1

match( )

在字符串内检索指定的值/找到一个或多个正则表达式的匹配,返回值(不是索引)

let str = 'ABCDEFG'
console.log(str.match('ABC')) 
/*返回一个数组
[
0: "ABC"
groups: undefined
index: 0
input: "ABCDEF"
length: 1
]
*/
console.log(str.match('AC')) //找不到且返回 null

replace( )

替换匹配的字符串

let str = '你好呀'
let str1 = 'hello'
let str2 = str.replace(str.match('你'),str1.match('ll')) //返回 ll好呀
//通过match方法找到str中的 '你'(如未找到不会报错,会返回null,继续去替换匹配) ,把找到的 '你',替换成 'll'

search( )

检索与字符串匹配的子串,返回下标,未找到返回-1

let str = 'ABCD EFG'
let str1 = 'EFG'
console.log(str.search(str1)) 	//返回5 ,返回的是匹配到的第一个字符串的下标,如未找到返回-1

toLocaleLowerCase( )

把字符串转换成小写

var str = "AB-CD-EF";
console.log(str.toLocaleLowerCase()); //返回 'ab-cd-ef'

toLocaleUpperCase( )

把字符串转换成大写

var str = "ab-cd-ef";
console.log(str.toLocaleUpperCase()); //返回 'AB-CD-EF'

concat( )

连接字符串

var str = 'ABC'
var str1 = 'DEF'
var str2 = 'AAA'
console.log(str.concat(str1)) // 返回ABCDEF
console.log(str.concat(str1,str2)) //返回ABCDEFAAA
//可连接一个或多个字符串

Array类型

slice( )

返回从原数组中指定开始下表到结束下表之间的项组成的新数组（原数组不变）

let arr = [1,2,3,4,5]	
console.log(arr.slice(1,3)) //传入两个参数返回 [2,3] 不包含3,到3的前一位结束
console.log(arr.slice(1)) //传入1个参数返回 [2,3,3,4,5] 包含索引 1 到结束
//被slice切割后的数组都会重新返回一个新的数组

pop( )

删除数组最后一个元素

let arr = [1,2,3,4,5]
console.log(arr.pop())  //返回5 
//会改变原数组  [1,2,3,4]

push( )

将参数添加到数组的最后，返回新数组的长度

let arr = [1,2,3]
let arr1 = arr.push(11,22)  //返回结果为数组的长度 5
//push会改变原数组, 改变后的值为 arr = [1,2,3,11,22]

shift( )

删除数组第一个参数,数组的长度减一

let arr = [1,2,3,4]
let arr1 = arr.shift()  //返回是删除后的数组长度 3
//shift改变原数组,改变后的值为 arr = [2,3,4]

unshift( )

像数组前面添加一个/多个元素,并返回新数组的长度

let arr = [1,2,3]
let arr1 = arr.unshift(5,6,7) //返回的是新数组的长度
//unshift改变原数组,改变后的值为 arr = [5,6,7,1,2,3]

sort( )

按指定的参数对数组进行排序，返回的值是经过排序后的数组（无参，函数）

let arr = [4,5,2,'啊','A',5,2,'a']
console.log(arr.sort())  //返回的值为 [2, 2, 4, 5, 5, 'A', 'a', '啊']

includes()

用于判断字符串是否包含指定的子字符串，或者判断数组中是否有指定的元素

let arr = ['pink', 'red' ,'blue']
console.log(arr.includes('red')); // true

concat( )

把两个字符串连接起来，返回的值是一个副本（参数不限）,不改变原数组

let arr = ['a',1,3,5,'b']
let arr1 = ['aa','bb']
console.log(arr.concat(arr1)) // 返回值为['a',1,3,5,'b','aa','bb']

var arr2 = [1,'q',3,6,2,'a',9];
var arr3 = [{name:'niho'},1,4];
console.log(arr2.concat(arr3)) // 返回值↓
/*
[
0: 1
1: "q"
2: 3
3: 6
4: 2
5: "a"
6: 9
7: {name: 'niho'}
8: 1
9: 4
]
*

join( )

将数组的元素组成一个字符串，以separator（分割器）如( '-' , ','分割)

let arr = [1,2,3,4]
console.log(arr.join('-')) //返回结果为 1-2-3-4 的字符串
console.log(arr.join('*')) //返回结果为 1*2*3*4 的字符串
console.log(arr.join('')) //返回结果为 1234 的字符串

indexOf( )

从数组的开头向后查找，接受两个参数，要查找的项和查找起点的位置索引

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.indexOf(7))  //返回结果为7所对应的下标(索引)

forEach( )

对数组中的元素进行遍历

var array = ['a', 'b', 'c'];
array.forEach(item=>{ console.log(item)})
// 返回结果为 ↓
a String类型
b String类型
c String类型

map( )

对数组的每一项运行给定的函数，返回函数调用的结果组成的数组

let arr = [2,3,4,5]
let s = arr.map(item=>{
	return item*2
})
 console.log(s) //返回结果为 [4,6,8,10]

find( ）

find查找数组中有无包含需要查找的数据

let obj = [
  {name:'小米', price:1999},
  {name:'华为', price:2888},
]
let mi = obj.find(item=>{
   return item.name === '小米'
})
console.log(mi);  // 返回{name: '小米', price: 1999} ,未找到返回undefined

every( ）

every 查找每一个是否都满足条件

let arr = [1,2,3,10,4,39,31]
let d = arr.every(item=>{
  return item < 100
})
console.log(d);  // 查找数组中的元素是否都满足特定条件,全部满足才返回true, 有一个不满足都是返回false

some（）

只要有一个满足条件就返回true

let arr = [1,2,3,101,5,6]
let s = arr.some(item=> {return item > 100})
console.log(s);   //返回true`

新方法

Object.values（）

Object.values 获取对象中的的所有 value值, 并返回数组形式

let spec = {size: '140cm*140cm', color: '黑色', plice: '888元'}

console.log(Object.values(spec)) // ['140cm*140cm', '黑色', '888元']

console.log(Object.values(spec).join('/'));  // 140cm*140cm/黑色/888元

数组解构

允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量

//数组中变量和值数量一致
let arr = [1,2,3]
let [a,b,c] = arr
console.log(a) //1
console.log(b) //2
console.log(c) //3
//数组中变量和值数量不一致
let arr = [1,2,3]
let [a,b,c,d] = arr
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //undefined

对象解构

let person = {name:'刘',age:19, gander:'男' }
let {name,age,gander} = person;
console.log(name) //刘
console.log(age) // 19
console.log(gander) //男

let person = {name:'anni',age:18,sex:'女'};
let {name: myname} = person;  //冒号左边只用于属性匹配，冒号右边的是真正的变量
let {age: myage} = person;
let {sex: sex} = person;
console.log(myname); //anni
console.log(myage);//18
console.log(sex);//女

扩展运算符

扩展运算符可以将数组拆分为以逗号分隔的参数序列。

let ary = ["a","b","c"]
//...ary   //"a","b","c"
console.log(...ary)    //a,b,c 
console.log("a","b","c")   //a,b,c

扩展运算符(数组合并)

//第一种方法
let ary1 = [1,2,3];
let ary2 = [3,4,5];
let ary3 = [...ary1,...ary2];
console.log(ary3);  //返回 [1, 2, 3, 3, 4, 5]
//第二种方法
let ary1 = [1,2,3];
let ary2 = [3,4,5];
ary1.push(...ary2);
console.log(ary1);//返回 [1, 2, 3, 3, 4, 5]




var obj = {name:'Jack',age:18}
console.log(obj) // {name: 'Jack', age: 18}
var obj2 = {
  gender:'男',
  name:'Rose',
  ...obj    //注意：展开书写的顺序问题，在有相同成员的时候
}
 console.log(obj2)
//结果为  {gender: '男', name: 'Jack', age: 18}  会覆盖掉相同的key,以最后一个为主

给函数传递参数(例:通过Math.max()求最大值)

var arr1=[10,20,13,56,67]                     
var max = Math.max(...arr1)    //可以看作var max = Math.max（10,20,13,56,67）
console.log(max)    //结果为67

数组去重

//方法一://利用了Set结构不能接收重复数据的特点
let arr = [1,1,2,3,3,2,3,4]
const set = new Set(arr)  // 得到伪数组并去重
console.log(Array.from(set)); // 伪数组转为真数组


//方法二:使用filter搭配indexOf()去重
var arr = ['apple','apps','pear','apple','orange','apps'];
  var newArr = arr.filter(function(item,index){
     return arr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
  });
console.log(newArr); //['apple', 'apps', 'pear', 'orange']

//方法三:利用for 循环 搭配 indexOf 去重

 var arr = [1,9,8,8,7,2,5,3,3,3,2,3,1,4,5,444,55,22];
 function quchong(arr) {
		//定义一个新的临时数组 
		var newArr=[]; 
		//遍历当前数组 
		for(var i=0;i<arr.length;i++) {
		  //如果当前数组的第i已经保存进了临时数组，那么跳过，
		  //否则把当前项push到临时数组里面 
if(newArr.indexOf(arr[i]) === -1) {  //indexOf() 判断数组中有没有字符串值，如果没有则返回 -1 
		     newArr.push(arr[i]);
		  }
    	}
    return newArr
  }
  var arr2 = quchong(arr);
  console.log(arr2);

模板字符串

const name = 'Anni'
const age = 14
console.log(`大家好，我是${name}，今年${age}岁了`)    //大家好，我是Anni，今年14岁了
// 等价于
console.log("大家好，我是" + name +"，今年" + age + "岁了")