《JavaScript权威指南》——JavaScript核心

前言

这本由David Flanagan著作，并由淘宝前端团队译的《JavaScript权威指南》，也就是我们俗称的“犀牛书”，算是JS界公认的“圣经”了。本书较厚（有1004页），读起来颇费功夫，但作为JavaScript（下文简称：JS）相关从业者，我还是鼎力推荐，一定要读完这本经久不息，好评如潮的JS“圣经”（如果您有耐心的读完，觉得还不错的，博客最后附有购买本书的优惠券，可自行领取）。

说完本书重要性，下面重点介绍一下本书作者写书的逻辑性，简单来说本书分为四部分，第一部分：JS核心；第二部分：客户端JS；第三部分：JS核心参考和第一部分相呼应，是JS核心的重点归纳和讲解，也是第一部分的总结和升华部分，所以建议看完第一部分之后可以直接去看第三部分；第四部分：客户端JS参考，和第三方的模式一样，也是第二部分的总结、提炼、讲解已经升华。

所以整体来说其实本书可以分为2部分，第一部分：js的核心；第二部分：客户端js；

js的核心讲的是js的最基础的逻辑、原理、方法、属性、以及使用；而客户端js和服务器端js，只是作为js语言的一种实践部分，是js语言的一种使用场景，然后在具体场景中一些细化的使用。而本文只是整理了第一部分：JS核心，结合我自己的理解，做一个总结和记录。

 

正文

一、JS的类型

按照数据类型划分：

　　原始类型：Number、String、Boolean、Null、Undefined、Symbol(ES6加入，它的实例唯一，且不可改变，不能使用关键“new”声明)；

　　对象类型：Object

扩展：普通的js对象是“命名值”的无序集合，js同样定义了一种特殊对象——数组（array），表示带编号的有序集合。

ES6新出了键控集合：Set和Map,Set集合值唯一，不会重复；Map存储的为键值对。

JS还定义了另一种特殊对象——函数。如果函数用new来初始化一个新建对象，我们称为构造函数（constructor），每个构造函数定义一类对象，除了数组（array）类和函数（Function）类之外，还有日期（Date）类、正则（RegExp）类、错误（Error）类都是js的核心类。

 

二、JS中的算术运算

算术运算符除了+、-、*、/、%（求余运算符，求整数后的余数）、还有更复杂的运算通过定义Math对象的函数和常量来实现

Math.abs(-10);      　　// => 10：绝对值
Math.ceil(0.6);  　　   // => 1.0：向上取整数
Math.floor(0.6);       // => 向下取整数
Math.round(0.6);       // =>:1.0：四舍五入
Math.random();         // => 0-1随机数
Math.max(1, 3, 5);     // => 返回最高值
Math.min(1, -3, 50);   // => 返回最低值
Math.pow(2, 3);        // => 8：2的3次方
Math.PI;         　　　　// => π：圆周率
Math.sin(3);           // => 3的正弦值
Math.sqrt(30);      　　// => 平方根
Math.tan(100);      　　// => 正切
Math.acos(10);      　　// => 反余弦值
Math.cos(100);      　　// => 余弦值
Math.exp(100);      　　// => e的100次幂

点击访问更多

 

三、string的slice用法

string的slice()用法，提取字符串的一部分，返回一个新字符，不改变原来字符串（和array.slice用法一致）。

var str1 = "hello world";
str1.slice(1, 4);   // "ell"：截取下标1到下标4，不包含最后一位
str1.slice(1);      //"ello world"：截取下标1以后的所有字符
str1.slice(-3); 　　 //"rld"：截取后三位

点击访问更多String类的方法

 

四、JS中的“假值”

undefined、null、0、-0、""、NaN 这6个可以转换成false的值，称作“假值”。

var exp1 = undefined;
if (exp1) {
console.log("真");
} else {
console.log("假");
}
//output:假

 

五、数字转换的方法（科学技术或四舍五入）

Number转换成字符串的场景提供了三种方法：

  • toFixed() => 根据小数点后指定位数将数字转化成字符串，会进行四舍五入；
  • toExponential() => 使用指数计数法将数字转换为字符串；
  • toPrecision() => 根据指定的有效字位数将数字转换成字符串；
var n = 123456.78;
n.toFixed(0);  　　　　 //output:123457
n.toFixed(1);  　　　　 //ouput:123456.8
n.toFixed(5);  　　　　 //output:123456.78000
n.toExponential(1);    //output:1.2e+5
n.toPrecision(4);      //output:1.2346e+5
n.toPrecision(7);      //output:123456.8
n.toPrecision(10);     //output:123456.7800

 

六、parseInt()的“高级”玩法

parseInt()可以接收第二个可选参数，这个参数指定了数字转换的基数，有效的取值范围是2-36.

parseInt("11", 5);    //6 => 1*5+1
parseInt("ff", 16);   //255 => 15*16+15
parseInt("077", 10);  //77 => 70*10+7

 

七、全局变量和"全局属性"的delete

js声明变量使用var和不用var的区别，大部分我们使用的时候都是一样的，例如：

var str1 = "hello";
str2 = "world!";
console.log("%s %s", str1, str2);
//output:hello world!

而在使用delete属性时，使用var的变量是不允许删除的，例如：

var str1 = "hello";
str2 = "world!";
this.str3 = "!!!";
delete str1;    //false
delete str2;    //true
delete str3;    //true

总结：使用var的变量，可以理解为全局变量，全局变量属性是不可编辑的，而不使用var的可以看做是声明了一个全局属性，等同于this.xxx=yyy，属性是可以编辑的，所以是可以delete的。

 

八、JS的局部变量提升和块级作用域

先来看代码执行的结果（也是一道经典的js面试题）：

var scope = "global";
function f() {
console.log(scope);
var scope = "local";
console.log(scope);
}
f();
console.log(scope);
//output: undefined、local、global

这是什么原因造成的？为什么不是global/local/global呢？因为es5没有块级作用域，局部变量被提升到最前了声明了，js解析器的机制造成的，上面的代码类似于下面这段代码：

var scope = "global";
function f() {
var scope; //只声明变量，变量前置
    console.log(scope);
scope = "local";
console.log(scope);
}
f();
console.log(scope);
//output: undefined、local、global

所以通常来说，在作用域里面变量声明的代码要放在代码的最顶部，这是一个非常不错的编程习惯，也可以避免一些不必要的问题。

 

九、特殊的Date类型转换

如果我告诉你typeof(new Date()+1)和typeof(new Date-1)的值不同你信吗？

下面来看具体代码：

var now = new Date();
typeof (now + 1);   　　//output:string
typeof (now - 1);   　　//output:number
now == now.toString(); //output:true

那上面的问题是怎么造成的，typeof(now+1)不应该是number类型吗？

原因分析：

　　“+” 有两种含义，一个是字符串连接，一个是加法。

　　类型转换的时候，默认先调用valueOf，然后才调用toString，而Date类型除外，所以对于new Date()的时候优先，调用的是toString()，而“+”操作是把他当成了字符串连接而不是数字相加。

　　“-”的时候，只有减法的含义，也就是说优先调用valuleOf，所以结果为number类

 

十、js的继承机制

继承机制：js是通过原型链实现继承的。简单实现如下：

function Animal(name) {
this.name = name || 'Animal';
this.sleep = function () {
console.log(this.name + '正在睡觉！');
}
}
Animal.prototype.eat = function (food) {
console.log(this.name + '正在吃：' + food);
};
function Cat() {
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true

更多的可以查看阮一峰老师的：Javascript继承机制的设计思想型

 

十一、Array的高级用法

1.slice和splice区别

虽然都是截取数组然而slice和splice的区别很大，接下来具体来看。

先说slice

slice定义：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.slice(1, 4);  　　//["banana", "cherry", "dates"]
array.slice(1);     　　//["banana", "cherry", "dates", "fig"]
array.slice(-2);    　　//["dates", "fig"]
console.log(array);     //["apple", "banana", "cherry", "dates", "fig"]
Array.prototype.slice(x,y); 第一位参数为截取开始下标，截取的时候包含此下标，第二位参数缺省参数，如果不填写，标识截取到数组的最后一位，如果填写了，标识截取到下标的位置，截取元素不包含最后一位，截取不改变原来数组。
splice部分
splice定义：方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
代码1： 
//方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2, 2); //从下标2开始截取，截取2个
console.log(array); //["apple", "banana", "fig"]

代码2：

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2); //从下标2开始截取，截取到最后
console.log(array); //["apple", "banana"]

代码3：

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2, 2, "plum", "orange"); //截取下标2到后面2个元素替换成"plum", "orange"
console.log(array); //["apple", "banana", "plum", "orange", "fig"]

小技巧：可以使用var newArray = array.splice();实现数组复制。

 

2.length的另一种用法

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.length = 3; //["apple", "banana", "cherry"]
array.length = 0; //[] => 删除所有元素

 

3.reduce()

定义：方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

var array = [10, 5, 20, 15];
var sum = array.reduce(function (x, y) { return x + y }, 0);    　　 //求和
var product = array.reduce(function (x, y) { return x * y }, 0);    //求积
var max = array.reduce(function (x, y) { return (x > y) ? x : y }); //求最大值

 

4.every()和some()

定义：数组的逻辑判断，对每一个元素进行判断，返回true或者false.

every()每一个元素都要满足条件才会返回true，some()其中一项满足条件即会为true.

function fun(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(fun);  　　　　// false
[12, 5, 8, 1, 4].some(fun); 　　　　// true

[12, 5, 8, 1, 4].every(fun); 　　　// false
[12, 15, 18, 11, 14].every(fun);  // true

 

5.map()

定义：将调用数组的每一个元素传递给指定的函数，并返回一个新的数组，不会改变老数组。

var array = [1, 4, 9, 16];
var map = array.map(x => x * 2);    //[2, 8, 18, 32]

 

6.Arguments.callee

定义：当前正在执行的函数.

在匿名函数中使用Arguments.callee引用自身，以便实现递归。代码如下：

var fun = function (x) {
console.log(x);
if (x < 1) {
return 1;
}
return x + arguments.callee(x - 1);
}
fun(3);   //7 => 3+2+1+1

 

7.sort()排序规则的理解 

sort()是可以介绍一个匿名函数作为排序规则的，例如：

var array = [3, 9, 3, 12, 5, 8, 1, 4];
array.sort(function (a, b) { return a - b; }); //[1, 3, 3, 4, 5, 8, 9, 12]

理解：a-b得到一个值，而这个正常的值将按照数字的正常规则进行排序，也就是 负数=>0=>正数，所以理解a-b不能单纯的理解他为一个boolean值，而是根据a-b给数组一个排序规则，如果需要倒叙的话就用b-a.

点击访问更多Array基础操作方法 

 

十二、高阶函数

定义： 高阶函数就是操作函数的函数，它接受一个或多个作为参数，并返回一个新函数。

function sum(x, y, f) {
return f(x) + f(y);
}
console.log(sum(-5, 6, Math.abs));

 

十三、正则表达式字符

[...] 　　 方块内任意字符
[^...] 　  非方块内任意字符
\w 　　　　[a-zA-Z0-9]
\W 　　　　[^a-zA-Z0-9]
\d 　　　　[0-9]
\D 　　　　[^0-9]

点击访问更多

 

十四、解构赋值

let [x, y] = [1, 2];
[x, y] = [x + 1, y + 1];
[x, y] = [y, x];
console.log(x, y);  // 3 2

 

十五、闭包

“闭包”这个词刚开始开的时候就头皮发麻，感觉很“高大上”难以理解，其实掌握之后，发现也挺好用的，下面介绍一下我对于闭包的理解。

定义：闭包就是可以访问一个函数局部（私有）变量的方法。

var Cat = function () {
var name = "cat";
var age = 2;
this.getName = function () {
return name;
}
this.getAge = function () {
return age;
}
}
var cat = new Cat();
console.log(cat.name);      　　//undefined
console.log(cat.age);       　　//undefined
console.log(cat.getName());    //cat
console.log(cat.getAge());     //2

如上代码：利用闭包可以给用特权的方法访问私有属性，保证了私有变量不被修改和污染，当然根据实际需求可以设置通过方法修改私有属性也是可行的。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/546997.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

华为交换机如何通过tftp服务器上传下载文件

华为交换机如何通过tftp服务器上传下载文件

温馨提示：为了防止更新交换机配置文件操作失败，操作前交换机配置文件一定要做备份，可以通过copy vrpcfg.zip vrpcfg_backup.zip 工具/原料： windows电脑: Tftpd64 SecureCRT USB转串口，串口转RJ45 console线 2米网线 华为交换机S3700一台 方法/步骤： 1.准备材料，按照下…
阅读更多...
Maven排除项目中同名不同版本的jar

Maven排除项目中同名不同版本的jar

今天突然发现web项目打包后的exe居然有200M了&#xff0c;心想不应该有这么大的啊&#xff0c;于是检查了一番发现引用的jar有130个&#xff0c;仔细一瞅发现好多同名的但是不同版本的jar&#xff0c;比如说有commons-httpclient就有两个&#xff0c;3.0和3.1版本的。这样直接导…
阅读更多...
js节流函数和js防止重复提交的N种方法

js节流函数和js防止重复提交的N种方法

应用情景 经典使用情景&#xff1a;js的一些事件&#xff0c;比如&#xff1a;onresize、scroll、mousemove、mousehover等&#xff1b; 还比如&#xff1a;手抖、手误、服务器没有响应之前的重复点击&#xff1b; 这些都是没有意义的&#xff0c;重复的无效的操作&#xff…
阅读更多...
使用IPFS集群搭建创建私有IPFS网络

使用IPFS集群搭建创建私有IPFS网络

基本介绍 IPFS 网络分两类: 公有私有 对于大多数商用应用尤其是企业级解决方案而言&#xff0c;需要对自身数据有完全的控制&#xff0c;这种场合公有IPFS网络并不适用&#xff0c;搭建私有IPFS往往是这类应用的必要需求。 本文我们讲解创建一个私有 IPFS 网络的过程&#xf…
阅读更多...
华为交换机S3700-TELNET远程管理交换机配置

华为交换机S3700-TELNET远程管理交换机配置

组网需求： 1．PC 通过telnet 登陆交换机并对其进行管理（本演示以Ethernet0/0/1作为管理端口）； 2．仅密码认证方式； 3．只允许192.168.2.1的IP地址的PC TELNET 访问。 首先开启telnet服务 <huawei>system-view Enter system view, return user view with Ctrl+Z. […
阅读更多...
MongoDB基础介绍安装与使用

MongoDB基础介绍安装与使用

MongoDB已经日益成为流程和主流的数据库了&#xff0c;原因有两个&#xff1a;第一个就是技术优势&#xff0c;第二就是便利性&#xff0c;个人使用部署都很方便。 MongoDB的优缺点&#xff0c;以及使用场景 优点&#xff1a; 面向文档存储&#xff08;自由读高&#xff0c;…
阅读更多...
转载：MySQL数据库INSERT、UPDATE、DELETE以及REPLACE语句的用法详解

转载：MySQL数据库INSERT、UPDATE、DELETE以及REPLACE语句的用法详解

转自&#xff1a;http://www.jb51.net/article/39199.htm 本篇文章是对MySQL数据库INSERT、UPDATE、DELETE以及REPLACE语句的用法进行了详细的分析介绍&#xff0c;需要的朋友参考下MySQL数据库insert和update语句引:用于操作数据库的SQL一般分为两种&#xff0c;一种是查询语句…
阅读更多...
python调用cv2.findContours时报错：ValueError: not enough values to unpack (expected 3, got 2)

python调用cv2.findContours时报错：ValueError: not enough values to unpack (expected 3, got 2)

python调用cv2.findContours时报错&#xff1a;ValueError: not enough values to unpack (expected 3, got 2) OpenCV旧版&#xff0c;返回三个参数&#xff1a; im2, contours, hierarchy cv2.findContours(mask, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE) 要想返回三个参数…
阅读更多...
华为S5700交换机开启telnet远程指定IP登陆

华为S5700交换机开启telnet远程指定IP登陆

1,交换机开启Telnet服务 <Huawei>system-view Enter system view, return user view with Ctrl+Z. [Huawei]sysname S2[S2]telnet server enable //使能telnet服务。2.配置登陆IP地址 [S2]interface Vlanif 1 //配置IP地址 [S2
阅读更多...
一个好的技术团队应该怎么选择开发语言

一个好的技术团队应该怎么选择开发语言

在过去的三年时间了&#xff0c;作为曾经的研发部经理&#xff0c;我和我的技术总监始终在为一件事而努力着&#xff0c;那就是选择一门合适我们团队的技术语言。 我们研发团队一共有9个人&#xff0c;分为三个小组&#xff1a;移动手机组、后端接口组、web前端组&#xff0c;…
阅读更多...
优先级队列用的的数据结构

优先级队列用的的数据结构

2019独角兽企业重金招聘Python工程师标准>>> 优先级队列和队列没有本质的区别 只是 每次出队列的时候出队列中优先级最高的 这里假定数字越小&#xff0c;优先级越高 优先级队列 是不同于先进先出队列的另一种队列。每次从队列中取出的是具有最高优先权的元素。 通…
阅读更多...
L-BFGS算法/Broyden族/BFGS算法/阻尼牛顿法的Python实现代码

L-BFGS算法/Broyden族/BFGS算法/阻尼牛顿法的Python实现代码

下面定义了三个Python语言编写的函数&#xff1a;函数表达式fun&#xff0c;梯度向量gfun&#xff0c;和海森矩阵hess。这三个表达式在后面各个算法的实现中会用到。 # 函数表达式fun fun lambda x:100*(x[0]**2-x[1])**2 (x[0]-1)**2# 梯度向量 gfun gfun lambda x:np.arr…
阅读更多...
公网访问阿里云数据库MongoDB——填坑笔记

公网访问阿里云数据库MongoDB——填坑笔记

业务情景 两台服务器&#xff0c;一台阿里云ECS云服务器&#xff08;专用网络&#xff09;&#xff0c;另一台是阿里云数据库MongoDB&#xff0c;处于安全考虑MongoDB是不运行外网连接的&#xff0c;那接下来就看怎么实现公网访问。 看到上面红色的网络类型描述&#xff0c;有…
阅读更多...
华为S5700交换机开启telnet远程登陆配置（推荐）

华为S5700交换机开启telnet远程登陆配置（推荐）

实验目标： 电脑PC1经过S3700交换机，telnet远程登录到S5700交换机。 连接拓扑图如下：（测试时用实物测试） 一、配置S5700交换机。 1.交换机开启Telnet服务 <Huawei>system-view Enter system view, return user view with Ctrl+Z. [Huawei]sysname LSW1 [LSW1]
阅读更多...
2021最新Python量化A股投资必赚策略

2021最新Python量化A股投资必赚策略

一、板块信息&#xff1a; 1、每隔30分钟后台自动采集一个开盘啦的板块信息&#xff08;9:15开始到15:00是股票开市时间&#xff0c;如果15点以后已经采集过数据&#xff0c;就不需要重复采集&#xff0c;避免频繁采集被网站屏蔽&#xff09;。按照codelist.txt列表&#xff0…
阅读更多...
Ubuntu安装设置nginx和nohup常用操作

Ubuntu安装设置nginx和nohup常用操作

nginx安装 Ubuntu直接从常规源中安装 apt-get install nginx 安装的目录 配置文件&#xff1a;/etc/nginx/主程序文件&#xff1a;/usr/sbin/nginxWeb默认目录&#xff1a;/usr/share/nginx/http/日志目录&#xff1a;/var/log/nginx/ nginx常用命令 1、启动/停止nginx服务 1…
阅读更多...
crontab环境变量

crontab环境变量

为什么80%的码农都做不了架构师&#xff1f;>>> 设置了一个crontab30 0 * * * cd /home/work/user/huangbx/research/getfeature/data/current; sh resample.sh &>/dev/null$sh resample.sh是可以运行的$head -5 resample.sh##对事实数据进行采样set -xg_da…
阅读更多...
不同网段通过静态路由实现互通（强烈推荐）

不同网段通过静态路由实现互通（强烈推荐）

实验拓扑图如下&#xff1a; 只贴出PC1到S5700链路的配置代码&#xff01; 一、华为交换机S5700配置 1.新建VLAN66 <Huawei>system-view Enter system view, return user view with CtrlZ. [Huawei]sysname LSW4 [LSW4]vlan 66 //新建管理VLAN [LSW4-vlan66]quit [L…
阅读更多...
Hadoop 副本存储策略的源码修改和设置

Hadoop 副本存储策略的源码修改和设置

Table of Contents BlockPlacementPolicyHadoop 提供的 BlockPlacementPolicy 实现BlockPlacementPolicyDefault 源码阅读 首先处理favoredNodes三副本选择再到具体的选择源码阅读的几个注意修改HDFS默认的副本放置机制RackAwareness 机架感知 大多数的叫法都是副本放置策略&a…
阅读更多...
fabric.js和高级画板

fabric.js和高级画板

本文介绍fabric.js框架使用&#xff0c;以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择护眼模式、网格模式切换自由绘制画箭头画直线画虚线画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形文字输入图片展示及相关移动、缩放等操作删除功能 &am…
阅读更多...
最新文章

Copyright @ 2022~2023