朝花夕拾-JavaScript(核心)-学习笔记

朝花夕拾-JavaScript(核心)-学习笔记

朝花夕拾,一个老年人的学习笔记,不妥请指,感谢
学习《JavaScript全栈开发》凌杰 著

---

---

第一章 JavaScript简介

1.1 JavaScript的故事

1.1.1 JavaScript起源

1.1.2 JavaScript的标准化

1.2 JavaScript的组成和特性

1.2.1 组成结构

如前所述，JavaScript最初只是一门依附于Web浏览器的脚本语言，正是由于Node.js运行环境的出现，它才发展成了如今这样一门横跨Web开发领域的前后端、移动设备端以及桌面应用端的全能型编程语言。所以，在讨论JavaScript这门语言的时候，读者必须要了解该语言除了被ECMAScript标准所定义的核心部分，还有其所在的具体运行环境。

1.2.2 语言特性

1.动态化类型
2.多范式编程
3.单线程执行
4.事件驱动
5.异步编程

1.3 JavaScript的适用领域

1.web浏览器端的应用
2.轻量级的服务器应用
3.轻量级的桌面应用
4.富媒体式的应用

1.4 运行环境的搭建

分为web浏览器环境和Node.js运行环境两种

1.4.1 Node.js的安装

1.4.2 浏览器端运行环境

第2章 变量、表达式与语言

2.1 JavaScript程序

const name = ‘owlman’;
console.log(‘你好’,name);

2.2 为代码编写注释

// 注释内容的形式
/* 内容的形式

2.3 变量与操作符

2.3.1 变量的定义

1.变量的定义指令：var、let、const
2.变量的名称：每个变量都必须要有相应的变量名，通常一个或多个字母、数字、下划线和美元
3.变量的初始值
关键字：abstract 、arguments、boolean、break、byte、case、catch,char,class,const,continue,debugger,default,delete,do,double,else,enum,eval,export,extends,false,final,finally,float,for,function,goto,if,implements,import,in,instanceof,int,interface,let,long,native,new,null,package,private,protected,public,return,short,static,super,switch,synchronized,this,throw,throws,transient,true,try,typeof,var,void,voaltile,while,with,yield

2.3.2 变量的类型

2.3.2.1 数据类型

number
string
${[变量名]}
boolean
undefined
null

2.3.2.2 存储类型

原始类型
引用类型

2.3.3 变量的操作

2.3.3.1 基本操作符

１.位操作符

＆　位与　x=5&1 0000001
`     位或　｀x=5   0000101
~    取反　x = ~5  11111010
^    异或　x=5^1   00000100
<< 左移　00001010 
>> 右移　00000010

2.算术操作符

+　加法　x=y+2
-  减法　x=y-2
*  乘法　x=y*2
/  除法　x=y/2
%　余数
＋＋　前置　自增　x=++y y=6 x=6
＋＋　后置  自增 x=y++ y=6 x=5 
--   前置  自减  x=--y y=4 x=4
--   后置  自检  x=y-- y=4 x=5

3.逻辑操作符

& 逻辑与
` 逻辑或 
！逻辑非

4.关系操作符

== 等于
===恒等于
！= 不等于
！== 恒不等于
> 大于
< 小于
>= 大于或等于
<= 小于或等于

5.字符串操作

> '1' + 1
'11'
> 1 + '1'
'11'
> 1 + '' + 1
'11'
> 'a' > 'b'
false
> 'bat' > 'owl'
false
> 'cd' < 'dvd'
true
> '10' < '9'
true
> '123' == 123
true
> '123' === 123
false
> '123' === '123'
true

6.赋值操作符

表2-7　赋值操作符
操作符    使用示例    示例说明
=         x = y      将y的值赋给x，结果 x = 5
+=        x += y     将x + y的值赋给x，结果 x = 15
− =       x − = y    将x﹣y的值赋给x，结果 x = 5
*=        x *= y     将x*y的值赋给x，结果 x = 50
/=        x /= y     将x / y的值赋给x，结果 x = 2
%=        x %= y     将x % y的值赋给x，结果 x = 0

2.3.3.2 对象操作符

1.函数操作符 function操作符定义函数，（）操作符调用函数
2.数组操作符 []操作符用于索引数组元素，in操作符用于判断某元素是否存在数组中
3.实例操作符 .操作符用于调用对象实例的方法与属性，new操作符用于新建对象实例，delete用于删除对象实例
4.类型操作符 typeof操作符用于查看变量值的数据类型 instanceof 用于判断某个变量值是否是某个类型的实例

2.3.3.3 操作符优先级

单目操作符拥有最高的优先级，所以前置的++会被先执行
乘除法的优先级高于加减法，所以乘除法会被先于加减法执行

2.4 表达式与语句

2.4.1 表达式语句

2.4.2 复合语句

2.4.2.1 块语句

var CNY,exrate,usd;
CNY = 100;
exrate = 0.1404;
usd = CNY*exrate;
console.log(usd);
14.04

2.4.2.2 条件语句

单分支形式：
if
双分支形式
if-else
多分支形式
if-else if else if …else

let cny,usd;
const exrate = 0.14;
cny = 200;
if (cny > 0) {
    usd = cny * exrate;
    console.log('换算的美元币值：', usd);
} else {
    console.log('人民币的币值不能为负数！')
}
换算的美元币值： 28.000000000000004

switch()
case:
break;
default
如果程序没有找到任何匹配的预估值，就会执行由default标记的分支

2.4.2.3 循环语句

for语句

for (let i = 0; i < 10; i++) {
    console.log(i)
}

while语句
do-while语句

2.4.3 跳转语句

break
continue
return

第3章 函数和对象

3.1 封装的意义

封装有利于降低不同任务之间的耦合度，提高代码的可维护性
封装有利于提高代码被重复使用的考虑，提高编程的效率
封装有利于程序对数据的组织和管理，提升程序的执行效率
封装有助于创建用户自定义的新类型，拓展编程语言自身的表述能力

3.2 函数的运用

1.function
2.直接量形式：[定义变量关键字][变量名]=[函数直接量]
函数直接量关键词可以是var、let和const
3.匿名函数的定义语法出无需指定之外，其余都有function相似
4.构造函数形式

// function语句形式
function add_1(x, y) {
    return x + y;
}
// 直接量形式1
const add_2=function (x, y) {
    return x + y;
}

//直接量形式2
const add_3 = (x, y) => {
    return x + y;
};

// 构造函数形式
const add_4=new Function('x,y','return x+y');

var a = 4;
var b = 5;
var c = add_1(a,b);
console.log(c)
var d = add_2(a, b);
console.log(d);
var e = add_3(a, b);

3.2.2 函数的调用

function printArguments() {
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);

    }

}

printArguments('one', 'two', 'three');
printArguments('batman', 'owlman');

3.2.3 函数就是值

function printArguments() {
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);

    }

}

const caller = printArguments;
printArguments('one', 'two', 'three');
caller('batman','owlman');

3.2.4 内置函数

parseInt();
parseFloat();
isNaN();
isFinite();
eval();
encodeURI();
decodeURI();
encodeURIComponent();
decodeURIComponent();

3.3 对象初体验

3.3.1 对象的定义

3.3.2 对象的灵活性

3.4 数据结构对象

1.列表list
2.集合set
3.字典map（映射集）

3.4.1 列表类对象

直接量形式
构造函数形式

const arr = new Array('a', 'b', 'c', 'd', 'e');
for (let i = 0; i < arr.length; ++i) {
    console.log('这是i:', i);
    console.log('这是arr[i]', arr[i]);
    console.log('-----------------');
}

const arr = new Array(1, 2, 3, 4, 5, 6);
for (let iter of arr) {
    console.log(iter);
}

push() 列表末端添加
pop() 列表末端删除
unshitf() 列表前端添加
shift() 列表前端删除
join() 按照实参指定的分隔符将列表中所有元素串联成一个字符串,如果没有实参,折磨人逗号为分隔符
sort() 按照调用方提供的回调函数实参对列表中的元素进行排序,该函数若返回负数则表示小于,返回0表示等于,返回正数则表示大于
reverse() 反转列表中元素的排列顺序
concat() 当前列表与其实参指定的一个或多个列表连接起来,并返回新的列表返回调用方
slice() 用于截取当前列表的某个由实参指定得子列表,调用方会用两个实参指定子列表的开始位置和结束位置,如果直接定一个位置,就截取从该位置开始至当前列表末端的所有部分,如果调用为负数,则实参指定得位置索引值为数组的长度减去该实参的绝对值
splice() 从当前列表中删除或替换由实参指定得子列表
toString(), 该方法所有元素以逗号为分隔符连接成一个字符串并返回,其功能与不带实参调用的join是相同的

const var lei的区别

// 使用arr对象实现堆栈
var stack = [];
for (let i = 0; i < 3; i++) {
    stack.push(i);
}
// 输出:0,1,2
console.log(stack.join());
while (stack.length) {
    // 逐行输出:2,1,0
    // 体现堆栈先进后出的特性
    console.log(stack.pop());
}
// 使用arr对象实现队列
let queue = [];
for (let i = 0; i < 6; i++) {
    queue.unshift(i);
}
// 输出:5,4,3
console.log(queue.join());
while (queue.length) {
    // 逐行输出:3,4,5
    // 体现队列"先进先出"的特性
    console.log(queue.pop);
}
// 其他列表操作
let list = [0, 1, 2].concat([5, 4, 3]);// 将两个列表合并成一个列表
console.log(list.join());// 输出:0,1,2,5,4,3
console.log(list.slice(2, 5));// 输出2,5,4
list.splice(0, 1, 6, 7, 8);// 将0删除,并在该位置插入6,7,8这三个元素
console.log(list.join());
list.push(10);
list.sort();// 按字典顺序排序
console.log(list.join());// 所以10拍在2之前
list.sort((x,y)=>
{
    return x - y;
})// 按数字大小排序
console.log(list.join());// 所以10排在最后
console.log(list.reverse());// 反转列表中元素的排列顺序

遍历操作符,自动遍历array对象,并逐一返回其中的元素

Array.from()方法
console.log(...[1, 2, 3]); //  输出:1,2,3
// 我们执行数组操作变得简单啦
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 深复制Array对象
arr1.push(...[5, 6, 7]); // 一次性追加多个元素
console.log(...arr1, ...arr2); //  合并列表
1 2 3
1 2 3 5 6 7 1 2 3

Array.from()方法,将其它类数组对象或集合类对象与字典类对象转换成Array对象
// 先定义一个类数组对象
const arr = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    lenth:3
};
// 将其转换成为真正的Array对象
console.log(Array.from(arr));
输出['a','b','c']

Array.of方法:将一组值转换成数组

var a = 4;
var b = a + 5;
var c = b - 2;
console.log(Array.of(a, b, c));
[ 4, 9, 7 ]

find()方法,查找Array对象中第一符合指定条件的元素,他接收一个函数类型的实参,用于指定匹配条件.

var arr3 = [1, 2, 3, 4, 5, 6].find(function (value) {
    return value > 3;
});
console.log(arr3);
4

findIndex()方法,与find()基本相同,他返回的被查找元素在数组中的索引值

var arr3 = [1, 2, 3, 4, 5, 6].findIndex(function (value) {
    return value > 3;
});
console.log(arr3)
3

3.4.2 集合类对象

1.set对象
只能通过其构造函数来创建,没有重复值,集合对象
[定义变量关键字][集合名] = new Set([构造实参])

// 使用现有的Array对象来构造函数
let arr = [1, 2, 3, 4, 3, 4, 5];
let iset = new Set(arr);
// 使用Array对象的直接量来构造Set对象
let mset = new Set([1, 2, 2, 3, 4, 5]);
console.log(iset);
console.log(mset);
Set(5) { 1, 2, 3, 4, 5 }
Set(5) { 1, 2, 3, 4, 5 }

add()方法 彺集合中添加元素,
delete()方法,删除集合中的元素
has(),判断某个元素是否存在于集合
clear(),清空集合中的所有元素
values(),该方法会以一个遍历器的形式返回集合中的所有元素
forEach(),该方法会遍历集合,使用时需要调用方指定一个回调函数的实参,用来执行循环操作

let mySet = new Set();
for (let i = 0; i < 5; i++) {
    mySet.add(i);// 添加5个元素
}
console.log(mySet.has(4));// 输出true
mySet.delete(4);//删除
console.log(mySet.has(4));// 输出false
mySet.forEach(value => {
    console.log(value);// 逐行输出0,1,2,3
});
console.log(mySet.values());// 输出[Set Iterator] { 0, 1, 2, 3 }
true
false
0
1
2
3
[Set Iterator] { 0, 1, 2, 3 }

2.WeakSet对象
弱化版的Set对象,不同之处
Weakset只能存储对象类型的引用,不能存储基本数据类型的值

3.4.3 字典类对象

1.map对象:只能通过构造函数来创建,

// 使用现有的二维Array对象来构造Map对象
let arr2 = [[1, 'sss'], [2, 'rrr'], [3, 'ttt'], [4, 'uuu']];
let imap = new Map(arr2);
// 使用二维Array对象的直接量来构造Map对象
let mmap = [[1, 'sss'], [2, 'rrr'], [3, 'ttt'], [4, 'uuu']];
console.log(imap);
console.log(mmap);
Map(4) { 1 => 'sss', 2 => 'rrr', 3 => 'ttt', 4 => 'uuu' }
[ [ 1, 'sss' ], [ 2, 'rrr' ], [ 3, 'ttt' ], [ 4, 'uuu' ] ]

get()方法,用于根据指定的"键"来获取对应的值
set()方法,用于根据指定的"键"来修改对应的值
has()方法,用于判断指定的"键"是否存在于字典中
delete()方法,根据指定的"键"来删除字典中的键/值对
clear()方法,清空集合中所有的键/值对
keys()方法,会以一个遍历器的形式返回字典中所有的"键"
values()方法,会以一个遍历器的形式返回字典中所有的"值"
entires()方法,会以一个遍历器的形式返回字典中所有的键值对
forEach()方法,用于遍历字典,使用时需要调用方指定一个回调函数的实参,用以执行循环操作.

// Map对象操作
var mp = new Map([[1001, '张三']]);
var names = ['李四', '王五', '赵六'];
var num = 1001;
for (let name of names) {
    num++;
    mp.set(num, name);// 创建电话簿
}
console.log(mp.get(num));// 查看最后加入的人名
console.log(mp.has(num));// 输出 true
mp.delete(num);
console.log(mp.has(num));// 输出 false
for (let key of mp.keys()) {
    console.log(key);// 逐行输出电话簿中所有人名
}
for (let value   of mp.values()) {
    console.log(value);
}
for (let [key,value] of mp.entries()) {
    console.log(key+':'+value);
}
mp.forEach((value, key) => {
    console.log(key + '=>' + value);
});
赵六
true
false
1001
1002
1003
张三
李四
王五
1001:张三
1002:李四
1003:王五
1001=>张三
1002=>李四
1003=>王五

第4章 面向对象编程

4.1 面向对象

4.1.1 接口设计与实现

1.编程规范约束
2.局部变量方案

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    printCoords() {
        console.log('坐标：' + this.x + ',' + this.y);
    }
}

const p = new Point(5, 5);
p.printCoords();
p.y = -10;
p.printCoords();

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    printCoords() {
        console.log('坐标：' + this.x + ',' + this.y);
    }

    updateCoords = function (x, y) {
        this.x = x;
        this.y = y;
    };
}

const p = new Point(5, 5);
p.printCoords();
p.updateCoords(10, 10);
p.printCoords();
坐标：5,5
坐标：10,10

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    printCoords() {
        console.log('坐标：' + this.x + ',' + this.y);
    }

    updateCoords = function (x, y) {
        if ((x < 0) || (y < 0)) {
            console.log('坐标不能为负数');
            return false;
        }
        this.x = x;
        this.y = y;
    };

    getX = function () {
        return this.x;
    };
    getY = function () {
        return this.y;
    };
}

const p = new Point(5, 5);
p.printCoords();
p.updateCoords(10, 10);
p.printCoords();
console.log(p.getX(), p.getY());

4.1.2 实用类继承语法

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    printCoords() {
        console.log('坐标：' + this.x + ',' + this.y);
    }

    updateCoords = function (x, y) {
        if ((x < 0) || (y < 0)) {
            console.log('坐标不能为负数');
            return false;
        }
        this.x = x;
        this.y = y;
    };

    getX = function () {
        return this.x;
    };
    getY = function () {
        return this.y;
    };
}

class colorPoint extends Point {
    constructor(x, y, color) {
        super(x,y);
        this.color = color;
    }

    updateColor(color) {
        this.color = color;
    }

    printCoords() {
        super.printCoords();
        console.log(this.color);
    }

}

const p = new colorPoint(5, 5,'red');
p.printCoords();
p.updateCoords(10, 10);
p.updateColor('绿');
p.printCoords();
console.log();
坐标：5,5
red
坐标：10,10
绿

4.2 深度探索对象

4.2.1 使用原型对象

function Hero(name) {
    this.name = name;
}

let hero_1 = new Hero('hulu');
let hero_2 = new Hero('rens');

console.log(hero_1);
console.log('----------')
console.log(Object.getPrototypeOf(hero_1));
console.log('----------')
console.log(hero_2);
console.log('----------')
console.log(Object.getPrototypeOf(hero_2));\
Hero { name: 'hulu' }
----------
{}
----------
Hero { name: 'rens' }
----------

4.2.2 再探对象属性

4.2.3 理解object对象

4.2.3.1 实例方法

4.2.3.2 静态方法

4.3 原型继承机制

4.3.1 理解原型链

4.3.2 理解语法糖

第五章 异步编程

5.1 何为异步编程

5.2 异步实现方案

5.2.1 事件驱动

const http = require('http');
const server = http.createServer();

server.on('request', function (req, res) {
    res.end('<h1>你好,node.js</h1>')
});

server.listen(8080, function () {
    console.log('请访问http://localhost:8080');
});

5.2.2 回调函数

5.3 异步流程控制

for (let i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log('异步操作', i);
    },
    Math.random()*1000);
}
异步操作 3
异步操作 0
异步操作 1
异步操作 2
异步操作 9
异步操作 7
异步操作 5
异步操作 6
异步操作 4
异步操作 8

5.3.1 回调嵌套

setTimeout(function () {
    let name = 'owlman';
    setTimeout(function () {
        console.log('Hello', name);
    },1000);
},1000);
Hello owlman

5.3.2 异步封装

5.3.2.1 借助第三方库

5.3.2.2 promise对象

5.3.3 专用语法

5.3.3.1 使用async/await语法

5.3.3.2 Generator函数