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

前端之家收集整理的这篇文章主要介绍了《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的变量是不允许删除的,例如:

;
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解析器的机制造成的,上面的代码类似于下面这段代码

 f() {
    var scope; 只声明变量,变量前置
    console.log(scope);
    scope = "local"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是通过原型链实现继承的。简单实现如下:

 Animal(name) {
    this.name = name || 'Animal';
    this.sleep =  () {
        console.log(this.name + '正在睡觉!');
    }
}
Animal.prototype.eat =  (food) {
    console.log(this.name + '正在吃:' + food);
};

 Cat() {
}
Cat.prototype =  Animal();
Cat.prototype.name = 'cat';

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

代码2:

];
array.splice(2); 从下标2开始截取截取到最后
console.log(array); 

代码3:

截取下标2到后面2个元素替换成"plum","orange"
console.log(array); 

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

 

2.length的另一种用法

];
array.length = 3; 
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(return x * y },0);    求积
var max = array.reduce(return (x > y) ? x : y }); 求最大值

 

4.every()和some()

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

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

 fun(element,index,array) {
    return element > 10;
}

[2,8,1,4].some(fun);       false
[12,4].some(fun);      true

[12,4].every(fun);     true

 

5.map()

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

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

 

6.Arguments.callee

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

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

var fun =  (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,12,4];
array.sort(function (a,b) { return a - b; }); [1,12]

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

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

 

十二、高阶函数

定义: 高阶函数就是操作函数函数,它接受一个或多个作为参数,并返回一个新函数

 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 [y,x];
console.log(x,y);   3 2

 

十五、闭包

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

定义:闭包就是可以访问一个函数局部(私有)变量的方法

var Cat =  () {
    var name = "cat"var age = 2this.getName =  () {
        return name;
    }
    this.getAge =  age;
    }
}


 Cat();
console.log(cat.name);        undefined
console.log(cat.age);         undefined
console.log(cat.getName());    cat
console.log(cat.getAge());     2

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

 

猜你在找的Node.js相关文章