JavaScript基础巩固系列——入门篇+数据类型

全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/13686263.html， 多谢，=。=~（如果对你有帮助的话请帮我点个赞啦）

重新学习JavaScript是因为当年转前端有点儿赶鸭子上架的意味，我一直在反思我的知识点总是很零散，不能在脑海中形成一个完整的体系，所以这次想通过再次学习将知识点都串联起来，结合日常开发的项目，达到温故而知新的效果。与此同时，总结一下我认为很重要但又被我遗漏的知识点～

背景知识

JavaScript既是一种轻量级的脚本语言，又是一种嵌入式语言。

  • 脚本语言（script language）：不具备开发操作系统的能力，只用来编写控制大型应用程序（例如浏览器）的脚本。
  • 嵌入式语言（embedded）：通过嵌入大型应用程序调用宿主环境提供的底层API（例如浏览器为JavaScript提供浏览器控制类、DOM类、Web类API；Node为JavaScript提供文件操作、网络通信等API；）实现本身核心语法不支持的复杂功能。

JavaScript历史

  • 为什么诞生：Navigator 浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为，因为当时网速很慢而且上网费很贵，有些操作不宜在服务器端完成。
  • 需求：不需要太强的功能，语法较简单，容易学习和部署。

JavaScript的编程风格是函数式编程和面向对象编程的一种混合体。

  • 语法来源：
    • 基本语法：借鉴 C 语言和 Java 语言。
    • 数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。
    • 函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一等公民，并引入闭包。
    • 原型继承模型：借鉴 Self 语言（Smalltalk 的一种变种）。
    • 正则表达式：借鉴 Perl 语言。
    • 字符串和数组处理：借鉴 Python 语言。

ECMAScript历史

ECMAScript 和 JavaScript 的关系是，前者是后者的规范，后者是前者的一种实现。

  • 为什么诞生：微软开发了JScript并内置于IE3.0浏览器中，Netscape 面临丧失浏览器脚本语言的主导权局面，最终决定将 JavaScript 提交给国际标准化组织 ECMA（European Computer Manufacturers Association），希望 JavaScript 能够成为国际标准，以此抵抗微软。
  • 需求：规定浏览器脚本语言的标准。

基本语法

  • 变量->变量提升：JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有变量的声明语句，都会被提升到代码的头部，对应的也有函数名提升（前提是使用function命令声明，如果采用赋值语句定义就会报错）。
// 原代码（如果没有变量提升会报错：a is not defined）
console.log(a);
var a = 1;

// 实际运行代码
var a;
console.log(a);
a = 1;

// 运行不会报错
f();
function f() {}
  • 标识符：用来识别各种值（变量、函数）的合法名称，只能以任意 Unicode 字母、美元符号$或下划线_开头，只能包含 Unicode 字母、美元符号、下划线及数字。
    • 中文是合法的标识符，可以用作变量名。
    • JavaScript保留字：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
  • 注释：JavaScript可以兼容HTML代码注释，所以<!--和-->也被视为合法的单行注释，但-->只有在行首才会被当作单行注释，否则为正常运算，例如：
function countdown(n) {
  while (n --> 0) console.log(n);    // 被作为n-- > 0执行
}
countdown(3)
// 2
// 1
// 0
  • 区块：使用大括号，将多个相关的语句组合在一起。
    • 区块对于var命令来说不构成单独的作用域，与不使用区块的情况没有任何区别。例如：
    {
  var a = 1;
}
a // 1，在区块外部变量依然有效
  • 条件语句：
    • 终于明白条件判断大家为什么要这么写了if (2 = x)，因为常量写在运算符的左边，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。
    • 在没有标明区块（大括号）时，else代码块总是与离自己最近的那个if语句配对。
    • switch语句后面的表达式与case语句后面的表示式比较时，采用的是严格相等运算符（===），即不会发生类型转换。
  • 循环语句：
    • break语句用于跳出代码块或循环。
    • continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
    • 标签：JavaScript 语言允许语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，例如：
    top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

数据类型

  • 整数和浮点数：
    • JavaScript内部，所有数字都是以64位浮点数形式储存。
    1 === 1.0 // true
    • 由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。
    0.1 + 0.2 === 0.3 // false
0.3 / 0.1 // 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1) // false
  • 数值精度：精度最多只能到53个二进制位，绝对值小于2的53次方的整数，即负的2的53次方到 2的53次方，都可以精确表示。
Math.pow(2, 53) // 9007199254740992（简单的法则就是JavaScript对15位的十进制数都可以精确处理）
  • 数值范围：JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性，返回可以表示的最大值和最小值，负向溢出时返回0，正向溢出时返回Infinity。
Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324
  • 数值表示法：0b11（二进制）、0o377（八进制）、35（十进制）、0xFF（十六进制）、123e3（科学计数法）
    • 小数点前的数字多于21位、小数点后的零多于5个时JavaScript自动将数值转为科学计数法表示。
    • 默认情况下，JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。
  • 特殊数值：
    • 几乎所有场合，正零和负零都会被当作正常的0，是等价的，唯一有区别的场合是+0或-0当作分母，返回的值是不相等的。
    (1 / +0) === (1 / -0) // false（除以正零得到+Infinity，除以负零得到-Infinity）
    • NaN表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合、还有一些数学函数的运算结果，数据类型属于Number，不等于任何值（包括它本身），布尔运算时被当作false，和任何数运算得到的都是NaN。
    typeof NaN // 'number'
NaN === NaN // false 
Boolean(NaN) // false
NaN + 32 // NaN
    • Infinity表示“无穷”，用来表示两种场景，一种是一个正的数值太大，或一个负的数值太小，无法表示；另一种是非0数值除以0，Infinity有正负之分，大于一切数值（除了NaN），四则运算符合无穷的数学计算规则，与null计算时null会转成0，与undefined计算返回的都是NaN。
    Infinity === -Infinity // false
Infinity > 1000 // true
Infinity > NaN // false
0 * Infinity // NaN（特殊）
Infinity - Infinity // NaN（特殊）
Infinity / Infinity // NaN（特殊）
0 / Infinity // 0
Infinity / 0 // Infinity
  • 全局方法：
    • parseInt()：用于将字符串转为整数，头部有空格会自动去除，转换时是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分，如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外）返回NaN，可以接受第二个参数（2到36之间，超出返回NaN，为0、undefined、null则忽略）表示被解析的值的进制并返回该值对应的十进制数。
    parseInt('15e2') // 15
parseInt('.3') // NaN
parseInt('+1') // 1
parseInt('') // NaN
parseInt('1000', 2) // 8
parseInt('10', null) // 10
    • parseFloat()：用于将一个字符串转为浮点数，需要与Number()函数区分。
    parseFloat('') // NaN
Number('') // 0
parseFloat('123.45#') // 123.45
Number('123.45#') // NaN
    • isNaN()：用来判断一个值是否为NaN，只对数值有效，如果传入其他值，会被先转成数值（所以重点关注里面传入的值是否可以被Number转为数值）。
    isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true
//判断NaN更可靠的方法是，利用NaN是唯一一个不等于自身的这个特点
function myIsNaN(value) {
  return value !== value;
}
    • isFinite()：返回一个布尔值，表示某个值是否为正常的数值，除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true。
  • 字符串：
    • 字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始），但无法改变字符串之中的单个字符。
    'hello'[1] // "e"

var s = 'hello';
delete s[0];
s // "hello"
s[1] = 'a';
s // "hello"
    • 对于码点在U+10000到U+10FFFF之间的字符，JavaScript 总是认为它们是两个字符（length属性为2），所以JavaScript 返回的字符串长度可能是不正确的。
    • Base64转码：就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符，应用场景一个是将不可打印符号转成可打印字符（例如ASCII的0～31），或者以文本格式传递二进制数据，有两个原生方法：btoa()任意值转为 Base64 编码、atob()Base64 编码转为原来的值，但不适用于非ASCII的字符（需要先通过encodeURIComponent进行转码）。
    var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
  return decodeURIComponent(atob(str));
}
b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"
  • 对象：
    • 对于不符合标识名条件的键名必须加上引号，例如第一个字符为数字，或者含有空格或运算符。
    var obj = {
 '1p': 'Hello World',
 'h w': 'Hello World',
 'p+q': 'Hello World'
};
    • JavaScript 引擎如果遇到无法确定是对象还是代码块的情况，一律解释为代码块，如果要解释为对象，最好在大括号前加上圆括号。
    // eval语句（作用是对字符串求值）
eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}
    • 数字键在方括号读取运算符中可以不加引号，但不能使用点运算符读取。
    var obj = {
  123: 'hello world'
};

obj.123 // 报错
obj[123] // "hello world"
    • Object.keys()：返回一个对象本身的所有属性。
    var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj);
// ['key1', 'key2']
    • delete：用于删除对象的属性，删除成功后返回true，但删除一个不存在的属性，delete不报错，而且也返回true，只有某属性不可删除时（configurable:false）才返回false，只能删除对象本身的属性，无法删除继承的属性。
    • in：用于检查对象是否包含某个属性，如果包含就返回true，否则返回false，但无法识别哪些属性是对象自身的，哪些属性是继承的（可以用hasOwnProperty判断）。
    var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}
    • for...in：用来遍历一个对象的全部属性，仅遍历可遍历（enumerable:true）属性跳过不可遍历属性，不仅遍历对象自身的属性，还遍历继承的属性（前提是继承的属性是可遍历的），如果想仅遍历自身属性可用hasOwnProperty在循环内部判断。
    var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
  console.log('键名：', i);
  console.log('键值：', obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3
    • with：操作同一个对象的多个属性时，提供一些书写的方便（在内部可以不使用点运算符就能直接读取属性），如果with区块内部有变量的赋值操作，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量，不建议使用with语句，无法判断内部变量为对象属性还是全局变量。
    var obj = {
  p1: 1,
  p2: 2,
};
with (obj) {
  p1 = 4;
  p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;
  • 函数：
    • name属性：返回函数的名字，常用的是获取参数函数的名字。
    var myFunc = function () {};
function test(f) {
  console.log(f.name);
}
test(myFunc) // myFunc
    • length属性：返回函数预期传入的参数个数，即函数定义之中的参数个数。
    function f(a, b) {}
f.length // 2
    • 函数本身作用域：函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。
    var a = 1;
var x = function () {
  console.log(a);
};

function f() {
  var a = 2;
  x();
}

f() // 1
    • 参数传递方式：如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value），在函数体内修改参数值，不会影响到函数外部；如果函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference），在函数内部修改参数，将会影响到原始值，但如果修改参数的地址指向，则不会影响原始值。
    var obj = { p: 1 };
function f(o) {
  o.p = 2;
}
f(obj);
obj.p // 2

function f2(o) {
  o = { p: 3 };
}
f2(obj);
obj.p // 2
    • arguments对象：包含了函数运行时的所有参数，这个对象只有在函数体内部才可以使用，正常模式下arguments对象可以在运行时修改，但严格模式下不行，它很像数组，但它是一个对象，数组专有的方法（比如slice和forEach）无法使用，但可以将它转为真正的数组（slice方法或遍历填入新数组）。
    var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}
f(1, 1) // 2

var args = Array.prototype.slice.call(arguments);
// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}
    • 闭包：能够读取其他函数内部变量的函数，由于在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”，闭包的最大用处，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在，还有一个是封装对象的私有属性和私有方法。
      PS：外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。
    function createIncrementor(start) {
  return function () {
    return start++;
  };
}
var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7
    • 立即调用的函数表达式（IIFE-Immediately-Invoked Function Expression）：通常情况下，只对匿名函数使用，它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是 IIFE 内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。
    (function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
    • eval命令：接受一个字符串作为参数，并将这个字符串当作语句执行，参数如果不是字符串就会原样返回，eval没有自己的作用域，可能会因为修改当前作用域的变量造成安全问题（使用严格模式，eval内部声明的变量，不会影响到外部作用域，但依然可以读写当前作用域的变量），最常见的场合是解析 JSON 数据的字符串（应使用JSON.parse替代），凡是使用别名执行eval，eval内部一律是全局作用域。
        eval('var a = 1;'); // 生成变量a
    eval(123) // 123 // 非字符串原样返回
  • 数组：
    • JavaScript 语言规定，对象的键名一律为字符串，所以，数组的键名其实也是字符串，之所以可以用数值读取，是因为非字符串的键名会被转为字符串。
    var arr = ['a', 'b', 'c'];
arr['0'] // 'a'
arr[0] // 'a'
    • JavaScript 使用一个32位整数保存数组的元素个数，所以数组成员最多只有 4294967295 个（232 - 1）个，length属性的最大值就是 4294967295。
    • length属性可写，如果设置一个小于当前成员个数的值，该数组的成员数量会自动减少到length设置的值，可以通过将length设置为0来清空数组。
    var arr = [ 'a', 'b', 'c' ];
arr.length = 2;
arr // ["a", "b"]
arr.length = 0;
arr // []
    • 数组本质上是一种对象，所以可以为数组添加属性，但是这不影响length属性的值。
    var a = [];
a['p'] = 'abc';
a.length // 0
    • for...in：不仅会遍历数组所有的数字键，还会遍历非数字键，所以不推荐使用它对数组进行遍历，应该使用循环遍历或forEach方法替代。
    var a = [1, 2, 3];
a.foo = true;
for (var key in a) {
  console.log(a[key]);
}
// 1
// 2
// 3
// true

a.forEach(function (item) {
  console.log(item);
});
// 1
// 2
// 3
    • delete：删除数组元素后不影响length属性，删除的位置形成空位，读取时返回undefined，所以用length属性遍历时需要注意，是无法跳过空位的。
    var a = [, , ,];
a[1] // undefined（空位与该位置值为undefined不一样，空位在forEach、for...in、Object.keys遍历时会跳过
    • 类数组对象（array-like object）：很像数组的对象，如果一个对象的所有键名都是正整数或零，并且有length属性（非动态，不会随着成员的变化而变化），不具备数组的特有方法，常见的有arguments对象、大多数Dom元素集、字符串，slice方法可以将类数组对象转换为真正的数组，除此之外可以通过call()把数组方法嫁接到对象上。
    var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

obj[3] = 'd';
obj.length // 3

// forEach 方法（本来arguments对象无法调用该方法，但这种方法比直接使用数组原生的forEach要慢，所以最好还是先将“类似数组的对象”转为真正的数组，然后再直接调用数组的forEach方法。）
function logArgs() {
  Array.prototype.forEach.call(arguments, function (elem, i) {
    console.log(i + '. ' + elem);
  });
}

参考资料

JavaScript 语言入门教程 ：https://wangdoc.com/javascript/index.html

posted @ 2020-09-17 17:13  Dreamsqin  阅读(165)  评论(0)  编辑  收藏  举报