详解JavaScript中操作符和表达式

时间：2018-09-17 编辑：猪哥来源：一聚教程网

一、一元操作符

1.delete操作符

delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放

语法：delete expression

delete 操作符会从某个对象上移除指定属性。成功删除的时候回返回 true，否则返回 false

let Employee = {
   age: 28,
   name: 'abc',
   designation: 'developer'
 };
 console.log(delete Employee.name);  // returns true
 console.log(delete Employee.age);  // returns true
 console.log(Employee); //{designation: "developer"}

2.typeof操作符

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

语法：typeof operand； typeof (operand)；

typeof NaN === 'number';
typeof Number(1) === 'number';
typeof "" === 'string';
typeof true === 'boolean';
typeof Symbol('foo') === 'symbol';
typeof undefined === 'undefined';
typeof null === 'object'
typeof [1, 2, 4] === 'object';
typeof new Boolean(true) === 'object';
typeof new Number(1) === 'object';
typeof new String("abc") === 'object';
typeof function(){} === 'function';

3.void运算符

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

语法：void expression

这个链接点击之后不会做任何事情，如果去掉 void()，点击之后整个页面会被替换成一个字符 0。

chrome中即使也没变化，firefox中会变成一个字符串0

点击这个链接会让页面背景变成绿色。

二、关系操作符

1.in运算符

如果指定的属性在指定的对象或其原型链中，则in 运算符返回true

语法：prop in object

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

2.instanceof运算符

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

语法：object instanceof constructor

let simpleStr = "This is a simple string";
let myString = new String();
let newStr  = new String("String created with constructor");
let myDate  = new Date();
let myObj   = {};
simpleStr instanceof String; // 返回 false, 检查原型链会找到 undefined
myString instanceof String; // 返回 true
newStr  instanceof String; // 返回 true
myString instanceof Object; // 返回 true
myDate instanceof Date;   // 返回 true
myObj instanceof Object;  // 返回 true, 尽管原型没有定义

三、表达式

1.this

在函数内部，this的值取决于函数被调用的方式。在严格模式下，this将保持他进入执行上下文时的值，所以下面的this将会默认为undefined

function f2(){
 "use strict"; // 这里是严格模式
 return this;
}
f2() === undefined; // true

当一个函数在其主体中使用 this 关键字时，可以通过使用函数继承自Function.prototype 的 call 或 apply 方法将 this 值绑定到调用中的特定对象

function add(c, d) {
 return this.a + this.b + c + d;
}
let o = {a: 1, b: 3};
// 第一个参数是作为‘this'使用的对象
// 后续参数作为参数传递给函数调用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的

function f(){
 return this.a;
}
let g = f.bind({a:"azerty"});
console.log(g()); // azerty
let h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

在箭头函数中，this与封闭词法上下文的this保持一致。在全局代码中，它将被设置为全局对象

let globalObject = this;
let foo = (() => this);
console.log(foo() === globalObject); // true

2.super

语法：

super([arguments]); // 调用父对象/父类的构造函数

super.functionOnParent([arguments]); // 调用父对象/父类上的方法

在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数

class Human {
 constructor() {}
 static ping() {
  return 'ping';
 }
}
 
class Computer extends Human {
 constructor() {}
 static pingpong() {
  return super.ping() + ' pong';
 }
}
Computer.pingpong(); // 'ping pong'

3.new

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

function Car() {}
car1 = new Car()
console.log(car1.color)      // undefined
Car.prototype.color = null
console.log(car1.color)      // null
car1.color = "black"
console.log(car1.color)      // black

4.展开语法

可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开

在函数调用时使用展开语法

function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction.apply(null, args);
 
//展开语法
function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction(...args);

构造字面量数组时使用展开语法

let parts = ['shoulders'，'knees']; 
let lyrics = ['head'，... parts，'and'，'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

数组拷贝

let arr = [1, 2, 3];
let arr2 = [...arr]; // like arr.slice()
arr2.push(4); 
 
// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

连接多个数组

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
let arr3 = arr1.concat(arr2);
 
//使用展开语法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
let arr3 = [...arr1, ...arr2];

5.类表达式

类表达式是用来定义类的一种语法

let Foo = class {
 constructor() {}
 bar() {
  return "Hello World!";
 }
};
let instance = new Foo();
instance.bar(); 
// "Hello World!"

6.函数表达式

function 关键字可以用来在一个表达式中定义一个函数，你也可以使用 Function 构造函数和一个函数声明来定义函数
函数声明提升和函数表达式提升：JavaScript中的函数表达式没有提升,不像函数声明,你在定义函数表达式之前不能使用函数表达式

/* 函数声明 */
 
foo(); // "bar"
function foo() {
 console.log("bar");
}
 
 
/* 函数表达式 */
 
baz(); // TypeError: baz is not a function
let baz = function() {
 console.log("bar2");
};

7.function*表达式

function关键字可以在表达式内部定义一个生成器函数，function 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数(generator function)，它返回一个 Generator 对象

语法：function* name([param[, param[, ... param]]]) { statements }

function* idMaker(){
 let index = 0;
 while(index<3)
  yield index++;
}
 
let gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined

接收参数

function* idMaker(){
  let index = arguments[0] || 0;
  while(true)
    yield index++;
}
 
let gen = idMaker(5);
console.log(gen.next().value); // 5
console.log(gen.next().value); // 6

传递参数

function *createIterator() {
  let first = yield 1;
  let second = yield first + 2; // 4 + 2 
                 // first =4 是next(4)将参数赋给上一条的
  yield second + 3;       // 5 + 3
}
 
let iterator = createIterator();
 
console.log(iterator.next());  // "{ value: 1, done: false }"
console.log(iterator.next(4));  // "{ value: 6, done: false }"
console.log(iterator.next(5));  // "{ value: 8, done: false }"
console.log(iterator.next());  // "{ value: undefined, done: true }"

表达式

let x = function*(y) {
  yield y * y;
};

上一个： JS 数组随机洗牌的实例代码
下一个： vue仿element实现分页器效果

推荐专题

最新下载

热门教程

详解JavaScript中操作符和表达式

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程