详解JavaScript中操作符和表达式


Posted in Javascript onSeptember 12, 2018

一、一元操作符

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

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

二、关系操作符

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;
};
Javascript 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
javascript 原型继承介绍
Aug 30 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
小程序实现筛子抽奖
May 26 Javascript
JS 数组随机洗牌的实例代码
Sep 12 #Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 #Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 #Javascript
Vue弹出菜单功能的实现代码
Sep 12 #Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 #Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 #Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 #Javascript
You might like
PHP环境搭建最新方法
2006/09/05 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
新教师工作感言
2014/02/16 职场文书
制作部班长职位说明书
2014/02/26 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
电工生产实习心得体会
2016/01/22 职场文书