在學(xué)習(xí)前端的過程中，大多數(shù)人都感覺js很麻煩，今天我就整理了一些我所學(xué)習(xí)的js基礎(chǔ)知識(shí)

1.循環(huán)

????循環(huán)主要分為兩種：先驗(yàn)證在循環(huán)（while， for）和循環(huán)再驗(yàn)證（do while）

????不論是那種循環(huán)，都需要一個(gè)初始化變量

????????num=0;//初始化變量

????????while(num<5){//條件

?????????????document.write("") num++ //累加

? ??????}

? ??????for（num=0；num<5;num++）{//先執(zhí)行語句在循環(huán)

? ??????????document.write("")

????????}

????do while????//不管條件怎樣都先執(zhí)行一遍

????for????//continue（跳過本次循環(huán)）break（跳出循環(huán)）

2.數(shù)組

? ??1 數(shù)組：有序的數(shù)據(jù)的集合

????????????定義數(shù)組的方法：

????????????????????a:var arr=[1,2,3,4,5] 字面量表達(dá)式? ? ? ??

?????????????????????b:var arr=new Array(1,3,2,5,7)? 對(duì)象表達(dá)式，[]中有且只有一個(gè)數(shù)字是代表設(shè)置數(shù)組的長(zhǎng)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 度，否則就是設(shè)置數(shù)組的值

? ? ? ? ? ? 屬性：

? ?????????????????arr.lenfth 數(shù)組的長(zhǎng)度

? ? ????????????? 訪問數(shù)組的值下標(biāo)從0開始

? ? ? ????????????訪問數(shù)組最后一位 數(shù)組.length-1

? ? ? ? ? ? ? ? ? 數(shù)組.length=3可以改變數(shù)組長(zhǎng)度

? ? ? ? ? ? ? ? ? arr.length=0清空數(shù)組，堆中無位置

? ? ? ? ? ? ? ? ? arr[]堆中有位置

? ? ? ? ? ? ? ? ? arr[0]='zs'通過下標(biāo)始設(shè)置值

? ??????數(shù)組的方法：

? ? ? ? ? ? ? ? ? ?arr.push('','')//向數(shù)組末尾添加

? ? ????????????? arr.pop（）//刪除數(shù)組的末尾,不需要傳參

? ? ????????????? arr.unshift('','')//向數(shù)組開頭添加

? ????????????? ? arr.shift（）//刪除數(shù)組開頭，不需要傳參

? ????????????? ? splice(start,deletecount,newVal)//從start開始，向后刪除deletecount個(gè)

? ????????????? ? splice(1,1)//從下標(biāo)的第一個(gè)開始刪除一個(gè)，并返回剩下的

? ????????????? ? spalice(1,2,'da')//從下標(biāo)為1的地方刪除2個(gè)，并放入一個(gè)新元素

????????????? ? ? splice(3)//從下標(biāo)為3的地方開始刪除，并返回之前的數(shù)組元素

????????????? ? ? delete obj.name? //刪除對(duì)象屬性

? ????????????? ? delete arr[1]//清空值 位置保留

????????????????? arr.reverse()//反轉(zhuǎn)數(shù)組，不需傳參

????????????????? arr.sort()//數(shù)組排序

? ??????????????concat屬性:????var arr=[1,2,3],arr2=[2,3,4]????var arr3=arr.concat(arr2)//不會(huì)改變?cè)瓉淼臄?shù)組，會(huì)返回一個(gè)值????console.log(arr,arr2,arr3)

? ??????????????join屬性????var arr = ['hello','word','haha']????var arr2 = arr.jion()//'hello','world','haha'????var arr2=arr.jion('')//輸出helloworldhaha????var arr2=arr.join('-')//hello-world-haha//以什么方式連接字符串將元素結(jié)合成一個(gè)字符串

? ??????????????tostring屬性 //可以變成字符串????var arr = ['hello','word','haha']????var arr =arr.tostring()//轉(zhuǎn)換成字符串????var num=255????var num2=num.tostring(16)//把num轉(zhuǎn)換成16進(jìn)制參數(shù)代表進(jìn)制

? ??????????????slice????var arr = ['hello','word','haha'，5]????var arr2 = arr.slice()//返回原來的元素????var arr2????=arr.slice(1)//返回從下標(biāo)為1的剩余的數(shù)組????var arr2 =arr.slice(1，3）//不包含結(jié)束位置，這里是3

? ? ? ? ? ? ? ? ? ?indexOf： var arr=[1,2,3,'haha']????console.log(arr.indexOf(3))//代表返回指定參數(shù) 返回下標(biāo)????console.log(arr.indexOf(3，3))//從第三位開始查找，如果未找到返回-1

? ? ? ? ? ? 深淺拷貝：

? ??????????????????1.淺拷貝：將原對(duì)象或原數(shù)組的引用直接賦給新對(duì)象，新數(shù)組，新對(duì)象/數(shù)組只是原來對(duì)象/數(shù)組的一個(gè)引用

????????????????????2.深拷貝：創(chuàng)建一個(gè)新的對(duì)象和數(shù)組，將原對(duì)象的各項(xiàng)屬性的“值（數(shù)組的所有單元）拷貝過來，是“值”而不是“引用”

? ??????????????????var arr=[1,2,3,[4,5],6]

????????????????????var arr2=arr.slice()

? ? ? ? ? ? ? ? ? ? arr[2]=666//值改變了arr2

????????????????????arr[3][0]=999//兩個(gè)數(shù)組都變了，arr2[3]指向一個(gè)在堆中的數(shù)組

? ? ? ????? 數(shù)組拉平：

? ??????????????????var arr=[1,2,3,[4,5,[6,7]],8]

????????????????????var arr2 = arr.flat(2)//參數(shù)代表拉平的層數(shù)

? ? ? ? ? ? 數(shù)組遍歷：

? ??????????????????1.

????????????????????????var classRoom=['wanghe',';liaohua','wangzhengshan','qigege']

????????????????????????var len=classRoom.length

????????????????????????for(var i=0;i<len;i++){

? ????????????????????? console.log(classRoom[i])

????????????????????????}

????????????????????2.遍歷對(duì)象

????????????????????????var obj={

? ????????????????????? name：'qige',

????????????????????? ? age:18,

????????????????????? ? sex:'男'

????????????????????????}

????????????????????????for(var key in obj){

????????????????????? ? console.log(obj[key])

????????????????????????}

????????????????遍歷對(duì)象//for in 會(huì)跳過稀疏數(shù)組

????????????????????????var arr=['香蕉',,'蘋果','草莓']

? ? ? ? ? ? ? ? ? ? ? ? ?for(var kry in arr){

????????????????????????????? ? console.log(arr[key])

? ? ? ? ? ? ? ? ? ? ? ? ?}

????????????3.遍歷數(shù)組

????????????????????????for(var item of arr){

????????????????????????? ? console.log(item);

????????????????????????}

????????????????????//forEach map filter reduce some

????????????????????????????arr.forEach(function(item){

????????????????????????????? ? console.log(item);

????????????????????????????})

3.對(duì)象

? ? ? ? 1.數(shù)學(xué)對(duì)象：

? ??????????????varnum=Math

????????????????console.log(Math.PI)//圓周率

????????????//方法

? ? ? ? ? ? ? ? ?cosole.log(Math.round(2.1));//四舍五入

? ? ? ? ? ? ? ? ?cosole.log(Math.round(2.6));//四舍五入

? ? ? ? ? ? ? ? ?console.log(Math.floor(2.1));//向下取整

? ? ? ? ? ? ? ? ?console.log(Math.ceil(2.1));//向上取整

????????????????console.log(Math.ceil(Math.random()*10));

????????????????console.log(Math.max(1,7,3));//最大值

????????????????console.log(Math.min(1,7,3));//最小值

????????????????console.log(Math.pow(8,2));//求冪? 8的2次方

????????????????console.log(Math.sqrt(64));//開平方根

????????????????console.log(Math.abs(20-64));//求絕對(duì)值

????????????????console.log(Math.sign(3))//正數(shù)返回1

????????????????console.log(Math.sign(-3))//負(fù)數(shù)返回-1

????????????????console.log(Math.sign(0))//0就返回0

? ? ? //隨機(jī)數(shù)

? ? ? ? ? ? ? ? ? ?Math.random()*(大-小+1)+小包含大小

? ? ?//驗(yàn)證碼

????????????????????var????arr=[]

????????????????????for(vari=48;i<=57;i++){

???????????????????????????arr[i-48]=String.fromCharCode(i)//編碼轉(zhuǎn)字符

????????????????????}

????????????????????for(vari=65;i<=122;i++){

????????????????????????????arr[i-65+10]=String.fromCharCode(i)//編碼轉(zhuǎn)字符

? ? ? ? ? ? ? ? ? ? ?}

????????????????????for(vari=0;i<4;i++){

????????????????????????????varnum=parseInt(Math.randon()*arr.length);

????????????????????console.log(arr[num]);

????????????????????}

? ?2.時(shí)間對(duì)象：

? ??????????????var d = new Date()//獲取的是本機(jī)系統(tǒng)時(shí)間

????????????????//無參數(shù)是獲取時(shí)間，有參數(shù)是設(shè)置時(shí)間

????????????????var d = new Date(2000//年份,2//月份（月份書寫時(shí)要減一）,1//日,00//時(shí),00//分,00//秒,157//毫秒)

????????????????var d = new Date(2000,1,1)//年月日

????????????????var d = new Date(2000,1)//年月

????????????????var d = new Date(2000)//毫秒數(shù)

????????????????var d = new Date('Thu Jan 01 2000 08:00:02')//字符串格式也可以

????????????????var d = new Date()

????????????????console.log(d.getFullYear());//獲取年

????????????????console.log(d.getMonth()+1);//獲取月

????????????????console.log(d.getDate());//獲取日

????????????????console.log(d.getDay());//獲取星期

????????????????console.log(d.getHours());//獲取小時(shí)

????????????????console.log(d.getMinutes());//獲取分鐘

????????????????console.log(d.getSeconds());//獲取秒

????????????????console.log(d.getTime());//獲取1970年到今天

????????????????console.log(d.getMilliseconds())

????????????????var d2 = new Date(2020,07,10)

????????????????console.log(Math.abs((d2.getTime()-d,getTime())/1000/60/60/24));

????????????????var d = new Date()

????????????????????console.log(d.toString())

????????????????console.log(d.toLocaleDateString())//2020/8/7

????????????????console.log(d.toLocaleString())//2020/8/7 上午11：33：49

????????????????console.log(d.toLocaleTimeString())//上午11：33：49

????????????????console.log(d.toTimeString())//11：33：49 GMT+0800(中國標(biāo)準(zhǔn)時(shí)間)

????????//設(shè)置時(shí)間

????????????????var d = new Date()

????????????????d.setFullYear(1999)

????????????????d.setDate(20)

????????????????console.log(d.toLocaleString())

????????//注意：

????????????????var d = new Date(2020,0,32)

????????????????console.log(d.toLocaleString())//日期超過當(dāng)前月份天使會(huì)自動(dòng)進(jìn)位

? ? 3.字符串對(duì)象

? ? ? ? ? ? 3.1

? ? ? ? ? ? ? ? ? 屬性：

? ??????????????????????var str = 'hello world'

????????????????????????console.log(str.length);//長(zhǎng)度屬性

????????????????????????console.log(str[0]);//字符串有下標(biāo)

? ? ? ? ? ? 3.2

? ? ? ? ? ? ? ? ?方法：

? ??????????????????????var str = 'hello world'

????????????????????????console.log(str.charAt(0));//返回對(duì)應(yīng)位置上的字符出來

????????????????????????console.log(str.charCodeAt(0));//返回對(duì)應(yīng)位置上的編碼

????????????????????????console.log(String.fromCharCode(104))//返回編碼上的字符

????????????????????????console.log(str.indexOf('e'));//查找指定字符首次出現(xiàn)的位置

????????????????????????console.log(str.indexOf('l',2))//第二個(gè)參數(shù)是搜索的起始位置

? ? ? ? ? ? ? ? ? ? ? ? console.log(str.lastindexOf('l'))//從后向前搜索指定字符首次出現(xiàn)的位置

????????????????????????console.log(str.seach('l'));//返回指定字符首次出現(xiàn)的位置，可以傳入正則表達(dá)式，只有一個(gè)參數(shù)

????????????????????????console.log(str.slice())//返回所有字符串

????????????????????????console.log(str.slice(2))//返回從下標(biāo)為2開始的剩余字符

????????????????????????console.log(str.slice(2，4))//start開始下標(biāo) end結(jié)束下標(biāo)（不包含在內(nèi)）參數(shù)可以為負(fù)

????????????????????????console.log(str.substring())//參數(shù)不可以為負(fù)，與slice相同

????????????????????????console.log(str.substr(2,4))//與slice區(qū)別 第二個(gè)參數(shù)是長(zhǎng)度的意思

????????????????????????var subStr = str.replace(查找的子串，新的值)

????????????????????????var subStr = str.replace('e','a')

? ? ? ? ? ? ? ? ? ? ? ? console.log(str.toUpperCase())//轉(zhuǎn)成大寫

????????????????????????console.log(str.toLowerCase())//轉(zhuǎn)成小寫

????????????????????????document.write(str.fontsize(20))

? ? ? ? ? ? ? ? ? ? ? ? var newStr = str.concat('你好')//拼接

????????????????????????console.log(newStr)

????????????????????????var str = prompt('請(qǐng)輸入關(guān)鍵詞：')

????????????????????????var newStr = str.trim()//去掉前后空格

????????????????????????var str = 'hello,world,你好'

????????????????????????console.log(str.split())//返回一個(gè)數(shù)組['hello,world,你好']

????????????????????????console.log(str.split(''))//把每個(gè)字符拆分，組成一個(gè)數(shù)組

????????????????????????console.log(str.split(','))//以指定字符拆分[]

????????????????????????console.log(str.split('o'))