JavaScript内置类常见操作和高级函数

dn88_

已于 2022-05-26 19:42:55 修改

阅读量157

点赞数

文章标签： javascript 前端 vue.js

于 2022-05-25 19:19:24 首次发布

本文链接：https://blog.csdn.net/m0_67302441/article/details/124972031

版权

JavaScript内置类

1.原始类型的调用方法

原始类型的属性?

var name = "Hello World"

console.log(name.length)
console.log(name.split(" "))

var num = 2.54432
num = num.toFixed(2)

JS的原始类型并非是对象类型，没办法获取属性或者调用方法。

但是JS为了让基本数据类型获取属性和调用方法，对其等装了对应的包装类型。

自动创建对象 new string，但是这些操作是不可见的。

常见的包装类型有：N ,S,S,Bigint…

2.Number类型的使用:

// Number的构造函数 -- > window.Number

类方法是调用类，实例方法是通过具体对象来调用

1.类属性，也叫做静态属性
var num = 123 // new Number(num)
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
console.log(Number.SAFE_INTEGER)
console.log(Number.MIN_SAFE_INTERGER)


2.实例方法instance，只能通过对象来调用了
var num = 3.1415926
console.log(num.toString( )，type of num.toString( ))

var num = 1000
console.log(num.toString(2)) // 转成二进制
console.log(123..toString(2)) // ".."语法

var pi = 3.1415926
console.log(pi.toFixed(2)) //格式化一个数字，保留digits位的小数,字符串类型

3.类方法 
var num1 = "123.321"
console.log(Number(num1).toFixed(0))
console.log(Number.parseInt(num1))
console.log(Number.parseFloat(num1))

// window对象上面
？

3.Math是内置对象，不是构造函数

var num = 3.55

Math.pi
console.log(Math.floor(num))
console.log(Math.ceil(num))
console.log(Math.roung(num))
console.log(Math.random( )) [0,1)

需求：生成[5~50)的随机数
var randomNum = Math.floor(Math.random( )*45) + 5
算法：

console.log(Math.pow(x,y))

4.String类型

属性:

var message = "Hello World"
1.length
 message.length

2.访问字符串中某个位置的字符：
console.log(message[4])
console.log(message.chatAt(4))

3.遍历
for (var i = 0; i < message.length; i++){
console.log(message[i])
}

for...of遍历，对象不支持for...of，和迭代器有关，对象不可迭代；可迭代：字符串，数组
for (var char of message){
console.log(char)
}

5.String修改字符串

1.message所有字符变成大写

var message = "Hello World"
var message1 = message.toUpperCase()
或
message = message.toUpperCase

console.log(message)
console.log(message1)

2.小写 toLowerCase

3.查找字符串，判断一个字符串中是否有另一个字符串

var message ="My name is why"
var name = "why"

indexOf(SearchString,fromIndex):
var index = message.indexOf(name)
console.log(index)
搜索到，搜索字符串所在的索引位置；
没有搜索到，返回-1；


if (message.indexOf(name)) !== -1) {
console.log("message中包含name")
} else {
console.log("message中不包含")
}

4.包含/开头/结尾

ES6中判断包含关系 .includes()
ES6是否以xxx开头 .startsWWith()
............... .endsWith()

5.替换字符串

var newMessage = message.replace("why","kobe")

var newMessage = message.replace("why",function(){
    return newMessage.toUpperCase()
})
console.log(nweMessage)

6.获取子字符串

slice(start,end) 不含end 允许负值
substring(start,end) 不含end
substr(start,length) 从start开始获取长为length的字符串

console.log(message.slice(3,7))

7.字符串的拼接：链式调用

var newString = str1.concat(str2,str3).concat(str4)
console.log(newString)

8.删除首尾的空格

console.log("  why  ",trim())

9.字符串的切割

var message = "abc-cba-nba-mba"
var items = message.split("-")
console.log(items)

var newMessafe = items.join("*") 把数组每个元素拼接成字符串
console.log(newMessage)

6.数组（Array）

1.创建

var names = ["why","kobe","james","curry"]

var products = [
  { name:"鼠标",price:98 },
  { name:"键盘",price:100 },
]

2.创建

var arr1 = new Array()
var arr2 = new Array("abc","cba","nba")
console.log(arr1,arr2)

var arr3 = new Array(5) // ? 只传入数字，创建对应长度的数组 
console.log(arr3,arre[0])

3.通过索引访问元素

console.log(names[0]) //第一个元素
console.(names[names.length-1]) //最后一个元素

console.log(names.at(0))

4.新增数组的元素

在数组的尾部添加或删除元素：push方法 
names.push("why","kobe")
在最后的位置删除元素：pop方法，只能删1个
names.pop()

在数组的头部添加和删除元素（会改变索引，效率较低）
添加，unshift方法
names.unshift()

删除，shift方法
names.shift()

5.在任意位置添加/删除/替换元素

//arr.splice方法可做所有事情,且修改的原数组。


参数一，start,从什么位置开始操作元素
参数二，删除元素的个数

names.splice(1,2)

参数三，新增元素，这时候参数二为0，表示添加
name.splice(1,0,"why")

替换元素
name.splice(1,2,"why","kobe")  //spilice方法，修改原数组

6.length 长度，可赋值

names.length = 10
清空数组： arr.length = 0;

7.数组的遍历

 1. 普通的for循环
 
 2. for...in 拿到索引和元素
  for index (对象中是key)in names{
      names[index]
  }
      
 3. for...of 只拿到元素，不拿到索引
  for (var item of names){
      
  }

8.修改数组

删除 slice:  names.slice(1,2)  // 和splice不同，slice方法，不会修改原数组，且不包括end。 从哪里开始截，截到哪里。


拼接数组 concat: var newNames2 = names1.concat (names2,names3)
join方法转字符串拼接 ：console.log(names.join("-"))

9.查找元素，如果可以找到返回索引，没有找到返回-1

1. indexOf： console.log(names.indexOf("nba"))
 数组中存放的是原始类型：可以中找到，返回对应的索引。
 数组中存放的是对象类型：查找的是索引号下的对象内容。
 

2. 复杂类型： 遍历 for循环 + if 语句判断 
缺点：空对象不好寻找，且在堆内存创建空间
 
3. 数组的find方法，高阶函数：var stu = students.find()
var stu = students.find(fucntion(){item => item.id === 101}) 箭头函数
 
4. includes： names.includes("nba")

10.findindex查找元素的索引

 var findIndex = names.findIndex(function(item,index,arr){
  return item === "nba"
  })
箭头函数写法
var findIndex =  names.findIndex (item => item === "nba")
console.log(findIndex)

11,数组的排序和反转

冒泡/插入/选择/快速/希尔/堆
Sort 谁小谁排在前面，升序： nums.sort(function(item1,item2){
    return item1 - item2
    或者
    return item2 - item1
})

降序：console.log(nums.reverse())

12.复杂类型的排序

student.sort(function(item1,item2)){
             item1.age - item2.age
             })
console.log(students)

7.forEach和回调

names.forEach(function(item,index,name)) {

console.log("----",item,index,names)
}

hyForEach

8.Find

  var stu = students.find(function(item){
  if (item.names === "why" ) return true
  })
  console.log(stu)

或者箭头函数
  var stu = students.find(item => item.names === "why")
  console.log(stu)

hyForFind

9.Filter 过滤

取偶数：
1.for循环
2. 
var newNums = nums.filter(function(item)) {
          return item % 2 === 0     
               })
   console.log(newNums)
 返回ture自动加到新数组，返回false

10.Map映射

var nums = [11,20,55,100,88,32]
var newNums = nums.map(funciton(item)){
    return item * item
})
console.log(newNums)

11.Reduce 累加

1.for循环
var nums = [11,20,55,100,88,32]
var result = 0
for (var  item of nums) {
    result += item
}
console.log(result)

2.nums.reduce(function(preValue，item){
    
}，0)

item/index/arr

链式调用：过滤所有的偶数，映射所有偶数的平方，并且计算他们的和

var total = nums.filter(function(item){
return item %2 === 0
}).map(function(item){
return item * item
}).reduce{function(preValue,item){
return preValue + item
},0)

↑箭头函数写法：

var total = nums,filter(item => item % 2 === 0)
                  .map (item => item * item)
                  .reduce(preValue,item) => preValue + item,0)

12.创建Date对象的方式

格式转换：
new Date().toISOString
new Date().toDateString

YYYY-MM-DDTHH:mm:ss.sssZ

var year = date.getFullYear() 同时可以修改
...


转换成时间戳：
当前时间：
var timestamp1 = Date.now()
console.log(timestamp1)

指定时间获取时间戳
var date = new Date(timeString)
var timestamp2 = date.getTime() 或者date.valueOf()
+new Date()

类方法，类名？直接转换
var timestamp = Date.parse(timeString)
console.log(timestamp)