微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

详解JavaScript中操作符和表达式

一、一元操作符

1.delete操作符

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

语法:delete expression

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

rush:js;"> 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);

rush:js;"> 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

二、关系操作符

1.in运算符

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

语法:prop in object

rush:js;"> 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

rush:js;"> 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

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

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

rush:js;"> 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的第一个参数,无论这个函数是如何被调用

rush:js;"> 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保持一致。在全局代码中,它将被设置为全局对象

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

2.super

语法:

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

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

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

rush:js;"> 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 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

rush:js;"> 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的方式展开

函数调用时使用展开语法

rush:js;"> function myFunction(x,y,z) { } let args = [0,1,2]; myFunction.apply(null,args);

//展开语法
function myFunction(x,2];
myFunction(...args);

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

rush:js;"> let parts = ['shoulders','knees']; let lyrics = ['head',... parts,'and','toes']; // ["head","shoulders","knees","and","toes"]

数组拷贝

rush:js;"> let arr = [1,3]; let arr2 = [...arr]; // like arr.slice() arr2.push(4);

// arr2 此时变成 [1,3,4]
// arr 不受影响

连接多个数组

rush:js;"> let arr1 = [0,2]; let arr2 = [3,4,5]; // 将 arr2 中所有元素附加到 arr1 后面并返回 let arr3 = arr1.concat(arr2);

//使用展开语法
let arr1 = [0,5];
let arr3 = [...arr1,...arr2];

5.类表达式

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

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

6.函数表达式

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

rush:js;"> /* 函数声明 */

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 }

rush:js;"> 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

接收参数

rush:js;"> 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

传递参数

rush:js;"> 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 }"

表达式

rush:js;"> let x = function*(y) { yield y * y; };

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据复制操作的两种方式。‌在聊深浅拷贝之前咱得了解一下js中的两种数据类型:
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:重建二叉树、反向输出链表每个节点 题目 重建二叉树: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列 {1,2,4,7,3,5,6,8} 和中序遍历序列 {
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下JavaScript中this指向的问题。
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高