js基礎(chǔ)

列舉常用的5個(gè)字符串操作方法。

var str='hello world'

• str.length
• str.toUpperCase() : 全變?yōu)榇髮?/li>
• str.toLowerCase() ：全變?yōu)樾?/li>
• str.indexOf(“world”) : 返回指定子串出現(xiàn)的位置
• str.substring(0,5) : 返回下標(biāo)從0到5的字串，不含下標(biāo)5的字符
• str.substring(5) : 返回下標(biāo)從5到結(jié)束的字串

列舉常用的數(shù)組操作方法。

• length 設(shè)置或返回 數(shù)組中元素的數(shù)目
• push() 向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度，也就是添加元素后的數(shù)組長度。
• shift():用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。
• unshift()：向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。
• pop():用于刪除并返回?cái)?shù)組的最后一個(gè)元素。
• splice()：用于插入、刪除或替換數(shù)組的元素。
• concat():方法用于連接兩個(gè)或多個(gè)數(shù)組。
• join():用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過指定的分隔符進(jìn)行分隔的。
• toString():方法可把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。
• reverse():方法用于顛倒數(shù)組中元素的順序。
• slice():方法可從已有的數(shù)組中返回選定的元素。
• sort():方法用于對數(shù)組的元素進(jìn)行排序（從小到大）。
• indexOf():返回獲取項(xiàng)在數(shù)組中的索引
• lastIndexOf():返回獲取項(xiàng)在數(shù)組中出現(xiàn)的最后一次索引
• forEach():循環(huán)遍歷數(shù)組 參數(shù)是一個(gè)匿名函數(shù) 默認(rèn)返回為undefined
• map()：循環(huán)遍歷數(shù)組 參數(shù)是一個(gè)匿名函數(shù)

對象

• charAt(): 返回在指定位置的字符。
  charCodeAt(): 返回在指定的位置的字符的 Unicode 編碼。
• concat():連接字符串。
• indexOf():檢索字符串。
• match(): 找到一個(gè)或多個(gè)正則表達(dá)式的匹配。
• replace():替換與正則表達(dá)式匹配的子串。
• search(): 檢索與正則表達(dá)式相匹配的值。
• slice(): 提取字符串的片斷，并在新的字符串中返回被提取的部分。
• split(): 把字符串分割為字符串?dāng)?shù)組。
• toLocaleLowerCase(): 把字符串轉(zhuǎn)換為小寫。
• toLocaleUpperCase(): 把字符串轉(zhuǎn)換為大寫。
• toLowerCase(): 把字符串轉(zhuǎn)換為小寫。
• toUpperCase(): 把字符串轉(zhuǎn)換為大寫。
• substr(): 從起始索引號提取字符串中指定數(shù)目的字符。
• substring(): 提取字符串中兩個(gè)指定的索引號之間的字符。

淺拷貝和深拷貝區(qū)別，描述或者手寫深拷貝。

深拷貝和淺拷貝的主要區(qū)別就是其在內(nèi)存中的存儲類型不同。

• 基本數(shù)據(jù)類型主要是：undefined，boolean，number，string，null 都是分配在棧中的，賦值都是深拷貝的表現(xiàn)（就是你的值改變不影響我）。

• 引用類型（引用代表了有指針），棧里存指針變量，指針指向堆中存放的值；淺拷貝是拷貝的指針，深拷貝是拷貝的指針和數(shù)值。
  參考文章

call和apply的用法和區(qū)別。

• call() 接收若干個(gè)參數(shù)的列表

func.call(thisArg,arg1,arg2,....)

• apply() 接收一個(gè)包含多個(gè)參數(shù)的數(shù)組

func.call(thisArg, [arg1,arg2,....])

• 兩者的作用是一樣的
• 實(shí)現(xiàn)繼承，一個(gè)對象的方法或?qū)傩?，然后讓另外一個(gè)新的對象來繼承它，而不是在這個(gè)新的對象中再寫一次這個(gè)方法或?qū)傩?/li>
• 改變函數(shù)執(zhí)行的上下文(this),調(diào)用別人的方法

簡單實(shí)例

• call()

function Func1(x,y) {
  this.sum = x + y;
}
function Fun2(x,y) {
  Func1.call(this, x, y);
}
var a = new Fun2(1,2)
console.log(a.sum) // 3

• apply()

function Func1(x,y) {
  this.sum = x + y;
}
function Fun2(x,y) {
  Func1.apply(this, [x, y]);
}
var a = new Fun2(1,2)
console.log(a.sum) // 3

參考文章

JS繼承的幾種方法。

既然要實(shí)現(xiàn)繼承，那么首先我們得有一個(gè)父類

// 定義一個(gè)動物類
function Animal (name) {
  // 屬性
  this.name = name || 'Animal';
  // 實(shí)例方法
  this.sleep = function(){
    console.log(this.name + '正在睡覺！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

1、原型鏈繼承

核心： 將父類的實(shí)例作為子類的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

2、構(gòu)造繼承

核心：使用父類的構(gòu)造函數(shù)來增強(qiáng)子類實(shí)例，等于是復(fù)制父類的實(shí)例屬性給子類（沒用到原型）
缺點(diǎn): 只能解決屬性的繼承,使用屬性的值不重復(fù),但是父級類別的方法不能繼承

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

3、實(shí)例繼承

核心：為父類實(shí)例添加新特性，作為子類實(shí)例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

4、拷貝繼承

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

5、組合繼承

核心：通過調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，然后通過將父類實(shí)例作為子類原型，實(shí)現(xiàn)函數(shù)復(fù)用
缺點(diǎn): 父類的原型對象調(diào)用了兩次

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

6、寄生組合繼承

核心：通過寄生方式，砍掉父類的實(shí)例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時(shí)候，就不會初始化兩次實(shí)例方法/屬性，避免的組合繼承的缺點(diǎn)

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 創(chuàng)建一個(gè)沒有實(shí)例方法的類
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //將實(shí)例作為子類的原型
  Cat.prototype = new Super();
})();

事件冒泡以及事件捕獲

這是兩個(gè)相反的行為

• 事件冒泡：就是從里到外，從子元素（點(diǎn)擊的元素）到父元素的事件觸發(fā)過程
• 時(shí)間捕獲：就是從外到里，從父元素到子元素（點(diǎn)擊元素）的事件出發(fā)過程
  注意：addEventListener中有三個(gè)屬性，第三個(gè)是布爾值，默認(rèn)是false為事件冒泡，true為事件捕獲
  舉個(gè)應(yīng)用場景：我們想要在點(diǎn)擊每個(gè)h5標(biāo)簽時(shí)，彈出對應(yīng)的innerHTML 。常規(guī)做法是遍歷每個(gè)h5,然后在每個(gè)h5上綁定一個(gè)點(diǎn)擊事件，這種做法在h5較少的時(shí)候可以使用，但如果有一萬個(gè)h5，那就會導(dǎo)致性能降低。這時(shí)就需要事件代理出場了。

obj1.addEventListener('click',function(e){
            var e=e||window.event;
            if(e.target.nodeName.toLowerCase()=='h5'){
                alert(e.target.innerHTML);
            }
 },false);

由于事件冒泡機(jī)制，點(diǎn)擊了h5后會冒泡到div,此時(shí)就會觸發(fā)綁定在div上的點(diǎn)擊事件，再利用target找到事件實(shí)際發(fā)生的元素，就可以達(dá)到預(yù)期的效果。

• 阻止事件冒泡：event.stopPropagation()，在IE瀏覽器中使用e.cancleBubble=true，在jQuery中使用return false。