JS学习（二）——词法结构和类型、变量

 

 

JS的基本要点

1. js程序是用Unicode字符集编写；

2. js是区分大小写的语言，但值得注意的是js的客户HTML不区分大小写，这就很容易混淆，例如：在html的标签中的onclick属性可以写成onClick，但是在js中必须是小写；

 

JS的关键字

// ES6中的关键字（其中有一些是保留字）
abstract	arguments	boolean	break	byte
case	catch	char	class	const
continue	debugger	default	delete	do
double	else	enum	eval	export
extends	false	final	finally	float
for	function	goto	if	implements
import	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

 

1. null和undefined与undefined的区别

  就类型而言，null的类型是 “object”， undefined的类型也是 “undefined”，而NaN的类型是“number”；未定义的值和定义未赋值的为undefined，null是一种特殊的object,NaN是一种特殊的number。

var a1;
var a2 = true;
var a3 = 1;
var a4 = "Hello";
var a5 = new Object();
var a6 = null;
var a7 = NaN;
var a8 = undefined;
alert(typeof a);    //显示"undefined"
alert(typeof a1); //显示"undefined"
alert(typeof a2); //显示"boolean"
alert(typeof a3); //显示"number"
alert(typeof a4); //显示"string"
alert(typeof a5); //显示"object"
alert(typeof a6); //显示"object"
alert(typeof a7); //显示"number"
alert(typeof a8); //显示"undefined"


alert(null == undefined) // 输出true
alert(NaN == NaN)        //输出false ， NaN表示“非数值”，自己也不等于自己本身

当作为if的条件时，null和undefined都会隐性的转化成为false，实际上，undefined值是派生null值的，所以当比较它俩的值时返回true。

2. let 和 var 的区别

  let 与 var  的区别本质上就是作用域的区别！！！具体看下面代码例子与注释

// test.js

/***************************************************
 * 声明：let 声明的变量是唯一的， var声明的变量可以多次声明
 ***************************************************/
var x;
let y;
console.log('x: ', x);    // 输出undefined
console.log('y: ', y);    // 输出undefined
var x = 1;     //不报错，x的值为1
var x;     //声明且不赋值，不报错，x的值仍为1
let y;    // 报错，不能重复声明

/*******************************************
 * 作用域
 *****************************************/
x = 1;
function func() {
    console.log('x in function is : ', x);      // 输出x in function is :  1
    console.log('y in function is : ', y);      // 输出y in function is :  undefined
}
func();

{
    let a = 10;
    var b = 11;
}
console.log(a);   // 报错，a不存在
console.log(b);   // 输出 11

/*******************************************
 * 奇妙的for循环：for的条件相当于父
 ******************************************/

// 使用let的for循环
for (let i = 0; i < 3; i++) {
    let i = 'abc';
    console.log(i);                 // 使用let，循环总共输出三个‘abc’， for循环的条件与循环内容相当于两个作用域，即循环条件的 “i” 与循环体里的“i” 不是同一个变量； 若换做var他们就相当于共同的变量
  }
console.log(i);  // ReferenceError: i is not defined

// 使用var的for循环
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 输出10， i的值在for循环块外面也是



/*****************************************
window挂载
******************************************/
var a = 'a';
console.log(a,window.a) //abc abc

let b = 'b';
console.log(b,window.b) //b undefined

const c = 123;
console.log(c,window.c) //123 undefined

总结： （1）let是块级作用域，var是全局作用域；（2）let不可重复声明同一变量，var可以；（3）var可以先使用后声明变量，let不可以。（4）var声明的变量会挂载在window上，而let和const声明的变量不会。

 

3. const 关键字

(1) const定义的变量不可以修改，而且必须初始化。

(2) const是块级作用域

 

4. async 和 await（通常在调用接口的时候使用）

async用于定义一个异步函数，该函数返回一个Promise(参考廖雪峰的教程),等同于return Promise.resolve(value);

await表示要“等待”异步操作的返回值,也可以用于同步返回值. async 定义了一个异步函数，返回值是一个Promise对象，使用await得到的是该异步函数的返回值，而不是Promise对象。

async function timeout(){
    return "happy halloween";
}

console.log(timeout());   // 返回一个Promise对象，可以通过then()方法拿到返回值

let a = await timeout();
console.log(a);           // 输出happy halloween

 

5.  * 与 yield

yield意为“生产”，function * 表示定义一个生成器函数，通过以下例子简单说明：

function* generator(i) {
  yield i;
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value);
// expected output: 10

console.log(gen.next().value);
// expected output: 20

点击查看更多关于*与yield的说明。

6.  switch

/**
*  js的switch的case只是确定代码开始执行的位置，应当在每个case后加一个break跳出switch
*  
*/
var x = 0;
switch(x){
    case 1 : console.log(1);            // x !=1 ,故不执行
    case 0 : console.log(0);            // 找到开始执行的位置，输出0
    case x=20: console.log(x);          //确定开始执行的位置之后，剩下的case条件不再执行，直接执行case后面的语句，输出  0
    default: console.log('default')     // 输出default
}

 

JS的运算符

js运算符表如下

其中值得注意的是 “==” 和 “===” 的区别

"=="的比较过程

1. 先判断两个操作数的数据类型
2. 不相同 类型转换 转换成相同类型进行比较

“===”是更严格的比较

1. 先判断两个操作数的数据类型，不相同返回false
2. 相同，进行值的比较

代码示例如下：

null == undefined // true
'1' == 1 // true
'undefined' == undefined // false， undefined会隐式转换为false，false == ‘undefined’

'1' == true // true， '1'可以隐式转换为true
'2' == true // false ，'2'可以转换成数字的2， 但不能转换为true


1 == true // true
null === undefined // false

运算符的优先级与隐式转换