JavaScript字符串、數組、對象方法總結

字符串方法

示例字符串：

const str = "hello,kitty,hello,vue ";

1、基本方法

charAt(n)       返回指定索引的字符
charCodeAt(n)   返回指定位置字符的Unicode編碼   
startsWith()   判斷字符串是否以xxx開頭，返回布爾值
endsWith()    判斷字符串是否以xxx結尾，返回布爾值
padStart()     頭部補全，返回新字符串
padEnd()       尾部補全，返回新字符串
repeat()        拷貝字符串，返回新字符串
toUpperCase()  大寫轉換，返回新字符串
toLowerCase()  小寫轉換，返回新字符串
trim()               去除首尾空格
trimLeft()         去除左邊空格

用例：

charAt()
    console.log(str.charAt(1));   // h
trim()
    console.log(str.trim());  // hello,kitty,hello,vue
startsWith() / endsWith()
    console.log(str.startsWith("hello")); // true
padStart() / padEnd()
    str.padStart(number,string) 接收兩個參數，第一個指定補全後的字符串長度，第二個可選，用來補全的字符串。默認補全空格
    console.log(str.padStart(5,"x")); // hello,kitty,hello,vue    本來的長度超過了5，因此補不全
    console.log(str.padStart(30,"x")); // xxxxxxxxhello,kitty,hello,vue  本來的長度少於30，缺多少補多少
    console.log(str.padStart(30));      //         hello,kitty,hello,vue
repeat() 
    str.repeat(number)接收一個參數，複製的份數
    console.log(str.repeat(2));     // hello,kitty,hello,vue hello,kitty,hello,vue 
toUpperCase() / toLowerCase()
    console.log(str.toUpperCase()); // HELLO,KITTY,HELLO,VUE 

2、字符串匹配

indexOf()       返回字符串中指定文本首次出現的索引，不存在返回-1
lastIndexOf()   返回字符串中指定文本最後一次出現的索引.若是不存在返回-1
search()        字符串內搜索特定值，返回第一次出現的索引，若是沒有返回-1。與indexOf()的區別是，可使用正則表達式，
match()         字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。(經過字符串或正則表達式)。返回數組或null
includes()      【es6新增】判斷字符串中是否包含指定文本，返回布爾值

示例：

indexOf() / lastIndexOf()
    indexOf(string,start) 爲匹配的字符串，start爲開始匹配的索引，默認爲0
    console.log(str.indexOf("5"));  // -1
    console.log(str.indexOf("e"));  // 1
search()
    console.log(str.search("o"));  // 4
match()
    console.log(str.match("e"));   // ["e"] 屬性有：length,index,input
    console.log(str.match(/ell/g)); // ["ell","ell"]
includes()
    console.log(str.includes("vue"));    // true
    console.log(str.includes("react"));  // false

3、字符串截取、分割：

substring()   根據索引截取字符串，返回新字符串
substr()      根據起始索引和長度截取。返回新字符串
slice()        根據索引截取，返回新字符串。與substring()不一樣的是，參數能夠傳入負值
trim()          去除首尾空格，返回新字符串
trimRight()   去除右側空格，返回新字符串
trimLeft()     去除左側空格，返回新字符串

用例：

substring()
    str.substring(start,end) 起始索引和結束索引。第一個參數必需，第二個非必需
    console.log(str.substring(1));    // ello,kitty,hello,vue 從索引1開始到結束
    console.log(str.substring(1,4));  // ell    從索引1到索引3的字符串
substr()
    str.substr(start,length) 傳入一個開始索引和截取長度
    console.log(str.substr(1,10));    // ello,kitty  從索引1開始截取長度爲10的字符串
slice()
    str.slice(start,end)    根據索引，與substring不一樣的是，能夠傳入負值。若是參數爲負值，表示從字符串的結尾開始計數。這裏須要注意，若是傳入負值，也聽從start在坐，end在右的規則。示例以下
    console.log(str.slice(-7,-3));  // lo,v
    console.log(str.slice(-3,-7));  // 空

4、字符串分割、拼接

concat()   可拼接多個字符串，返回新的字符串
split()     將字符串分割成數組
join()      將數據轉成字符串

用例：

let str1 = "abc",str2 = "def";
let arr = [1,2,3,4,5];
console.log(str.concat(str1,str2)); // hello,kitty,hello,vue abcdef
console.log(str.split(","));        // ["hello", "kitty", "hello", "vue "]
console.log(arr.join("-"));         // 1-2-3-4-5

5、字符串替換

replace() 根據字符串或正則表達式進行替換，返回新字符串

 用例：

let  re = "/hello/g", re2 = "/hello/", re3 = "hello";
str.replace(re,"React");    // React,kitty,React,vue
str.replace(re2,"React");   // React,kitty,hello,vue
str.replace(re3,"React");   // React,kitty,hello,vue

數組方法

示例數組：

let arr = [1,2,3,4,5,6,7,8,9,10];  

Array方法

Array.isArray()	    判斷對象是否爲數組。
Array.of()           生成新的數組
Array.from()        將類數組或可迭代對象轉化成數組，返回新數組，淺拷貝。

用例：

Array.from()    
        什麼是類數組？有些對象，看上去很像數組，但不是array類型，不具備array的內置方法。例如querySelectorAll獲取的元素列表。（實現相同的效果也可用延展操做符完成）
        let dom = document.querySelectorAll("li");
        console.log(dom);
        console.log([...dom]);
        console.log(Array.from(dom));
        let a = Array.from(["a","b","c"]) 
        let b = Array.from([1,2,3],(x)=>{x+x}) // Array [2, 4, 6]
Array.of()
        Array.of(5)     // [5]
        Array.of(1,2,3) // [1,2,3]

元素的增刪改（都會改變原數組）

增：
    push()	    向數組的末尾添加一個或更多元素，並返回新的長度。
    unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
刪：
    pop()	    刪除並返回數組的最後一個元素
    shift()    刪除並返回數組的第一個元素

copyWithin()   將數組中某幾個元素複製到某一位置(淺拷貝)，將原來被複制位置上的元素覆蓋。該方法返回被改變的原數組。 
splice()	   可添加、刪除、替換元素。
fill()              用一個固定值填充一個數組中指定範圍內的元素

詳細說明：

copyWithin()
    copyWithin(target,start,end) target是目標位置的索引，start是複製源的起始位置，end是結束位置。
    三個參數均可以是負數，若是是負數，從末尾開始計算。後兩個參數可選，若是start被忽略，將從0開始複製，若是end被忽略，將一直複製到數組結尾。
        例如，將數組中第5個元素複製到第一個位置。將第5,6個元素複製到第1,2個位置。
        console.log(arr.copyWithin(0, 4, 5)); // [5, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        console.log(arr.copyWithin(0, 4, 6)); // [5, 6, 3, 4, 5, 6, 7, 8, 9, 10]

splice()
    splice(start,number,items...)   start爲指定修改的開始位置,number爲刪除元素的個數,items數量不限表示要添加進數組的元素。該方法有返回值，不一樣的功能返回不一樣的內容。須要明確的是，此方法會改變原數組
    刪除：
        list.splice(0, 1)   // 從下標爲0開始,長度爲1
        list.splice(0, 2)   // 從下標爲0開始,長度爲2
    替換：
        list.splice(0, 1, 4); // 從下標爲0開始,長度爲1的數組元素替換成4
        list.splice(0, 2, 4); // 從下標爲0開始,長度爲2的數組元素替換成4【兩個元素被替換成一個元素】
    添加：
        list.splice(1, 0, 5)；       // 在下標爲1處添加一項5
        list.splice(1, 0, 5, 4, 3);  // 在下標爲1處依次添加5/4/3三個元素

fill()
    fill(val,start,end) 後兩個參數可省略
    let array1 = [1, 2, 3, 4, 5];
    console.log(array1.fill('a', 2, 5)); // [1, 2, "a", "a", "a"]

查找元素（非遍歷）

includes()      判斷數組是否包含某個值，返回布爾值。
slice()	      根據索引從數組中返回選定的元素(淺拷貝)
indexOf()       返回某元素在數組中首次出現的位置，不存在返回-1
lastIndexOf()  返回最後一次出現的位置，不存在返回-1

 用例：

slice()
    slice(start,end) 
    console.log(arr.slice(5,7)); // [6, 7]

數組遍歷

傳統for循環
forEach()   遍歷數組，爲全部元素調用一次回調函數。
map()       遍歷數組，處理後返回一個新數組。若是回調函數內不返回，默認返回undefined數組
filter()      返回全部知足條件的元素，造成新數組。與map()的不一樣是，filter()只能返回元素，不能返回處理後的值。
find()       返回數組中知足條件的元素，只返回第一個。與filter()的不一樣是隻返回第一個符合條件的元素。
findIndex() 返回數組中知足條件的元素的索引，只返回第一個。
some()      用於檢測數組中的元素是否知足指定條件，只要有一個符合就返回true，結束循環。
every()     用於檢測數組全部元素是否知足指定條件，一旦有一個不知足就返回false
reduce()    從左到右爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調函數的返回值。
reduceRight() 從右到左爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調函數的返回值。

說明：

forEach()
    forEach((item,index,array)=>{}) 遍歷數組，沒法經過item修改原數組。
map()
    map((item,index,array)=>{})     遍歷數組，返回新數組，返回值由本身控制。
filter()
    filter((item,index,array)=>{})  與map不一樣，該方法的做用是篩選元素。所以返回的數組中的項只能是原數組中的元素該方法將回調函數的返回值視爲true和false，視爲true時返回該元素。
find()
    find(...)
    ...

數組拼接、轉換

concat()	鏈接兩個或更多的數組，並返回結果。不會改變原數組
join()	     把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
toString()	把數組轉換爲字符串，並返回結果。

數組的排序

sort()	   對數組的元素進行排序,返回排序後的數組
reverse()	顛倒數組中元素的順序。

用例：

sort()
    默認排序順序是在將元素轉換爲字符串，而後比較它們的UTF-16代碼單元值序列時構建的。
    let points = [40, 100, 1, 5, 25, 10];
    points.sort();     // [1, 10, 100, 25, 40, 5]
    所以，有時須要咱們自定義排序條件。回調函數中a,b兩個參數是用來比較的兩個元素，須要返回正值、0或負值。返回正值，a會排到b以前，返回0不改變相對位置，返回負值b排到a以前。
    points.sort((a,b)=>{return a-b})); // [1, 5, 10, 25, 40, 100]
    points.sort((a, b)=》{return 0.5 - Math.random()}); // 隨機排序

數組深拷貝

1.json序列化和反序列化

沒錯，這是個投機取巧的方法，簡單粗暴，大部分基本類型都能都被有效拷貝。但也有一些弊端：像Maps，Sets，RegExps，Dates，ArrayBuffers和其餘內置類型這樣的東西以及undefined、函數在序列化時會丟失。

2.MessageChannel

經過構造函數MessageChannel()能夠建立一個消息通道，實例化的對象會集成兩個屬性：port1和port2，這兩個屬性都是MessagePort對象。能夠理解成電話兩線的兩端，均可以收發數據。

MessagePort

• 咱們能夠爲其添加屬性

let ms = new MessageChannel(); // 內含port1和port2
ms.port1.name = "Alex";
console.log(ms.port1);

• 能夠看到，MessagePort還有兩個屬性onmessage和onmessageerror，他們都是接收到消息時的回調函數。
• 收發數據

port1.postMessage("發送數據");
port2.onmessage = (e) => {console.log("port2接收數據",e.data)}

迴歸正題，它除了能夠用來通信，還能夠用做深拷貝，固然，拷貝函數對象的時候仍是會報錯。

3.loadsh，萬全的深拷貝方案。

對象方法

示例對象：

let obj = { name: "hello", age: 20, func: ()=>{console.log("func")} }

原型方法（實例方法）

hasOwnProperty() 判斷對象實例自身是否有某屬性（不會找原型鏈上的屬性）返回布爾值
isPrototypeOf()    檢查一個對象是否存在於另外一個對象的原型鏈上，返回布爾值
propertyIsEnumerable()  檢測屬性是否可枚舉，返回布爾值
toLocaleString() 返回一個對象的字符串表示【直接調用toString()方法】
toString()    同上

示例：

obj.hasOwnProperty(prop)    prop是不是obj的自有屬性
    obj.hasOwnProperty(name)  // true
    obj.hasOwnProperty(names) // false

a.isPrototypeOf(b)    檢查a是否在b的原型鏈上
    obj.prototype.isPrototypeOf(obj)  // true
    Object.isPrototypeOf(obj) // true

obj.propertyIsEnumerable(prop) 表示屬性是否可枚舉
    obj.propertyIsEnumerable(age) // true

obj.toLocaleString() / obj.toString()
    console.log(obj.toString()); // [object Object]

構造函數方法

Object.is()    　　　　判斷兩個值是否相同，與===基本一致，能夠說是對其的完善
Object.assign()    　　複製、合併對象，返回新對象。（1.只會複製可枚舉屬性2.屬性都是淺拷貝）
Object.create()    　　建立一個新的對象，能夠定義屬性描述符。
Object.defineProperty()    　在一個對象上定義/修改一個屬性，返回這個對象。（一樣能夠定義屬性描述符）
Object.defineProperties()    在一個對象上定義/修改多個屬性，返回這個對象

Object.keys()    　　　　　　返回一個對象的全部可枚舉屬性名稱
Object.values()    　　　　 返回一個對象的全部可枚舉屬性的值
Object.entries()    　　　　返回一個對象的全部可枚舉屬性的鍵值對數組（能夠看作是上面兩個方法的結合）
Object.fromEntries()        entries()的逆操做，用於將一個鍵值對列表還原爲對象
Object.getOwnPropertyNames()    　　返回一個對象全部自身屬性的名稱（包括不可枚舉屬性但不包含Symbol屬性名）
Object.getOwnPropertySymbols()      返回一個對象的全部Symbol屬性組成的數組（與上一個方法造成互補）
Object.getOwnPropertyDescriptor()   返回對象的某一個自有屬性的屬性描述符
Object.getOwnPropertyDescriptors()   返回對象的全部自有屬性的屬性描述符

Object.seal()    　　　　封閉一個對象，阻止該對象添加新屬性並將現有屬性標記爲不可配置（configurable），返回該對象
Object.isSealed()    　　判斷一個對象是否已經封閉
Object.freeze()    　　  凍結一個對象。這個對象不能新增、刪出、修改屬性，不能夠修改屬性描述符，其原型也不能被修改。返回該對象
Object.isFrozen()    　　判斷對象是否已被凍結
Object.preventExtensions()   將一個對象變得不可擴展，永遠不能夠添加新的屬性
Object.isExtensible()        判斷對象是否能夠擴展。seal()、freeze()、preventExtensions()都會使一個對象不可擴展
Object.getPrototypeOf()      返回指定對象的原型對象
Object.setPrototypeOf()      設置指定對象的原型對象

示例1：

Object.is(a, b)    比較兩個值是否相等
    與 == 的區別是：== 會作隱式類型轉換，而is()不會
    與 === 的區別是：=== 會將數字值 -0 和 +0 視爲相等，並認爲 Number.NaN 不等於 NaN
    Object.is("foo", "foo")    // true
    Object.is({a:1}, {a:1})    // false

Object.assign(target, ...source)    可將若干個source對象的自有可枚舉屬性整合到target對象上，返回target對象
    Object.assign(obj, {a:1}, {b:2}, {name: "nihao"}) // { name: "hello", age: 20, func: ()=>{console.log("func")}, a: 1, b: 2 }

Object.create(proto, descriptor)    建立一個新的對象，返回新的對象。參數proto是要繼承的原型對象，descriptor是屬性描述符。
    Object.create(obj, a: { value: 1, writable:true, enumer:true, ableconfigurable:true })

Object.defineProperty(obj, prop, descriptor)    爲一個對象建立一個屬性
    Object.defineProperty(obj, "a", {value: 1})

Object.defineProperties(obj, props)    爲一個對象建立多個屬性
    Object.defineProperties(obj, {
        a: { value: 1, writable: true },
        b: { value: 2. writable: false },
    })

示例2：

Object.keys(obj)    返回一個對象的全部可枚舉屬性
    Object.keys(obj)   // [ "name", "age", "func" ]
Object.values(obj)    返回一個對象的全部可枚舉屬性的值
    Object.values(obj)   // [ "hello", 20, f ]
Object.entries(obj)    返回一個對象的全部可枚舉屬性的鍵值對數組
    Object.entries(obj)    // [ ["name", "hello"], ["age", 20], ["func", f] ]
Object.formEntries(obj)    將鍵值對列表轉化爲對象，用途：array->object、map -> object
    Object.fromEntries([['foo', 'bar'],['baz', 42]])    // { foo: "bar", baz: 42 }
    const entries = new Map([['foo', 'bar'],['baz', 42]]);
    Object.fromEntries(entries)    // { foo: "bar", baz: 42 }
Object.getOwnPropertyNames(obj)    返回一個對象全部自身屬性的名稱（包括不可枚舉屬性但不包含Symbol屬性名）
    Object.getOwnPropertyNames(obj)   // ["name", "age", "func"]
Object.getOwnPropertySymbols(obj)    返回一個對象的全部Symbol屬性組成的數組（與上一個方法造成互補）
    Object.getOwnPropertySymbols(obj) // []
Object.getOwnPropertyDescriptor(obj, prop)   返回某對象的某個自有屬性的描述符
    Object.getOwnPropertyDescriptor(obj, "name")  // { value: "hello", writable: true, enumerable: true, configurable: true }
    Object.getOwnPropertyDescriptor(obj, "age")  // { value: 20, writable: true, enumerable: true, configurable: true }
Object.getOwnPropertyDescriptors(obj)   返回某對象的全部自有屬性的描述符

示例3：

Object.seal(obj) / Object.isSealed(obj) 
Object.freeze(obj) / Object.isFrozen(obj)
Object.preventExtensions(obj) / Object.isExtensible(obj)
Object.getPrototypeOf(obj)
Object.setPrototypeOf(obj, prototype) prototype表示該對象新的原型(一個對象或null)