详解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 相关文章推荐
图片之间的切换
Jun 26 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
基于php权限分配的实现代码
2013/04/28 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
使用Python写一个小游戏
2018/04/02 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
两只小狮子教学反思
2014/02/05 职场文书
更夫岗位责任制
2014/02/11 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
大学军训口号大全
2015/12/24 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书