js表达式和运算符总结

最新推荐文章于 2022-04-12 17:25:30 发布

My_Bells

最新推荐文章于 2022-04-12 17:25:30 发布

阅读量352

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qwe435541908/article/details/103286825

版权

JavaScript 专栏收录该内容

46 篇文章 4 订阅

订阅专栏

1.条件（三元）运算符

condition ? exprIfTrue : exprIfFalse

除了 false，可能的假值表达式还有：null 、NaN 、 0 、空字符串（ “” ）、和 undefined 。如果 condition 是以上中的任何一个, 那么条件表达式的结果就是 exprIfFalse 表达式执行的结果。

2.解构赋值

//默认值
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5

//交换变量
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

//忽略某些返回值
function f() {
  return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

//对象属性计算名和解构
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"

//解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）
// 声明对象 和 自身 self 属性
var obj = {self: '123'};
// 在原型链中定义一个属性 prot
obj.__proto__.prot = '456';
// test
const {self, prot} = obj;
// self "123"
// prot "456"（访问到了原型链）

3.逻辑运算符

运算符	语法	说明
逻辑与，AND（&&）	expr1 && expr2	若 expr1 可转换为 true，则返回 expr2(执行expr2)；否则，返回 expr1。(不执行expr2)
逻辑或，OR（\|\|）	expr1\|\| expr2	若 expr1 可转换为 true，则返回 expr1；否则，返回 expr2。
逻辑非，NOT（!）	!expr	若 expr 可转换为 true，则返回 false；否则，返回 true。

会被转换为 false 的表达式有：
null；
NaN；
0；
空字符串（"" or ‘’ or ``）；
undefined。

4.按位逻辑操作符

|两个位只要有一个为1，那么结果都为1。否则就为0
&两个数值的个位分别相与，同时为1才得1，只要一个为0就为0。
在这里插入图片描述

5.逗号操作符

逗号操作符对它的每个操作数求值（从左到右），并返回最后一个操作数的值。

var x = 1;
x = (x++, x);
console.log(x);
// expected output: 2

x = (2, 3);
console.log(x);
// expected output: 3

6.算术运算符

幂 (**)

-2 ** 2; 
// 在 Bash 中等于 4 ，而在其他语言中一般等于 -4
// 在 JavaScript 中是错误的，因为这会有歧义

-(2 ** 2);
// -4 在JavaScript中能够明显体现出作者的意图

7.对象

计算属性名

// Computed property names (ES6)
var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var param = 'size';
var config = {
  [param]: 12,
  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // { size: 12, mobileSize: 4 }

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

8.运算符优先级

//b被赋值为5，然后a也被赋值为 b=5 的返回值，也就是5。
a = b = 5; 


3 > 2 && 2 > 1
// return true

3 > 2 > 1
// 返回 false，因为 3 > 2 是 true，并且 true > 1 is false
// 加括号可以更清楚：(3 > 2) > 1

9.delete 操作符

delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。成功删除的时候回返回 true，否则返回 false。

如果你试图删除的属性不存在，那么delete将不会起任何作用，但仍会返回true
如果对象的原型链上有一个与待删除属性同名的属性，那么删除属性之后，对象会使用原型链上的那个属性（也就是说，delete操作只会在自身的属性上起作用）
任何使用 var 声明的属性不能从全局作用域或函数的作用域中删除。
- 这样的话，delete操作不能删除任何在全局作用域中的函数（无论这个函数是来自于函数声明或函数表达式）
任何用let或const声明的属性不能够从它被声明的作用域中删除。
不可设置的(Non-configurable)属性不能被移除。这意味着像Math, Array, Object内置对象的属性以及使用Object.defineProperty()方法设置为不可设置的属性不能被删除。

var Employee = {};
Object.defineProperty(Employee, 'name', {configurable: false});

console.log(delete Employee.name);  // returns false

var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
trees[3]//undefined
if (3 in trees) {
   // 这里不会执行
}

var trees = ["redwood","bay","cedar","oak","maple"];
trees[3] = undefined;
if (3 in trees) {
   // 这里会被执行
}

10.in

// 数组
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // 返回true
3 in trees        // 返回true
6 in trees        // 返回false
"bay" in trees    // 返回false (必须使用索引号,而不是数组元素的值)
"length" in trees // 返回true (length是一个数组属性)

// 自定义对象
var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar  // 返回true
"model" in mycar // 返回true

var mycar = {make: "Honda", model: "Accord", year: 1998};
delete mycar.make;
"make" in mycar;  // 返回false
var mycar = {make: "Honda", model: "Accord", year: 1998};
mycar.make = undefined;
"make" in mycar;  // 返回true


"toString" in {}; // 返回true

in右操作数必须是一个对象值。例如，你可以指定使用String构造函数创建的字符串，但不能指定字符串文字。

var color1 = new String("green");
"length" in color1 // 返回true
var color2 = "coral";
"length" in color2 // 报错(color2不是对象)

11.void 运算符

void 运算符对给定的表达式进行求值，然后返回 undefined。

当用户点击一个以 javascript: URI 时，它会执行URI中的代码，然后用返回的值替换页面内容，除非返回的值是undefined。void运算符可用于返回undefined。例如：

<a href="javascript:void(0);">
  这个链接点击之后不会做任何事情，如果去掉 void()，
  点击之后整个页面会被替换成一个字符 0。
</a>
<p> chrome中即使<a href="javascript:0;">也没变化，firefox中会变成一个字符串0 </p>
<a href="javascript:void(document.body.style.backgroundColor='green');">
  点击这个链接会让页面背景变成绿色。
</a>

12.typeof

typeof 操作符返回一个字符串，表示未经计算的操作数的类型。

typeof operand
typeof(operand)

类型	结果
Undefined	“undefined”
Null	“object” (见下文)
Boolean	“boolean”
Number	“number”
BigInt	“bigint”
String	“string”
Symbol (ECMAScript 2015 新增)	“symbol”
宿主对象（由 JS 环境提供）	取决于具体实现
Function 对象 (按照 ECMA-262 规范实现 [[Call]])	“function”
其他任何对象	“object”

13.instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// expected output: true
auto.__proto__ = {} ;
console.log(auto instanceof Car);//false;
console.log(auto instanceof Object);
// expected output: true

14.new 运算符

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：

创建一个空的简单JavaScript对象（即{}）；
将新对象的__proto__指向构造函数的prototype对象。
将构造函数的作用域赋值给新对（也就是this指向新对象）。
执行构造函数中的代码（为这个新对象添加属性）。
返回新的对象

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color);    // undefined
 
Car.prototype.color = "original color";
console.log(car1.color);    // original color
 
car1.color = 'black';
console.log(car1.color);   // black

console.log(car1.__proto__.color) //original color
console.log(car2.__proto__.color) //original color
console.log(car1.color)  // black
console.log(car2.color) // original color

15.yield

yield 关键字用来暂停和恢复一个生成器函数（(function* 或遗留的生成器函数）。IE不支持

function* countAppleSales () {
  var saleList = [3, 7, 5];
  for (var i = 0; i < saleList.length; i++) {
    yield saleList[i];
  }
}

var appleStore = countAppleSales(); // Generator { }
console.log(appleStore.next()); // { value: 3, done: false }
console.log(appleStore.next()); // { value: 7, done: false }
console.log(appleStore.next()); // { value: 5, done: false }
console.log(appleStore.next()); // { value: undefined, done: true }


function* g2() {
  yield 1;
  yield [5,6,7];
}
// { value: 1, done: false }
// { value: [5,6,7], done: false }
// { value: undefined, done: true }

16.yield*

yield* 表达式用于委托给另一个generator 或可迭代对象

function* g1() {
  yield 2;
  yield 3;
  yield 4;
}

function* g2() {
  yield 1;
  yield* g1();
  yield* [5,6,7];
}

var iterator = g2();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

16.new.target

new.target属性允许你检测函数或构造方法是否是通过new运算符被调用的。在通过new运算符被初始化的函数或构造方法中，new.target返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是undefined。

function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"

My_Bells

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js表达式和运算符总结

1.条件（三元）运算符condition ? exprIfTrue : exprIfFalse除了 false，可能的假值表达式还有：null 、NaN 、 0 、空字符串（ “” ）、和 undefined 。如果 condition 是以上中的任何一个, 那么条件表达式的结果就是 exprIfFalse 表达式执行的结果。2.解构赋值//默认值var a, b;[a=5, b=7...
复制链接

扫一扫