JavaScript 学习笔记 1 数据类型，表达式与运算符，语句

写在前面

javascript 课程视频来源于 imooc ,Bosn 老师的免费课程 JavaScript深入浅出
感谢 Bosn 老师上传视频
如有任何错误或疑问，欢迎一起讨论学习~~

数据类型，表达式与运算符，语句

class 1 数据类型

1.六种数据类型

  原始类型 -+- number
           +- string
           +-boolean
           +-null
           +-undefined
           |
           +- object -+- Function
                      +- Array
                      +- Date
                      +- ...

2.隐式转换

32 + 32    // 64

"32" + 32  // "3232"

"32" - 32  // 0

巧用 +/— 转换规则

字符串转数值：str - 0

数字转字符串：num + ""

关于 == 符号会尽量进行隐式转换

"1.23" == 1.23 //字符串会转换成数字进行比较

0 == false

null == undefined

new Object() == new Object()

[1,2] == [1,2]

关于 === 符号 (严格等于)

if 两边类型不同
    return false
else
   可以是 null === null
   可以是 undefined === undefined
   不可以：NaN === NaN
   不可以：new Object() === new Object()

3.包装对象

当一个基本类型以对象的方式去使用的时候
JS 会智能的将基本类型转化为包装类型的对象
当值返回之后，临时对象会被销毁,故 str.t 返回 undefined
string boolean number 都有这种功能

实验：

> var str = "string";
< //undefined

> var strObj = new String("string")
< //undefined

> str
< "string"

> strObj
< String{0:"s",1:"t",2:"r",3:"i",4:"n",5:"g",length:6[[PrimitiveValue]]:"string"}

> str.length
< 6

> str.t = 10;
< 10

> str.t
< //undefined

4.类型检测

typeof 100             "number"
typeof true            "boolean"
typeof function{}      "function"
typeof (undefined)     "undefined"
typeof new Object()    "object"
typeof [1,2]           "object"
typeof NaN             "number"
typeof null            "object" // 兼容性原因

obj instanceof Object

//例如
[1,2] instanceof Array === true;
new Object() instanceof Array === false;

注意：不同 window 或 ifream 间的对象类型检测 不能 使用 instanceof

Object.prototype.toString 也可以判断类型

Object.prototype.toString.apply([]) === "[object Array]"
Object.prototype.toString.apply(function{}) === "[object Function]"
Object.prototype.toString.apply(null) === "[object Null]"
Object.prototype.toString.apply(undefined) === "[object Undefined]"

总结

方法	说明
typeof	适合基本类型以及 function ，遇到 null 失效
instanceof	适合自定义对象，也可以用来检测原生对象，在不同 window 和 ifream 间检测时失效
Object.prototype.toString	通过 {}.toString 拿到，适合内置对象和基元类型，遇到 null 和 undefined 失效

class 2 表达式与运算符

1.表达式

数组对象初始化表达式

[1,2];     new Array(1,2);

[1,,,4];   [1,undifined,undefind,4];

{x:1,y:2}; var o = new Object(); o.x = 1;o.y = 2;

函数表达式

var fe = function(){};

(function(){console.log('hello world');})();

属性访问表达式

var o = {x:1};

o.x    //通过属性访问变量
o['x'] //通过 key 访问变量

调用表达式

func();

对象创建表达式

new Func(1,2);
new Object;

2.运算符

2.1 “,” 逗号运算符

var val = (1,2,3); //取最右边的值，故 val = 3

2.2 delete 运算符

var obj = {x:1};
obj.x;
delete obj.x;
obj.x

2.3 in 运算符

window.x = 1;
'x' in window;  //true 判断 window 中是否有某个 key

2.4 instanceof 与 typeof 运算符

// 基于原型链判断对象类型
{} instanceof Object;   //true

// 常用于原始类型和函数对象
typeof 100 === 'number' //true

2.5 new 运算符

function Foo(){}
Foo.prototype.x = 1;
var obj = new Foo();
obj.x;  // 1

//判断 x 属性是对象上的还是原型链上的
obj.hasOwnProperty('x');            // false

// 使用 __proto__ 拿到对象的原型
obj.__proto__.hasOwnProperty('x');  // true

2.6 this 运算符

this; // window (浏览器)
var obj = {
  func:function(){return this;}
};
obj.func(); //obj

2.7 void 运算符

void 0  // 返回 undefined
void(0) // 返回 undefined 

class 3 语句

1.block

块语句，用于组合多个语句，以花括号为界

{
  xxx;
  xxx;
  ...;
  xxx;
}

注意 1

{a:1,b:2};         // 语法错误
var o = {a:1,b:2}; // 正确

注意 2
没有作用域的作用（不同于 c++ ）

2.var

var a = 1; // 定义一个变量

var a = b = 1;   // 此时 b 被隐式定义为一个全局变量
var a = 1,b = 1; // 此时是正确的语法
//例如：
function foo(){
  var a = b = 1;
}
foo();

console.log(typeof a); // undefined
console.log(typeof b); // 'number'

3.try-catch 语句

先执行 try 中语句，若有异常执行 catch 中的语句

但无论如何都会执行 finally 中的语句

可以是 try-catch，也可以是 try-finally

try{
  throw "test";
}
catch(ex){
  console.log(ex); // test
}
finally{
  console.log('finally');
}

//练习

// 输出：
//     "finally"
//     "outer" "oops"
try{
  try{
    throw new Error("oops");        // step1 抛出异常，但是本 try{} 里无 catch 接应
  }finally{
    console.log("finally");         // step2 执行 finally 输出 “finally”
  }
}catch(ex){
  console.error("outer",ex.message);// step3 异常被捕获，输出 “outer” 以及 异常信息 “oops”
}

// 输出：
//     "inner" "oops"
//     "finally"
try{
  try{
    throw new Error("oops");            // step1 抛出异常，本地 try{} 里接到异常
  }catch(ex){
    console.error("inner",ex.message);  // step2 接到异常，输出 “inner” “oops”
  }finally{
    console.log("finally");             // step3 执行 finally，输出 “finally”
  }
}catch(ex){
  console.error("outer",ex.message);    // 由于异常已在内部被捕获，不输出
}

// 输出：
//     "inner" "oops"
//     "finally"
//     "outer" "oops"
try{
  try{
    throw new Error("oops");            // step1 抛出异常，本地 catch 接到异常
  }catch(ex){
    console.error("inner",ex.message);  // step2 抛出异常，输出 “inner” “oops”
    throw ex;                           // step3 继续抛出一个异常，但是无 catch 接应
  }finally{
    console.log("finally");             // step4 执行 finally ，输出“finally”
  }
}catch(ex){
  console.error("outer",ex.message);    // step5 异常被捕获，输出“outer” “oops”
}

4.function 语句

声明一个函数

function fd(){
  //do sth
  return true;
}

定义一个函数表达式

var fe = function(){
  //do sth
};

5.for…in 语句

var p;
var obj = {x:1,y:2}

for(p in obj){
  // 遍历对象的属性
}

1. for in 遍历出来的顺序是不确定的
2. enumerable 为 false 时不会出现
3. for in 的对象属性会受原型链影响

6.switch 语句

switch(val){
 
  case 1:
    console.log(1);
    break;
  
  case 2:
    console.log(2);
    break;

  default:
    console.log(0);
    break;
}
// 如果不添加 break，执行完正确的 case 
// 还会接着执行 default 中的语句

// 如果有多个 val 执行同样语句
switch(val){
 
  case 1:
  case 2:
  case 3:
    console.log(123)
  
  case 4:
  case 5:
    console.log(45)

  default:
    console.log(0)
}

7.循环

while(isTrue){
  //do
}

do{
  //do
}while(isTrue)

var i;
for(i = 0; i < n; i++){
  //do
}

8.with

with 可以修改当前变量作用域
不建议使用，严格模式下已经被禁用

// with 后面接一个对象并定义了属性 x 
with({x:1}){
  console.log(x);//可以不用写 对象.x 直接调用 x
}

9.严格模式

严格模式是一种特殊的执行模式，修复了部分语言上的不足
提供了更强的错误检查，增强了安全性

function func(){
  'use strict'// 在老版本浏览器下，只被当作普通字符串处理
}

'use strict' // 在整个文件开头使用，表示整个文件都开启严格模式
function func(){
  
}

严格模式区别：

1. 禁用 with
2. 不允许未声明的变量被赋值
3. arguments 变为参数的静态副本

// 假设 a 与 arguments 有着某种绑定关系

// 正常模式, a 虽然传入 1 ，但是已经变成了 100
!function(a){
  arguments[0] = 100;
  console.log(1)
}(1)//如果不传参(相当于 a 是 undefined ，则赋值不会起作用)

//严格模式，a传入的只是副本，arguments对其无影响
!function(a){
  'use strict'
  arguments[0] = 100;
  console.log(1)
}(1)

// 假设 a 与 arguments 不存在绑定关系
!function(a){
  'use strict'
  arguments[0] = 100;
  console.log(1)
}({x:1})//相当于修改了对象属性的值，还是起作用的

4. delete 参数，函数名报错

// 正常模式
!function(a){
  console.log(delete a);
}(1)//返回 false

// 严格模式
!function(a){
  'use strict';
  delete a;
}(1)//语法错误

5. delete 不可配置的属性报错

!function(a){
  var obj = {};
  Object.defineProoerty(
    obj,
    'a',
    {configurable:false}
  );
  console.log(delete obj.a);
}(1); // 返回 false

!function(a){
  'use strict';
  var obj = {};
  Object.defineProoerty(
    obj,
    'a',
    {configurable:false}
  );
  console.log(delete obj.a);
}(1);//TypeError

6. 对象字面量重复属性名报错

!function(){
  var obj = {x:1,x:2};
  console.log(obj.x);
}();// 输出 2


!function(){
  'use strict';
  var obj = {x:1,x:2};
}();//语法错误

7. 禁止八进制字面量

8. 禁止使用 eval，arguments 作为函数名，变量名（升级为关键字）

9. eval 独立作用域