Table of Contents generated with DocToc

1、JS 简介

1.1、什么是JS

JavaScript 是种经量级的脚本语言,也是一种嵌入式 (embedded) 语言,是一种面向对象模型语言,简称 JS

1.2、如何实现 JS 并运行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <!-- JS 外部 -->
    <script src="./hello.js"></script>
    <title>Document</title>
</head>


<body>
    <!-- JS 行内 -->
    <input type="button" value="按钮" onclick="alert(1233)" />

    <input type="button" value="按钮" onclick="msg()" />

    <!-- JS 的嵌入 -->
    <script>
        var a = 2;
        var b = "2";
        console.log(a == b) //true   只比较值不比较数据类型
        console.log(b === a) //false 比较值和数值类型
    </script>
</body>

</html>

function msg(){
    alert("Hello world")
}

1.3、变量的声明

var a = 100

2、JS 的数据类型

2.1、JS 的数据类型

Number、Boolen、String、undefined、null、Object

2.2、JS 类型的判断

表达式 typeof(xx)
变量 typeof xx

2.3 、数据类型的转换

2.3.1、转化为 String

xx.toString()
String(xx)

2.3.2、转化为 Number

c = Number(＂c＂)
var c = Number(＂h34＂);  //NaN
var d = Number(null);  // 0
var d = Number(underfind); //NaN

console.log(parseInt("")) //NaN
console.log(parseInt(" ")) //NaN
console.log(parseInt("1.23df")) //1
console.log(parseInt("1.7")) //1
console.log(parseInt(null)) //NaN
console.log(parseInt(undefined)) //NaN

var a = parseFloat(＂1.23df＂);  //1.23
var b = parseFloat(＂1.3.4.5＂); //1.3
var c = parseFloat(＂h34＂); //NaN
var d = parseFloat(unll);  //NaN
var d = parseFloat(underfind); //NaN

2.3、注释

单行注释 //
多行注释 /* */

3、操作符和运算符

19222327-c4b49067133c4555.jpeg

3.1、算数运算符 + - * / %

3.2、逻辑运算符

逻辑运算符又称为布尔运算符，即求两个值是真还是假，或者取反
优先级先运行&& 再运行||

<script>
    var a = 1;
    var b = 2;
    var c  = 0;

    //在 JS 中，逻辑运算的结果决定于子表达式的值,于短路比较相似
    console.log(a || b) //1
    console.log(b || a) //2
    console.log(a && b) //2
    console.log(b && a) //1
</script>

3.3、比较运算符

> 大于；
< 小于；
>= 大于等于；
<= 小于等于；
== 判断两个值是否相等；
!= 两个值不相等；
=== 全等于；
!== 不全等

3.4、赋值运算符 = += -= /= *= %=

3.5、运算符的优先级

1. ()优先级最高
2.一元运算符(数字前面的) ++ -- !
3.算数运算符（与数学中的运算先后一致）先* / % 后+ -
4.关系运算符 > >= < <=
5.相等运算符 == != === !==
6.逻辑运算符先&& 后||
7.赋值运算符 =

4、语句

if
switch case
while
do while
break
continue

5、数组

5.1、数组的简介

将多个元素（通常是同一类型）按一定顺序排列放到一个集合，这个集合称为数组

5.2、数组的创建

var a1 = [];//空数组
var a2 = [1,”d”];
var a3 = new Array()
var a4 = new Array(1,2,3，"45");
var a5 =[6,7,a1,”t”] //二维数组
var a6 =[6,7,a5,”t”] //三维数组

6、函数

6.1、匿名函数和自调用函数

匿名函数，函数没有名字
自调用的匿名函数，立即执行主要是用来控制作用域，防止全局变量的污染
函数也是一种数据类型，可以作为参数，也就是高级函数 typeof method = function

function msg(){
    alert("Hello world")
}

function methodName(){} //关键字声明

var method= function(){
} // 表达式声明 也就是匿名函数

function methodName(size) //参数

function methodName(start,end) //参数

function sum(num1,num2){ //函数的返回值
    return num1 + num2
}

var sum = sum(1,2) //函数的调用

var txt = methodName() //如果函数中没有返回值 就是 undefined

method() 匿名函数的调用

(function(){
    alert()
})() //立即执行函数 或自动的匿名函数


function f1(){
    console.log(222)
}

function f2(k){ //高级函数的调用
    k()
}

f2(f1)


function f3(){
    a = 10
    var f4 = function(){
        alert(a)
    }
    return f4
}
f3()() //多个括号调用函数 闭包

6.1 作用域和变量

全部变量和局部变量

<script>
    var a1 =  100  // 全局作用域
    function method(){
        var a2 = 10 //局部作用域
    }
</script>

变量提升
因为代码的执行分为两个阶段
- 解析(编译)阶段 :语法检查、变量以及函数的声明
- 运行阶段：变量的赋值和代码的执行

<script>
    console.log(a) //undefine
    var a =  100 
</script>

<script>
    console.log(a) // Uncaught ReferenceError: a is not defined at xx.html
    // var a =  100  
</script>

var a=12;

function abc(){
alert(a); //undefine
var a =10；
}

abc();

console.log(a);
function a(){
console.log(‘aaaa’)

}

var a = 1;
console.log(a)
// 如果变量和函数同名了，必须注意，函数的声明会替换变量声明
// 不管函数在变量的前面还是后面，赋值总会把前面的声明替换。

7、对象

7.1 对象的声明和使用

<script>
    // 字面量声明对象
    var obj = {};
    var obj2 = {
         name: '张三', age: 12, height: 190, run: function () {
            console.log("I'm running")
        }
    };

    //实例化声明变量
    var obj3 = new Object();

    // 实例化自定义函数方式声明变量
    function Fun() {

    }
    var f = new Fun();
</script>

7.2 this 的使用

运行在那个对象下就指向那个对象

var obj2 = {
    name: '张三', age: 12, height: 190, run: function () {
        console.log("I'm running")
    },
    
    showAge:function(){
        // console.log("I am " + age + " years old") // Uncaught ReferenceError: age is not defined
        console.log("I am " + this.age + " years old")
    }
};
obj2.showAge()

function method(){
    console.log(this) //这个 this 是最顶层的 Windows 对象
}

7.3 对象的遍历和删除

<script>
    var obj = {
        name: '张三', age: 12, height: 190, run: function () {
            console.log("I'm running")
        },
    }
    
    for(item in obj){
        console.log(obj[item])
    }
</script>

<script>
   var obj = {name:'张三',age:15,sex:"男"}
   console.log(obj) // {name: '张三', age: 15, sex: '男'}
   
   delete obj.age // age 属性的删除
   console.log(obj) // {name: '张三', sex: '男'}
</script>

<script>
   var arr = [1,2,3,4,5,6,7]
   for(index in arr){
       console.log(arr[index])
   }
</script>

7.4 包装对象

原始类型：数值、字符串、布尔类型
原始值可以自动当做对象来调用，可以调用各种属性以及方法
如果包装队形使用完成，会立即销毁

7.5 内置标准库

Math 对象对数据的操作取绝对值、随机数等
获取 n - m 之间的值 Math.random * (m - n) + n
日期对象 Data
数组对象

JS