詳解JavaScript中操作符和表達(dá)式
一、一元操作符
1.delete操作符
delete 操作符用于刪除對(duì)象的某個(gè)屬性；如果沒有指向這個(gè)屬性的引用，那它最終會(huì)被釋放
語法：delete expression
delete 操作符會(huì)從某個(gè)對(duì)象上移除指定屬性。成功刪除的時(shí)候回返回 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操作符返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型
語法：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運(yùn)算符
void 運(yùn)算符 對(duì)給定的表達(dá)式進(jìn)行求值，然后返回 undefined
語法：void expression
<a href="javascript:void(0);" rel="external nofollow" > 這個(gè)鏈接點(diǎn)擊之后不會(huì)做任何事情，如果去掉 void()， 點(diǎn)擊之后整個(gè)頁面會(huì)被替換成一個(gè)字符 0。 </a> <p> chrome中即使<a href="javascript:0;" rel="external nofollow" >也沒變化，firefox中會(huì)變成一個(gè)字符串0 </p> <a href="javascript:void(document.body.style.backgroundColor='green');" rel="external nofollow" > 點(diǎn)擊這個(gè)鏈接會(huì)讓頁面背景變成綠色。 </a>
二、關(guān)系操作符
1.in運(yùn)算符
如果指定的屬性在指定的對(duì)象或其原型鏈中，則in 運(yùn)算符返回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 (必須使用索引號(hào),而不是數(shù)組元素的值)
console.log("length" in trees); // 返回true (length是一個(gè)數(shù)組屬性)
2.instanceof運(yùn)算符
instanceof 運(yùn)算符用來測(cè)試一個(gè)對(duì)象在其原型鏈中是否存在一個(gè)構(gòu)造函數(shù)的 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, 檢查原型鏈會(huì)找到 undefined
myString instanceof String; // 返回 true
newStr instanceof String; // 返回 true
myString instanceof Object; // 返回 true
myDate instanceof Date; // 返回 true
myObj instanceof Object; // 返回 true, 盡管原型沒有定義
三、表達(dá)式
1.this
在函數(shù)內(nèi)部，this的值取決于函數(shù)被調(diào)用的方式。在嚴(yán)格模式下，this將保持他進(jìn)入執(zhí)行上下文時(shí)的值，所以下面的this將會(huì)默認(rèn)為undefined
function f2(){
"use strict"; // 這里是嚴(yán)格模式
return this;
}
f2() === undefined; // true
當(dāng)一個(gè)函數(shù)在其主體中使用 this 關(guān)鍵字時(shí)，可以通過使用函數(shù)繼承自Function.prototype 的 call 或 apply 方法將 this 值綁定到調(diào)用中的特定對(duì)象
function add(c, d) {
return this.a + this.b + c + d;
}
let o = {a: 1, b: 3};
// 第一個(gè)參數(shù)是作為‘this'使用的對(duì)象
// 后續(xù)參數(shù)作為參數(shù)傳遞給函數(shù)調(diào)用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
調(diào)用f.bind(someObject)會(huì)創(chuàng)建一個(gè)與f具有相同函數(shù)體和作用域的函數(shù)，但是在這個(gè)新函數(shù)中，this將永久地被綁定到了bind的第一個(gè)參數(shù)，無論這個(gè)函數(shù)是如何被調(diào)用的
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
在箭頭函數(shù)中，this與封閉詞法上下文的this保持一致。在全局代碼中，它將被設(shè)置為全局對(duì)象
let globalObject = this; let foo = (() => this); console.log(foo() === globalObject); // true
2.super
語法：
super([arguments]); // 調(diào)用 父對(duì)象/父類 的構(gòu)造函數(shù)
super.functionOnParent([arguments]); // 調(diào)用 父對(duì)象/父類 上的方法
在構(gòu)造函數(shù)中使用時(shí)，super關(guān)鍵字將單獨(dú)出現(xiàn)，并且必須在使用this關(guān)鍵字之前使用。super關(guān)鍵字也可以用來調(diào)用父對(duì)象上的函數(shù)
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 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例
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.展開語法
可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時(shí), 將數(shù)組表達(dá)式或者string在語法層面展開；還可以在構(gòu)造字面量對(duì)象時(shí), 將對(duì)象表達(dá)式按key-value的方式展開
在函數(shù)調(diào)用時(shí)使用展開語法
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);
構(gòu)造字面量數(shù)組時(shí)使用展開語法
let parts = ['shoulders'，'knees']; let lyrics = ['head'，... parts，'and'，'toes']; // ["head", "shoulders", "knees", "and", "toes"]
數(shù)組拷貝
let arr = [1, 2, 3]; let arr2 = [...arr]; // like arr.slice() arr2.push(4); // arr2 此時(shí)變成 [1, 2, 3, 4] // arr 不受影響
連接多個(gè)數(shù)組
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.類表達(dá)式
類表達(dá)式是用來定義類的一種語法
let Foo = class {
constructor() {}
bar() {
return "Hello World!";
}
};
let instance = new Foo();
instance.bar();
// "Hello World!"
6.函數(shù)表達(dá)式
function 關(guān)鍵字可以用來在一個(gè)表達(dá)式中定義一個(gè)函數(shù)，你也可以使用 Function 構(gòu)造函數(shù)和一個(gè)函數(shù)聲明來定義函數(shù)
函數(shù)聲明提升和函數(shù)表達(dá)式提升：JavaScript中的函數(shù)表達(dá)式?jīng)]有提升,不像函數(shù)聲明,你在定義函數(shù)表達(dá)式之前不能使用函數(shù)表達(dá)式
/* 函數(shù)聲明 */
foo(); // "bar"
function foo() {
console.log("bar");
}
/* 函數(shù)表達(dá)式 */
baz(); // TypeError: baz is not a function
let baz = function() {
console.log("bar2");
};
7.function*表達(dá)式
function關(guān)鍵字可以在表達(dá)式內(nèi)部定義一個(gè)生成器函數(shù)，function 這種聲明方式(function關(guān)鍵字后跟一個(gè)星號(hào)）會(huì)定義一個(gè)生成器函數(shù)(generator function)，它返回一個(gè) Generator 對(duì)象
語法：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
接收參數(shù)
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
傳遞參數(shù)
function *createIterator() {
let first = yield 1;
let second = yield first + 2; // 4 + 2
// first =4 是next(4)將參數(shù)賦給上一條的
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 }"
表達(dá)式
let x = function*(y) {
yield y * y;
};
相關(guān)文章
JavaScript XML實(shí)現(xiàn)兩級(jí)級(jí)聯(lián)下拉列表
用xml作為存儲(chǔ)容器，不用數(shù)據(jù)庫，速度和效率高些。2008-11-11
JS實(shí)現(xiàn)數(shù)組按升序及降序排列的方法
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組按升序及降序排列的方法,涉及javascript針對(duì)數(shù)組的簡單排序操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS如何把字符串轉(zhuǎn)換成json,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法，由于遇到相關(guān)序列化的問題，但是vue項(xiàng)目中由于減少隊(duì)jquery引用的限制，導(dǎo)致不能用$.param來序列化參數(shù)，下面小編給大家分享了實(shí)例代碼，需要的朋友參考下吧2018-08-08
本文主要介紹了canvas實(shí)現(xiàn)時(shí)鐘效果的代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這里之所以使用setTimeout()，因?yàn)榭梢詮氐谆厥债?dāng)前所有對(duì)象，防止變量之間的引用導(dǎo)致釋放失敗，可以當(dāng)作一個(gè)保障措施，按照道理來說，這里不會(huì)執(zhí)行了。2010-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)分頁功能，頁面查詢實(shí)現(xiàn)分頁功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
table tr行內(nèi)td里面的input的值2009-12-12
JS中style.display和style.visibility的區(qū)別實(shí)例說明
下面的例子說明了這種區(qū)別：在這個(gè)例子中，divContent1和divContent2隱藏的時(shí)候用的是style.display=none，這時(shí)候，后面的div會(huì)向上移動(dòng)，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏后仍然占據(jù)原來的空間2013-03-03
詳解JavaScript兩個(gè)實(shí)用的圖片懶加載優(yōu)化方法
本文主要介紹了JavaScript兩個(gè)實(shí)用的圖片懶加載優(yōu)化方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03