JavaScript[ LXF教程(一) ]

本文主要根据廖雪峰的官方网站梳理知识点，JavaScript全栈教程

小的知识点那不能放过哟

• HTML引入js文件： <script src="./main.js"></script>

• Number: 不区分整数与浮点数，NaN(not a number),Infinity(无限大)

• NaN === NaN(false) isNaN(NaN); //true

• null是表示空的值，’'表示长度为0的字符串

• ==与===: 前者先进行数据类型转换再比较，后者直接比较。
  [ eg. 2 == ‘2’(true); 2===‘2’(false) ]

• 浮点数的相等比较：浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数，所以不能直接比较，需要通过计算两者差的绝对值是否小于某阈值：
  1/3 === (1-2/3) //false
  Math.abs(1/3 - (1-2/3)) < 0.0000001; //true

• strict模式：‘use strict’; 在该模式下如果变量声明没有var就报错，一般没有var会自动识别为全局变量。

字符串

• 多行字符串除了\n还可以直接用``反引号表示。
• 不能通过索引赋值改变字符串。
• ES6模板字符串： eg. var message = `你好，$name，你今年${age}岁了`;
• 字符串常见操作：str.length; str.toUpperCase(); str.toLowerCase();
  str.indexOf(‘world’); str.substring(0,5); str.split(’’)

数组

• 数组常用函数：arr.indexOf(value); arr.slice(0,2); arr.push()/pop();
  arr.shift()/unshift(); arr.sort(); arr.reverse(); arr1.concat(arr2);
  arr.splice(); arr.join(’-’);

对象

• 对象：判断是否含有某属性：obj.hasOwnProperty(‘prop’); //true or false
• 对象属性循环：for(var key in obj); 再通过obj.hasOwnProperty(key)过滤掉父属性

(续)

• 键盘输入： eg. var height = parseFloat(prompt(‘请输入身高(m):’));
• Map和set: 一组键值对结构和一组key的集合
• for(var x of Iterable(arr/set/map))
  优势：只循环集合本身的元素(值)，而in遍历的是对象的所有属性(包括索引)。
• forEach函数：iter.forEach(function () {}); 参数：arr: element, index, arr;
  Set: element, sameElement, set;
  Map: value, key, map [也可以只获得element]
• arguments: 可以获得调用者传入的所有参数，类似Array，最常用于判断传入参数的个数(arguments.length)
  
• rest: eg. foo(a, b, … rest)表示除a,b之外的参数以数组形式交给rest。
  加油吧~

作用域

• 作用域链

• 不同的JS文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，就会造成命名冲突。
  解决方法之一就是只声明一个全局变量，把所有的变量和函数绑定到这个全局变量中。
  

• this

  this指向的对象视情况而定，在全局中定义函数getAge()。如果是xiaoming.age()，this指向 xiaoming；如果是单独调用函数，则指向全局对象window。
  var fn = xiaoming.age;
  fn(); //这么写也不行！！

  报错：this只在age方法的函数内指向小明，这样this又指向undefined(非strict模式下指向window）
  解决方法：var that = this;先用that捕获this，便可以在方法内部定义其他函数。
  

• for(var i=0; i < 100; i++)中的i即使在循环外面也可以使用；为了解决这个问题，ES6引入了let,用let替代var可以声明一个块级作用域的变量。

（续）

• 常量：const

• 变量提升：JS的函数定义有一个特点，先扫描整个函数语句，把所有变量声明“提升”到函数顶部。（注意：只是声明，而不提升赋值）

• 解构赋值：从ES6开始引入，可同时对一组变量进行赋值：
  减少代码量 eg. var [x,y,z] = [‘a’,‘b’,‘c’];
  从一个对象获取若干属性：
  var {name,age,sex} = person;
  交换x和y的值：
  [x,y] = [y,x];

• apply：两个参数：一个是this指向的变量，一个是Array，表示函数本身的参数。 xiaoming.age(); 等价于 getAge.apply(xiaoming, []); 利用apply可以动态改变函数的行为：
  

• call: 唯一的区别是apply()将参数打包成数组，而call()直接将参数按顺序传入。

  

高阶函数：

• 让函数的参数可以接收别的函数。

• map(): 返回一个新的数组，数组的元素为原始数组被调用函数处理后的值。

• reduce(): 接受一个函数作为累加器，返回最终计算的值。

• filter(): 把Array的某些元素过滤掉，然后返回剩下的元素。

  去重：indexOf返回的是元素的第一个位置
  查素数：
  

• sort(arr): 排序时会先把数组中的元素转换成字符串;

  实现数字排序：
  
  忽略大小写的排序：
  
  注意：sort()会直接对Array进行修改，它返回的结果还是当前Array。

• 一些好用的高阶函数：

  every()：返回布尔值，如果所有元素满足条件，则为true；反之为false。
  find(): 返回符合条件的第一个元素，没有返回undefined。
  findIndex(): 返回符合条件的第一个元素的索引，无则返回-1。
  forEach()：遍历数组，不返回值。
  

闭包

• （var i, let i 和 隐匿函数）

箭头函数

• 箭头函数中的this

generator(生成器)：

• function* a(x) {
  yield x;
  yield x+1;
  return;
  }
  var f = a(5);
  f.next(); //value:5, done:false
  f.next(); //value:6, done:false
  f.next(); //value:undefined, done: true
  ： done为true表示generator执行完毕。
  还可以用for…of…: for(var x of a(5))