js笔记

数据类型

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数 NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示 Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用比较，始终坚持使用=比较。 另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

最后要注意浮点数的相等比较：

1 / 3 === (1 - 2 / 3); // false

这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。 Object.getPrototypeOf(Object.prototype) // null 

讯享网

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

讯享网（1）变量被声明了，但没有赋值时，就等于undefined。 （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。 （3）对象没有赋值的属性，该属性的值为undefined。 （4）函数没有返回值时，默认返回undefined。 var i; i // undefined function f(x){console.log(x)} f() // undefined var o = new Object(); o.p // undefined var x = f(); x // undefined 

访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用’'括起来：

var xiaohong = {
name: ‘小红’,
‘middle-school’: ‘No.1 Middle School’ };

xiaohong的属性名middle-school不是一个有效的变量，就需要用’'括起来。访问这个属性也无法使用.操作符，必须用[‘xxx’]来访问：

也可以用xiaohong[‘name’]来访问xiaohong的name属性，不过xiaohong.name的写法更简洁。我们在编写JavaScript代码的时候，属性名尽量使用标准的变量名，这样就可以直接通过object.prop的形式访问一个属性了。

如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：

var xiaoming = {
name: ‘小明’,
birth: 1990,
school: ‘No.1 Middle School’,
height: 1.70,
weight: 65,
score: null }; ‘name’ in xiaoming; // true ‘grade’ in xiaoming; // false

不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

‘toString’ in xiaoming; // true

因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
name: ‘小明’ }; xiaoming.hasOwnProperty(‘name’); // true xiaoming.hasOwnProperty(‘toString’); // false

讯享网

link样式调整

ul的list样式调整

cursor

图片居中显示

translate 居中

background-origin

text-shadow

@keyframes

box-sizing:border-box

flex-direction

object-fit 和object-position

变量的解构赋值用途很多。

（1）交换变量的值

[x, y] = [y, x]; 上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

（2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() { return [1, 2, 3]; } var [a, b, c] = example();

// 返回一个对象

function example() { return {
foo: 1,
bar: 2 }; } var { foo, bar } = example(); （3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值 function f([x, y, z]) { … } f([1, 2, 3]);

解构赋值对提取JSON对象中的数据，尤其有用。

var jsonData = { id: 42, status: “OK”, data: [867, 5309] };

let { id, status, data: number } = jsonData;

（5）函数参数的默认值

jQuery.ajax = function (url, { async = true, beforeSend = function
() {}, cache = true, complete = function () {}, crossDomain =
false, global = true, // … more config }) { // … do stuff };
指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。

（6）遍历Map结构

任何部署了Iterator接口的对象，都可以用for…of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

// 获取键名 for (let [key] of map) { // … }

// 获取键值 for (let [,value] of map) { // … } （7）输入模块的指定方法

加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require(“source-map”);