前端学习笔记

js笔记

数据类型

计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据，需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型：
Number

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[‘middle-school’]; // ‘No.1 Middle School’ xiaohong[‘name’];
// ‘小红’ xiaohong.name; // ‘小红’

也可以用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]);

// 参数是一组无次序的值 function f({x, y, z}) { … } f({z: 3, y: 2, x: 1});
（4）提取JSON数据

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

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

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

console.log(id, status, number); // 42, “OK”, [867, 5309]
上面代码可以快速提取JSON数据的值。

（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接口，配合变量的解构赋值，获取键名和键值就非常方便。

var map = new Map(); map.set(‘first’, ‘hello’); map.set(‘second’,
‘world’);

for (let [key, value] of map) { console.log(key + " is " + value); }
// first is hello // second is world 如果只想获取键名，或者只想获取键值，可以写成下面这样。

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

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

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

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