本兩週學習總結

HTML attribute和DOM property

https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/blob/master/archives/015-dom-attributes-and-properties.md

HTML attribute	DOM property
值永遠是字符串或 null	值能夠是任意合法 js 類型
大小寫不敏感	大小寫敏感
不存在時返回 null	不存在時返回 undefined
對於 href, 返回 html 設置的值	對於 href 返回解析後的完整 url
更新 value, 屬性也更新	更新 value, 特性不更新

DOM 屬性

當瀏覽器解析玩HTML後,生成的DOM是一個繼承自Object的常規Javascript,所以咱們能夠像操做任何js對象那樣來操做DOM對象,也能夠添加方法,你能夠給每一個html元素都添加屬性或者方法

const el = document.getElementById('name')
el.foo = 'bar'
el.user = { name: 'jjc', age: '18'}

html 特性

html 也能夠添加非標準屬性
<input id="name" value="justjavac" foo="bar" />

當HTML特性映射爲DOM屬性時,只映射標準屬性,訪問非標準屬性將獲得undefined

const el = document.getElementById('name')
el.foo === undefined

好在DOM對象也提供了操做特性的API

• Element.hasAttribute(name) – 判斷某個特性是否存在
• elem.getAttribute(name) – 獲取指定特性的值
• elem.setAttribute(name, value) – 設置指定特性的值
• elem.removeAttribute(name) – 移除指定特性

根據 HTML 規範，標籤以及特性名是不區分大小寫的，所以如下代碼是同樣的

el.getAttribute('id')
el.getAttribute('ID')
el.getAttribute('iD')

而且，特性永遠都是字符串或 null,若是咱們爲特性設置非字符串的值，則引擎會將此值轉換爲字符串

el.getAttribute('checked') === '' // 特性是字符串
el.checked === false              // 屬性是 boolean 類型的值

el.getAttribute('style') === 'color:blue' // 特性是字符串
typeof el.style === 'object'                 // 屬性是 CSSStyleDeclaration 對象

JavaScript30

https://soyaine.github.io/JavaScript30/

前端週刊

https://frontend-weekly.com/2019/phase-42.html

Reflect.ownKeys()與Object.keys()區別

Object.keys()返回屬性key,但不包括不可枚舉的屬性

Reflect.ownKeys()返回全部屬性key

查詢資料:

Object.keys()

• 至關於返回屬性數組

Reflect.ownKeys()

• 至關於Object.getOwnPropertyNames(target) 和 Object.getOwnPropertySymbols(target)

注意

getOwnPropertyNames() 返回全部屬性的數組

Object.getOwnPropertySymbols() 返回全部符號屬性直接發如今給定的對象

arguments 轉數組的方法

function add(a,b){
  // return Array.prototype.slice.call(arguments)
  // return Array.from(arguments)
  // return [...arguments]
  return Array.prototype.concat.apply([],arguments)
}

forEach中return有效果嗎?

在forEach中用return 不會返回,函數會繼續執行

用every和some替代forEach函數

• every在碰到return false 的時候,停止循環
• some在碰到return true 的時候,停止循環

isString

const getTag = val => Object.prototype.toString.call(val);
const isString=val=>{
  const type=typeof val;
  //若是是 new String('xxx') 又由於 type null等於'object'
  return type === 'string' || type === 'object' && val != null && !Array.isArray(val) && getTag(val) == '[object String]';
};

lodash 源碼分析

https://github.com/L-WJ1995/Lodash_realize/blob/master/lodash.js

rambda

https://github.com/selfrefactor/rambda

　發現一個好東西

https://lhammer.cn/You-need-to-know-css/#/zh-cn/

Element 的全部屬性

https://developer.mozilla.org/zh-CN/docs/Web/API/Element

EventTarget

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget

Promise

const isGreater = (a, b) => new Promise((resolve, reject) => {
  if (a > b) {
    result(true)
  } else {
    reject(false)
  }
});
isGreater(1, 2).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

僞類和僞元素的區別

CSS 僞類是添加到選擇器的關鍵字,指定要選擇的元素的特殊狀態,:hover :visited 等

也有常見的僞類選擇期 :nth-child :last-child

::僞元素

::before ::after CSS3 標準

:before CSS2 非標準

本身實現一個IndexOf

const strStr = (haystack, needle) => {
  if (needle === '') return 0;
  if (needle.length > haystack.length) return -1;
  if (needle.length === haystack.length && needle !== haystack) return -1;
  let i = 0, j = 0;
  while (i < haystack.length && j < needle.length) {
    // 同位相等,繼續判斷下一位
    if (haystack[i] === needle[j]) {
      i++;
      j++
    } else {
      i = i - j + 1; //i 偏移
      j = 0; //j 重置
      if (i + needle.length > haystack.length) { //若是偏移值+比較的和,大於目標值
        return -1
      }
    }
  }
  // 子串比完了,此時j應該等於needle.length
  if (j >= needle.length) {
    return i - needle.length
  } else {
    return -1
  }
};
console.log(strStr('abc', 'b'));

this

this 是一個對象

function Dog(name, age) {
  this.name = name;
  this.age = age;
  console.log(this);
}
// 直接調用
Dog('xxx', 'yyy'); // window
// new的方式調用
let a = new Dog('xxx', 'yyy');
console.log(a); // Dog { name: 'xxx', age: 'yyy' }

this指向問題

對象調用,this指向該對象

直接調用的函數,this指向全局window

經過new 的方式,this永遠綁定在新建立的對象上

改變this指向

函數.call(對象,1,2,3...參數)

函數.apply(對象,[參數1,參數2,...])

　發現一些有趣的項目

https://juejin.im/post/5dcc0546f265da79482566cb

Map key值取對象的注意點

let a = {a: 1};
let my1Map = new Map([[a, 1], ['b', 2]]);
console.log(my1Map.get(a)); //1
console.log(my1Map.get({a: 1}));// 這樣是找不到的 undefined
console.log(my1Map); // Map { { a: 1 } => 1, 'b' => 2 }

　reduce 製做實用函數

some

const some = (array, fn) => array.reduce((acc, val, index) => acc || fn(val, index), false);
console.log(some([1, 2, 3, 4], val => 6 === val)); // false
console.log(some([1, 2, 3, 4], val => 3 === val)); // true

all

const all = (array, fn) => array.reduce((acc, val) => acc && fn(val), true);
console.log(all([1, 1, 1, 1],val=>val===1));//true
console.log(all([1, 1, 1, 2],val=>val===1));//false

none

若是每一項都是返回false,none返回true,不然返回false

const none = (array, fn) => array.reduce((acc, val) => acc && !fn(val), true);
console.log(none([2,4,6,8], val => val % 2 == 1));  // true

map

const map=(array,fn)=>array.reduce((acc,val)=>acc.concat(fn(val)),[]);
const map=(array,fn)=>array.reduce((acc,val)=>(acc.push(fn(val)),acc),[]);

console.log(map([1, 2, 3, 4, 5], val => val * 4));

filter

const filter = (array, fn) => array.reduce((acc, val) => (fn(val) && acc.push(val), acc), []);


const filter = (array, fn) => array.reduce((acc, val) => fn(val) ? acc.concat(val) : acc, []);
console.log(filter([1, 2, 3, 4, 5], val => val % 2 == 0)); //[ 2, 4 ]

find

const find = (array, fn) => array.reduce((acc, val) => fn(val) ? val : acc);
console.log(find([1, 2, 3, 4], val => val == 2)); // 2

pipe

從左到右進行函數組合

const pipe = (array, init) => array.reduce((acc, val) => val(acc), init);
let a = pipe([val => val + 3, val => val + 4], 2);
console.log(a);// 9

zip

const zip = (list1, list2, arr = Array.from({length: Math.min(list1.length, list2.length)}, val => [])) => {
  return arr.reduce((acc, val, index) => (acc[index].push(list1[index], list2[index]), acc), arr);
};
console.log(zip([1, 2, 3], [3, 4]));
// [ [ 1, 3 ], [ 2, 4 ] ]

includes

const includes = (array, target) => array.reduce((acc, val) => acc || val == target, false);
console.log(includes([1, 2, 3, 4, 5], 5));//true

compace

從列表中刪除假值

const compact = (list) => list.reduce((acc, val) => (val && acc.push(val), acc), []);
console.log(compact([1, 2, null, false, '', 3, 5])); //[ 1, 2, 3, 5 ]

　多選框默認顏色及選中顏色的問題

<select class="form-control yl_height_select" ng-model="params.attackType"
      ng-class=" {yl_css_select:!params.attackType}">
                                    <option value="" style="display: none;" disabled selected>請選擇攻擊類型</option>
                                    <option ng-repeat="item in attackTypeOpts" value="{{item.value}}">{{item.label}}
                                    </option>
                                </select>
當params.attackType沒有值的時候展現 yl_css_select

typeof 的安全問題

typeof x; //報錯
let x;

"暫時性死區",就是變量x使用let 命令生命,在生命以前,都屬性x的"死區",只要用這個變量就會報錯

typeof  x //undefined

可是,若是變量沒有被聲明,使用typeof 反而不會報錯

暫時性死區的本質就是,只要一進入當前做用域,所使用的變量就已經存在了,可是不可獲取,只有等到聲明變量的那一行代碼出現,才能夠獲取和使用該變量