前端常用js函數總結

一、字符串：

//-------ES6字符串函數--------

const id = '32015619620508554x';
const fan = 'I like php.';

//startsWith()方法用來判斷當前字符串是否是以另外一個給定的子字符串“開頭”的，根據判斷結果返回 true 或 false
const jiangSu = id.startsWith('32');              //true,判斷是否以32開頭
const is1962 = id.startsWith('1962',6);           //true,字符串從第6位開始是否匹配，默認值爲0   
const capital = fan.startsWith('i');              //false,區分大小寫


//endsWith()方法用來判斷當前字符串是否是以另外一個給定的子字符串“結尾”的
const end = id.endsWith('x');                     //true,字符串是否已x結尾
const endCapital = id.endsWith('X');              //false,同上，但區分大小寫              
const like = fan.endsWith('like',6);              //true,字符串的真正第6位，結束位置的默認值爲str.length


const isPhp = fan.includes('php');                //true,判斷字符串中是否包含php
const afterIsPhp = fan.includes('php',9);         //false,字符串的第9位開始是否包含php


//模板字符串：
const head = `${'='.repeat(5)}${fan}${'='.repeat(5)}`;         ////=====I like php=====
//右對齊顯示字符串
function center(string,length=25){
    return `${' '.repeat(Math.max(length-string.length,0))}${string}`
}

二、數組：

1..find() item(數組元素)、index(序列)、arr(數組本身)，尋找數組中某個滿足條件的元素，當找到符合要求的元素時立馬返回，，不再執行後面的操作

    const  inventory = [
        {name:'mango',quantity:2},
        {name:'coconut',quantity:0},
        {name:'lemon',quantity:9}
    ];

    const coconut = inventory.find(fruit => {
        console.log(fruit.name);            //mango,coconut
        if(fruit.name === 'coconut') {
            return true;
        }
        return false;
    })
    console.log(coconut);     //{name: "coconut", quantity: 0}

2..findIndex()尋找數組項的下標，參數與find相同

    const  inventory = [
        {name:'mango',quantity:2},
        {name:'coconut',quantity:0},
        {name:'lemon',quantity:9}
    ];
    //.findIndex()
    const lemonIndex = inventory.findIndex(fruit => {
        if(fruit.name === 'lemon') {
            return true;
        }
        return false;
    })
    console.log(lemonIndex);       //2

3..some()參數同上，數組中某一項滿足條件時，即返回true;當找到滿足條件項時即返回，不再繼續執行

    const  inventory = [
        {name:'mango',quantity:2},
        {name:'coconut',quantity:0},
        {name:'lemon',quantity:9}
    ];
    const isEnough = inventory.some(fruit => {
        console.log(fruit.name);           //mango,coconut
        if(fruit.quantity > 0) {
            return true;
        }
        return false; 
    });
    console.log(isEnough);       //true

4..every()參數同上，數組中每一項都滿足條件時才返回true；當執行到不滿足條件項的時候立即結束，不執行後面的操作

    const  inventory = [
        {name:'mango',quantity:2},
        {name:'coconut',quantity:0},
        {name:'lemon',quantity:9}
    ];
    const isAllEnough = inventory.every(fruit => {
        console.log(fruit.name);          //mango,coconut
        if(fruit.quantity > 0) {
            return true;
        }
        return false;
    });
    console.log(isAllEnough);           //false

5..map()遍歷，返回數組，(val, index, all)分別代表值、下標、被循環的數組。

newarr.map((val, index, a) => {
    return `${val.title}--${val.read}--${val.hot}<br>`;
});

6..forEach()遍歷，沒有返回值(map有),不支持return操作輸出，return只用於控制循環是否跳出當前循環

newarr.forEach((val, index, a) => {
    document.write(`${val.title}--${val.read}--${val.hot}<br>`);
});

7..filter()過濾，過濾掉false的，返回爲true的

let arr = [
    {title: 'new1', read: 200, hot: true},
    {title: 'new2',read: 300,hot: false},
    {title: 'new2',read: 300,hot: false},
    {title: 'new3',read: 400,hot: true}
];
let newarr = arr.filter((val, index, a) =>{
    return val.hot //表達式中，返回結果爲true的就留下來
});
console.log(newarr)

8..reduce()用於數組前後項有一定聯繫時。pre: 初始值（之後爲上一操作的結果），cur: 當前元素值，index: 當前索引arr: 數組本身

//求和
var a = [1,2,3,4,5,6,7,8,9,10]
var str = a.reduce(function(prev,cur,index,arr){
	return prev + cur ; 
})

//將二維數組轉換成一維
var a= [[0,1],[2,3],[4,5],[6,7],[8,9]]; 
var str = a.reduce(function(prev,cur){
	return prev.concat(cur)
})
str    //(10) [0,1, 2, 3, 4, 5, 6, 7, 8, 9]


//數組去重
var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
var str = arr.sort().reduce((prev, cur)=>{
    if(prev.length===0 || prev[prev.length-1]!==cur){
        prev.push(cur);
    }
    return prev;
}, []); //傳入初始值[]

9..判斷是不是數組

Array.isArray(arr)

10..join()生成字符串，傳入字符，將數組轉換成以這個相連的字符串

let arr = [1, 2, 3, 4, 5];
let str = arr.join('-');

9..includes()判斷數組是否含有某值，不用return，不用回調函數，輸出一個true或false

let arr = [1, 2, 3, 4, 5];
let result = arr.includes(3);
console.log(result);
let result2 = arr.includes(6);
console.log(result2);