Web前端相關(guān)筆記（三）——JavaScript篇
JavaScript
一、js的數(shù)據(jù)類型萍嬉？
- 5大基本數(shù)據(jù)類型 Number乌昔、String隙疚、Boolean,null壤追、undefined
- 1種復(fù)雜數(shù)據(jù)類型（Object）。
對(duì)象類型(Object)：object,array(數(shù)組),json,function
二供屉、常用的字符串方法：
- charAt(下標(biāo))：獲取字符串中的字符行冰；
- indexOf(string)：檢索字符在字符串中首次出現(xiàn)的位置，有在字符串中出現(xiàn)返回對(duì)應(yīng)下標(biāo)伶丐，沒有返回-1悼做；
- lastIndexOf():檢索字符在字符串中最后一次出現(xiàn)的位置；
- substring(start哗魂，end): 截取字符串肛走，從start位置開始到end結(jié)束，包括開始不包括結(jié)束录别；
- toUpperCase()：將字符串轉(zhuǎn)換為大寫朽色；
- toLowerCase()：將字符串轉(zhuǎn)換為小寫；
- split（分割字符串）
- replace（替換）
- slice 提取字符串的片斷组题，并在新的字符串中返回被提取的部分葫男；
- substr 從起始索引號(hào)提取字符串中指定數(shù)目的字符；
- substring 提取字符串中兩個(gè)指定的索引號(hào)之間的字符崔列；
三梢褐、常用的數(shù)組方法？
- concat() 連接兩個(gè)或更多的數(shù)組赵讯，并返回結(jié)果盈咳。
- join() 把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔边翼。
- pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素
- push() 向數(shù)組的末尾添加一個(gè)或更多元素猪贪，并返回新的長(zhǎng)度。
- reverse() 顛倒數(shù)組中元素的順序讯私。
- shift() 刪除并返回?cái)?shù)組的第一個(gè)元素
- slice() 從某個(gè)已有的數(shù)組返回選定的元素
- sort() 對(duì)數(shù)組的元素進(jìn)行排序
- splice() 刪除元素热押，并向數(shù)組添加新元素。
- toString() 把數(shù)組轉(zhuǎn)換為字符串斤寇，并返回結(jié)果桶癣。
- toLocaleString() 把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果娘锁。
- unshift() 向數(shù)組的開頭添加一個(gè)或更多元素牙寞，并返回新的長(zhǎng)度。
四、js中如何實(shí)現(xiàn)數(shù)組的隨機(jī)排序间雀？
1.方法一：
var arr =[1,2,3,4];
var t;
for(var i = 0;i < arr.length; i++){
var rand = parseInt(Math.random()*arr.length);
t = arr[rand];
arr[rand] =arr[i];
arr[i] = t;
}
console.log(arr);
2.方法二：
var arr =[1,2,3,4];
var brr = [];
var num = arr.length;
for (var i = 0; i < num; i++){
var temp = parseInt(Math.random()*(num-i));
brr.push(arr[temp]);
arr.splice(temp,1);
}
console.log(brr);
3.方法三：最優(yōu)解
//思想：通過隨機(jī)產(chǎn)生0到1的數(shù)悔详，然后判斷是否大于0.5從而影響排序，產(chǎn)生隨機(jī)性的效果惹挟。
//sort（）方法中可以傳參茄螃，但是這個(gè)參數(shù)必須是函數(shù)，規(guī)定了排序的規(guī)則连锯！
function randomsort(a, b) {
return Math.random()>.5 ? -1 : 1;
}
var arr = [1, 2, 3, 4, 5];
arr.sort(randomsort);
5归苍、查找出現(xiàn)最多的字符和次數(shù)？
let str = "zhaochucichuzuiduodezifu";
let o = {};
遍歷str运怖，統(tǒng)計(jì)每個(gè)字符出現(xiàn)的次數(shù)
for (let i = 0, length = str.length; i < length; i++) {
當(dāng)前第i個(gè)字符
let char = str.charAt(i);
char就是對(duì)象o的一個(gè)屬性拼弃，o[char]是屬性值，存儲(chǔ)出現(xiàn)的次數(shù)
if (o[char]) { //如果char屬性存在摇展，屬性值+1
o[char]++; //次數(shù)加1
} else { //char屬性不存在為1（即字符第一次出現(xiàn)）
o[char] = 1; //若第一次出現(xiàn)吻氧，次數(shù)記為1
}
}
//輸出的是完整的對(duì)象，記錄著每一個(gè)字符及其出現(xiàn)的次數(shù)
//輸出{a:1, c:3, d:2, e:1, f:1, h:3, i:3, o:2, u:5, z:3}
console.log(o);
//遍歷對(duì)象咏连，找到出現(xiàn)次數(shù)最多的字符和次數(shù)
let max = 0; //存儲(chǔ)出現(xiàn)次數(shù)最多的次數(shù)
let maxChar = null; //存儲(chǔ)出現(xiàn)次數(shù)最多的字符
for (let key in o) {
if (max < o[key]) {
max = o[key]; //max始終儲(chǔ)存次數(shù)最大的那個(gè)
maxChar = key; //那么對(duì)應(yīng)的字符就是當(dāng)前的key
}
}
console.log("最多的字符是" + maxChar);
console.log("出現(xiàn)的次數(shù)是" + max);
5盯孙、獲取url后的參數(shù)
function find(url) {
let result = {};
let n=url.indexOf('?');
let str = url.substr(n+1);（或者slice）
let s = str.split("&");
for(let i = 0; i < s.length; i ++) {
result[s[i].split("=")[0]]=(s[i].split("=")[1]);
}
return console.log(result);
}
let url='';
find(url);
6、call和apply的區(qū)別
call()
apply()
- 相同點(diǎn)：①這兩個(gè)方法都是函數(shù)對(duì)象的方法需要通過函數(shù)對(duì)象來調(diào)用捻勉；②這兩個(gè)方法可以直接調(diào)用函數(shù)镀梭，并且可以通過第一個(gè)實(shí)參來指定函數(shù)中this；
- 不同點(diǎn)：call是直接傳遞函數(shù)的實(shí)參而apply需要將實(shí)參封裝到一個(gè)數(shù)組中傳遞
7踱启、this及argument的相關(guān)問題
- arguments
- arguments和this類似报账，都是函數(shù)中的隱含的參數(shù)
- arguments是一個(gè)類數(shù)組元素，它用來封裝函數(shù)執(zhí)行過程中的實(shí)參
所以即使不定義形參埠偿，也可以通過arguments來使用實(shí)參
- arguments中有一個(gè)屬性callee表示當(dāng)前執(zhí)行的函數(shù)對(duì)象
- this
- this是函數(shù)的上下文對(duì)象透罢，根據(jù)函數(shù)的調(diào)用方式不同會(huì)執(zhí)向不同的對(duì)象
1.以函數(shù)的形式調(diào)用時(shí)，this是window
2.以方法的形式調(diào)用時(shí)冠蒋，this是調(diào)用方法的對(duì)象
3.以構(gòu)造函數(shù)的形式調(diào)用時(shí)羽圃，this是新建的那個(gè)對(duì)象
4.使用call和apply調(diào)用時(shí)，this是指定的那個(gè)對(duì)象
5.在全局作用域中this代表window
6．直接調(diào)用抖剿，函數(shù)內(nèi)部的 this 指向全局對(duì)象朽寞，在瀏覽器中全局對(duì)象是 window ，在 NodeJs 中全局對(duì)象是 global 斩郎。
7.bind() 的影響脑融。 Function.prototype.bind() 的作用是將當(dāng)前函數(shù)與指定的對(duì)象綁定，并返回一個(gè)新函數(shù)缩宜，這個(gè)新函數(shù)無論以什么樣的方式調(diào)用肘迎，其 this 始終指向綁定的對(duì)象甥温。
8、深拷貝
var clone = function (obj) {
return JSON.parse(JSON.stringify(obj));
}
var clone = function (obj) {
if(obj === null) return null
if(typeof obj !== 'object') return obj;
if(obj.constructor===Date) return new Date(obj);
var newObj = new obj.constructor ();
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var val = obj[key];
newObj[key] = typeof val === 'object' ? arguments.callee(val) : val;
}
}
return newObj;
};
9妓布、數(shù)組排序（從小到大&從大到幸鲵尽）
- 數(shù)組從小到大排序：
//創(chuàng)建數(shù)組元素arr
var arr=[7,13,34,3,200,100,4];
//創(chuàng)建每次循環(huán)存儲(chǔ)最大值得變量
var max;
//遍歷數(shù)組，默認(rèn)arr中的某一個(gè)元素為最大值匣沼，進(jìn)行逐一比較
for(var i=0; i<arr.length; i++){
//外層循環(huán)一次狰挡，就拿arr[i] 和 內(nèi)層循環(huán)arr.legend次的 arr[j] 做對(duì)比
for(var j=i; j<arr.length; j++){
if(arr[i]<arr[j]){
//如果arr[j]大就把此時(shí)的值賦值給最大值變量max
max=arr[j];
arr[j]=arr[i];
arr[i]=max;
}
}
}
document.write(arr.toString()+"<br>");
- 數(shù)組從大到小排序：
var Arr=[13,7,10,76,97,100,35];
var min;
for(var i=0; i<Arr.length; i++){
for(var j=i; j<Arr.length;j++){
if(Arr[i]>Arr[j]){
min=Arr[j];
Arr[j]=Arr[i];
Arr[i]=min;
}
}
}
document.write(Arr.toString()+"<br />");
10、數(shù)組去重
- Es6 實(shí)現(xiàn)一行代碼去重 let set = new Set(array);
function uniq(array){
var temp = [];
for(var i = 0; i < array.length; i++){
if(temp.indexOf(array[i]) == -1){
temp.push(array[i]);
}
}
return temp;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));
11肛著、javascript獲取寬高
- 網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
- 網(wǎng)頁可見區(qū)域高： document.body.clientHeight
- 網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
- 網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
- 網(wǎng)頁正文全文寬： document.body.scrollWidth
- 網(wǎng)頁正文全文高： document.body.scrollHeight
- 網(wǎng)頁被卷去的高： document.body.scrollTop
- 網(wǎng)頁被卷去的左： document.body.scrollLeft
- 網(wǎng)頁正文部分上： window.screenTop
- 網(wǎng)頁正文部分左： window.screenLeft
- 屏幕分辨率的高： window.screen.height
- 屏幕分辨率的寬： window.screen.width
- 屏幕可用工作區(qū)高度： window.screen.availHeight
- 屏幕可用工作區(qū)寬度： window.screen.availWidth
12圆兵、使用JS代碼獲取文件擴(kuò)展名：
這里我們使用 split() 方法和使用一個(gè) 點(diǎn) (.) 來分割跺讯， 以及使用 pop() 方法獲得文件擴(kuò)展名枢贿。
function fnGetExtension() {
//通過id獲得文件輸入元件
var fileInput = document.getElementById('myFile');
//獲得文件名
var fileName = fileInput.files[0].name;
//獲得文件擴(kuò)展名
var fileExtension = fileName.split('.').pop();
alert(fileExtension);
}
13、null和undefined的區(qū)別刀脏？
null： Null類型局荚，代表“空值”，代表一個(gè)空對(duì)象指針愈污，使用typeof運(yùn)算得到 “object”耀态，可以認(rèn)為是對(duì)象類型,它是一個(gè)空對(duì)象指針，和其它語言一樣都是代表“空值”暂雹，不過 undefined 卻是javascript才有的首装。。
undefined： Undefined類型杭跪，當(dāng)一個(gè)聲明了一個(gè)變量未初始化時(shí)仙逻，得到的就是undefined。
