刚开始学习Javascript的一些基础小知识，适合初学者,希望对大家有帮助
一.简介
1.JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，js不能操作文件。
重要的开始啦！！！！！
引入javascript：
<div onclick="console.log()"</div>(代码耦合)
<script> **<script>标签建议写在</body> 之前**
2.. 外部文件引入：<script src="./ " </script>
3. 标识符： 编码中所要用到的名称都可以叫作标签符
4. 关键字： 关键字是特殊的标识符,关键字js事件都赋予了特定的含义。
5. 保留字： 保留字也是特殊的标识符，与关键字不同的是保留字并没有特定的含义，只是为了以后的扩展使用。用户也不能作为普通的标识符使用
6.数据类型:number string boolean undefined null object array
二.JS的自增,自减的案例(面试):
1.前自增和后自增、前自减和后自减的区别。
自增（++）：将变量的值加1，分前缀式（如++i）和后缀式（如i++）。前缀式是先加1再使用；后缀式是先使用再加1。
自减（–）：将变量的值减1，分前缀式（如–i）和后缀式（如i–）。前缀式是先减1再使用；后缀式是先使用再减1。
z = z – ((–y) -(x–))
根据上面的分析：前缀式和后缀式的区别，这里的–y就是1，x–就是1，我们也就能得出z =3。
- 看看这道题：
console.log(a++ + a + ++a - a + a++);（6+7+8-8+8）
a++ //先计算再加一
++a //先加一后计算
var a=6;
console.log( a++ == 6) //true
console.log(++a==7) //true
- 对于以下，有
var x = 5, y = 6, z;
题目1：z = ++x + y++;
题目2：z = ++x + x++;
题目3：x = ++x + x++；
同一优先级的运算符的计算顺序是从右往左。
Q1：z = ++x + y++; 可以转化为:
x = x +１;
z = x + y;
y = y + 1;
带入x = 5, y = 6，可得x = 6; z = 12; y = 7;
Q2：z = ++x + x++; 可以转化为:
x = x +１;
z = x + x;
x = x + 1;
带入x = 5，可得x = 6; z = 6+6=12; x = 7; 故x=7,z=12；
Q3：x = ++x + x++; 可以转化为:
x = x +１;
x = x + x;
x = x + 1;
带入x = 5，可得x = 5+1=6; x = 6+6=12; x = 12+1=13; 故x=13。
三.随机数的基础应用：
Math.pow() 公式就是求一个数字的几次方.
随机数生成:parseInt(Math.random()*100+9);//生成随机数区间在9-100之间
<script>
// parseInt(Math.random()*100+9);//生成随机数区间在9-100之间
// console.log(parseInt(Math.random()*100));//在1-100之间的随机整数
var i = 1;
var count =0;
while(i<=7){
var a=parseInt(Math.random()*10);
var b=prompt(\'input\')
if(a==b){
alert(\'\')
}
i++;
}if(a==b){
count++;
alert(\'恭喜中奖\'+Math.pow(10,count))
}else if(a!=b){
alert(\'你没有中奖\')
}
</script>
公式：Math.random()*num
运用用于数组：
function app(arr){
var num = Math.floor(Math.random()*(arr.length-1));
var name1 = arr[num].name
return name1
}
四.运算符的难点记忆点(基本用于面试，工作中也有用到)
关系运算符：
Infinity + 1000 //Infinity
Infinity - 1000 //Infinity
Infinity / 1000 //Infinity
Infinity - Infinity //NaN
Infinity /Infinity //NaN
Infinity * Infinity //Infinity
0 / 0 //NaN
6 / 0 //Infinity
NaN / 8 //NaN
null == 0
NaN == NaN //false
NaN === NaN //false
五.比较运算符的注意事项：
- 0只是一个占位符;
- string 和 number比，string会被隐式转换为number,反之一样.
- === 是全等判断,要比较数值还有类型,
- string 和 string 也能够进行关系运算，比较的就是字符编码顺序。(ASCII表可知)
- false: null， 0， NaN， 空字符串(“”)，undefined(默认值为false),其他默认值为true.
六.三元运算符：
条件 ? val1 : val2 ；(判断为true时执行val,反之false执行val2)
七.自动类型转换和强制类型转换
a:自动类型转换:
除了 + 和++(自增) , –(自减)外,其他的都是运算时自动转换成number;
注意:特殊情况
var str = \'1\';
console.log(str++); // 1
console.log(++str); // 3
这种时候不会报错,
b:强制类型转换:
1.构造函数 ----var num = new Number(\'11\') ----typeof(object)
2.转换函数 ----var num = Number(\' \') ----typeof(number)
3. parseInt() ----- parseFloat()conlose.log(Number(\'123a\')) //NaN
var boo = new Boolean(\'false\') //truevar boo = Boolean(NaN)-
toString() (该方法返回对象的字符串)new string() string() value+=\' \' (字符串拼接)
八.if…..else….的案例
1.if(这一年是100的整数倍){
if(年份除以400能整除){
alert("是闰年");
}else{
alert("不是闰年");
}
}else{
//这年不是100的整数倍
if(年份除以4能整除){
alert("是闰年");
}else{
alert("不是闰年");
}
}
2.标准完整结构
if(){ (写布尔值或者可以代替布尔的数字或者字符串)
}else if(){
}else if()
}else{
}
注意:else只能有一个,并且放到最后.(可以没有else)
九.switch case语句
switch(待检测值){
case 值1 :
值1 与 待检测值 相同时做的事情(case后的常量会比较值和类型 ===)
break;
case 值2 :
值2 与 待检测值 相同时做的事情
break;
default:
}
注意:如果没有break,程序就会一直执行下去.
注意:if while do/while for {}可以不写,但是这些的控制流语句有效输出范围只有离它最近的一条语句.
十.for循环
1.js中流程控制语句:条件分支,循环语句
2.for(var i=1 ; i<=n ; i++){
console.log(i);
}
注意:要在循环语句中写循环变量,才可循环输出.
3.var sum = 1; //累乘器，累乘器的初值是1; var sum = 0; //累加器(在for循环外面写,否则 会错误)
4.案例
a.求解1-100能被3整除的所有数字的和.
<script>
var sum = 0;(定义变量保存和)
//遍历1-100的所有整数
for(i=1 ; i<=100 ; i++){
//判断是否能被3整除
if(i%3==0){
//求和
sum+=i;
}
}
console.log(sum);
</script>
b.
<script>
// 遍历条件中的年份
for(i=2000 ; i<=2100 ;i++){
//判断是否是闰年
if(i%4==0 && i%100!=0 || i%400==0){
console.log(i)
}
}
</script>
注意:先注意书写的规范和逻辑顺序,最后打印应在for循环外;输出的位置.
c.更新循环变量也可以双向增减
<script>
//打印1-10之间的整数,顺序为10-1;
for(var i=10 ; 1>=1 ;i--){
console.log(i)
}
</script>
d.更新循环变量是一个赋值运算
<script>
//打印1,4,7,10--100,之间的数字
for(var i=1 ; i<=100 ; i+=3){
console.log(i)
}
</script>
e.for循环的嵌套
外层循环代表行,内层循环代表列
<script>
//需求打印*****(五行)
for(var i=1 ; i<=5 ;i++){
for(var j=1 ; i<=5 ; j++){
document.write("*")
}
document.write("<br>")
}
</script>
i=1
j=1 j=2 j=3 j=4 j=5
f.不规则的行和列计算(找规律)
*
**
行:i 列:j(j始终小于i)
<script>
for(var i=0 ; i<=3 ;i++){
for(var j=0 ; j<=i ;j++){
document.write("*")
}
document.write("<br>")
}
</script>
g.打印三行三列的表格
<script>
document.write("<table>")
for (var i = 0; i < 3; i++) {
document.write("<tr>")
document.write("</tr>")
}
document.write("</table>")
</script>
h.死循环
for( ;; ){}
while(ture){
}
i.终止循环语句
break:强制跳出当前循环(跳出后面循环变量的所有取值)
注意:在没有指明跳出具体哪个循环,就默认跳出当前循环;
contiune:终止本次循环,继续下次循环.
g.
for(var i = 1 ; i <= 10; i++){
console.log(i);
if(i == 5){
break; //找到了一个，就立即终止循环输出1,2,3,4
}
}
//换为continue;是不输出5;输出1,2,3,4,6,7,8,9,10
h.
<script>
wai:for(var i=1 ; i<=5 ;i++){
nai:for(var j=1 ; j<=5 ;j++){
if(j==3){
break; (break wai;)
}
document.write("*")
}
document.write("<br>")//每行结束换行
}
</script>
换成 continue时就输出一行,跳过了
;
十一.简单函数
概念:对一段代码进行封装,函数不会主动运行(需要手动调用),并且可以多次使用(方法,API,功能)
函数也是一种数据类型(引用数据类型),把函数赋值给一个变量是可行.
a.减少代码的冗余
b.方便后期对代码的维护
1.函数声明式
function 函数名(){
函数体
}
2.函数调用: 函数名()
注意:定义函数时,定义好的函数会自动提升位置,提升到scricp开始标签的开始位置
可以在任意位置调用.
<script>
function printHello(){
console.log("hello")
}
printHello();
</script>
3.函数表达式
var 变量 = function(){
函数体
}
注意: 没有名称的函数,变量名相当于函数名.
函数定义好后不会提升位置,只能在定义的函数之后使用.
4.函数名的命名规则
a.不能使用简单字符(如a,b,c)
b.遵循小驼峰规则
c.
var fun
fun=myFun
fun();
console.log(fun())
fun=null;语法错误,会调用失败因为null把它清空
十二.函数的作用域(案列)
<script>
var b=1;
// var count=0;写在这里,函数里面计数器的第二次不会清零;
var a = prompt(\'input\');
function yuege(num){
var c=1;
var count=0;//计数器放在函数中才会起到作用.
for(var i=1 ; i<=num ;i++){
if(num%i==0){
count++;
}
}
alert(count);
console.log(b);
// return count;
}
yuege(a);
yuege(9);
console.log(c);
// alert(yuege(a));
// alert(count);
//函数的作用域中,函数之外的不能调用函数里面的
//如果在函数外面要调用,就必须加return返回参数,才可以调用
//在函数中可以调用函数
</script>
十三.形参和实参
1.function 函数名(参数1,参数2,….,参数n){
函数体
}
函数名(参数1,参数2,….,参数n)
形参是一个变量,形参和实参是一一对应的关系
<script>
//打印任意行列的*的方法
function printstar(a,b){
for(var i=1 ; i<=a ;i++ ){
for(var j=1 ; j<=b ;j++){
document.write("*")
}
document.write("<br>")
}
}
printstar(4,4)
十四.玩转函数逻辑思维方法
a.确定函数名
b.确定参数个数.
c.简单实现任意两个数的和方法
d.封装函数:用形参代替实际函数
e.调用函数,测试是否正确
//打印任意两个数和的方法
function printSum(num1, num2) {
var sum = num1 + num2;
console.log(sum);
}
printSum(20,20);
f.带有返回值的函数
function 函数名(参数1,参数2,....,参数n){
return 函数执行后的结果
}
a.确定函数名
b.确定参数个数.
c.确定是否需要返回值，需要
d.简单实现功能
e.封装函数（首先形参代替实际数据 其次再用return替换输出）
注意: a:不管函数中有多少个返回值,函数执行遇到第一次return就结束;
b:但是在if的多条件判断中,每个else if下用return 对此并没有相互影响;
c:return后面可以没有返回数据(undifind)
十五.表格的封装
1.设计任意行数和列数表格的功能:
function table(row, col) {
d("<table>"); //d是引入的函数
//设置表格中的行
for (var i = 1; i <= row; i++) {
d("<tr>")
//设置表格中的列
for (var j = 1; j <= col; j++) {
//列开始
d("<td>")
//列结束
d("</td>")
}
//行结束
d("</tr>")
}
d("</table>")
}
table(3, 3);
十六.变量的作用域
作用范围不同:
a. 全局变量:在函数为外部定义的变量.
b.局部变量:在函数内部定义的变量.
作用范围:在整个脚本中可以使用
作用范围:只能在定义它的函数内使用
十七.递归函数
前提:
a.必须是一个函数
b.必须要有一个递归出口(对函数中的参数进行判断),参数需要满足一定条件才可调用函数.
<script>
/* let value = jiecheng(6)
function jiecheng(num){
if(1==num)
return 1;
return num * jiecheng(num -1)
} */
let jiecheng= (num)=>{return 1==num?1:num * jiecheng(num -1)}
console.log(jiecheng(6))
十八.闭包（工作中，面试基本会问的）
以下是产生闭包的几个例子（自我体会）:
1.function fn1() {
var name = \'iceman\';
function fn2() {
console.log(name);
}
fn2();
}
fn1();
2.function fn1() {
var name = \'iceman\';
function fn2() {
console.log(name);
}
return fn2;
}
var fn3 = fn1();
fn3();
十九.数组
1.var arr = new Array() //空数组
使用new只写了一个数字,表示的是数组长度
var arr = [ ];
arr[0] = \'1\'; //赋值(利用下标,其中可放任意值)
arr[" name "] = " " --->可以是字符串(不会改变长度,但是一些作用于数组元素的方法和属性不 能作用于它)
arr [arr1.length - 1] // 找元素的位置
for(i=0 ; i <arr.length ; i++)(++i, i+=)
for(i=arr.length-1; i>=0 ;i--)
arr[arr.length] = value (始终在最后添加元素)
2.数组最后一个元素后面不要添加 , (逗号)—>兼容性问·题导致下标不同
var arr=[ .... ]
var newArr = [arr.length+1]
newArr[0] = num
for(var i=0;i<arr.length;i++){
newArr[i+1]= arr[i]
}
arr = newArr
(从首位开始添加元素)
3.删除其中的某个元素
var arr = [1,2,5,3,8,9,7]
for(i=0 ; i<arr.length ;i++){
if(2<i){
arr[i-1]=arr[i]
}
}
arr.length = arr.length-1
console.log(arr)
4.查询数组中指定元素的下标
var arr = [\'s\', \'g\', \'d\', \'e\']
var index = myIndexOf(arr,\'g\')
console.log(index)
console.log(arr[index])
function myIndexOf(arr, str) {
index = -1;
for (i = 0; i < arr.length; i++) {
if(str==arr[i]){
index=i
return index
}
}
return -1; //找不到返回-1
}
注意:
a.数组下标从0开始计数 -1结束(不存在下标越界)
b.arr.length表示数组的长度(从1计数,长度可以任意增加)
c.数组先定义了长度值,给一个超过该长度的-1的元素赋值,那么这个数组长度会变长,新的越界元素下标加1,(访问一个越界元素并不会使长度增加)
d.可利用模板字符串 ${ }
5.多维数组
a.二维数组:在一维数组的元素中再嵌入一个一维数组.var arr1 = [ [1,2,3],[4,5,6,],[7,8,9] ]
访问5的方法:arr1[2][2] //利用下标arr1.lenth = 4; arr1[2].length; //长度arr1[0][1] = 10; 改值; //用下标改值
可以利用循环嵌套改值:
for(var i =0 ; i<arr1.length ;i++){
for(j=0 ; j<arr[i].length ,j++)
}
6.三维数组
利用循环遍历
for(var i =0 ; i<arr1.length ;i++){
for(j=0 ; j<arr[i].length ,j++){
for(z=0 ; z<arrji].length zj++){
str +=`${arr[i] [j] [z]}`
}
}
}
7.数组的常用方法
1.shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
unshift:将参数添加到原数组开头，并返回数组的长度
2.pop() 删除一个数组中的最后的一个元素
3.reverse() 颠倒数组中元素的顺序
4.splice() 添加/删除数组元素
5.slice() 浅拷贝数组的元素
6.indexOf()方法可返回数组中某个指定的元素位置,如果在数组中没找到指定元素则返回 -1
二十一.对象(简单描述)
1.var .... = new ....( )
var .... = new Object( )
var .... = { }
var ... = { (josn格式下)
"name" :.... , (每一行用逗号隔开)
}
必须用new 这个操作符，才能构造出对象
构造函数必须要按照大驼峰式命名规则，但凡是构造函数就要大写.
定义好对象后还可以在外层添加属性和方法.
2.构造函数内部原理
(构造函数构造函数跟函数结构上没有任何区别)
前提必须要加new，以下三步都是隐式的：
a.在函数体最前面隐式的加上var this = {} 空对象
b.执行 this.xxx = xxx;
c.隐式的返回return this
3.对象选择两种写法
var obj = {name:"小明",age:19, run:function(){
console.log(\'run...\')
}}
console.log( obj.name )
console.log( obj["name"] )
obj[\'run\']()
二十二.定时器
会被放入任务队列执行,只有当主程序执行完才执行,定时器不会阻塞主程序执行
setInterval(); //注意：setInterval(“func ( )”,1000);定时循环器1.setInerval(function () { },1000);定时器，意思是1000 毫秒执行一次这个函数
2.注意：setInterval( );是window 的方法，在全局上就算不写window. setInterval();他
也会上全局的GO 里面查找，所以不写window.也行。
每一个setInterval();都会返回一个一个数字，作为唯一的标识，有唯一标识就可以把
他清除掉（利用clearInerval 清除）
3.setTimeout(); //正真的定时器,隔了一段时间后再执行（起推迟作用），并且
只执行一次
例隔了1000 毫秒才执行，并且只执行一次
4.使用setTimeout模拟setInterval
setTimeout (function(){
// console.log(\'吓我一跳\')
setTimeout(arguments.callee,500)
},500)
5.setInterval( ) ;setTimeout ();clearInterval();clearTimeout();这四个都是全局对象，都是window 上的方法，内部函数this 指向window
6.注意I是全局变量
for(i=0 ; i<=10 ;i++){
setTimeout( function(){
console.log(i) //输出11个11 }, 0);
}
7.for循环中steTimeout的区别
for(var i=0 ;i<10 ;i++){
setTimeout(console.log(i),0);//0、1、2、3、4、5、6、7、8、9
}
for(var i=0;i<10;i++){
setTimeout(function(){
console.log(i);//连续的10个10
},0);
}
for(var i=0;i<10;i++){
setTimeout("console.log(i)",1000);//连续的10个10
}
二十三.json简单应用：
1.JSON 是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，
对象就是本地用的，json 是用来传输的）
将对象转化为字符串—–序列化
将字符串转化为对象—–反序列化
JSON.parse(); string — > jsonJSON.stringify(); json — > stringvar arr2 = JSON.parse(JSON.stringify(arr) )(数组备份)
例json 的属性名必须加双引号(传的是二进制文本)
.var obj = JSON.parse(\'{“hello” : “hello”}\’)