随笔

4.10-4.16 report

1) Object.keys(obj) // 传入对象，返回属性名

let obj = {type: "上午",list:"333", dance:"巴克勒"}

 console.log(Object.keys(obj)) // (3) ["type", "list", "dance"]  返回键名，但并没有吃掉属性值

2) classList添加类名

var bot = document.getElementById('bot')

bot.classList.add('niuheng') 
    // console.log(bot.classList.contains('niuheng')) // true

3） map的参数

let array = ["类型", "影响", "距离", "推荐", "预计"]
     array.map(function(item, index, arr){
         // console.log(item+'x', index, arr)
        // 类型x 0 (5) ["类型", "影响", "距离", "推荐", "预计"]
        // VM22:3 影响x 1 (5) ["类型", "影响", "距离", "推荐", "预计"]
        // VM22:3 距离x 2 (5) ["类型", "影响", "距离", "推荐", "预计"]
        // VM22:3 推荐x 3 (5) ["类型", "影响", "距离", "推荐", "预计"]
        // VM22:3 预计x 4 (5) ["类型", "影响", "距离", "推荐", "预计"]
         return item+'x'
     })
// (5) ["类型x", "影响x", "距离x", "推荐x", "预计x"]

4) Array.from()

Array.from()将一个类数组对象或可遍历对象转化为一个真正的数组

let arr1 = [12,45,97,9797,564,134,45642,12]
let set = new Set(arr1)
// [[Entries]]
        // 0: 12
        // 1: 45
        // 2: 97
        // 3: 9797
        // 4: 564
        // 5: 134
        // 6: 45642
        // size: 7,
// 可以看到set不是一个数组，它看起来想一个对象，却又不是一个对象

// console.log( Array.from(set))  // [12, 45, 97, 9797, 564, 134, 45642]

Array.from()还可将NodeList 转为真正的数组。

    var abc = document.getElementsByTagName('a')// 通过getElementsByTagName获取的元素不是一个数组，而是nodeList
    console.log(typeof(abc),abc)  
// 使用Array.from()
    console.log('Array.form',Array.from(abc)) //[a, a, a, a, a, a, a, a]
//第二种方法转化
var arr = new Array()  // 这种方式新建数组很新颖
    for(var i = 0; i < abc.length; i++){
        var ele = abc[i]
        arr.push(ele)
    }
    console.log(arr)  // [a, a, a, a, a, a, a, a]

5) 合并对象 assign

let newObj = ({} ,config, { key:Math.random()})

6）writing-mode

文字垂直显示

p{writing-mode: vertical-lr}

7）getAttribute\setAttribute

let pp = document.querySelector('input')

pp.setAttribute('data-event', true)  // 添加属性
let hasEvent = pp.getAttribute('data-event') // 获取对应键名对应的属性值
console.log(hasEvent)  // true

8）Object.prototype.toString.call()

用Object.prototype.toString.call(obj)检测对象类型

let arr = ['Eric','Mary','Rose']
    console.log(Object.prototype.toString.call(arr))  // [object Array]
    console.log(Object.prototype.toString.call('Eric'))  // [object String]
    console.log(Object.prototype.toString.call(0))   // [object Number]
    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]
    console.log(Object.prototype.toString.call({name:"julius"}))  // [object Object]
    console.log(Object.prototype.toString.call(function () {}))  // [object Function]
    console.log(Object.prototype.toString.call([]))   // [object Array]
    console.log(Object.prototype.toString.call(new Date))  // [object Date]
    console.log(Object.prototype.toString.call(/^\[.*\]$/))  // [object RegExp]

判断数据类型====>函数调用

function isNumber (number) {
        return  Object.prototype.toString.call(number) === '[object Number]'  // 字符串怎么能是true呢？
    }
    
    console.log(isNumber(12))  // true

9）引入iconfont字体图标

下载好并放入，import ‘./iconfont/iconfont.css’

// 使用：第一种方法 =>  <i *className*="iconfont icon-zanting"></i>

// 第二种方法 => <span class="icon iconfont">&#xe635;</span>