JavaScript Notes

JavaScript Notes

一、JavaScript概念

1. JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
2. JavaScript 由三大部分组成：ECMAScript(js核心)+DOM+BOM

二、变量

1. 概念：内存中专门存储数据的空间
2. 变量的使用：
   1. 声明变量 var = 变量名
   2. 命名规范：不能用大写、要用英文，不能用符号除了下划线，不能以数字开头和纯数字，不能加空格，要见名知意
   3. 初始化：
      js的等于号(=)是赋值，等号右边的数据（可以直接是一个数据或者运算结果是一个数据也行）存放于等号左边的变量里面
      使用变量名就等于使用变量里面的数据
      变量是允许更改的
      ⚠️：如果控制台报错，说明你的程序肯定有错，控制台不报错门不一定写的没错

var data=123;
    data=123+1;（重新赋值不需要声明了）
    数据如果直接使用不要存，暂时不使用就存储起来
var a=b=2  变量的声明是从右往左读的

三、输出方式

1. console.log()在控制台输出，用作调试
2. alert() 弹出窗口，中断网页的运行，做调试
3. document.write() 在页面输出，没啥用

四、JavaScript里面的数据类型

1. 原始（基本）数据类型：数据保存在变量本地，保存在栈中
   1.1 number（数字类型）
   1.2 string（“字符串”）
   1.3 boolean（布尔值）
   1.4 undefined（未定义）
   1.5 null（空）

2. 引用数据类型：数据不保存在变量本地，保存在堆中
   2.1 array（数组）
   2.2 object （函数）

五、JavaScript里面的隐式类型转换

1. 字符串和数字类一起运算，那么数字会自动转为string类型
2. 字符串和布尔一起运算，那么布尔会自动转为string类型
3. 字符串和undefined一起运算，那么undefined会自动转为string类型
4. 当数字和布尔一起运算时，布尔会自动转为number，true=1，false=0

六、运算符

1. 程序运算的符号
   算术运算符：+(加） -（减） *（乘） /（除以） %（取余）++（自增） --（自减）
   i++单独使用时，前后都一样
   i++在表达式中：++i先+1，再参与表达式，i++，先用旧值参与表达式，表达式结束后再+1
2. 关系运算符：> 、< 、>= 、<= 、==、!=、 = = =、!= =
3. 逻辑运算符： &&、||、 !（与或非）
4. 赋值运算符： =、 += 、-=、 *=、 /=、 %=
5. 字符串运算符： +
6. 特殊运算符: typeof(数据类型检测)
7. 三目运算符 ：条件？条件成立时的值：条件不成立时候的值
   三目运算符多重判断: 条件？条件成立时的值:(表达式)

3.
var a=1
var b=2
var c=3
console.log(b>a&&c>a)
7. 
var msg=grade<60?"不及格“:(grade<80?"及格":(grade<90?"良好“:"优秀")）

七、if判断语句

if语句可以多重条件判断

 if (条件){
        条件1成立的时候执行的代码
    }else if(条件2){
        条件2成立的时候执行的代码
    }else {
        条件不成立的时候执行的代码
    }

⚠️：条件判断里面只有六种情况（ false 、0、 undefined 、null、 nan 、“ ”）算false 其他全是true

八、函数(方法)

1. 概念：封装执行一项专门任务的代码段
2. 语法： function 方法名（参数）{做什么} 方法是不调用不执行的
3. 方法内独有的变量，接受传入的数据，在方法内处理
   形参：（形式上的参数）函数定义时传入的参数
   实参：（实际上的参数）函数调用时传入的参数
   ⚠️：如果函数定义了形参，那么函数调用的时候必须传实参
4. 函数声明提升：function声明的函数会自动提升到最顶部
5. 变量提前：变量声明提前，赋值不提前
6. 函数默认是没有结果的，如果你需要结果的话，在函数内加return关键字 return后面跟你想要的数据
   return的本意是退出函数的运行

function grade(形参){
        if(gra<60){
            alert("不及格“)
        }else if(gra<80){
            alert("及格“)
        }else if(gra<90){
            alert("良好“)
        }else {
            alert("优秀“)
        }
    }
    grade（实参）

九、作用域

1. 概念：一个变量可用的范围
2. 全局作用域：除了函数内，都是
3. 局部作用域：函数内
4. 全局变量：在全局作用域内声明的变量（客厅里的东西）
5. 局部变量：在局部作用域内声明的变量（卧室里的东西）
6. 全局作用域不能访问局部，局部作用域可以访问全局
7. 局部变量可以改变全局变量
8. 对于未声明的变量直接赋值，那么js会在全局自动声明
9. 函数作用域只有在函数调用的时候菜创建的，函数调用之后立即销毁。

        var a=1
        function fn(){
            a=2
        }
        fn()
        console.log(a)

十、闭包

1. 概念：用来解决全局污染的，用来保护变量的，里面的函数使用了外面函数定义的局部变量，就是解决作用域的问题(结构：函数套函数)。
2. 工作中增添变量时可能重复使用变量名，打乱程序代码。
3. 这时候解决变量在全局变量的问题就把变量放入局部变量里。
4. 函数套函数
   弊端：内存泄漏
   性能：

 计步器：
    function num(){
        var n=0
        function add(){
             return n++
        }
        return add
        }
    console.log(num())

十一、循环结构

1. 概念：程序反复执行同一套代码
2. 循环三要素：
   1、循环条件：循环继续运行的条件
   2、循环变量：循环中做判断的量，循环变量一定是向着循环退出的趋势变化
   3、循环体：循环做什么事情
3. while 循环
   while(条件){做什么事情}

    var n=5
    while(n<10){
        console.log("我执行一次“)；
        n++；
    }

4. for 循环

   for(var i=0;i<10;i++){
   console.log("我执行一次“)；
   }

十二、数组 array

1. 概念：相当于多个变量的集合，如果要访问数组中的某一个值，用下标访问，0开始
2. 数组是没有任何数据类型的限制
3. 数组遍历：for循环
4. 封装函数

 var arr=[数据1，数据2，数据3]
 var names=[“1”，“2”，“3”]；
    console.log(names[0])
    //下标查找元素

十三、对象 object

1. 概念：相当于多个变量（key/value）（键值对）的集合 ，没有任何类型限制
2. 访问对象的值：对象名.属性名
3. 更改对象的值，直接更改：var object=？
4. 对象的属性名一定是字符串
5. js里面一切皆对象
6. 如果希望属性名为变量，那么要在属性名外面套[ ]
7. 函数（方法）是可以作为对象的属性，方法名就当作属性值，方法当作属性值
8. 面向对象的编程语言，面向过程编程
9. 对象的循环： for(var 属性名 in 你要遍历的对象){ }
10. 对象循环中，如果要取值的话， 对象名[key]
11. null：空对象指针，作用：主动释放对象

十四、内置对象

1. 概念：js里已经定义好的对象，有现成的属性和方法供我们使用
2. js里面一共有17个内置对象

   Array 方法

    1、length ：数组长度
    
    2、push（你要追加的元素）：向数组的结尾追加元素。或者通过下标增添arr[5]=6
    
    3、pop ()：删除数组最后以为元素
   
    4、unshift()：向数组的开头添加元素
   
    5、shift(): 删除数组的第一位元素
    
    6、reverse():反转数组
    
    7、splice(a,b) :用来删除，插入，替换元素的,从第a位参数开始，删除b个参数
    如果超过两个参数，那么后面几个参数就会作为新值插入进去。
    不删要插入的话，第二个参数给0（1，0，2）
    
    8、sort() ：不改装不适合数组排序，从小到大，只限制于纯数字
    根据unicode编码排序 大写字母65-90 小写字母97-122  数字 48-57
        var a=arr.sort(function(a,b){return a-b})
        
    9、map(function(item,index){ return 进行的操作}) 对数组的每一个元素进行处理，返回一个群新的数组。 item是位数，index是下标。
   
    ——————————————————————————以上9种方法都可以直接修改原数———————————————————————————————————————
    
    10、join(拼接符号“-”) ：把数组连接成字符串
    
    11、slice(star，end) ：截取子数组,原则含头不含尾，如果只给一个参数，从第一位开始截取到最后
    
    12、concat() ：连接多个数组的。数组1.concat（数组2，数组3...） 
   

2.
var arr[1,2,3,4,5];
    arr.push(6);
         console.log(arr)
6.
 var arr=["h","e","l","l","o"];
        arr.splice(1,3)
        console.log(arr)
7.
  //冒泡排序
            var arr=[65,27,139,67,8,97]
            function order(arr){
                //多次执行单次排序
                for(var m=o;m<(arr.length-1);m++){
                    //单次对数组排序，去最大的一个
                    for(var i=0;i<(arr.length-1-m);i++>){
                        if(arr[i]>arr[i+1]){
                            var tem=arr[i];
                            arr[i]=arr[i+1];
                            arr[i=1]=tem;
                        }
                    }
                }
                return arr
            }
            console.log(order(arr))

8.
 var arr=[1,2,3,4,5,6];
        arr=arr.map(function(item.index){
            return "星期"+item
        });
        console.log(arr)

9. 
var arr=["h","e","l","l","o"];
    arr=arr.join("-")
        console,log(arr) 
       

10.
var arr=["h","e","l","l","o"];
    arr=arr.slice(1,3);
        console.log(arr)

string 对象方法

1、length 长度

2、toUpperCase()转大写 toLowerCase()转小写   

3、indexOf(查找关键字) 找不到返回-1 true

4、split(“切割符”)把字符串切割成数组 唯一一种字符串转数组的方法

5、substring(截取的字符串通过下标)  含头不含尾，如果只给一个参数，那就截取到结尾

6、slice 同上

7、concat()

 去重方法：
        var arr=[0,20,1,1,1,2,61,2,2,1,3,2,2,2,333]
        for(var i=0;i<arr.length;i++>){
            for(var j=0;i<aee.length;i++>){
                if(var j=0;j<i;j++){
                    arr.splice(j,1)
                    i--
                }

            }
        }

number 方法

1、toFixed (按几位小数四舍五入取整数)
2、number()把字符串转成数字

十五、正则表达式

1. 定义：字符串中字符出现的规则 （定字符串规则）

2. 正则表达式都是写在双斜线里面的

3. 正则表达式的规则写在[]里面

4. []是用来放备选字符的，一个中括号只能代表一位字符的匹配规则

5. 正则表达式对于任意连续的区间，都可以以横线连接 [0-9]
   var reg=/[]\

6. 数量词
   {num}前面一位规则重复num次，如果想修饰多位，加小括号
   {min,}前面一位规则重复至少min次
   {min,max}前面一位规则重复至少min次,最多max次

7. 特殊数量词
   ？：可有可无，最多出现一次{0,1}
   *：可有可无，不限次数{0,}
   +:至少出现一次{1,}
   预定义字符集：在正则表达式里面有特殊含义的字符
   \d:代表了所有数字
   \w：代表了所有数字、字母、下划线
   \s: 代表空格
   . :代表任意字符

8. 对于正则表达式里面任意有特殊含义的字符，你希望以原文的形式去匹配的话，必须要加\转译[.]

9. 如果备选字符里面只有一个备选字符或者只有一个预定义字符集，中括号可以省略

10. 正则表达式.text(被检测的字符串)结果是布尔值
    ⚠️：text方法是部分匹配
    在备选字符里面加^代表除了…外都行
    在整条正则表达式的开头加^,代表以…开头，在整条正则表达式的结尾加$代表以…结尾

    邮箱：var reg=/^\w+@\w+([-]\w+)*(.[0-9a-zA-Z]+)$/

十六、Math 方法

1、Math.round() 四舍五入取整

2、Math.cell() 向上取整

3、Math.floor() 向下取整

4、Math.min()取一堆数中的最小值

5、Math.max()取一堆数中的最大值  参数接受的是参数序列，不接受数组
var arr=[9,10,12,13,14,3,4,6]
var num=Math.max(...arr)；// 配合es6
console.log(num)

6、Math.random()取0-1之间的随机数 
取任意min-max之间的随机数

7、Math.floor(Math.random()*（max-min）+min)
 //2000员工抽奖
var num=Math.floor(Math.random()*2001)
console.log("恭喜“+num+”号员工中奖“)

================================以下不常用

8、Math.pow("底数","幂")
9、Math.sqrt()平方根
10、Math.abs()取绝对值、

⚠️
string.fromCharCode(unicode编码)转换
数字：48-57
大写字母：65-90
小写字母：97-122

//随机验证码
    var code=[]；
    for(var i=48;i<=57;i++>){
        code.push(i)
    }
    for(var i=65;i<=90;i++>){
        code.push(i)
    }
    for(var i=97;i<=122;i++>){
        code.push(i)
    }
    var arr=[];
    for(var i=0;i<4;i++>){
        var index=Math.floor(Math.random()*62)
        var un=code[index];
        var cha=string.fromCharCode(un);
        arr.push(cha)
    }
       console.log(arr)

十七、Date 方法

1、封装了所有与日期相关的api

2.、new Date()得到的是当前事件对象 var date=new Date()
日期对象可以直接相减，得到的结果是间隔毫秒数

3、getDate() 返回几号（1-31）

4、getFullYear()返回哪一年

5、getMonth（）+1返回月

6、getDay（）0-6  星期几

7、getHours（）0-23    时

8、getMinutes（）0-59    分

9、getSeconds（）0-59    秒

10、getMilliseconds（）0-999  毫秒

11、getTime（）返回的是1970年1月1日之今的毫秒数
以上所有方法把get改成set就是设置时间的方法（除了getDay）

十八、Error：所有错误的父类型

1. SytaxError：语法错误
2. referenceError：找不到对象
3. TypeError:错误的使用了类型的方法
   …

十九、DOM

1. document object model

2. DOM操作：增删改查
   查：查找元素
   1、document.getElementBuId("") 通过ID选择器返回的是元素对象
   2、document.getElementsByClassName("") 返回的是数组
   3、document.getElementsByTagName("") 同过标签名返回的是数组
   4、document.getElementsByName("") 返回的是数组 表单专用
   5、document.querySelector(“css选择器”) 返回第一个元素对象
   6、document.querySelectorAll(“css选择器”) 返回数组

   改：通过对象的形式
   class代表类不可以直接修改class关键字 要写成className
   改属性;
   1、通过对象的形式
   2、setAttribute("属性名“，”属性值“)
   改内容：
   innerText：拿到的是元素开始标签到结束标签之间的文本内容。标签.innerText
   innerHTML: 拿到的是元素开始标签到结束标签之间的内容z(包含标签)

   删：
   删属性：removeAttribute(“属性名”)；
   删内容：innerHTML=“” ；
   删元素：父元素对象.removeChild(“要删除的子元素对象”)

   增：
   1、创建元素 createElement(“标签”)
   2、父元素对象.appendChild(“子元素对象”)
   var h = document.createElement(“h1”)
   var list1 = document.getElementById(“list1”)
   list1.appendChild(h)
   3、加属性和内容 参照第二步

---

未完待续…