JS基礎(chǔ)

function User() {}
User.prototype = {
  lessons: ["JS", "VUE"]
};
const lisi = new User();
const wangwu = new User();

lisi.lessons.push("CSS");

console.log(lisi.lessons); //["JS", "VUE", "CSS"]
console.log(wangwu.lessons); //["JS", "VUE", "CSS"]
undefined:未賦值與未定義的變量值都為 undefined
null: 用于定義一個(gè)空對(duì)象,即如果變量要用來保存引用類型,
可以在初始化時(shí)將其設(shè)置為null
  • 標(biāo)簽(label) 為程序定義位置,可以使用continue/break跳到該位置
continue hdcms: 跳出n的循環(huán)
break houdunren:  跳出I的循環(huán)
houdunren: for (let i = 1; i <= 10; i++) {
  hdcms: for (let n = 1; n <= 10; n++) {
    if (n % 2 != 0) {
      continue hdcms;
    }
    console.log(i, n);
    if (i + n > 15) {
      break houdunren;
    }
  }
}
  • for/in 用于遍歷對(duì)象的所有屬性,for/in主要用于遍歷對(duì)象,不建議用來遍歷數(shù)組
  • for/of 用來遍歷 Arrays(數(shù)組), Strings(字符串), Maps(映射), Sets(集合)等可迭代的數(shù)據(jù)結(jié)構(gòu)。與 for/in 不同的是 for/of 每次循環(huán)取其中的值而不是索引。
    https://doc.houdunren.com/js/2%20運(yùn)算符與流程控制.html#for-in
  • typeof 用于判斷數(shù)據(jù)的類型
let a = 1;
console.log(typeof a); //number

let b = "1";
console.log(typeof b); //string

//未賦值或不存在的變量返回undefined
var hd;
console.log(typeof hd);

function run() {}
console.log(typeof run); //function

let c = [1, 2, 3];
console.log(typeof c); //object

let d = { name: "houdunren.com" };
console.log(typeof d); //object
  • instanceof 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。也可以理解為是否為某個(gè)對(duì)象的實(shí)例,typeof不能區(qū)分?jǐn)?shù)組,但instanceof則可以。
let hd = [];
let houdunren = {};
console.log(hd instanceof Array); //true
console.log(houdunren instanceof Array); //false

let c = [1, 2, 3];
console.log(c instanceof Array); //true

let d = { name: "houdunren.com" };
console.log(d instanceof Object); //true

function User() {}
let hd = new User();
console.log(hd instanceof User); //true
  • NaN 表示無效的數(shù)值,下例計(jì)算將產(chǎn)生NaN結(jié)果
console.log(Number("houdunren")); //NaN
console.log(2 / 'houdunren'); //NaN
  • Date 網(wǎng)站中處理日期時(shí)間是很常用的功能
有new沒有new的區(qū)別
let now = new Date();
console.log(now);
console.log(typeof date); //object
console.log(now * 1); //獲取時(shí)間戳

//直接使用函數(shù)獲取當(dāng)前時(shí)間
console.log(Date());
console.log(typeof Date()); //string

//獲取當(dāng)前時(shí)間戳單位毫秒
console.log(Date.now());
  • slice (start,end) 截取數(shù)組
    start 參數(shù)開始的元素,并在給定的 end 參數(shù)處結(jié)束,但不包括。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
  • 清空數(shù)組
1. user = [];
2. user.length = 0;
3. user.splice(0, user.length);
4.while (user.pop()) {} 使用pop/shift刪除所有元素,來清空數(shù)組
  • 連接兩個(gè)或多個(gè)數(shù)組
let array = ["hdcms", "houdunren"];
let hd = [1, 2];
let cms = [3, 4];
console.log(array.concat(hd, cms)); //["hdcms", "houdunren", 1, 2, 3, 4]
---------------------------------------------------------------
console.log([...array, ...hd, ...cms]);
---------------------------------------------------------------
array.copyWithin(target, start, end)
  • 查找元素
1.indexOf 查找字符串將找不到,因?yàn)閕ndexOf 類似于===是嚴(yán)格類型約束。
let arr = [7, 3, 2, '8', 2, 6];
console.log(arr.indexOf(8)); // -1

2.lastIndexOf

3.使用 includes 查找字符串返回值是布爾類型更方便判斷 使用includes等不能查找引用類型,因?yàn)樗鼈兊膬?nèi)存地址是不相等的

4.find 方法找到后會(huì)把值返回出來
let arr = ["hdcms", "houdunren", "hdcms"];
let find = arr.find(function(item) {
  return item == "hdcms";
});
console.log(find); //hdcms

5.findIndex 返回下標(biāo)
let arr = [7, 3, 2, '8', 2, 6];
console.log(arr.findIndex(function (v) {
    return v == 8;
})); //3
  • reduce 使用 reducereduceRight
    https://doc.houdunren.com/js/4%20數(shù)組類型.html#reduce
  • symbol
    1.Symbol 不能使用 for/in、for/of 遍歷操作
    2.可以使用 Object.getOwnPropertySymbols 獲取所有Symbol屬性
    3.也可以使用 Reflect.ownKeys(obj) 獲取所有屬性包括Symbol
    let user1 = {
      name: '李四',
      key: Symbol()
    }
    let user2 = {
      name: '李四',
      key: Symbol()
    }
    let grade = {
      [user1.key]: { js: 100, css: 90 },
      [user2.key]: { js: 900, css: 90 },
    };
    console.table(grade);
    console.table(grade[user1.key]);

image.png

https://doc.houdunren.com/js/5%20Symbol.html#緩存操作

  • Set
    用于存儲(chǔ)任何類型的唯一值,無論是基本類型還是對(duì)象引用。
    只能保存值沒有鍵名
    嚴(yán)格類型檢測(cè)如字符串?dāng)?shù)字不等于數(shù)值型數(shù)字
    值是唯一的
    遍歷順序是添加的順序,方便保存回調(diào)函數(shù)
  • WeakSet
    1、結(jié)構(gòu)同樣不會(huì)存儲(chǔ)重復(fù)的值,它的成員必須只能是對(duì)象類型的值。
    2、WeaSet弱引用
    保存的對(duì)象不會(huì)增加引用計(jì)數(shù)器,如果一個(gè)對(duì)象不被引用了會(huì)自動(dòng)刪除。
    因?yàn)槭侨跻?所以也沒有循環(huán)便厲的方法
下例中的數(shù)組被 arr 引用了,引用計(jì)數(shù)器+1
數(shù)據(jù)又添加到了 hd 的WeaSet中,引用計(jì)數(shù)還是1
當(dāng) arr 設(shè)置為null時(shí),引用計(jì)數(shù)-1 此時(shí)對(duì)象引用為0
當(dāng)垃圾回收時(shí)對(duì)象被刪除,這時(shí)WakeSet也就沒有記錄了
  • classList 給元素添加類
    元素.classList.add('');
  • this 使用嚴(yán)格模式時(shí)在全局函數(shù)內(nèi)this為undefined
var hd = '后盾人';
function get() {
  "use strict"
  return this.hd;
}
console.log(get());
//嚴(yán)格模式將產(chǎn)生錯(cuò)誤 Cannot read property 'name' of undefined
  • 對(duì)象字面量
    下例中的hd函數(shù)不屬于對(duì)象方法所以指向window
    show屬于對(duì)象方法執(zhí)向 obj對(duì)象
let obj = {
  site: "后盾人",
  show() {
    console.log(this.site); //后盾人
    console.log(`this in show method: ${this}`); //this in show method: [object Object]
    function hd() {
      console.log(typeof this.site); //undefined
      console.log(`this in hd function: ${this}`); //this in hd function: [object Window]
    }
    hd();
  }
};
obj.show();
  • 在方法中使用函數(shù)時(shí)有些函數(shù)可以改變this如forEach
let Lesson = {
  site: "后盾人",
  lists: ["js", "css", "mysql"],
  show() {
    return this.lists.map(function(title) {
      return `${this.site}-${title}`;
    }, this);
  }
};
console.log(Lesson.show());//['后盾人-js', '后盾人-css', '后盾人-mysql']
  • 在父作用域中定義引用this的變量
let Lesson = {
    site: "后盾人",
    lists: ["js", "css", "mysql"],
    show() {
      const self = this;
      return this.lists.map(function(title) {
        return `${self.site}-${title}`;
      });
    }
  };
  console.log(Lesson.show());
    // call是一個(gè)方法 函數(shù)的方法
    Function.prototype.newCall = function (context) {
     //1. 找到未來this的指向,即arguments[0], 如果沒有傳入任何參數(shù) 那么我們將this指向window
     //如果傳入的類型是string number boolean 我們要對(duì)其進(jìn)行包裝
     var target = Object(arguments[0])||window
     //2.找到未來要執(zhí)行的函數(shù) 并且改變其this的指向 相當(dāng)于把this這個(gè)未來要執(zhí)行的函數(shù)放在target對(duì)象里面 讓函數(shù)成為對(duì)象的一部分
     target.fn = this;
     //4.把a(bǔ)rguments[0]以外的參數(shù) 傳入函數(shù) 并且執(zhí)行該函數(shù)
     var params = [];
     for(var i = 1; i< arguments.length; i++){
       params.push(arguments[I]);
     } 
     //var result = target.fn (...params)
     var result = eval('target.fn('+params.toString()+')');
     //5.刪除目標(biāo)對(duì)象的函數(shù)
     delete target.fn
     return result
    };
    let obj = {
      name: "Jowie",
    };
    function addAge(age,test) {
      this.age = age;
      console.log(this);
      return this;
    }
    addAge.newCall(obj,20,30)
Function.prototype.myApply =function(context,arr){
context = Object(context) || window;
context.fn = this;
var result;
if(!arr){
    result= context.fn();
}else{
    var args = [];
    for(var i=0;i<arr.length;i++){
        args.push('arr['+i+']');
    }
    result = eval('context.fn('+args.toString()+')')
}
delete context.fn;
return result;
}

var q = {name:'chuchu'};
var arg1 = 1;
var arg2= [123]
function eat(n,m){
    console.log(this,n,m);
}
eat.myApply(q,[arg1,arg2])
//bind方法,是改變當(dāng)前調(diào)用bind方法的函數(shù)this指向,但是不會(huì)立即執(zhí)行當(dāng)前函數(shù),而是返回一個(gè)新的函數(shù)。并且支持給新的函數(shù)傳入?yún)?shù)執(zhí)行,從而出發(fā)之前調(diào)用bind方法的函數(shù)執(zhí)行,并且參數(shù)透?jìng)鬟M(jìn)去。bind方法是高階函數(shù)的一種
Function.prototype.myBind = function(){
var context = arguments[0];
var self = this;
return function (){
    self.myApply(context,arguments)
}
};
var j = {name:1};
var k = [123]
function drink (k){
    console.log(this.name,k);
}
var fn = drink.myBind(j);
fn(k);
  • 對(duì)象是否包含一個(gè)屬性 obj.hasOwnProperty
  • 使用in 可以在原型對(duì)象上檢測(cè)
let obj = {name: "后盾人"};
let hd = {
  web: "houdunren.com"
};
//設(shè)置hd為obj的新原型
Object.setPrototypeOf(obj, hd);
console.log(obj);
console.log("web" in obj); //true
console.log(obj.hasOwnProperty("web")); //false
  • 使用系統(tǒng)提供的API可以方便獲取對(duì)象屬性與值
const hd = {
  name: "后盾人",
  age: 10
};
console.log(Object.keys(hd)); //["name", "age"]
console.log(Object.values(hd)); //["后盾人", 10]
console.table(Object.entries(hd)); //[["name","后盾人"],["age",10]]
Object.getOwnPropertyNames(hd)//["name", "age"]
  • Object.assign 函數(shù)可簡(jiǎn)單的實(shí)現(xiàn)淺拷貝,它是將兩個(gè)對(duì)象的屬性疊加后面對(duì)象屬性會(huì)覆蓋前面對(duì)象同名屬性。
let user = {
    name: '后盾人'
};
let hd = {
    stu: Object.assign({}, user)
};
hd.stu.name = 'hdcms';
console.log(user.name);//后盾人
  • 深淺拷貝
1. 淺拷貝僅僅是指向被拷貝的內(nèi)存地址,如果原地址中對(duì)象被改變了,那么淺拷貝出來的對(duì)象也會(huì)相應(yīng)改變。()
2. 我在想如何讓obj1復(fù)制obj的對(duì)象內(nèi)容,在我對(duì)obj1進(jìn)行修改時(shí),不影響obj。通過遞歸調(diào)用淺拷貝來解決。
//深拷貝 實(shí)現(xiàn)
        function deepCopy(obj){
            let temp = obj.constructor === Array?[]:{};
            for(let val in obj){
                temp[val] = typeof obj[val] == 'object' ? deepCopy(obj[val]) : obj[val];
            }
            return temp;
        }
        console.log(deepCopy(obj));
  • 屬性特征
使用 Object.getOwnPropertyDescriptor查看對(duì)象屬性的描述
使用Object.defineProperty 方法修改屬性特性
Object.preventExtensions 禁止向?qū)ο筇砑訉傩?Object.isExtensible 判斷是否能向?qū)ο笾刑砑訉傩?Object.seal()方法封閉一個(gè)對(duì)象,阻止添加新屬性并將所有現(xiàn)有屬性標(biāo)記為 configurable: false
Object.freeze 凍結(jié)對(duì)象后不允許添加、刪除、修改屬性,writable、configurable都標(biāo)記為false

https://doc.houdunren.com/js/10%20對(duì)象.html#屬性特征

  • 代理攔截(不會(huì))
    https://doc.houdunren.com/js/10%20對(duì)象.html#閉包訪問器
  • 序列化JSON.stringify
    序列化是將 json 轉(zhuǎn)換為字符串
    為數(shù)據(jù)添加 toJSON 方法來自定義返回格式
    反序列化
    使用 JSON.parse 將字符串 json 解析成對(duì)象
let hd = {
    "title": "后盾人",
    "url": "houdunren.com",
    "teacher": {
        "name": "向軍大叔",
    },
    "toJSON": function () {
        return {
            "title": this.url,
            "name": this.teacher.name
        };
    }
}
console.log(JSON.stringify(hd)); //{"title":"houdunren.com","name":"向軍大叔"}
  • mixin
    JS不能實(shí)現(xiàn)多繼承,如果要使用多個(gè)類的方法時(shí)可以使用mixin混合模式來完成
const Tool = {
  max(key) {
    return this.data.sort((a, b) => b[key] - a[key])[0];
  }
};
class Lesson {
  constructor(lessons) {
    this.lessons = lessons;
  }
  get data() {
    return this.lessons;
  }
}
Object.assign(Lesson.prototype, Tool);
const data = [
  { name: "js", price: 100 },
  { name: "mysql", price: 212 },
  { name: "vue.js", price: 98 }
];
let hd = new Lesson(data);
console.log(hd.max("price"));
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 15、正則 正則就是一個(gè)規(guī)則,用來處理字符串的規(guī)則1、正則匹配編寫一個(gè)規(guī)則,驗(yàn)證某個(gè)字符串是否符合這個(gè)規(guī)則,正則匹...
    萌妹撒閱讀 1,589評(píng)論 0 1
  • 一,數(shù)據(jù)類型 1,基本數(shù)據(jù)類型(值類型): number,string,boolean,null,undefine...
    L_ven閱讀 760評(píng)論 0 0
  • JS的單線程模型和事件循環(huán)機(jī)制 JS的單線程模型意味著,在執(zhí)行JS時(shí)只有一個(gè)主線程,每個(gè)任務(wù)必須順序執(zhí)行。如果當(dāng)前...
    hyy_1754閱讀 513評(píng)論 0 0
  • 27、移動(dòng)端響應(yīng)式布局開發(fā) 響應(yīng)式布局開發(fā) 1、什么是響應(yīng)式布局開發(fā)?把我們開發(fā)完成的產(chǎn)品,能夠讓其適配不同的設(shè)備...
    萌妹撒閱讀 1,210評(píng)論 0 0
  • Vue.js是什么 Vue.js(讀音 /vju?/, 類似于 view) 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其...
    魚魚吃貓貓閱讀 3,399評(píng)論 1 12

友情鏈接更多精彩內(nèi)容