刚开始学习Javascript的一些基础小知识，从入门到崩溃，希望对大家有帮助（只适合初学者）

一.简介

1.JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，js不能操作文件。

重要的开始啦！！！！！

引入javascript：

行间js

<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。

1. 看看这道题：

 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

1. 对于以下，有

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

1. var boo = new Boolean('false') //true
2. var boo = Boolean(NaN)
3. toString() (该方法返回对象的字符串)

new string() string()
4. 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 是用来传输的）

将对象转化为字符串-----序列化

将字符串转化为对象-----反序列化

2、JSON.parse(); string — > json

3、JSON.stringify(); json — > string

var arr2 = JSON.parse(JSON.stringify(arr) )(数组备份)

例json 的属性名必须加双引号(传的是二进制文本)

4.var obj = JSON.parse('{"hello" : "hello"}')