ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript 的内置对象

2022-01-21 18:30:25  阅读:139  来源: 互联网

标签:arr 内置 str 对象 JavaScript Number 字符串 数组 var


 

目录

一、Number 

1. isFinite()

2. isInteger()

3. isNaN()

4. parseFloat()

5. parseInt()

二、String

1. indexOf()

2. replace()

3. search()

4. concat()

5. split()

6. slice()

7. substr()

8. substring()

9. includes()

三、Array

1. join()

2. push()

3. pop()

4. shift()

5. reverse()

6. filter()

7. forEach()

8. find()

四、Object

1. Object.keys(obj)

2. Object.getOwnPropertyNames(obj)

3. Object.defineProperty(obj,prop,descriptor)


今天给大家分享一波  JavaScript  的内置对象以及比较常用的对象的方法 (ง ˙o˙)ว 

JavaScript 中的所有事物都是对象:Number、String、Array、Object、Function 等等

其中 Object 是所有对象的父对象

在 JavaScript 中,对象是拥有属性和方法的数据

一开始接触对象的时候,我学的也不是很好,当时觉得对象好复杂,老是记不住定义对象的几种方法以及对象的使用,基本靠死记硬背。果然后面再用的时候忘得一干二净。不过对象和数组对象是非常常用的两种存储数据的方式,即使一开始接触的时候你不怎么会,不用担心,后面用多了也就熟能生巧了。下面我总结一些比较常见的对象的方法。

一、Number 

方法描述
isFinite()判断是否一个有穷数
isInteger()判断是否一个整数
isNaN()判断是否一个NaN
parseFloat()把一个值解析为浮点数
parseInt()把一个值解析为整数

1. isFinite()

语法:Number.isFinite(value)

返回值:true 或 false

Number.isFinite(Infinity)    // false
Number.isFinite(NaN)         // false
Number.isFinite(-Infinity)   // false


Number.isFinite(0)           // true
Number.isFinite('123')       // false

2. isInteger()

语法:Number.isInteger(value)

返回值:true 或 false

Number.isInteger(0)          // true
Number.isInteger(-1)         // false

Number.isInteger(0.01)       // false
Number.isInteger(Infinity)   // false
Number.isInteger(NaN)        // false
Number.isInteger(undefined)  // false

3. isNaN()

语法:Number.isNaN(value)

返回值:true 或 false

Number.isNaN(NaN)            // true
Number.isNaN(Number.NaN)     // true
Number.isNaN(0 / 0)          // true

//下面这几个如果使用全局的 isNaN() 时,会返回 true
Number.isNaN("NaN")          // false,字符串 "NaN" 不会被隐式转换成数字 NaN
Number.isNaN(undefined)      // false
Number.isNaN({})             // false
Number.isNaN("blabla")       // false

//下面都返回 false
Number.isNaN(true)
Number.isNaN(null)
Number.isNaN(37)
Number.isNaN("37.37")
Number.isNaN("")

4. parseFloat()

功能:

  • 把值解析为浮点数
  • 解析过程中遇到了正号(+)、负号(-)、数字(0-9)、小数点(.)、或者科学记数法中的指数(e 或 E)以外的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数
  • 第二个小数点的出现也会使解析停止(在这之前的字符都会被解析)
  • 参数首位和末位的空白符会被忽略
  • 如果参数字符串的第一个字符不能被解析成为数字,则返回 NaN
  • parseFloat 也可以解析并返回 Infinity
  • parseFloat 解析 BigInt 为 Numbers,丢失精度。因为末位 n 字符被丢弃

语法:Number.parseFloat(string)

返回值:浮点数 或 NaN 

// 以下示例都返回 3.14
Number.parseFloat(3.14)
Number.parseFloat('3.14')
Number.parseFloat('  3.14  ')
Number.parseFloat('3.14.15')
Number.parseFloat('314e-2')
Number.parseFloat('0.0314E+2')
Number.parseFloat('3.14todo')
Number.parseFloat({ toString: function() {return "3.14" } })

// 以下示例返回 NaN
parseFloat("ABCD233")

5. parseInt()

语法:Number.parseInt(string[,radix])

参数:

  • string:要解析的值。如果此参数不是字符串,则使用 ToString 抽象操作将其转换为字符串。忽略此参数中的前导空格
  • radix:一个介于2到36之间的整数,代表字符串的基数

       1)如果输入的 string 以 "0x" 或 "0x"(一个0,后面是小写或大写的 X)开头,那么 radix 被假定为 16,字符串的其余部分被解析为十六进制数

       2)如果输入的 string 以 "0"(0)开头,radix 被假定为8(八进制)或10(十进制)。具体选择哪一个 radix 取决于实现。ECMAScript 5 澄清了应该使用10(十进制),但不是所有的浏览器都支持。因此,在使用 parseInt 时,一定要指定一个 radix

       3)如果输入的 string 以任何其他值开头,radix 是10(十进制)

返回值:整数 或 NaN

//以下例子均返回15
parseInt("0xF",16)
parseInt("F",16)
parseInt("17",8)
parseInt("015",10)     // parseInt(015,10) 返回 13
parseInt(15.99,10)
parseInt("FXX123",16)
parseInt("15 * 3",10)
parseInt("15e2",10)
parseInt("15px",10)
parseInt("12",13)

//以下例子均返回 -15
parseInt("-F",16)
parseInt(-15.1,10)
parseInt("-15e1",10)

//以下例子均返回 NaN
parseInt("Hello",8)    // 根本就不是数值
parseInt("456",2)      // 除了"0、1"外,其他数字都不是有效二进制数字

二、String

方法描述
indexOf()返回匹配字符串第一次出现的位置,如果不存在就返回 -1
concat()连接多个字符串,并返回连接后的字符串
localeCompare()比较两个字符串,相同返回 0,不同返回 -1
includes()判断字符串中有无特定字符串,有返回 true,无返回 false
replace()用指定字符串替换正则匹配的字符串,返回替换后的字符串
search()返回正则匹配的字符串的索引
slice()返回指定位置的字符串
splite()返回一个被正则匹配分割开的字符串组成的数组,可指定数组长度
substr()返回在指定位置开始的字符串中的字符
substring()返回在字符串中指定两个下标之间的字符
toString()返回表示该对象的一个字符串
valueOf()返回指定对象的原始数值

1. indexOf()

功能:

  • 根据第一个参数查找 str 中由左到右首次出现的索引,有则返回索引,没有返回 -1
  • 传空值时,如果有第二个参数则返回第二个参数,没有返回 0
  • 大小写敏感

语法:str.indexOf(searchValue[,fromIndex])

参数:无参数返回 -1

  • searchValue:目标字符串
  • fromIndex:查找的开始位置索引,可选,范围在 0 ~ str.length - 1。不传此参数按 0 开始查找
var str = '今晚的月色真nice'
str.indexOf() // -1
str.indexOf('') // 0
str.indexOf('的') // 2
str.indexOf('的',5) // -1
str.indexOf('nice',5) // 6
str.indexOf('Nice') // -1 

2. replace()

功能:用一些字符替换 str 中的某些字符,或替换一个与正则表达式匹配的子字符串

语法:str.replace(regexp | substr,newSubStr | function)

参数:第二个参数不传会用 undefined 替换

  • regexp(pattern):一个 RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉
  • substr(pattern):一个将被 newSubStr 替换的字符串。其被视为一整个字符串,而不是一个正则表达式。仅第一个匹配项会被替换
  • newSubStr(replacement):用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名
  • function(replacement):一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果

返回值:替换后的一个新字符串,不修改原字符串

var str = '今天晚上要休息'

var reg = /今天/gi
str.replace(reg,'明天') // '明天晚上要休息'

function reStr(){ return '睡觉'}
str.replace(reg,reStr) // '今天晚上要睡觉'

str.replace('晚上') // '今天undefined要休息'

3. search()

功能:在 str 中查找传入的字符串或正则匹配的字符,找到返回索引,没找到返回 -1

语法:str.search(regexp/substr)

参数:regexp/substr,规定子字符串或要匹配的 RegExp 对象

返回值:原字符串中第一次匹配到目标字符串的起始位置

search() 方法不执行全局匹配,它将忽略标志 g。也就是说,它只匹配一次。若没匹配到结果,则返回 -1

var str = '今晚的月色真美'
str.search() // 0
str.search('') // 0
str.search('月色') // 3
str.search('nice') // -1

4. concat()

功能:用于连接两个或多个字符串

语法:str.concat(string2,string3[,...,stringN])

参数:string2...stringN,与原 str 连接的多个字符串

返回值:连接后的一个新字符串,不改变原 str

concat 方法不会修改原字符串

var item1 = '今晚'
var item2 = '月色'
var item3 = '真美'
item1.concat(item2,item3) // '今晚月色真美'

5. split()

功能:使用指定字符串把原 str 分割成字符串数组,类似 Array.join() 的逆操作

语法:str.split([separator[,limit]])

参数:

  • separator:字符串或正则表达式,从该参数指定的地方分割原 str
  • limit:限定返回数组的最大长度

返回值:一个字符串数组

var str = '今天星期四,明天星期五'
str.split('') // ["今","天","星","期","四",",","明","天","星","期","五"]
str.split('',1) // ["今"]
str.split('天') // ["今","","星期四,明天星期五"]

6. slice()

功能:截取 str 中指定的某部分字符串,并返回这部分字符串,与 Array.slice() 相似

语法:str.slice(beginIndex[,endIndex])

参数:

  • beginIndex:截取的起始索引,不传默认从 0 开始,传负数则从 str.length + beginIndex 开始(即从倒第 beginIndex 个开始)
  • endIndex:截取的结束索引,不传默认为 str.length,传负数则从 str.length + endIndex 开始

返回值:截取部分,一个新的字符串,原 str 不改变

var str = '今天星期四,明天星期五'
str.slice() // '今天星期四,明天星期五'
str.slice(2) // '星期四,明天星期五'
str.slice(2,3) // '星'
str.slice(6) // '明天星期五'
str.slice(-5) // '明天星期五'
str.slice(-5,str.length-2) // '明天星'
str.slice(-5,-1) // '明天星期'

7. substr()

功能:截取 str 中指定的某部分字符串,并返回这部分字符串

语法:str.substr(beginIndex[,length])

参数:

  • beginIndex:截取的起始索引,不传默认为 0,传负数则从 str.length + beginIndex 开始(即从倒第 beginIndex 个开始)
  • length:截取字符串的长度,若未指定,则默认截取到 str 末尾

返回值:截取部分,一个新的字符串,原 str 不改变

注意:非 ECMAscript 标准化,将来或被移除,不建议使用

var str = '今天天气很好!'
str.substr() // '今天天气很好!'
str.substr(2) // '天气很好!'
str.substr(2,3) // '天气很'
str.substr(6) // '!'
str.substr(-6,str.length-2) // '!'
str.substr(-6,-1) // '' 

8. substring()

功能:截取字符串中介于两个指定下标之间的字符(与 slice 相似,不过参数不接受负值)

语法:str.substring(beginIndex[,endIndex])

参数:

  • beginIndex:截取的起始索引,不传默认为 0,传负值默认为 0
  • endIndex:可选,截取的结束索引,若未指定,则默认截取到原字符串的末尾

返回值:截取部分,一个新的字符串,原 str 不改变

注意:两参数都是非负数时,如果 beginIndex 比 endIndex 数值大,会互换 beginIndex 与 endIndex

var str = '今天天气很好!'
str.substring() // '今天天气很好!'
str.substring(2) // '天气很好!'
str.substring(2,3) // '天'
str.substring(3,2) // '天'
str.substring(6) // '!'
str.substring(-6,-1) // ''
str.substring(-6) // '今天天气很好!'
str.substring(-6,str.length-3) // '今天天气'

9. includes()

功能:判断 str 中是否有指定字符串

语法:str.includes(searchString[,position])

参数:

  • searchString:要在 str 中查找的字符串
  • position:可选。从哪个索引位置开始查找,默认值为 0,传负值当 0

返回值:str 中有指定字符串,返回 true,没有返回 false

var str = '今晚的月色很美'
str.includes('明天') // false
str.includes('今晚') // true
str.includes('美',9) // false
str.includes('今晚',-666) // true

三、Array

方法描述
filter()原来的数组中能够通过过滤器的元素组成一个新的数组返回
forEach()调用一个函数来处理数组中的每个元素
join()连接数组中所有的元素,返回一个字符串
pop()返回数组中的最后一个元素,并删除
push()在数组的最后增加一个元素,并返回新数组的长度
reverse()反转数组元素的顺序——第一成为最后一个,最后成为第一
shift()删除数组的第一个元素并返回
find()返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

1. join()

功能:

  • 把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分割的
  • 若省略了分隔符参数,则使用逗号作为分隔符
  • 如果数组只有一个项目,那么将返回该项目而不适用分隔符
  • 不改变原数组

语法:arr.join(separator)

参数:separator(可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符)

// arr.join() 不传参,默认","分隔
var arr = new Array(3)
arr[0] = "你"
arr[1] = "好"
arr[2] = "呀"
var nArr = arr.join()
console.log(nArr)  // 你,好,呀

// arr.join() 传参"-",使用"-"分隔
var arr2 = new Array(3)
arr[0] = "你"
arr[1] = "好"
arr[2] = "呀"
var nArr2 = arr2.join()
console.log(nArr2)  // 你-好-呀

2. push()

功能:

  • 向数组的末尾添加一个或多个元素,并返回新的数组长度
  • 改变原数组

语法:arr.push(element,...,elementN)

参数:elementN(被添加到数组末尾的元素)

var arr = [1,2,3]
var len = arr.push('a','b','c')
console.log(arr) // [1,2,3,"a","b","c"]
console.log(len) // 6(返回数组新长度为 6)


// 合并多个数组
var arr = [1,2,3]
var arr2 = ['a','b','c']
var arr3 = ['d','e','f']
arr.push(...arr2,...arr3)
console.log(arr) // [1,2,3,"a","b","c","d","e","f"]

3. pop()

功能:

  • 用于删除数组的最后一个元素,把数组长度减1,并返回被删除元素
  • 如果数组已经为空,则 pop() 不改变数组,并返回 undefined
  • 改变原数组

语法:arr.pop()

var arr = [1,2,3]
var getLast = arr.pop() // 第一次 arr.pop()
console.log(arr) // [1,2]
console.log(getLast) // 3 (执行完 arr.pop() 返回数组最后一个元素)

4. shift()

功能:

  • 用于把数组的第一个元素从其中删除,并返回被移除的这个元素
  • 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined
  • 该方法是直接修改原数组

语法:arr.shift()

var arr = [1,2,3]
var getFirst = arr.shift();
console.log(arr) // [2,3]
console.log(getFirst) // 1(执行 arr.shift() 返回数组第一个元素)

5. reverse()

功能:

  • 用于颠倒数组中元素的顺序
  • 该方法会直接修改原数组,而不会创建新数组

语法:arr.reverse()

var arr = [1,2,3,4,5]
var reArr = arr.reverse()

console.log(reArr) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1] 原数组被改变

6. filter()

功能:

  • 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或等价于 true 的值得元素创建一个新数组
  • 遍历得元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中得元素不会被 filter 遍历到。如果已存在的元素被改变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从未被赋值的元素不会被遍历到。
  • 返回一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组
  • 不会改变原数组,它返回过滤后的新数组

语法:var newArray = arr.filter(callback(element[,index[,array]])[,thisArg])

参数:

  • callback:用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:

           element:数组中当前正在处理的元素

           index(可选):正在处理的元素在数组中的索引

           array(可选):调用了 filter 的数组本身

  • thisArg(可选):

           执行 callback 时,用于 this 的值

//在数组中搜索符合的条目
var fruits = ['apple','banana','grapes','mango','orange']

function filterItems(query){
   return fruits.filter(function(el){
        return el.toLowerCase().indexOf(query.toLowerCase()) > -1   
   })
}

console.log(filterItems('ap')) // ['apple','grapes']
console.log(filterItems('an')) // ['banana','mango','orange']

7. forEach()

功能:

  • 方法按升序为数组中含有效值的每一项执行一次 callback 函数
  • 如果 thisArg 参数有值,则每次 callback 函数被调用时,this 都会指向 thisArg 参数。如果省略了 thisArg 参数,或者其值为 null 或 undefined,this 则指向全局对象
  • 如果使用箭头函数表达式来传入函数参数,thisArg 参数会被忽略,因为箭头函数在词法上绑定了 this 值
  • 除了抛出异常以外,没有办法中止或跳出 forEach()循环。如果你需要中止或跳出循环,forEach()方法不是应当使用的工具
  • 没有返回值,只是针对每个元素调用 func
  • 不会改变原数组

语法:arr.forEach(callback(currentValue[,index[,array]])[,thisArg])

参数:

  • callback:用来测试每个元素的函数,接受三个参数:

         currentValue:数组中正在处理的元素

         index(可选):数组中正在处理的元素的索引值

         array(可选):调用 forEach() 的数组

  • thisArg(可选):

          执行 callback 时,使用的 this 的值

// 不对未初始化的值进行任何操作(稀疏数组)
var arr = [1,{},3,null,5,,7]
arr.forEach(function(v,i,a){
  console.log("处理第" + i + "个元素:" + v)
})

// 处理第 0 个元素: 1
// 处理第 1 个元素: [object Object]
// 处理第 2 个元素: 3 
// 处理第 3 个元素: null
// 处理第 4 个元素: 5
// 处理第 6 个元素: 7
// 第 5 个元素未初始化而被跳过

8. find()

功能:

  • 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
  • find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined
  • callback 函数会为数组中的每个索引调用即从 0 到 length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法

语法:arr.find(callback[,thisArg])

参数:

  • callback:在数组每一项上执行的函数,接收 3 个参数:

        element:当前遍历到的元素

        index(可选):当前遍历到的索引

        array(可选):数组本身

  • thisArg(可选):

        执行回调时用作 this 的对象

var arr = [
  {name:'张三',age:20},
  {name:'李四',age:16},
  {name:'王五',age:16},
]

arr.find(function(item){
   return item.age === 16 //返回第一个符合 age 为 16 的项
}) // {name:'李四',age: 16}

四、Object

方法描述
keys()获取目标对象上所有可枚举属性组成的数组
getOwnPropertyNames(obj)获取目标对象上的全部自有属性名(包括不可枚举属性)组成的数组
defineProperty(obj,prop,descriptor)在一个对象上定义一个新属性或修改一个现有属性,并返回该对象

1. Object.keys(obj)

功能:获取目标对象上所有可枚举属性组成的数组

参数:

  • obj(必须):目标对象
var person = {
    type:'person',
    say:function(){}
  };
  //以person对象为原型,创建obj对象
  var obj = Object.create(person,{
    sex:{
      writable: true,
      configurable: true,
      enumerable: false, //设置sex属性为不可枚举
      value: 'm'
    },
    age:{
      writable: true,
      configurable: true,
      enumerable: true, //设置age属性为可枚举
      value: 23
    }
  });

  obj.name = '123'; //自定义属性name默认为可枚举
  console.log(obj.propertyIsEnumerable('name')); //true,成功验证name属性为可枚举

  //用for-in可获取obj上全部可枚举的属性(包括自有和原型链上的)
  var arr = [];
  for(var key in obj){
    arr.push(key);
  }
  console.log(arr); //["age", "name", "type", "say"]

  //用Object.keys()可获取obj上全部可枚举的自有属性
  console.log(Object.keys(obj)); // ["age", "name"]

2. Object.getOwnPropertyNames(obj)

功能:获取目标对象上的全部自有属性名(包括不可枚举属性)组成的数组

参数:

  • obj(必须):目标对象
var obj = {};
obj.say = function(){};

Object.defineProperties(obj,{
    name:{
      writable: true,
      configurable: true,
      enumerable: true,
      value: 'gwg'
    },
    age:{
      writable: true,
      configurable: true,
      enumerable: false,
      value: 23
    }
});

var arr = Object.getOwnPropertyNames(obj);
console.log(arr); //["say", "name", "age"]

3. Object.defineProperty(obj,prop,descriptor)

功能:在一个对象上定义一个新属性或修改一个现有属性,并返回该对象

参数:

  • obj(必须):被操作的目标对象
  • prop(必须):被定义或修改的目标属性
  • descriptor(必须):属性的描述符

descriptor 参数:

  • 数据属性

       value:值(默认为 undefined)

       writable:是否可修改属性的值(默认为 false)

       configurable:是否可通过 delete 删除属性,重新定义(默认为 false)

       enumerable:是否可 for-in 枚举(默认为 false)

  • 访问属性

        get():访问(默认为 undefined)

        set():设置(默认为 undefined)

var obj = {};
Object.defineProperty(obj,'name',{
    writable: true,
    configurable: true,
    enumerable: false,
    value: '张三'
});

console.log(obj.name); //'张三'
for(var key in obj){
    console.log(obj[key]); //无结果
}

注意:

var obj = {};

obj.item = 1;
// 等同于:
Object.defineProperty(obj, "item", {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});


// 另外,
Object.defineProperty(obj, "item", { value : 1 });
// 等同于:
Object.defineProperty(obj, "item", {
  value: 1,
  writable: false,
  configurable: false,
  enumerable: false
});

自定义 getter 和 setter:

function CustomizeObject() {
    var attr = null;
    var saveArr = [];

    Object.defineProperty(this, 'attr', {
        get: function() {
            console.log('get attr');
            return attr;
        },
        set: function(value) {
            attr = value;
            saveArr.push({ val: attr });
        }
    });

    this.getSaveArr = function() { return saveArr; };
}
  
var obj = new CustomizeObject();
obj.attr; // 'get attr'
obj.attr = 11;
obj.attr = [1,2,3,4];
obj.getSaveArr(); // [{val: 11},{val:[1, 2, 3, 4]}]

over~!

标签:arr,内置,str,对象,JavaScript,Number,字符串,数组,var
来源: https://blog.csdn.net/m0_53620413/article/details/122589402

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有