详解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 相关文章推荐
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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
星际争霸秘籍
2020/03/04 星际争霸
yii操作session实例简介
2014/07/31 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
Node.js文件操作详解
2014/08/16 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
python脚本实现查找webshell的方法
2014/07/31 Python
python文字转语音实现过程解析
2019/11/12 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
如何进行有效的自我评价
2013/09/27 职场文书
园林设计师自荐信
2013/11/18 职场文书
简历上的自我评价
2014/02/03 职场文书
反邪教标语
2014/06/23 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android