js中判断数据类型的方法与ES6的新增

185 阅读4分钟

判断数据类型

1.typeof

语法:typeof(数据)

         console.log(typeof(123)) //number
         console.log(typeof('abc')) //string
         console.log(typeof(true)) //boolean
         console.log(typeof(undefined)) //undefined
         console.log(typeof(null)) //object

问题:只能检测基本数据类型

2.constructor

语法:数据结构.constructor

 let A = 123
        let B = 'ABC'
        let C = true
        let D = {}
        let E = []
        let F = null
        let G = undefined

         console.log(A.constructor) //ƒ Number() { [native code] }
         console.log(B.constructor) //ƒ String() { [native code] }
         console.log(C.constructor) //ƒ Boolean() { [native code] }
         console.log(D.constructor) //ƒ Object() { [native code] }
         console.log(E.constructor) //ƒ Array() { [native code] }
         console.log(F.constructor) //会报错
         console.log(G.constructor) //会报错

问题:null与undefined不能使用,会报错

使用场景:一般用于引用数据类型

潜在问题:这是原型对象的某一个属性,我们是可以手动修改的

3.Object.prototype.toString.call(要检测的数据)

 console.log(Object.prototype.toString.call({})) //[object Object]
 console.log(Object.prototype.toString.call([])) //[object Array]
 console.log(Object.prototype.toString.call(123)) //[object Number]
 console.log(Object.prototype.toString.call('abc')) //[object String]
 console.log(Object.prototype.toString.call(true)) //[object Boolean]
 console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
 console.log(Object.prototype.toString.call(null)) //[object Null]

返回值:[object 数据类型] (字符串格式的,并且数据类型首字母要大写) 使用场景:任意数据类型都可以精准判断,所以大部分情况都可以使用

ES6新增内容

1.模板字符串

在ES5中书写,要么是单引号要么是双引号

在ES6推出模板字符串用 反引号包裹

let nul = 12
let str = '我是一个字符串'
let str1 = `我的年龄是${nul}`


区别:

  1. 反引号 能够换行,但 双引号单引号 不可以换行
  2. 反引号 内部如果书写有 ${} 然后在内部可以识别出变量

2.展开运算符

在ES6推出展开运算符 ...

作用:能够展开数组 或 对象

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

        //合并数组
        let arr2 = [...arr, 4, 5, 6]
        console.log(arr2) //[1, 2, 3, 4, 5, 6]

        //函数传参
        function fn(a, b, c) {
            console.log('fn的形参是', a, b, c)
        }

        //ES5传参
        fn(arr[0], arr[1], arr[2])

        //ES6传参
        fn(...arr)

        //展开对象
        let obj = {
            a: 1,
            b: 2
        }
        //console.log(...obj)  //这个代码不符合语法规范所以不能这么使用

        //可以使用 ... 将两个对象拼接起来
        let obj2 = {
            ...obj,
            c: 3,
            d: 4
        }

        console.log(obj2)

对象的简写语法

当对象的 key 与 value 相同时,并且 value 是一个变量时,那么可以省略其中一个不写

    let name = '李四'

         let obj3 = {
            // name : '李四',
            // name : name

            name,
            age : 100,
         }

对象内函数的简写

let obj3 = {

            //原版
            fn : function(){
                console.log('我是对象obj属性的fn函数属性值')
            },
            //简写版
            fn1(){
                console.log('我是fn1函数')
            }
         }

创建 Set 数据结构

语法:let s = new Set([数据1, 数据2, ....])

let s = new Set([1, 2, 3, 4])
console.log(s) //Set(4) {1, 2, 3, 4}

set数据结构的属性和方法

语法:数据结构.size

返回值:该数据结构内有多少数据

let s = new Set([1, 2, 3, 4])
console.log(s.size) // 4

语法:数据结构.add(数据)

作用:向数据结构内添加数据

注意:一次只能=添加一个数据

let s = new Set([1, 2, 3, 4])
s.add('我是一个数据')
console.log(s) //Set(5) {1, 2, 3, 4, '我是一个数据'}

语法:数据结构.has()

**作用:查找数据,如果找到返回 true 反之返回 false **

let s = new Set([1, 2, 3, 4])
console.log(s.has(1)) //true
console.log(s.has(5)) //false

语法: 数据结构.delete(数据)

作用:删除该数据结构内的某一数据

let s = new Set([1, 2, 3, 4])
s.delete(4)
console.log(s) // Set(3) {1, 2, 3}

语法:数据结构.clear()

作用:清除该数据结构里的所有数据

let s = new Set([1, 2, 3, 4])
s.clear()
console.log(s) //Set(0) {}

语法:数据结构.forEach(function(value, key, origin){})

作用:遍历这个数据结构

let s = new Set([1, 2, 3, 4])
s.forEach(function(value ,key, origin){
console.log(key)
console.log(value)
})

Map数据结构

类似于对象的数据结构,但是他的 key 可以是任何数据类型 可以叫做一个 值 = 值 的数据结构

创建一个 Map 数据结构

语法:let m = new Map({[key , value], [key , value],....})

let m = new Map([['name', '李四'], ['age', 12], ['init', 44]])
console.log(m) //Map(3) {"name" => "李四", "age" => 12, "init" => 44}

语法:数据结构.size

作用:得到该数据内有多少数据

let m = new Map([['name', '李四'], ['age', 12], ['init', 44]])
console.log(m.size) // 3

语法:数据结构.set(key,value)

作用:向数据结构内添加数据

let m = new Map([['name', '李四'], ['age', 12], ['init', 44]])
m.set('ast', '我是一个数据')
console.log(m) //Map(4) {"name" => "李四", "age" => 12, "init" => 44 ,"ast" =>"我是一个数据" }

语法:数据结构.get(key)

作用:查询数据结构内 key 所对应的 value

let m = new Map([['name', '李四'], ['age', 12], ['init', 44]])
let z = m.get('name')
console.log(z) // '李四'

语法:数据结构.has(key)

作用:查询数据结构中有无 key 找到了返回 true 反之返回 false

let m = new Map([['name', '李四'], ['age', 12], ['init', 44]])
console.log(m.has('name')) //true
console.log(m.has('iom')) //false

语法:数据结构.delete(key)

作用:删除该数据内的某一个 key

let m = new Map([['name', '李四'], ['age', 12], ['init', 44]])
m.delete('name')
console.log(m) //Map(2) {"age" => 12, "init" => 44}

语法:数据结构.clear()

作用:清空数据结构内的所有内容

let m = new Map([['name', '李四'], ['age', 12], ['init', 44]])
m.clear()
console.log(m) //Map(0) {}

语法:数据结构.forEach(function(value,key,origin){})

m.forEach(function (value, key, origin) {
console.log(value, key)
})

用ES6的方法书写构造函数

ES6的语法

1.构造函数不加 new 也能使用,只不过没有意义

2.构造函数与原型上的内容需要分开书写

 function fn(){
            this.a = 1
            this.b = 2

         }


         //ES6的书写
         class Stu {
            //构造器,类似ESS构造函数的函数体
            constructor(name,age){
                this.name = name
                this.sage = age 
            }

            //下面的部分全部可以用来书写原型
            a(){
            console.log('我是原型上的a方法')
            }
            b(){
            console.log('我是原型上的b方法')
            }
            c(){
            console.log('我是原型上的c方法')
            }
            d(){
            console.log('我是原型上的d方法')
            }  
         }