JavaScript知识点梳理

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JavaScript是一种面向对象的编程语言（可以在网页上实现复杂的功能交互等），属于解释型语言。
在客户端运行（写在DIV和CSS之间，辅助网页制作）
*在服务器端运行的是比如Node.js

（1）添加JavaScript的三种方法

内部的JS： //注意文件名是xxx.js，通常放在body的最后面，即前
内联JS：Click me //不推荐

（2）知识点

类型、变量、运算符、控制结构（if，for，switch，while语句）、对象、数组、函数、闭包

1.类型

Java Script中的数据类型分为6种，两类：简单数据类型和复杂数据类型。
简单数据类型包括 Number、Undefined、Null、Boolean 、String。
复杂数据类型是Object。

console.log(0.1 + 0.2);  //输出结果为0.30000000000000004
//*在js中不区分整数型和浮点数型，只要加了小数点都算浮点型。因此默认都算浮点数（双精度64位格式）
//使用数学运算时用到方法：Math打点，如Math.sin(3),Math.PI等

//字符串
console.log("hello".length);
console.log("hello".charAt(0));  //截取字符串指定位置字符，从0开始计数
console.log("hello,world".replace("hello", "night"));  //替换指定字符
console.log("hello,world".toUpperCase());  //让字符串变成大写
console.log("hello,world".toLowerCase());  //让字符串变成小写

//布尔：ture & false

2.变量

var name = "zhangsan";//新建变量
let name2 = "lisi";
console.log(name);

变量作用域：
var没有作用域，即使在ifelse语句里定义，一样可以被外部代码访问
而let与var的区别：let是有作用域的，语句块内let定义的变量无法被外部代码使用
——推荐使用let，尽量不要使用var

3.运算符

&&、||、！、++、–等

x += 5;
x = "3" + 4 + 5;//输出结果：345。在字符串后加数字，后续默认转化为字符串执行
x = 3 + 4 + "5";//输出结果：75。会先计算3+4，再同字符串相加
console.log(123 == "123");//输出结果：true。“==”因为有类型自动转换，最终比较的是“123”和“123”
console.log(123 === "123");//输出结果：false。“===”不会进行类型转换，直接将数字和字符进行对比
var allowed = age >= 18 ? "Yes" : "No";//三元运算符

4.控制结构

//if else
var name = "Simon";
if (name == "Simon") {
     
    console.log("Simon");
}
else if (name == "Jhon") {
     
    console.log("John");
}
else {
     
    console.log("Stranger");
}
//while、do while
var a = 19;
while(a==1){
     
}
do {
     
    a++;
    console.log(a);
} while (age == a)  //先运行一次do里的内容再进行判断
//for
for (let i = 0; i < 5; i++) {
     
    age++;
    console.log(age);
}
//switch case
switch (name) {
     
    case "Simon": console.log("Simon"); break;
    case "Jhon": console.log("Jhon"); break;
    default: console.log("Stranger"); break;
}

5.对象object

var obj = new Object();
var obj2 = {
     };  //两种声明方法
obj = {
     
    oname: Simon,
    oage: 20,
    omail: "[email protected]",
    contact: {
     
        phone: "123456",
        telegram: "@Simon"
    }
}
console.log(obj.contact.phone);
console.log(obj["contact"]["phone"]);//两种应用方法都可
obj.contact.wechat = "abcd";//新增wechat属性

6.数组

var a = new Array();
var b = {
     };  //两种声明方法

a[0] = "Simon";  //通过[]访问数组元素，给数组赋值。
a[1] = "Jhon";  
a[4] = "Moby";  //未被赋值的元素如a[2]，访问时是undefined状态（此时数组length为5，empty属性元素为2）

b = ["Simon", "Jhon", "Moby"];  //第2种赋值方法，此时数组length为3，无empty

b.push("Json");  //追加数组元素
b.unshift("Ruby");  //在数组开头插入元素
b.pop();  //删除末尾元素  
b.shift();  //删除头元素
b.reverse();  //倒序排列数组

//数组遍历
//for和for in区别：for会访问到a[]内undefine的元素输出，for in不会。
for (let i = 0; i < b.length; i++) {
     
    console.log(a[i]);
}
for (let i in b) {
     
    console.log(a[i]);
}

7.函数

let m = 1;
function add(x) {
     
    m += x;
}
add(16);  //传参，执行方法

//传入任意长度的参数，进行求和并输出。arguments代表传入的参，是个任意长度的集合
function getSum() {
       
    let sum = 0;
    for (let i = 0, j = arguments.length; i < j; i++){
       
        sum += arguments[i];
    }
    return sum;
}
let sum = getSum(1, 2, 3, 4, 5, 6, 7, 8, 9);

8.闭包

//返回的不是值而是函数。调用后返回一个函数，等待下次传入参数再得出结果。
function makeAdder(a) {
     
    return function (b) {
     
        return a + b;
    };
}
var x = makeAdder(5);  //传入a，此时x是一个方法，相当于return function (b) {return a + b;};的部分
var s=x(6);

9.foreach

10.回调函数

我的理解是这样的，一个复杂的functionC一般会由多个更简单的function组成，而这些简单fanction之间的关系可能是这样的：一个functionA能够表达的前提 是以另一个functionB的完成为基础。那么functionB就叫回调函数，functionA叫高阶函数，functionC叫组合函数。for example:functionC:穿新衣服参加婚礼，functionB：买新衣服&&有人举行婚礼 functionA:参加婚礼。functionB通过返回新衣服和婚礼，来提供fuctionA行动的前提。所以：functionB是functionA的回调函数。）