js笔记
数据类型
计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值。但是,计算机能处理的远不止数值,还可以处理文本、图形、音频、视频、网页等各种各样的数据,不同的数据,需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型:
NumberJavaScript不区分整数和浮点数,统一用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”);