一个表达式是对一个变量或值的引用，或者是一组值和变量与运算符的组合。它返回一个值

  1. 表达式就是短语，js 解释器会计算表达式的结果<br />简单表达式  + 运算符 = 复杂表达式

每一个合法的表达式都能计算成某个值，但从概念上讲，有两种类型的表达式：有副作用的（比如赋值）和单纯计算求值的。

主要表达式

Primary Expression 是表达式的原子项。它是表达式的最小单位，它所涉及的语法结构也是优先级最高的。

this关键字

  1. var obj = {
  2.  x:1,
  3.  f() {
  4.       console.log(this.x)
  5.  }
  6. }
  7. obj.f(); // 1

变量

字面量

数组和对象的初始化表达式

  1. [1,,2]
  2. {a:1}

函数定义表达式

  1. var func = function(){} // 匿名
  2. var func1 = function func1() {} 命名
  3. (class {})
  4. class a {}
  5. var asyncfunc = function * () {}
  6. async function () {}
  7. async function * () {}
  8. yield
  9. yield *
  10. await

字面量正则表达式

  1. /fsf/g

模板字符串

  1. `sdfsdf`

分组操作符

任何表达式加上圆括号，都被认为是Primary Expression，这个机制使得圆括号成为改变运算优先顺序的手段。

  1. var a = 1;
  2. var b = 2;
  3. var c = 3;
  4. // 默认优先级
  5. a + b * c     // 7
  6. // 默认是这样计算的
  7. a + (b * c)   // 7
  8. // 现在使加法优先于乘法
  9. (a + b) * c   // 9

左值表达式

左值表达式就是可以放到等号左边的表达式

属性访问表达式

  1. var obj = {a:1}
  2. obj.a
  3. obj['a']

new 操作符

  1. new Object()
  2. new Point(2,3)

元属性

new.target属性

new.target属性允许你检测函数或构造方法是否是通过new运算符被调用的。
new.target指向了 new 调用的构造函数
在 arrow functions 中，new.target 指向最近的外层函数的new.target

  • 函数调用中的 new.target ```javascript function Person(name) { if (new.target !== undefined) { this.name = name; } else { throw new Error(‘必须使用 new 命令生成实例’); } }

// 另一种写法 function Person(name) { if (new.target === Person) { this.name = name; } else { throw new Error(‘必须使用 new 命令生成实例’); } }

var person = new Person(‘张三’); // 正确 var notAPerson = Person.call(person, ‘张三’); // 报错

  2. - 构造方法中的 new.target，子类继承父类时，`new.target`会返回子类。
  3. ```javascript
  4. class Rectangle {
  5.   constructor(length, width) {
  6.     console.log(new.target === Rectangle);
  7.     // ...
  8.   }
  9. }
  11. class Square extends Rectangle {
  12.   constructor(length, width) {
  13.     super(length, width);
  14.   }
  15. }
  17. var obj = new Square(3); // 输出 false

利用这个特点，可以写出不能独立使用、必须继承后才能使用的类。

  1. class Shape {
  2.   constructor() {
  3.     if (new.target === Shape) {
  4.       throw new Error('本类不能实例化');
  5.     }
  6.   }
  7. }
  8. class Rectangle extends Shape {
  9.   constructor(length, width) {
  10.     super();
  11.     // ...
  12.   }
  13. }
  14. var x = new Shape();  // 报错
  15. var y = new Rectangle(3, 4);  // 正确

import.meta

import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的URL。
实例
这里有一个 my-module.mjs模块

  1. <script type="module" src="my-module.mjs"></script>

你可以通过 import.meta 对象获取这个模块的元数据信息.

  1. console.log(import.meta); // { url: "file:///home/user/my-module.mjs" }

函数调用表达式

  1. f(0)
  2. obj.f();

super

super关键字用于访问和调用一个对象的父对象上的函数。

import 调用

标签模板

  1. d = 7 //这个表达式返回7
  2. a = b = c = d
  3. a b c d // 都是7

参数列表

  • () 返回空 List
  • …arguments
  • a,b,c
  • a,…arguments

自增和自减

一元运算符. 将操作数的值加一. 如果放在操作数前面 (x), 则返回加一后的值; 如果放在操作数后面 (x), 则返回操作数原值,然后再将操作数加一.

  1. var x=3;
  2. console.log(++x); //4
  3. console.log(x); //4
  4. var y=3;
  5. console.log(y++); //3
  6. console.log(y); //4

一元操作符

delete

删除数组中的元素时，数组的长度是不变的，

typeof

typeof 用来判断原始数据很有效果，但是判断 Object 就不行，使用 instanceof 判断引用类型

  2. typeof '12';     // returns "string"
  3. typeof `sdf`    // returns 'string'
  5. // NaN是一种特殊的number。
  6. typeof 12;      // returns "number"
  7. typeof NaN;            // returns 'number'
  9. typeof dontExist; // returns "undefined"
  10. typeof undefined // returns 'undefined'
  11. typeof true; // returns "boolean"
  1. typeof {};     // returns "object"
  2. typeof /sdf/ // returns object
  3. typeof null => object // Null 是特殊的对象，在 js 运行时里面的类型是 Null

ECMA-262 规定任何在内部实现[[Call]]方法 的对象都应该在应用 typeof 操作符时返回”function”。

  1. typeof function (){};     // returns "function" 因为函数对象实现了[[call]]方法
  1. var a1;        //a1的值为undefined
  2. var a2 = null;
  3. var a3 = NaN;
  5. alert(a1 == a2); //显示"true"
  6. alert(a1 != a2); //显示"false"
  7. alert(a1 == a3); //显示"false"
  8. alert(a1 != a3); //显示"true"
  9. alert(a2 == a3); //显示"false"
  10. alert(a2 != a3); //显示"true"
  11. alert(a3 == a3); //显示"false"
  12. alert(a3 != a3); //显示”true"

从上面的代码可以得出结论：（1）undefined与null是相等；（2）NaN与任何值都不相等，与自己也不相等。

为了避免收到undefined，可以对参数进行检查

  1. function abs(x) {
  2.     if (typeof x !== 'number') {
  3.         throw 'Not a number';
  4.     }
  5.     if (x >= 0) {
  6.         return x;
  7.     } else {
  8.         return -x;
  9.     }
  10. }

ec4299a73fb84c732efcd360fed6e16b.png
毫无疑问，我们应该按照 typeof 的结果去理解语言的类型系统。但JS之父本人也在多个场合表示过，typeof 的设计是有缺陷的，只是现在已经错过了修正它的时机。

void

关于void运算符，有两种写法：

  1. void expression
  2. void (expression)

void运算符的操作数可以是任意类型。该运算符指定要计算一个表达式但是不论该表达式原来是否有自己的返回值，其返回值都为undefined。其作用如下：

  • 作用一：返回undefined,(对于为什么不直接使用undefined，是因为undefined不是关键字，意味着它随时可能被篡改成其他值。。。)。
  • 作用二：防止不必要的行为，如下代码：
    如下创建了一个超链接文本，当用户单击该文本时，不会有任何效果。
  1. <a href="javascript:void(0)">Click here to do nothing</a>
  1. function func(){
  2.     return this;
  3. }
  4. console.log(void func());

-

一元减运算符将操作转换为Number类型并取反.

  1. var x = 3;
  2. -true // -1
  3. y = -x; // y = -3, x = 3

+

一元加运算符将操作转换为Number类型.

  1. console.log( +'3' ); // 3
  2. console.log( '3' ); // '3'
  3. console.log(+true); // 1

~

按位非运算符.
对每一个比特位执行非（NOT）操作。NOT a 结果为 a 的反转（即反码）。
对任一数值 x 进行按位非操作的结果为 -(x + 1)。例如，~5 结果为 -6。

源码求补码
正数： 和源码相同，+9的补码是00001001
负数：-9 按位取反加1，-9的补码11110111

补码求源码
符号为是0： 和源码相同。00001001是9
符号为是1：符号位不变，其余位取反后加1，11110111->10001001->-9

  1. 9 (base 10) = 00000000000000000000000000001001 (base 2)
  2. ~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
  4. ~9 所有位取反得到11111111111111111111111111110110，最高位符号位为1，表明是负数，100...01010，是-10
  1. var str = 'rawr';
  2. var searchFor = 'a';
  4. // 这是 if (-1*str.indexOf('a') <= 0) 条件判断的另一种方法
  5. if (~str.indexOf(searchFor)) {
  6.   // searchFor 包含在字符串中
  7. } else {
  8.   // searchFor 不包含在字符串中
  9. }
  11. // (~str.indexOf(searchFor))的返回值
  12. // r == -1
  13. // a == -2
  14. // w == -3

!

逻辑非运算符

算术运算符

  1. + - * / % **

幂运算符**：

  1. 2 ** 3 // 8
  2. 10 ** -1 // 0.1

关系操作符

  1. > < >= <=

in

如果所指定的属性确实存在于所指定的对象中，则会返回true

instanceof

如果所判别的对象确实是所指定的类型，则返回true。

相等运算符

== != === !==
很多实践中推荐禁止使用“ ”，而要求程序员进行显式地类型转换后，用 === 比较。
根据JS的语法，要满足=的条件如下

  1. 如果是引用类型，则两个变量必须指向同一个对象（同一个地址）；
  2. 如果是基本类型，则两个变量除了类型必须相同外，值还必须相等。

    位移运算符

    <<

    按位左移运算符。
    1. a << b
    2. // 将a的二进制串向左移动b位,右边移入0.
    3. a << 1 // 8

    >>

    按位右移运算符。
    1. a >> b
    2. // 把a的二进制表示向右移动b位，丢弃被移出的所有位.
    3. // 左边多出的空位由原值的最左边数字补齐.注意会先转成32bit
    4. a >> 1 // 2

    >>>

    按位无符号右移运算符。
    1. a >>> b
    2. // 把a的二进制表示向右移动b位，丢弃被移出的所有位，并把左边空出的位都填充为0

    二进制位运算符

操作数被转换为32bit整數，以位序列（0和1组成）表示.若超過32bits，則取低位32bit

  • &(与)
    a = 0b100
    b = 0b001
    a & b // 0
  • |(或)
    a | b // 5
  • ^(位异)
    每一个对应的位，两个不相同则返回1，相同则返回0
    a ^ b // 5
  • ~
    var a = 4
    ~a // -5

逻辑运算

&& || !

在js逻辑运算中，0、””、null、false、undefined、NaN都会判为false，其他都为true

作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止
短路运算符

  1. A && (A = B)相当 A 是true,返回 B，**A是 false,返回 A**短路
  2.  A = A || B相当 **A 是true,返回 A**短路，A是 false,返回 B
  4. param && (this.param = param)
  5. //用来判空
  7. foo = foo || bar //如果foo存在，值不变，否则把bar的值赋给foo
  9. function log(x, y) {
  10.   y = y || 'World';
  11.   console.log(x, y);
  12. }

用来指定默认值
问题：y不能赋判false的值

在javascript的逻辑运算中，0、””、null、false、undefined、NaN都会判定为false，而其他都为true

  1. var width = 100;
  2. var height = 200;
  4. var data = width || height ;
  6. //data = 100
  8. var width;
  9. var height = 200;
  11. var data = width || height ;
  13. //data = 200
  15. var width = 100;
  16. var height = 200;
  18. var data = height  || width ;
  20. //data = 200

条件（三元）运算符

(condition ? ifTrue : ifFalse)

逗号操作符

  1. var i = 0, j = 9;

赋值运算符

赋值表达式有返回值，返回值就是右值

复合赋值

这样的连续赋值，是右结合的，它等价于下面这种：

  1. a = (b = (c = d)) //可以看出c = d表达式返回7

赋值表达式的使用，还可以结合一些运算符，例如：

  1. x = y
  2. x += y //    x = x + y
  3. x -= y //    x = x - y
  4. x **= y //    x = x ** y
  5. x |= y //    x = x | y
  6. // 全部
  7. = *= /= %= += -= <<= >>= >>>= &= ^= |=

解构赋值

Destructuring定义

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，本质是赋值
左边一种结构，[],{}
右边一种可遍历的结构，进行解构赋值
以前的做法，为变量赋值，只能直接指定值。

  1. let arr = [1,2]
  2. let first = arr[0]

数组解构赋值

如果左右是数据，就叫数组解构赋值

根据顺序去匹配

  1. let [a, b, c] = [1, 2, 3];
  3. let a,b,c,rest;
  4. // 跳过不赋值的变量
  5. [a,,b] = [1,2,3] // a = 1, b = 3
  6. // 带默认
  7. [a,b,c=3] = [1,2]; //a = 1, b = 2,c=3
  8. [a,b] = '123' // a = 1, b = 2 只要是可遍历的
  9. // 剩余
  10. [a,b,…rest]=[1,2,3,4,5,6]; //a = 1, b = 2, rest = [3,4,5,6];
  11. [a,b] = [b,a]; // a = 2, b = 1,变量交换

对象解构赋值

如果左右是对象，就叫对象解构赋值，包括字符串（左边是数组，右边是字符串），布尔值，，数值解构赋值
根据key，value去匹配

  1. var obj = {k:1,a:1,b:1,d:1,e:5};
  2. var {a,b,c,d=3} = obj
  3. //a = 1 b = 1 c = undefined d = 1 如果d没有赋值，d默认是3

属性也可以解构赋值

  1. let user = { name: 's', surname: "t"};
  2. [user.name, user.surname] = [1,2]
  3. let o = {a:1, b:2};
  4. [o.a, o.b] = [3,4]
  5. obj // => {3,4}
  1. let options = {
  2.     size: {
  3.         width: 100,
  4.         height: 200
  5.     },
  6.     items: [1,2],
  7.     extra: true
  8. }
  9. let { size: { width,height}, items: [item1]} = options

函数参数解构赋值

直接写入变量，属性名为变量名

  1. function f(x, y) {
  2.   return {x, y};
  3. }
  5. // 等同于
  6. function f(x, y) {
  7.   return {x: x, y: y};
  8. }
  10. f(1, 2) // Object {x: 1, y: 2}
  1. let metaData = {title:"hello", list:[{title:"111"},{title:"2222"}]}
  2. let {title:eTitle,list:[{title:bTitle}]} = metaData;
  3. // eTitle = hello , dTitle = 111

模块的解构赋值

  1. import runtime from '../../runtime'  
  2. const { init, config } = runtime  
  3. //可以直接写成 
  4. Import {init, config } from ‘../../runtime'