首页 / JAVASCRIPT / JavaScript中操作符和表达式的介绍

JavaScript中操作符和表达式的介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中操作符和表达式的介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6960字，纯文字阅读大概需要10分钟。

内容图文

本篇文章给大家带来的内容是关于JavaScript中操作符和表达式的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、一元操作符

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);">
  这个链接点击之后不会做任何事情，如果去掉 void()，
  点击之后整个页面会被替换成一个字符 0。
</a>
<p> chrome中即使<a href="javascript:0;">也没变化，firefox中会变成一个字符串0 </p>
<a href="javascript:void(document.body.style.backgroundColor='green');">
  点击这个链接会让页面背景变成绿色。
</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中操作符和表达式的介绍所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284741.html

来源：【匿名】

【上一篇】如何利用videojs实现视频列表循环播放（完整代码）【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript中操作符和表达式的介绍】教程文章相关的互联网学习教程文章

JavaScript中双等的使用情况【代码】

https://www.cnblogs.com/lvmylife/p/10067824.html1.判断一个对象的值是否存在var obj = {}; if(obj.a == null) {// todo } 2. 判断函数入参是否存在function (a, b) {if(a == null) {// todo} }原文：https://www.cnblogs.com/ganiner/p/11518517.html

javascript中各类的prototype属性【代码】

prototype作用：获取调用对象的对象原型引用应用：可以为某对象原型添加方法例：function getMax() {var max = this[0];for(var x=0; x<this.length; x++){if(this[x] > max)max = this[x];}return max; } Array.prototype.getMax = getMax;//以后数组使用获取最大值的方法就可以如下调用，例如arr是以个整数数组 arr.getMax();//OK 原文：http://www.cnblogs.com/fantasy01/p/4072581.html

bobo javascript中onblur和onfocus

javascript中闭包的2种经典用法

闭包这个东西，网上有很多介绍资料。个人看了很多，还是一知半解。这里不做理论介绍，直接给出2个例子。代码1：记录函数被调用的次数function a() {var i = 0;function b(){return ++i;}return b; }var c = a(); c();//1 c();//2这种方式类似C语言中的private static变量，能够保持局部变量的内存不释放。代码2：正确给DOM注册事件处理函数<body><input type="button" id="b1" value="1"><input type="button" id="b2" value="2"...

Jquery第四课 Javascript中this的使用方法【代码】

thiskeyword的使用在JavaScript中使用thiskeyword表示调用方法的对象，这与大部分面向对象语言是一样的。可是因为call、apply、bind等函数的影响。我们能够改变this所代指的对象。使用call或者apply调用的函数中，this代指传入的第一个參数对象，假设传入null或者undefined。则表示全局对象(window)。通过对象调用函数（方法），函数中的this表示调用该函数的对象。单独调用的函数中this表示全局对象。varmyObject={sayHello:func...

JavaScript中，为什么eval和with会有性能问题？

词法作用域词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。eval(..) 和 withJavaScript 中有两个机制可以“欺骗”词法作用域:eval(..) 和 with。前者可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域(在运行时)。后者本质上是通过将一个对象的引用当作...

javascript中split字符串分割函数【代码】

1、var ss=s.split("fs"); for(var i=0;i<ss.length;i++){ 处理每一个ss[i]; }2、"2:3:4:5".split(":") //将返回["2", "3", "4", "5"] "|a|b|c".split("|") //将返回["", "a", "b", "c"]3、<script type="text/javascript"> var str = "一二三四"; var str1 = "篮球、排球、乒乓球"; var arr = str.split("");//全部分割 var arr1 = str1.split("、");//按照顿号分割 var arr2 = str1.split("、",2);//按照顿号分割,保留两段 </...

javascript中各类高度和宽度的整理【代码】【图】

基础学的不扎实，关于高度宽度的各个属性总是糊里糊涂的，在这里理一下思路。下面的测试以以下html结构为例<div id="div1" style="height:200px;width:200px;padding:20px;margin:10px;border:1px solid #000;overflow:scroll"><div id="div2" style="height:1000px;width:1000px;padding:20px;margin:10px;border:1px solid #000;"></div></div> heightheight属性有点特殊，只能获取写在内联样式中的高度值，并且返回的是一个字符...

javascript中错误使用var造成undefined

在javascript中根据变量作用的范围不同分为局部变量和全局变量，直接定义的变量是全局变量，全局变量可以被所有的脚本访问；在函数中定义的变量是局部变量，局部变量只在函数内有效。如果全局变量和局部变量使用相同的变量名，则局部变量将会覆盖全局变量。例子代码：<!DOCTYPE html> <html><head><meta charset="utf-8"><title>js中全局变量与局部变量</title></head><body><script type="text/javascript">var a = "全局变量";fu...

JAVAScript中DOM与BOM的差异分析【代码】【图】

JAVAScript 有三部分构成，ECMAScript，DOM和BOM，根据浏览器的不同，具体的表现形式也不尽相同。我们今天来谈一谈DOM和BOM这俩者之间的差异。用百科上的来说：1. DOM是 W3C 的标准; [所有浏览器公共遵守的标准]2. BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]3. window 是 BOM 对象，而非 js 对象；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。BOM 主要处理浏览...

Javascript中parseInt的正确使用方式【图】

定义和用法parseInt() 函数可解析一个字符串，并返回一个整数。语法?1parseInt(string, radix)parseInt(string, radix) 当参数radix的值为 0，或没有设置该参数时，parseInt()会根据 string来判断数字的基数。返回值返回解析后的数字。提示和注释注释：只有字符串中的第一个数字会被返回。注释：开头和结尾的空格是允许的。提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。实例在本例中，我们将使用...

JavaScript中BuildPath函数

JavaScript中BuildPath函数就是在已存在路径后追加名称。BuildPath()的使用方法为：　　object.BuildPath(path, name)　　object是必选项。应为 FileSystemObject 的名称。　　path是必选项。将被追加 name 的并存在的路径。路径可以是绝对的或相对的，同时不需要指定已有文件夹。　　name是必选项。被追加到已存在的 path 后的名称。http://www.mlybyby.com　　如果需要，BuildPath 方法会在已有路径和名称之间另外再插入一个...

javascript中ajax post实例详解

一，原生态的XMLHttpRequest 代码如下复制代码 <script language="javascript"> function saveintroduce() { //获取接受返回信息层 var introducemsg = document.getElementById("introducemsg"); //获取表单对象和用户信息值 var f = document.introduceedt; var elm1 = encodeURIComponent(f.elm1.value); //接收表单的URL地址 var url = "save.php?id=<?=$_GET["id"]?>"; //需要...

Javascript中Promise的简单使用【代码】

1// 函数功能：1秒以后创建一个10以内的随机整数，并判断这个数是否为偶数；如果是偶数则做一件事情，如果是奇数则做另一件事情 2function doSomthing() {3var promise = new Promise(function (resolve, reject) {4 setTimeout(function () {5 const num = Math.round(Math.random() * 10);6if (num % 2 === 0) {7 resolve(num);8 } else {9 ...

javascript中replace使用总结【代码】

ECMAScript提供了replace()方法。这个方法接收两个参数，第一个参数可以是一个RegExp对象或者一个字符串，第二个参数可以是一个字符串或者一个函数。现在我们来详细讲解可能出现的几种情况。　　1. 两个参数都为字符串的情况1var text = ‘cat, bat, sat, fat‘; 2// 在字符串中找到at，并将at替换为ond，只替换一次3var result = text.replace(‘at‘, ‘ond‘); 4// "cond, bat, sat, fat"5 console.log(result);　　2. 第一...

首页 / JAVASCRIPT / JavaScript中操作符和表达式的介绍

JavaScript中操作符和表达式的介绍

内容导读

内容图文

一、一元操作符

1.delete操作符

2.typeof操作符

3.void运算符

二、关系操作符

1.in运算符

2.instanceof运算符

三、表达式

1.this

2.super

3.new

4.展开语法

5.类表达式

6.函数表达式

7.function*表达式

内容总结

内容备注

内容手机端

【JavaScript中操作符和表达式的介绍】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程