Javascript类型转换方法总结

首先是数组的常用方法

数组

数组对象的join方法

join方法是将数组对象中的，每个对象转换成字符串，并用传入参数字符串进行拼接，并返回一个字符串

let Arr = [1,2,3,4]
    console.log(Arr.join(',')) //1,2,3,4
    console.log(Arr.join('-')) //1-2-3-4
    let Arr2 = [1,2,[3,4],[5,6]]
    console.log(Arr2.join(',')) //1,2,3,4,5,6
    //若数组中有对象，则会对对象先使用tostring方法，所以对象将会被转换成[object Object]，一般不会这么做也不多做说明
    let Arr3 =[1,2,{name:'name1',value:1}]//1,2,[object Object]
    console.log(Arr3.join(','))

数组对象的push方法

该方法相信大家都很熟悉，是向数组末尾追加元素，改变原数组，但是其实这个方法是有一个返参的(返回改变后的数组长度)，大家可能没有注意

let arr = [1,2,3]
console.log(`push返回参数:${arr.push(4)} 追加后的数组对象:${arr} `)//打印结果 push返回参数:4 追加后的数组对象:1,2,3,4
    
    // 注意到打印出的arr.push(4)的反参4没有，没错就是返回拼接后的数组的长度(length属性)

数组对象的pop方法

pop方法将删除 数组的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

//pop
    let arr = [1,2,3]
    console.log(arr.pop()) //3  返回的是删除的元素
    console.log(arr) //[1, 2]   删除最后一位元素的数组
    let arr2 = [1]
    console.log(arr2.pop())   //1
    console.log(arr2)         //[]
    let arr3 = []
    console.log(arr3.pop())   //undefined
    console.log(arr3)         //[]

数组对象的splice方法

splice方法从数组中添加/删除项目，然后返回被删除的项目 主要语法为

arrayObject.splice(index,howmany,item1,.....,itemX)

• index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, ..., itemX：可选。向数组添加的新项目。
  ?

  //splice
      let arr =[1,2,3,4]
      // arr.splice(1,2) //从数组indexOf为1的位置删除两个元素并返回一个数组
      console.log(arr.splice(1,2))//?[2, 3]
      console.log(arr)  //[1,4]
      let arr2=[1,2,3,4]
      arr2.splice(1,2,666,777,888) //从arr2indexOf为1的位置删除两个元素并插入666，777，888三个元素
      console.log(arr2) //[1, 666, 777, 888, 4]
      let arr3 = [1,2,3,4]
      arr3.splice(-1,1,7777)//从arr3末尾删除1个元素并在删除元素位置插入7777
      console.log(arr3) //[1, 2, 3, 7777]
      let arr4 = [1,2,3,4]
      arr4.splice(-1,0,6666)//从arr4末尾删除0个元素并在删除元素位置插入7777
      console.log(arr4)  //[1, 2, 3, 6666, 4]
      let arr5 = [1,2,3,4]
      arr5.splice(-2,3,9999)
      console.log(arr5)//[1, 2, 9999]
  

数组对象的indexOf方法?

返回输入参数在数组中的位置(第一次出现)

//indexOf

    let arr =['a','b','c','d']
    console.log(arr.indexOf('c'))  //2
    let arr2 = ['a','b','b','b']
    console.log(arr2.indexOf('b')) //1

数组对象的lastIndexOf方法

返回输入参数在数组中的位置(最后一次出现) 用法就不多做阐述了和indexOf一样

数组对象的reverse方法

颠倒数组中元素的位置，会改变原数组，并返回颠倒后的原数组；

//reverse
    let arr = [1,2,3,4]
    arr.reverse()
    console.log(arr) //[4, 3, 2, 1]

数组对象的slice方法

从已有的数组中返回选定的元素

用法：arrayObject.slice(start,end)

• start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

//slice
    let arr = [1,2,3,4]
    console.log(arr.slice(0,2))//[1, 2] //返回arr中第1个元素开始截取两个长度的数组长度
    console.log(arr)//[1, 2, 3, 4]//该方法与splice方法不同，只是返回其中一截的数组长度并拼接成数组返回，并不会改变原数组

?数组对象的every方法

检索数组对象中每个元素是否都符合要求

let arr = [10,11,12,13]
console.log(arr.every(i=>i>10))//判断arr中所有元素是否大于10//false
console.log(arr.every(i=>i>9)) //判断arr中所有元素是否大于9//true

数组对象的some方法

检索数组对象中是否有符合规则的元素

let arr = [10,11,12,13]
console.log(arr.some(i=>i<9)) //判断arr中是否有元素小于9 //false
console.log(arr.some(i=>i<11)) //判断arr中是否有元素小于11 //true

数组对象的reduce方法

累加器方法，和forEach方法有点类似对数组中对象进行遍历计算并返回最终结果

//reduce
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '结果:'+
        arr.reduce((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

从输出结果来看你们可以发现第一次运行回调函数的时候x为1，y为2，而第二次x=3，y=3，第三次输出为x=6，y=4，由此可以看出第一次x等于数组的第一个元素值，第二个元素为数组的第二个元素值，而往后，x为回调函数返回的值，y为arr[次数]的值

数组对象的reduceRight方法

//reduceRight
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '结果:'+
        arr.reduceRight((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

?从输出结果来看可以看出，reduceRight方法与reduce方法一样，之后过是从末尾计算追加

数组对象的forEach方法

方法用于调用数组的每个元素，并将元素传递给回调函数(该方法不会改变原数组，但是可以依靠回调函数做到)

let arr = ['aaa','ccc','ddd','eee','bbb']
    arr.forEach((currentValue,index,arr)=>{
        console.log(`index:${index},value:${currentValue}`)
        console.log(arr)
    })
    /*   此为输出结果
         index:0,value:aaa
         ['aaa','ccc','ddd','eee','bbb']...
         forEach方法对数组中的元素进行遍历，进行操作回调函数中的currentValue为遍历的当前元素值，index为当前元素索引，arr是当前元素返回的数组
         forEach 方法用于调用数组的每个元素，并将元素传递给回调函数。
         如果对数组中的每个元素都要进行操作或者判断则可以使用此方法，如果遍历需要回返则不建议使用

    */

数组对象的map方法

对数组进行遍历循环并返回一个新数组；

let arr = ['aaa','ccc','ddd','eee','bbb']
console.log(arr.map((currentValue,index,arr)=>{
    
    return currentValue+index
}))
/*   此为输出结果
        [aaa1,ccc2,ddd3,eee4,bbb5]
     map方法和forEach方法很像回调方法的都是必传当前遍历元素的值与选填的当前元素索引选填的当前元素所在数组唯一不同的是forEach方法没有返回值但是map方法却会返回一个新数组这用于要对数组中加入一些新子元素非常方便（操作数组）
*/

数组对象的filter方法

过滤器方法，过滤出数组对象中符合自定义规则的元素并组合成一个新数组返回

//filter
    let arr = [111,222,333,444,555,666]
    console.log(
        arr.filter((currentValue,index,arr)=>{
            return currentValue>333
        })
    ) //输出结果 [444,555,666]
    /**
     * filter方法的入参用法用forEach map一样都是currentValue必填，index，arr选填
     * filter将会返回一个过滤掉不符合自定义规则的数组的新数组
     * */

数组对象的sort方法

多用于数组的排序可传入一个回调函数来定义排序方式，一般在比较Number元素大小时可用，如果数组中元素都是Number类型而又没有传入回调函数则返回原数组，说白了不传回调函数比较大小只对String类型有效，所以又想不传入回调函数又想排序纯Number数组就要先把所有数组元素转换成String类型进行排序，废话不多说直接上代码。

let arr = [333,11,666,2,8,123,0]
    let arr2 = ['zzz','eee','sss','aaa','ddd']
    console.log(arr2.sort())  //?["aaa", "ddd", "eee", "sss", "zzz"]
    console.log(arr.sort()) //[0, 11, 123, 2, 333, 666, 8]
    //由此可见不传回调函数对纯Number类型的数组是不生效的，可见sort方法的排序方式是通过编码来对数组元素进行排序的

    //纯Number类型数组从小到大排序
    console.log(arr.sort((a,f)=>{
        return a-f
    }))//[0, 2, 8, 11, 123, 333, 666]
    //纯Number类型数组从大到小排序
    console.log(arr.sort((a,f)=>{
        return -(a-f)
    }))//[666, 333, 123, 11, 8, 2, 0]

数组对象的concat方法

用于拼接数组，可传入多个参数（至少传入一个）返回一个新数组，如果传入的是一个数组则会拼接入数组中的元素而不是数组

let arr = [1,2,3,4,5]
    console.log(arr.concat(6,7,8,[9,10],[11],[12,13]))//[1,2,3,4,5,6,7,8,9,10,11,12,13]

数组对象的shift方法

//shift
    let arr = [1,2,3,4,5]
    console.log(arr.shift())  //1
    console.log(arr)          //[2,3,4,5]
    //注意啦，这个方法会改变原数组长度的，一般场合都用不到

数组对象的unshift方法

unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

//unshift
    let arr = [1,2,3,4,5]
    console.log(arr.unshift(6)) //6
    console.log(arr.unshift([7,8,9]))//7

    console.log(arr)  //[[7,8,9],6,1,2,3,4,5]
    //unshift方法返回的是新数组长度，而shift方法是返回第一个被删除的元素，这两个方法都会改变数组长度，而传入的参数如果是个数组将不会和concat方法一样将传入数组元素打散

扩展运算符

在ES5中我们要将两个打散数组合并会用到数组对象的concat方法

let arr = [1,2,3,4,5,6,7,8,9,0]
    console.log(arr.concat([1],[1,2,3,4],'aaaa',['bbbb','dddd'])) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 1, 2, 3, 4, "aaaa", "bbbb", "dddd"]

类方法from

将类数组对象和迭代器对象转换成数组最常用的应该就是数组去重操作了

let arr = [1,2,3,3,3,3,444,4,4,4,5,5,'a','a','b','f']
let set = new Set(arr)  //set数据类型中不会存在相同的元素，因此把数组转换成set会将数组中重复的部分去除
let newArr = Array.from(set)  //将set数据类型转换成数组
console.log(newArr) //[1, 2, 3, 444, 4, 5, "a", "b", "f"]

当然它也能像扩展运算符一样，将String字符串转换成数组

let str = 'hello world'
let arr = Array.from(str)
console.log(arr)//['h','e','l','l','o',' ','w','o','r','l','d']

对象

（1）浅拷贝

Object.assign()

• 浅拷贝对象，相同的值会被覆盖为新值
• 参数1为接受拷贝的对象，参数2为传递拷贝的对象
• 结果会改变第一个参数对象，同时会返回这个参数对象

const target = { a: 1, b: 2 }
const source = { b: 3, c: 4 }

const result = Object.assign(target, source)

console.log(target)  //  { a: 1, b: 3, c: 4 }

console.log(result)  // { a: 1, b: 3, c: 4 }

console.log(target === result) // true

?

• Object.create()

  • 用于创建一个新对象
  • 需要传入一个参数，作为新建对象的原型对象

• 实现一个简单的深拷贝

?

function deepClone(newObj, oldObj){
    for(var k in oldObj){
        var item = oldObj[k];
        if(item instanceof Array){
            // 如果这个属性是数组（注意数组要在对象前，因为数组也是对象）
            newObj[k] = [];	// 让目标对象的这个属性也是数组
            deepCopy(newObj[k],item); // 然后进入递归
        }else if(item instanceof Object){
            // 如果这个属性是对象
            newObj[k] = {};	// 让目标对象的这个属性也是对象
            deepCopy(newObj[k],item); // 然后进入递归
        }else{
            // 只有在既不是数组、也不是对象时，才可以直接赋值
            newObj[k] = item;
        }
    }
}

（2）判断

Object.is()

• 用于判断两个值是否相等

Object.is('foo', 'foo') // true
Object.is([], []) // false

Object.is(null, null) // true
Object.is(NaN, NaN) // true

// 特别的：
Object.is(0, -0)            // false
Object.is(+0, -0)           // false
Object.is(0, +0)            // true
Object.is(-0, -0)           // true
Object.is(NaN, 0/0)         // true

( 3）键值对

Object.entries()

• 返回键值对数组

• let obj = {
      name: 'ruovan',
      age: 24
  }
  Object.entries(obj) // [['name', 'ruovan'], ['age', 24]]
  
  

  Object.fromEntries()

• 将键值对数组转换为对象

let arr = [['name', 'ruovan'], ['age', 24]]
Object.entries(arr) // { name: 'ruovan', age: 24 }

?（4）定义对象

• Object.defineProperties()

• Object.defineProperty()

  • 给对象定义新属性、修改现有属性

var obj = {}

// obj 表示要操作的对象， "name"表示要操作的对象属性
Object.defineProperty(obj, "name", {
    enumerable: false, // 是否可枚举，设置为 false，则 name 不能通过 for...in 遍历到
    configurable: false, // 是否可被删除，设置为false，则 name 无法通过 delete运算符删除
    writable: false, // 是否可写，设置为 false ，则属性不能被重新赋值或修改
    value: "dary", // 被设置的属性值
    // 获取值
    get: function () {
        return v
    },
    // 赋值
    set: function (value) {
        v = value
    }
})

// defineProperties 可一次性处理多个属性
Object.defineProperties(obj, {
    'name': {
        value: 'dary',
        writable: true
    },
    'age': {
        value: 19,
        writable: false
    }
});

?

Object.proxy()

• 用于修改某些操作的默认行为

• 它在目标对象之前架设了一层拦截，外界对该对象的访问，都必须先通过这层拦截

• 因此它提供了一种机制，可以对外界的访问进行过滤和改写

• proxy：代理，这里表示用它来代理某些操作

• Proxy是一个构造函数，它接受两个参数：目标对象target与句柄对象handler
  • handler内的方法是对target对象的方法进行拦截处理的方法

// Proxy(target, handler)
new Proxy(person, {
    get: function (target, key) {
        return target[key]
    },
    set: function (target, key, value) {
        target[key] = value
        console.log('target[key] is setted')
    }
})

?

（5）获取属性

• Object.getOwnPropertyDescription()

  • 用于获取对象上的一个自有属性的属性描述
  • 包括：value、writable、get、set、configurable、enumerable

const obj = {
  number: 42
}

const des = Object.getOwnPropertyDescriptor(obj, 'number')

// 可以访问其属性描述符
console.log(des.configurable) // true

console.log(des.value) // 42

?

Object.getOwnPropertyDesciptors()

• 用于获取对象的所有自身属性的描述符

Object.getOwnPropertyDescriptors(obj)
// num: {
//   value: 42,
//   writable: true,
//   configurable: true,
//   enumerable: true,
// }

?

Objec.getOwnPropertyNames()

• 用于获取对象自身拥有的可枚举属性和不可枚举属性的属性名
• 返回一个数组

var arr = ["a", "b", "c"]
console.log(Object.getOwnPropertyNames(arr).sort()) // ["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"}
console.log(Object.getOwnPropertyNames(obj).sort()) // ["0", "1", "2"]

?

Object.prototype.hasOwnProperty()：

• 用于判断对象自身属性是否含有指定的属性，不包括从原型链上继承的属性

const obj = {};

obj.number = 24

console.log(obj.hasOwnProperty('number')) // true

// 不包括从原型链上继承的属性
console.log(obj.hasOwnProperty('toString')) // false

  console.log(obj.hasOwnProperty('hasOwnProperty')) //false
  

?

（6）原型

• Object.getPrototypeOf()

  • 用于返回指定对象的原型，如果没有则返回null

let obj = {}

Object.getPrototypeOf(obj)
// 作用和 __proto__ 效果一样
Object.getPrototypeOf(obj) === obj.__proto__

// 特别的，Object 也是构造函数， 因此，返回的是函数的原型对象
Object.getPrototypeOf(Object) === Function.prototype === Object.__proto__

?

Object.setPrototypeOf()

• 用于设置指定对象的新原型

Object.setPrototypeOf(obj, prototype)

?

Object.prototype.isPrototypeOf()

• 用于检测一个对象是否存在于另一个对象的原型链上

// 用于检查 prototypeObj 是否在 object的原型链上
prototypeObj.isPrototypeOf(object)
let obj1 = {}
let obj2 = new Object()

console.log(obj1.__proto__.isPrototypeOf(obj2)) // true
    

?

（8）字符串

• Object.toString()

  • 每个对象都有这个方法，用于返回一个表示该对象的字符串

let obj = { a: 1, b: 2 }
let arr = [1,2,3]
let str = '123'

obj.toString() // [object Objetc]
arr.toString() // 1,2,3
str.toString() // 123

?文章的总结就到这里啦，当然还有没有补充的欢迎留下评论