前端常用代碼片段(二)

FWHeart 發(fā)布于2019-08-20 17:04 / 3182人閱讀

摘要：兩個(gè)數(shù)組內(nèi)的元素相加第二種考慮兼容一個(gè)數(shù)組插入到另一個(gè)數(shù)組通過(guò)方法將一個(gè)數(shù)組插入到另外一個(gè)數(shù)組數(shù)字排序的函數(shù)在默認(rèn)情況下使用字母數(shù)字字符串碼點(diǎn)排序。它們具有不同的引用，無(wú)法用相比較。

最后更新于2019年1月13日

前端常用代碼片段(一) 點(diǎn)這里
前端常用代碼片段(二) 點(diǎn)這里
前端常用代碼片段(三) 點(diǎn)這里
前端常用代碼片段(四) 點(diǎn)這里
前端常用代碼片段(五) 點(diǎn)這里
前端常用代碼片段(六) 點(diǎn)這里

1.數(shù)組去重

方法1: （ES5）

function unique(a) {
  var res = [];

  for (var i = 0, len = a.length; i < len; i++) {
    var item = a[i];

    (res.indexOf(item) === -1) && res.push(item);
  }

  return res;
}

var a = [1, 1, "1", "2", 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

或

function unique(a) {

  var res = a.filter(function(item, index, array) {
    return array.indexOf(item) === index;
  });
  
  return res;
}


var a = [1, 1, "1", "2", 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

方法2: （ES6）

Set 以及 Array.from 方法：

function unique(a) {
  return Array.from(new Set(a));
}

var a = [{name: "hanzichi"}, {age: 30}, new String(1), new Number(1)];
var ans = unique(a);
console.log(ans); // => [Object, Object, String, Number]

2.數(shù)組不是原始數(shù)據(jù)類型

typeof {} === "object"  // true
typeof "a" === "string" // true
typeof 1 === number     // true
// But....
typeof [] === "object"  // true

如果你想知道你的變量是不是數(shù)組，你仍然可以用Array.isArray(myVar)

原始數(shù)據(jù) （原始值、原始數(shù)據(jù)類型）不是一種 object 類型并且沒(méi)有自己的方法的。在 JavaScript 中，有六種原始數(shù)據(jù)類型：string，number，boolean，null，undefined，symbol (new in ECMAScript 2015)。

3.兩個(gè)數(shù)組內(nèi)的元素相加

var a = [1,2,3,4,3];
var b = [4,5,6,7];
var c = a.map(function(v, i){
    return v + (b[i] || 0);
});
console.log(c);

第二種考慮兼容
var a=[1,2,3,4,5];
var b=[6,7,8,9];
var c=[];
for (var i=0;i

4.一個(gè)數(shù)組插入到另一個(gè)數(shù)組
通過(guò)Array.prototype.push.apply方法將一個(gè)數(shù)組插入到另外一個(gè)數(shù)組
var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
console.log(a); //  [1, 2, 3, 4, 5, 6]

5.數(shù)字排序
Javascript 的sort()函數(shù)在默認(rèn)情況下使用字母數(shù)字（字符串Unicode碼點(diǎn)）排序。
所以
[1,2,5,10].sort()

//會(huì)輸出 

[1, 10, 2, 5]
要正確的排序一個(gè)數(shù)組, 你可以用
[1,2,5,10].sort((a, b) => a?—?b)

//會(huì)輸出 從小到大排序

[1, 2, 5, 10]

從大到小排序即
[1,2,5,10].sort((a, b) => b-a)

6.replace替換字符串
let s = "bob"
const replaced = s.replace("b", "l")
replaced === "lob"
s === "bob"
我覺(jué)得這是一件好事，因?yàn)槲也幌矚g函數(shù)改變它們的輸入。 你還應(yīng)該知道 replace 只會(huì)替換第一個(gè)匹配的字符串:
如果你想替換所有匹配的字符串，你可以使用帶/g標(biāo)志的正則表達(dá)式 :
"bob".replace(/b/g, "l") === "lol" // 替換所有匹配的字符串

7. 比較的時(shí)候要注意
// These are ok
"abc" === "abc" // true
1 === 1         // true
// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false
原因：[1,2,3]和[1,2,3]是兩個(gè)獨(dú)立的數(shù)組。它們只是恰好包含相同的值。它們具有不同的引用，無(wú)法用===相比較。

8. 閉包
const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10
你是不是認(rèn)為它會(huì)輸出 0, 1, 2… ？ 你知道它為什么不是這樣輸出的嗎? 你會(huì)怎樣修改讓它輸出 0, 1, 2… ？
這里有兩種可能的解決方法：
用 let 替代 var. Boom. 解決了.
let和var的不同在于作用域。var的作用域是最近的函數(shù)塊，let的作用域是最近的封閉塊，封閉塊可以小于函數(shù)塊（如果不在任何塊中，則let和var都是全局的）。（來(lái)源）
替代方法: 用 bind:
Greeters.push(console.log.bind(null, i))

9.當(dāng)點(diǎn)擊 復(fù)制 按鈕的時(shí)候, 將選中的文字復(fù)制到粘貼板上




function clickBtn(){
    // 獲取 input 元素
    var input = document.querySelector("#copytest");
    //或 var input = document.getElementById("copytest");
    input.focus();
    input.select();
   
    // 執(zhí)行復(fù)制命令
    document.execCommand("Copy")
 }
核心代碼 document.execCommand() 方法, 該方法的大概用途是 對(duì)選中區(qū)域 進(jìn)行一些操作

10.JS獲取textarea中剩余字?jǐn)?shù)
html部分：

剩余可輸入600字
js部分：
function changeLength(obj,num){
    obj.on("keyup",function(){
    var txtval = obj.val().length;
    //console.log(txtval);
    var str = parseInt(600-txtval);
    //console.log(str);
    if(str > 0 ){
        num.html("剩余可輸入"+str+"字");
    }else {
        num.html("剩余可輸入0字");
        obj.val(obj.val().substring(0, 600));
    }
        //console.log($("#num_txt").html(str));
    });
}
$(function(){ //我這里有四個(gè)，所以調(diào)用4次
    changeLength($("#text_txt1"),$("#num_txt1"));
    changeLength($("#text_txt2"),$("#num_txt2"));
    changeLength($("#text_txt3"),$("#num_txt3"));
    changeLength($("#text_txt4"),$("#num_txt4"));
});

11.js中的點(diǎn)擊事件
//html

var btn=document.getElementById("btn");
//js 第一種：
btn.onclick=function(){
    alert("hello world");
}

//消除事件
btn.onclick=null;//就不會(huì)彈出框了
//js 第二種：
btn.addEventListener("click",function(){
    alert("hello world")
},false);
btn.addEventListener("click",function(){
    alert(this.id)
},false);
//js 第三種：
function demo(){
　　alert("hello");
}

js觸發(fā)按鈕點(diǎn)擊事件
模擬JS觸發(fā)按鈕點(diǎn)擊功能
 
   
    usually function 
   
   
   
     
   

//備注：
//btnObj.click()是真正地用程序去點(diǎn)擊按鈕，觸發(fā)了按鈕的onclick()事件
//btnObj.onclick()只是簡(jiǎn)單地調(diào)用了btnObj的onclick所指向的方法，
//只是調(diào)用方法而已，并未觸發(fā)事件

12.清除浮動(dòng)clearfix一種寫法(stylus)
.clearfix
  display :inline-block
  &:after
    display :block
    content:"."
    height:0
    line-height: 0
    clear :both
    visibility :hidden

13.星星評(píng)分計(jì)算
很多商品評(píng)價(jià)中都會(huì)涉及評(píng)分，再根據(jù)評(píng)分計(jì)算星星個(gè)數(shù)

現(xiàn)介紹一種方法：
每個(gè)都是單個(gè)星星，分為三種.png圖
  const LENGTH = 5;//星星個(gè)數(shù)
  const CLS_ON = "on";//全部選中星星的classNmae
  const CLS_HALF = "half";//半個(gè)選中的classNmae
  const CLS_OFF = "off";//未選中的classNmae

  let result = [];
  let score = Math.floor(this.score * 2) / 2; 
 //計(jì)算評(píng)分，如4.7會(huì)計(jì)算成4.5分，4.3會(huì)計(jì)算成4分
  let hasDecimal = score % 1 !== 0; //計(jì)算是否存在半顆星
  let integer = Math.floor(score); //計(jì)算有幾個(gè)完全選中的星星
  for (let i = 0; i < integer; i++) {
    result.push(CLS_ON);//數(shù)組中添加全部選中星星的classNmae
  };
  if (hasDecimal) {
    result.push(CLS_HALF);//數(shù)組中添加半顆星星的classNmae
  };
  while (result.length < LENGTH) {
    result.push(CLS_OFF);//數(shù)組中補(bǔ)充未點(diǎn)亮星星的classNmae
  };
  return result;//返回?cái)?shù)組
        

14.關(guān)閉頁(yè)面彈框提示
類似下圖效果

window.onbeforeunload=function (){
   var warning = "請(qǐng)確認(rèn)保存后再退出哦!";
   return warning;
}
//注：現(xiàn)在不能彈出自定義的信息，暫時(shí)不知道原因，
//后續(xù)會(huì)追蹤這個(gè)問(wèn)題（如果你知道可以留下評(píng)論）
//關(guān)閉頁(yè)面時(shí)的一些清楚緩存，ajax退出登錄等操作可以寫在函數(shù)里

15.封裝jsonp
import originJSONP from "jsonp"

// 封裝的 jsonp 函數(shù)
export default function jsonp(url, data, options) {
  url += (url.indexOf("?") < 0 ? "?" : "&") + param(data)
  
  return new Promise((resolve, reject) => {
    originJSONP(url, options, (err, data) => {
      if(!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

// url 拼接函數(shù)
function param(data) {
  let url = ""
  for(let k in data) {
    let value = data[k] !== undefined ? data[k] : ""
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ""
}


16.firefox 加入toolTip提示信息后 頁(yè)面抖動(dòng)
在firefox中 默認(rèn)頁(yè)面不超過(guò)一頁(yè)是沒(méi)有滾動(dòng)條的 加入頁(yè)面中某些元素會(huì)臨時(shí)改變頁(yè)面高度 比如用了toolTip 之類的提示小工具 就會(huì)出現(xiàn)滾動(dòng)條時(shí)有時(shí)無(wú) 導(dǎo)致頁(yè)面抖動(dòng)

解決方法: 添加css代碼
body{
  overflow: -moz-scrollbars-vertical;
}

17.判斷游覽器內(nèi)核，自動(dòng)添加前綴實(shí)現(xiàn)css屬性兼容
let elementStyle = document.createElement("div").style
// 主流瀏覽器內(nèi)核

let vendor = (() => {
  let transfromNames = {
    webkit: "webkitTransform",
    Moz: "MozTransform",
    ms: "msTransform",
    O: "OTransform",
    standard: "transform"
  }

  for (let key in transfromNames) {
    if (elementStyle[transfromNames[key]] !== undefined) {
      return key
    }
  }

  return false
})()

// 添加樣式的瀏覽器前綴
export function prefixStyle(style) {
  if (vendor === false) {
    return false
  }

  if (vendor === "standard") {
    return style
  }

  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

18.添加className
// 為元素添加類名
export function addClass(el, className) {
  // 先判斷一下元素是否含有需要添加的類名，有則直接 return
  if (hasClass(el, className)) {
    return
  }
  // 把該元素含有的類名以空格分割
  let newClass = el.className.split(" ")
  // 把需要的類名 push 進(jìn)來(lái)
  newClass.push(className)
  // 最后以空格拼接
  el.className = newClass.join(" ")
}

// 判斷是否有要查看的 className，有則返回true，否則返回 false
export function hasClass(el, className) {
  let reg = new RegExp("(^|s)" + className + "(s|$)")

  return reg.test(el.className)
}



19.獲取或設(shè)置data- 屬性
export function getData(el, name, val) {
  const prefix = "data-"
  name = prefix + name
  if (val) {
    return el.setAttribute(name, val)
  } else {
    console.log("el.getAttribute(name)", el.getAttribute(name))
    return el.getAttribute(name)
  }
}

20.基于jq的datatables(兼容ie8)基本配置
描述：采用基于jq的datatables(兼容ie8)
主要功能：基本配置，服務(wù)端分頁(yè)，清楚緩存，刷新等 

/************************表格刷新*****************************/
            $("#searchFormBtn").click(function () {
                tablebyGroup.ajax.reload();
            });

    function queryUserByGroup() {
            tablebyGroup = $("#workArr").DataTable({
                destroy: true,
                serverSide: true,  //啟用服務(wù)器端分頁(yè)
                searching: false,  //禁用原生搜索
                orderMulti: false,  //啟用多列排序
                order: [],  //取消默認(rèn)排序查詢,否則復(fù)選框一列會(huì)出現(xiàn)小箭頭
                renderer: "bootstrap",  //渲染樣式：Bootstrap和jquery-ui
                pagingType: "simple_numbers",  //分頁(yè)樣式：simple,simple_numbers,full,full_numbers

                iDisplayLength:100,
                ajax: function (data, callback, settings) {
                    var selected = $("#selectWorkArr").val();
                    var param = {
                        depId: parseInt(selected),
                        docId: JSON.parse($.cookie("userinfo")).docId
                    };
                    //ajax請(qǐng)求數(shù)據(jù)
                    $.ajax({
                        type: "post",
                        url: serverIp + "rest/doctor/selectWorkGroup?" + Math.random() + "&" + maiyaBuildParam(param),
                        cache: false,  //禁用緩存
//                        data: JSON.stringify(param),  //傳入組裝的參數(shù)
//                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            var returnData = {};
                            returnData.draw = data.draw;//這里直接自行返回了draw計(jì)數(shù)器,應(yīng)該由后臺(tái)返回
                            returnData.recordsTotal = result.data.length;//返回?cái)?shù)據(jù)全部記錄
                            returnData.recordsFiltered = result.data.length;//后臺(tái)不實(shí)現(xiàn)過(guò)濾功能，每次查詢均視作全部結(jié)果
                            returnData.data = result.data;//返回的數(shù)據(jù)列表
                            //調(diào)用DataTables提供的callback方法，代表數(shù)據(jù)已封裝完成并傳回DataTables進(jìn)行渲染
                            //此時(shí)的數(shù)據(jù)需確保正確無(wú)誤，異常判斷應(yīng)在執(zhí)行此回調(diào)前自行處理完畢
                            callback(returnData);
                        },
                        error: function(msg) {
                            alert(msg.message || "查詢失敗")
                        }
                    });
                },
                bFilter: false,//去掉搜索框方法
                bLengthChange: false, //去掉每頁(yè)顯示多少條數(shù)據(jù)方法
                "ordering": false,//禁止排序
                "columns": [
                    {"data": "pName"},
                    {"data": "pSex"},
                    {"data": "strBirthDate"},
                    {"data": "pCardNum"},
                    {"data": "pPhone"},
                    {"data": "cName"},
                    {"data": "pActivited"}
                ],
                paging: false,
                "columnDefs": [{
                    "render": function(data, type, row, meta) {
                        //渲染 把數(shù)據(jù)源中的標(biāo)題和url組成超鏈接
                        return ""+data+"";
                    },
                    //指定是第1列
                    "targets": 0
                },{
                    "render": function(data, type, row, meta) {
                        return data == 1 && "男" || "女";
                    },
                    //指定是第1列
                    "targets": 1
                },{
                    "render": function(data, type, row, meta) {
                        return data == 1 && "已注冊(cè)" || "未注冊(cè)";
                    },
                    //指定是第1列
                    "targets": 6
                }]
            });
        }
引用：
誰(shuí)說(shuō)Javascript簡(jiǎn)單的？ – Hacker Noon

云服務(wù)器 GPU云服務(wù)器代碼片段添加代碼片段 Python代碼片段 BootStrap代碼片段

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83373.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

FWHeart

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Megalayer：雙十一優(yōu)惠，常規(guī)VPS五折，月付24.5元起，香港VPS/菲律賓VPS/美國(guó)VP

閱讀 1957·2021-11-15 17:58
CloudCone黑五預(yù)售款發(fā)布,洛杉磯MC機(jī)房KVM年付14.2美元起

閱讀 2136·2021-10-19 11:45
一文帶你簡(jiǎn)單了解Wi-Fi Direct

閱讀 3502·2021-09-02 15:40
RackNerd提供美國(guó)大硬盤獨(dú)立服務(wù)器價(jià)格低至月費(fèi)$389 1Gbps 5IP

閱讀 2604·2021-07-25 10:50
background背景和border顏色，以及background-clip屬性，透明度問(wèn)題探討

閱讀 3752·2019-08-30 15:56
CSS小技巧收藏

閱讀 3153·2019-08-30 12:44
精讀《Function VS Class 組件》

閱讀 1036·2019-08-26 13:38
使用node簡(jiǎn)單實(shí)現(xiàn)記錄瀏覽量，不依賴數(shù)據(jù)庫(kù)

閱讀 1878·2019-08-23 18:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端常用代碼片段(二)

相關(guān)文章

前端常用代碼片段(六)

前端常用代碼片段(四)

前端常用代碼片段(一)

前端常用代碼片段(五)

前端常用代碼片段(三)

發(fā)表評(píng)論

0條評(píng)論

FWHeart

男|高級(jí)講師

TA的文章

Megalayer：雙十一優(yōu)惠，常規(guī)VPS五折，月付24.5元起，香港VPS/菲律賓VPS/美國(guó)VP

CloudCone黑五預(yù)售款發(fā)布,洛杉磯MC機(jī)房KVM年付14.2美元起

一文帶你簡(jiǎn)單了解Wi-Fi Direct

RackNerd提供美國(guó)大硬盤獨(dú)立服務(wù)器價(jià)格低至月費(fèi)$389 1Gbps 5IP

background背景和border顏色，以及background-clip屬性，透明度問(wèn)題探討

CSS小技巧收藏

精讀《Function VS Class 組件》

使用node簡(jiǎn)單實(shí)現(xiàn)記錄瀏覽量，不依賴數(shù)據(jù)庫(kù)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端常用代碼片段(二)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！