JavaScript中数据类型与运算符

小鱼儿 2021-12-18 19:41 308阅读 0赞

# JavaScript中数据类型与运算符 #

## 注释 ##

和C、Java一样

*  **单行注释**`//`
 *  **多行注释**`/* 注释 */`,也可以用在语句中。

str = 'hello' + /* comment */ 'xdd'
    console.log(str)

## 常量和变量 ##

1.  **标识符**：
    
     *  标识符必须是字母、下划线、美元符号$和数字，但必须是字母、下划线、美元符号开头，依然是不能数字开头。
     *  标识符**区分大小写**
2.  **变量的声明**
    
     *  var 声明一个变量 `var a = 1`。注意：var会做声明提升(即，可以先使用变量，后声明)(var会把变量提升到当前全局或函数作用域。)。
     *  let 声明一个快作用域中的局部变量 `let a = 1`
     *  const 声明一个常量 `const name = '张三'` **注意：常量必须声明时就赋值。(因为常量不可修改)**
        
        1.  如果明确知道一个标识符定义后不再修改，应该尽量声明成const常量，减少被修改的风险，减少Bug。
     *  **注意：**，JS中的变量声明和初始化时可以分开的
    
        var a; //只声明，a变量，a为undefined
        let b;
        console.log(1,a,b,typeof(a),typeof(b))
        
        a = 1;
        b = "a string";
        console.log(2,a,b,typeof(a),typeof(b))
        
        a = "2345";
        b = 2.45;
        console.log(3,a,b,typeof(a),typeof(b))
        
        // const c //错误，不能这样写
        const c = 100
        // c = c + 1 #不行，const定义的是常量，会报错
        console.log(4,c)
        // c = 200 //不可修改
    
    ![js\_001][js_001]
3.  **let与var的区别**
    
    1.  let声明的变量是局部变量，不能突破任何作用域，即任何大括号`{}`所在的作用域。(注意：可以向内部渗透)
    2.  var声明的变量会做声明提升。即如果先使用，后使用var定义，不会报错。系统会自动做声明提升。
        
         *  var声明的变量，可以突破if和for等循环中的大括号\{\}作用域可以突破。但fun函数等其他的不能。(同样可以向内渗透)
    
        console.log("- ".repeat(10),"if作用域","- ".repeat(10))
        if(true){ 
            let a = 10;
            var b = 20;
            aa = 30 //只要声明就是全局变量
        }
        // console.log(a) //会出错，找不到变量名
        console.log(b); // 20
        console.log(aa); //30
        
        console.log("- ".repeat(10),"{}作用域","- ".repeat(10))
        { 
            let c = 30;
            var d = 40;
            cc = 50;
        }
        
        // console.log(c) // 会出错，变量c不存在
        console.log(d) // 40
        console.log(cc)
        
        console.log("- ".repeat(10),"for作用域","- ".repeat(10))
        for(let i=0;i<2;i++){ 
            let f = 10
            var g = 11
            ff = 50
        }
        
        // console.log(f) //会出错，变量f不存在
        console.log(g)  //11
        console.log(ff) //50
        
        console.log("- ".repeat(10),"fun函数中作用域","- ".repeat(10))
        
        function xdd(){ 
            let h = 10
            var j = 12
            hh = 100 //这种声明，会是全局变量，只要函数执行就可访问
        }
        
        xdd()
        // console.log(h) //无法突破函数作用域
        // console.log(j) //无法突破函数作用域
        console.log(hh) //100
    
    ![js\_020][js_020]
4.  **变量的声明规范**
    
        var y //只是声明，y值为undefined
        var x = 5 //规范的声明并初始化，声明全局或局部变量
        z = 6 //不规范的初始化，不推荐。在严格模式下会产生异常。在赋值之前不能引用，因为它没有声明。一旦这样赋值就是全局作用域。
    
        function hello()
        { 
            var a //只是声明，a为undefined，作用域的函数中
            a = 100
        }
        console.log(a) //未声明变量a,异常

## 数据类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">名称</th> 
   <th align="left">说明</th> 
   <th align="left">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">number</td> 
   <td align="left">数值型，包括整形和浮点型</td> 
   <td align="left"><code>let a = 10</code></td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">boolean</td> 
   <td align="left">布尔型，true和false</td> 
   <td align="left"><code>let a = true</code></td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">string</td> 
   <td align="left">字符串</td> 
   <td align="left"><code>let a = 'abc'</code></td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">null</td> 
   <td align="left">只有一个值null</td> 
   <td align="left"><code>let a = null</code></td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">undefined</td> 
   <td align="left">变量声明未赋值的；对象未定义的属性</td> 
   <td align="left"><code>let a</code></td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">symbol</td> 
   <td align="left">ES6新引入类型</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">7</td> 
   <td align="left">object类型</td> 
   <td align="left">是以上基本类型的复合类型，是容器</td> 
   <td align="left"><code>let = {a:1,b:2}</code></td> 
  </tr> 
  <tr> 
   <td align="left">不是基本数据类型</td> 
   <td align="left">Array</td> 
   <td align="left">数组，用于在单一引用中存储多个值的结构。</td> 
   <td align="left"><code>let a = [1,2,3,'a','b']</code></td> 
  </tr> 
 </tbody> 
</table>

*  ES是动态语言，弱类型语言。
 *  虽然先声明了变量，但是变量可以重新赋值任何类型。

// 类型转换
    // 弱类型
    console.log("=========string============")
    console.log(a = 3 + "xdd",typeof(a)) //3xdd string
    console.log(a = null + 'xdd',typeof(a)) //nullxdd string
    console.log(a = undefined + 'xdd',typeof(a)) //undefinedxdd string
    console.log(a = true + 'xdd',typeof(a)) //truexdd string
    
    // 数字
    console.log("========number========")
    console.log(a = null + 8,typeof(a)) //8 number
    console.log(a = undefined + 8,typeof(a)) //NaN number //undefined 没法转换成对应的数字
    console.log(a = true + 8,typeof(a)) //9 number
    console.log(a = false + 8,typeof(a)) //8 number
    
    // boolean
    console.log('=======bool=============')
    console.log(a = null + true,typeof(a)) //1 number
    console.log(a = null + false,typeof(a)) //0 number
    console.log(a = undefined + true,typeof(a)) //NaN number
    console.log(a = undefined + false,typeof(a)) //NaN number
    console.log(a = null & true,typeof(a)) //0 number
    console.log(a = undefined & true,typeof(a)) //0 number
    console.log(a = null | true,typeof(a)) //1 number
    console.log(a = undefined | true,typeof(a)) //1 number
    
    //短路
    console.log('===========短路================')
    console.log(a = null && true,typeof(a)) //null object // 逻辑运算符，null 直接就是false短路 
    console.log(a = false && null,typeof(a))  //false boolean // 逻辑运算符，false短路返回false 
    console.log(a = false && 'xdd',typeof(a)) //false boolean // boolean 
    console.log(a = true && 'xdd',typeof(a)) // 字符串
    console.log(a = true && '',typeof(a)) // 字符串
    
    // null
    console.log('======null========')
    console.log(a = null + undefined,typeof(a)) //NaN number

![js\_002][js_002]

*  弱类型，不需要强制类型转换，会隐式类型转换。
 *  NaN，即Not a Number，转换数字失败。它和任何值都不等，和自己也不等，只能使用Number.isNaN(NaN)
 *  **总结**
    
    1.  遇到字符串，加号就是拼接字符串，所有非字符串隐式转换为字符串。
    2.  如果没有字符串，加号把其他所有类型都当数字处理，非数字类型隐式转换为数字。undeﬁned特殊，因为它都没有定义值，所以转换数字失败得到一个特殊值NaN。
    3.  如果运算符是逻辑运算符，短路符，返回就是短路时的类型。没有隐式转换。
    4.  除非你十分明确，否则不要依赖隐式转换。写代码的时候，往往为了程序的健壮，请显式转换。

### Symbols类型 ###

*  ES6提供Symbol类型，内建原生类型。
    
        let sym1 = Symbol();
        let sym2 = Symbol("key1");
        let sym3 = Symbol("key1");
        
        console.log(sym2 == sym3); //false,symbol值是唯一的
        console.log(sym1,sym2,sym3);
    
    ![js\_018][js_018]

1.  可以作为对象的属性key,遍历时不会遍历，外部无法访问。
    
        let s = Symbol();
        let t = 'abc';
        let a = { 
            [s]:'xyz', //symbol作为key，注意要使用中括号，这个key一定唯一
            t:'ttt',
            [t]:'000'
        }
        
        console.log(a)
        console.log(a[s])
        a[s] = 2000
        console.log(a[s])
        
        console.log("- ".repeat(20));
        for (let i in a){  //只能遍历两下，无法获取a[s]对应的值
            console.log(i)
        };
    
    ![js\_019][js_019]
2.  构建常量
    
        class Color{ 
        }
        
        // 以前用法
        Color.COLOR_RED = 'RED'
        Color.COLOR_ORANGE = 'ORANGE'
        Color.COLOR_BLUE = 'BLUE'
        
        //现在用法
        Color.COLOR_RED = Symbol()
        Color.COLOR_ORANGE = Symbol()
        Color.COLOR_BLUE = Symbol()

## 运算符 ##

### 1.一元运算符 ###

*  一元运算符只有一个操作数。

<table> 
 <thead> 
  <tr> 
   <th align="left">符号</th> 
   <th align="left">意义</th> 
   <th align="left">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>delete</code></td> 
   <td align="left">用来删除对象的属性</td> 
   <td align="left"><code>delete a.x</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>void</code></td> 
   <td align="left">表示表达式放弃返回值</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>typeof</code></td> 
   <td align="left">运算符用来判断给定对象的类型</td> 
   <td align="left"><code>typeof('ab')</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>+</code></td> 
   <td align="left">一元加运算符，将操作转换为Number类型</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>-</code></td> 
   <td align="left">一元减运算符，将操作转换为Number类型并取反</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>~</code></td> 
   <td align="left">按位取反，按位非运算符</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>!</code></td> 
   <td align="left">逻辑非运算符</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>++</code></td> 
   <td align="left">单目运算符,直接在自身内存所在位置增加1，效率极高</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>--</code></td> 
   <td align="left">单目运算符，直接在自身内存所在位置减少1，效率极高</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

简单示例：

1.  **一元加法示例**
    
        a = +'a'
        console.log(a) //NaN
        a = +false
        console.log(a) //0
        a = +true
        console.log(a) //1
        a = +undefined
        console.log(a) //NaN
        a = +NaN
        console.log(a) //NaN
        a = +[]
        console.log(a) //0
        a = +{ }
        console.log(a) // NaN
    
    ![js\_003][js_003]
2.  **一元减法示例**
    
        a = -'a'
        console.log(a) //NaN
        a = -false
        console.log(a) //-0
        a = -true
        console.log(a) //-1
        a = -undefined
        console.log(a) //NaN
        a = -NaN
        console.log(a) //NaN
        a = -[]
        console.log(a) //-0
        a = -{ }
        console.log(a) // NaN
    
    ![js\_004][js_004]
3.  单目`++`,`--`示例
    
     *  单目运算符优先级高于双目运算符
     *  加号+是双目运算符，两边的表达式必须先计算好
    
        let i =0;
        let a = i++;
        console.log(a,i); //0,1
        console.log(a,i++); //0,1
        a = ++i;
        console.log(a,++i); //3,4
    
    ![js\_016][js_016]
    
        i = 0;
        let a = ++i+i+++i+++i; //等价于(++i) + (i++) + (i++) + i
        console.log(a) //1 + 1 + 2 + 3
    
    ![js\_017][js_017]

### 2.算术运算符 ###

*  算术运算符以二个数值(字面量或变量)作为操作数，并返回单个数值。

<table> 
 <thead> 
  <tr> 
   <th align="left">符号</th> 
   <th align="left">意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>+</code></td> 
   <td align="left">加法运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>-</code></td> 
   <td align="left">减法运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>/</code></td> 
   <td align="left">除法运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>*</code></td> 
   <td align="left">乘法运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>%</code></td> 
   <td align="left">取模运算符</td> 
  </tr> 
 </tbody> 
</table>

### 3.关系运算符 ###

*  比较运算符比较二个操作数并返回基于比较结果的`Boolean`值

<table> 
 <thead> 
  <tr> 
   <th align="left">符号</th> 
   <th align="left">意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>in</code></td> 
   <td align="left">判断对象是否拥有给定属性</td> 
  </tr> 
  <tr> 
   <td align="left"><code>instanceof</code></td> 
   <td align="left">判断一个对象是否是另一个对象的实例</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;</code></td> 
   <td align="left">小于运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&gt;</code></td> 
   <td align="left">大于运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;=</code></td> 
   <td align="left">小于等于运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&gt;=</code></td> 
   <td align="left">大于等于运算符。<br>注意<code>=&gt;</code>不是运算符，而是<strong>箭头函数</strong>的表示符</td> 
  </tr> 
 </tbody> 
</table>

### 4.相等运算符 ###

*  如果相等，操作符返回的是Boolean(布尔)类型的true,否则返回false。

<table> 
 <thead> 
  <tr> 
   <th align="left">符号</th> 
   <th align="left">意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>==</code></td> 
   <td align="left">相等运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>!=</code></td> 
   <td align="left">不等运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>===</code></td> 
   <td align="left">全等运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>!==</code></td> 
   <td align="left">非全等运算符</td> 
  </tr> 
 </tbody> 
</table>

//宽松比较
    console.log(300 == '300') // true
    console.log('300' == '300')  //true
    
    //严格比较 ===
    console.log(300 === '300')  //false
    console.log('300' === '300')  //true

*  使用宽松比较的时候，尽可能确保比较的类型相同，否则会引起隐式转换，而且隐式转换的规则很复杂不好把控。
 *  如果不知道类型是否一致，但是就是要求一定要相等，那么请使用 === 和 !==
 *  建议比较的时候，一律使用 === 和 !== 。

### 5.位移运算符 ###

*  在二进制的基础上对数字进行移动操作

<table> 
 <thead> 
  <tr> 
   <th align="left">符号</th> 
   <th align="left">意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>&lt;&lt;</code></td> 
   <td align="left">按位<strong>左移</strong>运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&gt;&gt;</code></td> 
   <td align="left">按位<strong>右移</strong>运算符</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&gt;&gt;&gt;</code></td> 
   <td align="left">按位无符号右移运算符。</td> 
  </tr> 
 </tbody> 
</table>

### 6.二进制位运算符 ###

*  二进制运算符将它们的操作数作为32个进制位(0或1)的集合，并返回标准的JavaScript数值。

<table> 
 <thead> 
  <tr> 
   <th align="left">符号</th> 
   <th align="left">意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>&amp;</code></td> 
   <td align="left">二进制位与(AND)</td> 
  </tr> 
  <tr> 
   <td align="left"><code>|</code></td> 
   <td align="left">二进制位或（OR）</td> 
  </tr> 
  <tr> 
   <td align="left"><code>^</code></td> 
   <td align="left">二进制位异或。按位取反(XOR)</td> 
  </tr> 
 </tbody> 
</table>

### 7.二元逻辑运算符 ###

*  逻辑运算符典型的用法是用于boolean(逻辑)值运算，它们返回boolean值
 *  这些运算符和其他高级语言都一样，支持**短路**。

### 8.条件(三元)运算符 ###

*  `(condition ? ifTrue :ifFalse)`条件运算运算符把两个结果中其中一个符合逻辑的值返回。
 *  语法：`条件表达式?真值:假值`
 *  简单示例

a = 10
    b = a>11? 5:19 //如果a>11等于True则返回5，否则返回19
    console.log(b)

### 9.赋值运算符 ###

*  赋值运算符会将右边的操作数的值分配给左边的操作数，并将其值修改为右边操作数相等的值。
 *  **将符号右边的结果赋值给左边的元素**

<table> 
 <thead> 
  <tr> 
   <th align="left">符号</th> 
   <th align="left">意义</th> 
   <th align="left">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>=</code></td> 
   <td align="left">赋值运算符</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>*=</code></td> 
   <td align="left">赋值乘积。</td> 
   <td align="left"><code>a *= b</code>等价于<code>a = a*b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>/=</code></td> 
   <td align="left">赋值商</td> 
   <td align="left"><code>a /= b</code>等价于<code>a = a/b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>%=</code></td> 
   <td align="left">赋值求余</td> 
   <td align="left"><code>a %= b</code>等价于<code>a = a%b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>+=</code></td> 
   <td align="left">赋值求和</td> 
   <td align="left"><code>a += b</code>等价于<code>a = a+b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>-=</code></td> 
   <td align="left">赋值求差</td> 
   <td align="left"><code>a -= b</code>等价于<code>a = a-b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;&lt;=</code></td> 
   <td align="left">左位移</td> 
   <td align="left"><code>a &lt;&lt;= b</code>等价于<code>a = a&lt;&lt;b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>&gt;&gt;=</code></td> 
   <td align="left">右位移</td> 
   <td align="left"><code>a &gt;&gt;= b</code>等价于<code>a = a&gt;&gt;b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>&gt;&gt;&gt;=</code></td> 
   <td align="left">无符号右位移</td> 
   <td align="left"><code>a &gt;&gt;&gt;=</code>等价于<code>a = a&gt;&gt;&gt;b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>&amp;=</code></td> 
   <td align="left">赋值与</td> 
   <td align="left"><code>a &amp;= b</code>等价于<code>a = a&amp;b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>^=</code></td> 
   <td align="left">赋值按位异或</td> 
   <td align="left"><code>a ^= b</code>等价于<code>a = a^b</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>|=</code></td> 
   <td align="left">赋值或</td> 
   <td align="left"><code>a |= b</code>等价于<code>a = a|b</code></td> 
  </tr> 
 </tbody> 
</table>

### 10.解构赋值 ###

*  解构赋值，可以将属性或值从对象或数组中取出，赋值给其他变量。
 *  `[a,b] = [10,20]`

var a,b,rest;
    [a,b] = [10,20]
    console.log(a,b) //10,20
    var c,d,e;
    e = [a+10,b+10];
    [c,d] = e;
    console.log(c,d); // 20,30
    [c,d,...rest] = [1,2,3,4,5,6,7,8];
    console.log(c,d,rest);
    // [c,...rest,d,f] = [0,1,2,4,5,6,7,8]; //错误，可变参数必须在最后
    [c,d] = [6,5,4,3,2,1]
    console.log(c,d) //6,5
    console.log();
    [,,c,d,,] = [1,2,3,4,5,6];
    console.log(c,d) // 3,4

![js\_005][js_005]

*  **解构时的默认值**
    
    1.  为了防止从数组中取出一个值为nudefined的对象，可以在表达式左边的数组中为任意对象域设默认值
    
        var a,b;
        [a=5,b=7] = [1];
        console.log(a); //1
        console.log(b); //7
    
    ![js\_006][js_006]
 *  **变量交换**
    
    1.  在一个解构表达式中可以交换两个变量的值。
    
        var a =5;
        var b = 10;
        
        [a,b] = [b,a];
        console.log(a,b) // 10,5
    
    ![js\_007][js_007]
 *  **对象解构**
    
    1.  对象解构中，需要解构的变量名必须和对象名相同
    
        let o = { p:42,q:true};
        var { a,b} = o;
        console.log(a,b);// undefined,undefined
        var { p,q} = o;
        console.log(p,q); // 42,true
        console.log();
        
        o = { e:2,f:3};
        ({ e,f} = o);
        console.log(e,f) //2,3
        
        var { e:d,d:h=10,f:j} = o;
        console.log(d,h,j); //2,10,3
        
        o = { a:1,b:2,c:3,d:4,e:5};
        var { a,c,...rest} = o;
        console.log(a,b,rest); //1 undefined { b: 2, d: 4, e: 5 } #不能跳过
        ({ a,b,...rest} = o);
        console.log(a,b,rest); //1 2 { c: 3, d: 4, e: 5 }
    
    ![js\_008][js_008]
 *  **对象属性计算名和解构**
    
        // let key = "z";
        var key;
        let {  [key]: foo } = {  z: "bar" };
        console.log(key,foo); //undefined,undefined
        key = 'z';
        ({  [key] : foo } = {  z: "bar" });
        console.log(key,foo); // 'z',"bar"
    
    ![js\_009][js_009]
 *  **函数传参时的结构**
    
    1.  解决默认传参问题
    
        function drawES2015Chart({ size = 'big', cords = {  x: 0, y: 0 }, radius = 25} = { })
        { 
        console.log(size, cords, radius);
        // do some chart drawing
        }
        
        drawES2015Chart({ 
        cords: {  x: 18, y: 30 },
        radius: 30
        });
    
    ![js\_010][js_010]
 *  **结构嵌套对象和数组**
    
        const metadata = { 
        title: 'Scratchpad',
        translations: [
            { 
            locale: 'de',
            localization_tags: [],
            last_edit: '2014-04-14T08:43:37',
            url: '/de/docs/Tools/Scratchpad',
            title: 'JavaScript-Umgebung'
            }
        ],
        url: '/en-US/docs/Tools/Scratchpad'
        };
        
        let { 
        title: englishTitle, // rename
        translations: [
            { 
            title: localeTitle, // rename
            },
        ],
        } = metadata;
        
        console.log(englishTitle); // "Scratchpad"
        console.log(localeTitle);  // "JavaScript-Umgebung"
    
    ![js\_011][js_011]
 *  **For of迭代和解构**
    
        var people = [
        { 
            name: 'Mike Smith',
            family: { 
            mother: 'Jane Smith',
            father: 'Harry Smith',
            sister: 'Samantha Smith'
            },
            age: 35
        },
        { 
            name: 'Tom Jones',
            family: { 
            mother: 'Norah Jones',
            father: 'Richard Jones',
            brother: 'Howard Jones'
            },
            age: 25
        }
        ];
        
        for (var { name: n, family: { father: f}} of people) { 
        console.log('Name: ' + n + ', Father: ' + f);
        }
        
        // "Name: Mike Smith, Father: Harry Smith"
        // "Name: Tom Jones, Father: Richard Jones"
    
    ![js\_012][js_012]

### 11.逗号操作符 ###

*  `,`逗号操作符允许在一个判断状态中有多个表达式去进行运算并且最后返回最后一个表达式的值。
 *  一行可以进行多个运算

let a= 4+5,b=true,c=a>20?'t':'f';
    console.log(a); //9
    console.log(b); // true
    console.log(c); // f
    
    function text(){
        return 3,a+b,c = a++
    }
    console.log()
    console.log(text())  //9
    console.log(c) //9
    console.log(a) //10

![js\_013][js_013]

### 其他 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">instanceof</td> 
   <td align="left">判断是否属于指定类型</td> 
  </tr> 
  <tr> 
   <td align="left">typeof</td> 
   <td align="left">返回类型字符串</td> 
  </tr> 
  <tr> 
   <td align="left">delete</td> 
   <td align="left">delete操作符，删除一个对象(an object)或者一个对象的属性(an object’s property)或者一个数组中某一个键值(an element at s specified Index in an array)</td> 
  </tr> 
  <tr> 
   <td align="left">in</td> 
   <td align="left">如果指定的属性在对象内，则返回true</td> 
  </tr> 
 </tbody> 
</table>

console.log('a' instanceof String) //false #原来使用的类型是string,旧类型和新类型不兼容
    console.log(1 instanceof Number) //false #因为原来使用的类型是number，旧类型和新类型不兼容
    
    a = new String('b')
    console.log(a instanceof String) //true
    console.log(new Number(1) instanceof Number) //true
    console.log(a instanceof Object) //true
    
    console.log(typeof('a')) //string
    console.log(typeof 'a') //string
    console.log(typeof a) //object

![js\_015][js_015]

*  instanceof 要求必须明确使用类型定义变量，就是对象必须是new关键字声明创建的。它可以用于继承关系的判 断。
 *  typeof就是返回对象的类型字符串。
 *  delete 删除对象、属性、数组元素

## 运算符的优先级 ##

*  运算符优先级，由高到低，顺序如下：  
    ![js\_014][js_014]

## 表达式的值 ##

*  在javascript中表达式是有自己的值的。表达式的值。就像逗号操作符一样，如果函数赴安徽一个逗号表达式，会返回最后一次计算的表达式的值。

a = 1+5 //a = 5
    function add(){ 
        let x = 0
        return x+=1 //注意这表达的值是x+1,即x+=1==>x = x+1,返回的是表达式的值，即x+1计算的值
    }
    
    add() //1
    
    function xdd(){ 
        let x=0
        return x++ //返回0,后做x++
    }
    
    function xdd(){ 
        let x = 0
        return ++x //返回1，先做++x
    }
    
    function xdd(){ 
        let x = 0
        let y = 2
        return x,y,x+y,x-y; //会返回x-y的值即-2
    }

[js_001]: https://raw.githubusercontent.com/1263351411/xdd.github.io/master/javascript/img/js_001.jpg
[js_020]: /images/20211219/8cc095595da54fc295c4910c02924bcc.png
[js_002]: /images/20211219/4ecfaeaf964a4356a1dc3f9cb7fffaa5.png
[js_018]: /images/20211219/3c08f55c1e29416caf0b48723cd00405.png
[js_019]: /images/20211219/5324700342384d9792c07dd049e3a227.png
[js_003]: /images/20211219/5a6a66d6d355454e9b4e2774432f3e13.png
[js_004]: /images/20211219/d22e9b00c2344913bcab40f07cc061b4.png
[js_016]: /images/20211219/74c5934669ee46e285018d96f6ccbb24.png
[js_017]: /images/20211219/522602e486984a14998cf924debfb8f1.png
[js_005]: /images/20211219/b0651c55aed64c8d9f231f0283b84bef.png
[js_006]: /images/20211219/72e6df2e262f4db3a3b9dc0bb840dc7c.png
[js_007]: /images/20211219/fcbd63f011bc4e07b71b4796e4fc6884.png
[js_008]: /images/20211219/3e3b8a1c94fe478c8a024de84e4f4eae.png
[js_009]: /images/20211219/898331b1d2e044ccbe341fed33f43865.png
[js_010]: /images/20211219/da2fbc9ca1bf4af59457d776b9a7ff6d.png
[js_011]: /images/20211219/0fb61591a05344f18c7309fbb126fcbe.png
[js_012]: /images/20211219/b738c7e01cc44a639b3ce95370324791.png
[js_013]: /images/20211219/76fe078bc4ae4f699c212ac6a28d7652.png
[js_015]: /images/20211219/b014ba77e8244ecdb39cabe3015bea0f.png
[js_014]: /images/20211219/6f2ea40d0a9c409ba36e8ad4b7a54fca.png