前端之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
版权声明：本文为博主原创文章，转载请附上博文链接！
