前端之js基礎
1、建立變量的方式
var es3
function es3
let es6
const es6
import es6
class es6
2、資料類型
基本資料類型（值類型）
null、undefined、string、number、boolean
null 空對象指針
undefined 未定義
string 字元串，用單引或或包裹起來，例如'13'
number 數字，其中有一個特殊的數字，NaN，全稱（not a Number）：不是數字的數字,例如1,2,3
boolean 布爾值，僅存在兩種情況，true,false
引用資料類型
object
普通對象
var obj={name:"aa",age:20} 使用大括号包裹，内部包含多組鍵值對
數組對象
var arr=[1,2,3,4,5] 使用[]包裹，包含零到多項内容
正則對象
var reg=/^$/
日期對象
var date=new Date()
function
Symbol 唯一的值，es6中新增資料類型
var a=Symbol('a');
var b=Symbol('b');
console.log(a==b); //false
js原生輸出方法
alert 警告，alert輸出的内容為字元串,實作機制：1、将值（如果是表達式，将計算後的結果）通過toString 轉換為字元串輸出
alert(1+1); //'2'
promt 确認
console.log 控制台輸出日志
console.dir 控制台輸出詳細
console.table 以表格方式輸出json資料
3、數字方法
isNaN()
作用：檢查是否不是有效數字，true 不是有效數字，false是有效數字
isNaN(12); //false
isNaN('12');//false
isNaN(true);//false Number(true) ->1
isNaN(false);//false Number(false) ->0
isNaN(null);//false Number(null) ->0
isNaN(undefined); true
isNaN([12]); //false Number([12]) ->12
isNaN([12,23]); //true Number([12,23]) ->NaN
isNaN(/^$/); //true
isNaN(function(){}); //true
isNaN機制：
1、如果需要檢測的值不是數字類型，浏覽器會預設将其轉換為數字類型
2、值是數字false，不是數字true (數字類型中隻有NaN不是有效數字，其餘都是有效數字)
Number()
作用：将其他類型轉換為數字類型
1、字元串->數字
如果字元串中出現任意一個非有效字元，結果為NaN
Number('10');//10
Number('10px'); //NaN
Number(""); //0
2、布爾值->數字
轉換結果為0或1
Number(true); // 1
Number(false); //0
3、其他->數字
Number(null); //0
Number(undefined);//NaN
4、引用資料類型->數字
引用資料類型先調用toSting 方法，轉換為字元串，在使用Number方法，轉換為數字
Number({}); //({}).toString() ->'[object Object]' ->NaN
Number([1,2,3]); //[1,2,3].toString() -> '1,2,3'->NaN
Number(/^$/); /(/^$/).toSting() -> '/^$/' ->NaN
Number([]); //([]).toSting() ->""
isNaN([]);// [].toSting() ->"" ->Number("") ->0
parseInt/parseFloat
等同于Number，作用：将其他類型轉換為數字
parseInt:将一個字元串的整數部分解析出來,遇到非有效數字，傳回NaN
parseFloat:将一個字元串的小數部分解析出來,,遇到非有效數字，傳回NaN
parseInt('10.5px');//10
parseFloat('10.5px');//10.5
parseInt("abc123"); //NaN
差別：number 遇到非有效數字傳回NaN
NaN和任意一個數字都不相等，包括自己
NaN == NaN //false
4、boolean、null、undefined
boolean 傳回true或false
!"a";//false "a"->true,!true->false
!!"a";.true !!相當于沒取反
js中，隻有0，‘’，NaN,null,undefined為false,其他均為true
null 空指針對象，使用場景：手動指派null,後面會對該變量指派
undefined 未定義，使用場景：聲明變量，如果不手動指派，浏覽器會預設undefined，後面可以不指派
5、對象
var obj={name:"XX",age:20}
新增
obj['a'] = '';
obj.a = '';
obj[20] =20;
obj[{}];
擷取
obj["20"];//20
obj['[object Object]']
删除
delete obj.a
注：
1、對象中的屬性名，不可以重複
2、如果對象中沒有key,傳回undefined
3、對象key可以存儲字元串、數字
4、對象存儲屬性名不是字元串或數字時，會調用toString方法，然後在進行存儲
6、數組
數組也是對象的一種，數組中存在length 屬性，為該數組的元素長度
[1,2,3,4,5]
下标 0 1 2 3 4 數字作為key,遞增
數組中的元素可以是任意類型的
新增
var ary=[];
ary['age']=20;
ary[1]='1';
擷取
ary['age'];
ary[1];
7、js運作機制和不同資料類型的操作
1、當浏覽器核心/引擎渲染和解析js時，會提供一個js代碼運作的環境，這個環境稱為全局作用域（棧記憶體）
2、代碼自上而下執行（之前有一個變量提升的過程）
基本資料類型的值存在目前作用域下
var a=12;
1、在記憶體中開辟一個空間（棧記憶體）存儲12
2、在目前作用域中聲明一個變量a
3、讓聲明的變量和存儲的12進行關聯，把存儲的12指派給a
var a=12;
var b=a;
b=15；
console.log(a);
基本資料類型（值類型），按值操作，把之前的值複制一份，放到新的空間，操作與之前的空間沒有關系
引用資料類型的值不能直接存儲在目前作用域下，需要開辟一個新的空間，把内容存儲到這個空間内
var obj={n:100}
1、開辟一個新的空間（堆記憶體），把對象的鍵值依次存儲起來，空間擁有一個16進制的位址
2、聲明一個變量
3、讓變量和空間位址關聯在一起，把位址指派給變量
var obj={n:100};
var obj2 = obj;
obj2['n']=200;
console.log(obj['n']);
引用類型不是按值操作，它操作的是引用位址，把原來的空間位址指派給變量，但是原來的空間沒有被克隆，這樣就會出現多個變量關聯一個空間，修改會互相影響
棧記憶體：存儲基本類型的值
堆記憶體：存儲引用類型中的資訊，對象存儲的是鍵值對，函數存儲的是字元串
8、操作語句
判斷
if/else if/else
var num=12;
if(num >10){
num++;
}else{
num--;
}
注：if條件判斷中，==判斷相當，===判斷是否全等，!=判斷是否不相等,!==判斷是否不全等
10=='10';//true
10==='10';//false
1!='1';//false
1!=='1';//true
三元運算符
var num=12;
num>10?num++:null
switch
switch(num){
case 10:
num++;
break;
case 10
num--;
break;
default:
num=0;
}
注：必須添加break;否則會進入下一個beak為止;
switch case是基于===進行比較的
循環
for
for(var i=0;i<10;i++){
}
1、定義初始值var i=0;
2、設定循環成立條件，條件成立循環成立，不成立則循環結束，i<10
3、條件成立進入循環體
4、執行步長累加
注：1、可根據需求，改變為倒叙或修改遞增次數
2、循環退出使用break,continue 跳過本輪循環，進入下一輪循環，循環中break和continue 後面的代碼均不執行
for in
while
9、檢測資料類型
typeof 作用：檢測基本資料類型 傳回值為”number“/"string"/"boolean"/"undefined"/"object"/"function"
注：檢測數組、正則、對象為object
typeof(NaN);//'number'
typeof []; //'object'
typeof type []; //typeof 'object' ->'string'
constanceof
custructor
Object.prototype.toString.call()
10、dom
擷取元素
document.getElementById()
document.getElementsByClassName()
document.getElementByTagName() //擷取元素集合，類數組對象，key作為索引，存在length屬性，但不是數組
document.getElementsByName()
//元素對象屬性
id 存儲目前元素的id值，存儲的值為字元串
className 代表目前元素樣式類名，存儲的值為字元串
innerHtml 存儲元素中所有的内容，包含html标簽
innerText 存儲元素中所有的文本内容，不包含html标簽
onclick 點選事件
onmouseover 滑鼠滑過事件
onmouseout 滑鼠離開事件
style 存儲目前元素所有的行内樣式，樣式表中樣式無法擷取
11、函數
函數就是一個方法，為了實作某個功能，将多次使用的代碼塊封裝在函數中
優點：實作低耦合，高内聚，減少備援，提高代碼可複用性
使用:1、定義function fn(),
2、調用fn()
函數執行機制：
1、形成私有作用域（棧記憶體）
2、把之前堆記憶體中的字元串複制一份過來， 變為真正的js代碼，在新的作用域下，自上而下執行
3、每次調用時，都會形成一個私有作用域棧，操作同2
function 函數名(形參){//參數作為函數的入口
//函數體
}
fn(1);//1為實參，實參與形參對應
注：1、如果形參未接受變量，為undefined
2、如果實參比形參多，多餘的丢棄
12、資料類型轉換
isNaN,當檢測的值不是數字，浏覽器會使用Number()方法，先将其轉換為數字，然後在檢測是否為非有效數字
isNaN('3px'); Number('3px') -> NaN -> isNaN(NaN) -> true
parseInt/parseFloat
數學運算：+ - * /,其中+還有字元串拼接的作用
‘3’-1; Number('3')-1 -> 3-1 ->2
'3px'-1 NaN
'3px'+1 '3px1'
var i='3';
i=i+1; ''31
i+=1; '31'
i++; 4 //純數學運算，不存在字元串拼接
判斷條件中 ==比較時，會将其他類型轉換為數字類型
轉換規律
浏覽器調用Number方法
字元串轉數字
隻要遇到一個非有效數字，為NaN
'' ->0
布爾轉數字
true ->1
false ->0
其他轉數字
null->0
undefined ->NaN
引用類型轉數字
先調用toString方法，然後在通過Number方法，将其轉換為數字
将其他類型值轉換為字元串
情況：
1、基于alert/comfirm/propt/document.write等方法将内容輸出時，會将字元串轉換為字元串
2、基于+進行字元串拼接時
3、把引用類型轉換為數字時，會先轉換為字元串，在轉換為數字
4、給對象設定屬性名，如果不是字元串，會将其轉換為字元串，然後在當屬性存儲到對象中
5、手動調用toString/String/toFixed/join方法
轉換機制
調用toString 方法
1 -> '1'
null -> 'null'
NaN -> 'NaN'
[] -> ''
[13] - >'13'
[12,13] ->'12,23'
對象
{name:'',age:20} -> '[object Object]'
{} -> '[object Object]'
将其他類型值轉換為布爾
情況：
1、基于！/!!/Boolean方法轉換
2、條件判斷中的條件會轉換為布類型
轉換規律
隻有‘0/''/NaN/null/undefined’ 為false,其餘為true
特殊情況：數學運算和字元串拼接+
規律：出現字元串為拼接，否則就是數學運算
1+true ->2 數學運算
'1'+true -> '1true' 字元串拼接
[12]+10 -> '1210' //引用類型轉換為數字，會先轉換為字元串，是以結果為字元串拼接
({})+10 -> '[object Object]10'
[]+10 -> '10'
{}+10 ->10 //{}為代碼塊，加什麼就會得到什麼
{}+[] ->0
{}+true ->1
{}+{} ->'[obect Object][object Object]'
function fn(){}+10 -> function fn(){}; ->10
+10
特殊情況
‘==’比較時，如果兩邊不是相同類型，則先轉換為相同類型，在進行比較
規律：不用情況的比較，則先把其他值轉換為數字，在進行比較
對象 == 對象，引用類型，位址不相同，則不相等
對象 ==數字，把對象轉換為數字，然後在比較
對象 == 布爾，把對象轉換為數字，布爾也轉換為數字，在進行比較
對象 == 字元串，把對象轉為數字，把字元串也轉換為數字，在進行比較
字元串 == 數字，把字元串轉換為數字
布爾 == 數字，把布爾值轉換為數字
特殊記憶
null ==undefined //true
null ===undefined //false
null、undefine和其他值都不相等
NaN == NaN //false NaN和誰都不想等，包括自己
1==true; //tue
1== false; //false
2==true; //false 因為true 是1
[]==true; //都轉換為數字 0 ==1 ->false.
![]==true; //false ==true ->false
[]==false //0==0 都轉換為數字 ->true
![]==false; //先算![],把數組轉換為布爾值，取反->false,false ==false ->true
13、數組方法 - 增删改
常用方法：
push
作用:向數組尾部添加元素
參數：添加的内容，可以是多個
傳回值:新增後數組的長度，原有數組改變
var arr=[1,2,3];
arr.push(4);//4
console.log(arr); //[1,2,3,4]
pop
作用：删除數組最後一項
參數:無
傳回值：被删除那一項的内容
var arr=[1,2,3];
arr.pop();//3
console.log(arr);//[1,2]
shift
作用：删除數組第一項
參數:無
傳回值：被删除那一項的内容
var arr=[1,2,3];
arr.shift();//1
console.log(arr);//[2,3]
unshift
作用:向數組頭部添加元素
參數：添加的内容，可以是多個
傳回值:新增後數組的長度，原有數組改變
var arr=[1,2,3];
arr.unshift(0);//4
console.log(arr); //[0,1,2,3]
splice
作用：删除指定位置的内容
參數：arr.spice(n,m),從n項開始，删除m個,m省略，則删除到末尾
傳回值：傳回新數組，原有數組改變
var arr=[1,2,3,4,5];
arr.splice(1,2);//[2,3]
console.log(arr);//[1,4,5]
var arr=[1,2,3,4,5];
arr.splice(1);//[2,3,4,5]
console.log(arr);//[1]
作用：修改指定位置的内容
參數：arr.spice(n,m,,x,...),把原有的删除，替換成新的内容
傳回值：傳回新數組，原有數組改變
var arr=[1,2,3,4,5];
arr.splice(1,2,4);//[2,3]
console.log(arr);//[1,4,4,5]
作用：新增指定位置的内容
參數：arr.spice(n,0,m),從n開始删除零個，将m或更多的内容放到n前面
傳回值：傳回空數組，原有數組改變
var arr=[1,2,3,4,5];
arr.splice(1,0,4);//[]
console.log(arr);//[1,4,2,3,4,5]
思考：删除數組中最後一個的方法有哪些
var arr=[1,2,3,4,5];
1、arr.pop()
2、arr.length--
3、arr.splice(arr.lenth-1);
數組末尾添加一項的方法有哪些
var arr=[1,2,3,4,5];
1、arr.push(6);
2、arr.splice(arr.length,0,6);
3、arr[arr.length]=6;
slice
作用：截取，原數組不改變
參數：n，m 從n到m,不包含m,
m省略，則截取到最後，
n為0或不寫參數，則将數組克隆
支援負數下标，規則：數組總長度+負數索引
傳回值：将截取出的值以新數組方式傳回
var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(0);//[1,2,3,4,5]
arr.slice(-3,-1);//[3,4]
console.log(arr);//[1,2,3,4,5]
concat
作用：實作多個數組或值的拼接
參數：數組或多個值
傳回值：拼接後的新數組，原有數組不變
var arr=[1,2,3];
arr.concat([4,5]);//[1,2,3,4,5]
console.log(arr);//[1,2,3];
toString
作用：将數組轉換為字元串
參數：無
傳回值：數組中的每一項以逗号分隔，原有數組不變
var arr=[1,2,3];
arr.toString();//'1,2,3'
console.log(arr);//[1,2,3]
join
作用：以指定的連接配接符，将數組轉換為字元串
參數：指定的連接配接符
傳回值：字元串，原有數組不變
var arr=[1,2,3];
arr.join('+');//'1+2+3'
eveal(arr.join('+'));//6
console.log(arr);//[1,2,3]
sort
作用：數組反排序
參數：無/函數
傳回值：排序後的新數組，原有數組改變
var arr=[12,34,23,56,45];
arr.sort();//[12, 23, 34, 45, 56]
console.log(arr);//[12, 23, 34, 45, 56]
var ary=[18,1,23,27,2,35,3,56];
ary.sort();//[1,18,2,23,27,3,35,56]
ary.sort(function(a,b){
return a-b;//a-b升序，b-a 降序
})
reverse
作用：數組反轉
參數：無
傳回值：改變順序的新數組，原有數組改變
var arr=[1,2,3];
arr.reverse();//[3,2,1]
console.log(arr);//[3,2,1]
indexOf
作用：查找目前值在數組中出現第一次的下标
參數：需要檢測的值
傳回值：位置下标，沒有找到傳回-1
var arr=[1,2,3,4,5];
arr.indexOf(2);//1
lastIndexOf
作用：檢測目前值在數組中出現最後一次的下标
參數：需要檢測的值
傳回值：位置下标，沒有找到傳回-1
14、數組去重
1、利用雙層循環，目前項和後面每一項進行比較，如果相同則删除
var arr=[3,2,3,2,2];
for(var i=0;i<arr.length;i++){
var item =arr[i];
for(var j=i+1;j<arr.length;j++){
if(item == arr[j]){
arr.splice(j,1);
j--;
}
}
}
console.log(arr);
2、利用對象key不能重複
var arr=[3,2,3,2,2];
var obj={};
for(var i=0;i<arr.length;i++){
var item = arr[i];
if(typeof obj[item] !== 'undefined'){
arr[i] = arr[arr.length-1];
arr.length--;
i--;
}else{
obj[item] = item;
}
}
console.log(arr);
15、字元串常用方法
補：字元串存在length屬性，字元串按值操作，不像數組按照空間位址操作，是以字元串是不變的
charAt
作用：charAt根據索引擷取指定位置的字元
參數：索引
傳回：指定位置的字元
var str="abcdefg";
str.charAt(0);//a
str[0];//a
str[100];//undefined
str.charAt(100);//''沒有指定索引位置的字元，傳回空字元串
charCodeAt
作用：擷取字元對應的unicode 編碼值（ASC II）
參數：索引
傳回：字元對應的編碼
var str="abcdefg";
str.charAt(0);//97
substr
作用：字元串截取
參數：n,m 從n開始，截取m個
m可省略，則從n到最後
n,m省略，則為字元串克隆
n支援負數下标
傳回值：以新字元串方式傳回
var str='abcdefg';
str.substr(0,2);//'ab'
str.substr(0);//'abcdefg';
str.substr(-2,2);‘fg’
substring
作用：和slice一樣，差別：不支援負數下标
參數：n,m 從n開始到m處，不包含m
m可省略，則從n到最後
n,m省略，則為字元串克隆
傳回值：以新字元串方式傳回
var str='str';
str.substring(0,2);//'st'
str.substring(0);//'str'
str.substring(-2,-1);//''
slice
作用：擷取字元在字元串中第一次出現的位置索引，
參數：n,m 從n開始到m處，不包含m
m可省略，則從n到最後
n,m省略，則為字元串克隆
支援負數下标
傳回值：以新字元串方式傳回
var str='str';
str.slice(0,2);//'st'
str.slice(0);//'str'
str.slice(-2,-1);//'t'
indexOf
作用：擷取字元在字元串中第一次出現的位置索引，
參數：指定字元
傳回值：下标，包含大于0，不包含傳回-1
var str='abcdefg';
str.indexOf('a');//0
lastIndexOf
作用：擷取字元在字元串中最後一次出現的位置索引，
參數：指定字元
傳回值：下标，包含大于0，不包含傳回-1
var str='abcdefga';
str.lastIndexOf('a');//7
toUpperCase
作用：轉為大寫
toLowerCase
作用：轉為小寫
split
作用：根據指定字元串，拆分為數組的每一項
var str="1,2,3,4,5";
str.split(',');//[1,2,3,4,5]
replace
作用：替換字元串中原有字元
參數：新字元
傳回：替換後的新字元
var stt='abcdefg';
str.replace('ab','12');'12cdefg'
16、Math方法
abs 絕對值
ceil 向上取整
floor 向下取整
round 四舍五入
max 最大值
min 最小值
sqrt 開平方
pow 幂次方
Pi 圓周率
random 随機數（0,1）
求1-10之間的随機整數
Math.round(Marh.random()*(10-1)+1);
求n-m之間的随機數
Math.round(Math.random()*(m-n)+n) 來源：CSDN
原文：
https://blog.csdn.net/qq_36251118/article/details/90737882版權聲明：本文為部落客原創文章，轉載請附上博文連結！
![社交電商是什麼？是否為社交＋電商二者簡單的融合？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)