網站首頁 編程語言 正文
目錄
簡化對象寫法
- ES6 允許在大括號里面,直接寫入變量和函數,作為對象的屬性和方法,這樣更簡介。
在ES5中創建對象的寫法:
let name = "江流兒"
let showName = function(){
console.log("name:",this.name);
}
const People = {
name: name,
showName: showName,
func: function(){
console.log("正在西游的路上!");
}
}
console.log(People);
在ES6中創建對象的寫法:
let name = "江流兒"
let showName = function(){
console.log("name:",this.name);
}
const people = {
name,//省略了重復的工作
showName,
func(){
console.log("正在西游的路上!");
}
}
console.log(people);
箭頭函數及聲明特點
- ES6 允許使用箭頭
=>
定義函數
申明一個函數
在ES5中創建函數的寫法:
let fn = function(a, b){
...//代碼體
}
在ES6中創建函數的寫法:
let fn = (a, b) => {
...//代碼體
}
箭頭函數特點
-
this
是靜態的,this
始終指向函數聲明時所在作用域下的this
的值,即使使用call、apply、bind
函數修改this
,也不會起作用.
//ES5寫法
function getName1() {
console.log("ES5:",this);
};
//ES6寫法
let getName2 = () => {
console.log("ES6:",this);
};
const people = {
name: "江流兒"
};
getName1.call(people);//people
getName2.call(people);//window
- 不能作為構造函數實例化對象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let stu = new Person("心猿", 5000);
console.log(stu);//err
- 不能使用
arguments
變量
let fn =() =>{
console.log(arguments);
}
fn(1, 2, 3);//err
- 箭頭函數的簡寫
1)省略小括號,當形參有且只有一個的時候
let add = n =>{
return n+n;
}
console.log(add(9));//18
2)省略花括號,當代碼體只有一條語句的時候,此時的return必須省略,語句的執行結果就是函數的返回值
let pow = n => n * n;
console.log(pow(9));//81
箭頭函數的實踐
1)點擊div 2s 后顏色變成粉色
在ES5中寫法:
<style>
div{
width: 200px;
height: 200px;
background-color: #58a;
}
</style>
<body>
<div id="box"></div>
<script>
let div = document.getElementById("box");
box.addEventListener("click", function(){
// ES5中必須先保存this的值
let _this = this;
// 定時器
setTimeout(function(){
// 修改背景顏色 this
_this.style.background = "pink"
}, 2000);
})
</script>
在ES6中使用箭頭函數寫法:
<script>
let div = document.getElementById("box");
box.addEventListener("click", function(){
// 保存this的值
// let _this = this;
// 定時器
setTimeout(()=>{
// 修改背景顏色 this
// _this.style.background = "pink"
this.style.background = "pink";
}, 2000);
})
</script>
2)從數組中返回偶數的元素
const arr = [1, 6, 9, 10, 14, 200];
const result = arr.filter(item => item % 2 === 0);
console.log(result);//[ 6, 10, 14, 200 ]
- 箭頭函數適合于
this
無關的回調。定時器,數組的方法回調 - 箭頭函數不太適合與
this
有關的回調。例如事件回調,對象的方法
ES6允許給函數參數賦值初始值
- 形參初始值,通過給函數形參賦值,讓其為具有默認值的參數,一般位置靠后(潛規則)
function func(a, b, c = 10) {
console.log("a:" + a + " b:" + b + " c:" + c);
}
func(10,12);//a:10 b:12 c:10
- 與結構賦值結合
function conect({ host , username, password, port }) {
console.log(host);
console.log(username);
console.log(password);
console.log(port);
}
conect({
host: "localhost",
username: "root",
password: "root",
port: 3306
})
rest參數
- ES6引入了rest參數,用于獲取函數的實參,用來代替
arguments
- 語法:
...變量
- 獲取的參數會以數組的形式封裝到該變量里面
- rest參數必須要放到形參的最后
function showData(...args) {
console.log((args));
}
showData(1, 2, 3, 4, 5, 6)//[ 1, 2, 3, 4, 5, 6 ]
擴展運算符
-
...
擴展運算符能將數組轉換為逗號分隔的參數序列
function showData() {
console.log((arguments));
}
let data = ["江流","心猿","意馬"];
showData(data)//不使用擴展運算符
showData(...data)//使用擴展運算符 相當于showData("江流","心猿","意馬")
擴展運算符引用
- 數組的合并
const data1 = ["江流","心猿","意馬"];
const data2 = [1, 2, 3, 4];
const newArr = [...data1, ...data2];
console.log(newArr);//["江流","心猿","意馬",1, 2, 3, 4];
2. 數組的克隆,如果克隆的數組中有引用數據類型,該方式進行的是淺拷貝
const data1 = ["江流","心猿","意馬"];
const newArr = [...data1];
console.log(newArr);//["江流","心猿","意馬"];
- 將偽數組轉為真正的數組
可以用在獲取元素的那幾個返回偽數組的方法中,由于arguments
可以由rest參數替代,其實在這里轉為數組沒有意義。
function showData() {
let newArguments = [...arguments];
console.log("newArguments:", newArguments);
console.log(Array.isArray(newArguments));//true
}
let data = ["江流", "心猿", "意馬"];
showData(...data)
Symbol
- ES6引入了一種新的原始數據類型
Symbol
,表示獨一無二的值。它是JavaScript語言中的第七種數據類型,是一種類似于字符串的數據類型。
創建Symbol
語法1:
變量名 = Symbol("標識名")
- 通過該方式創建的變量,即使兩個標識名相同,兩個變量也不相同
let name1 = Symbol("張三");
let name2 = Symbol("張三");
console.log("name1:",name1);//name1: Symbol(張三)
console.log("name2:",name2);//name2: Symbol(張三)
console.log(name1 === name2);//false
語法2
變量名 = Symbol.for("標識名")
- 如果通過該方式創建的變量,標識名相同,兩個變量也相同
let name1 = Symbol.for("張三");
let name2 = Symbol.for("張三");
console.log("name1:",name1);//name1: Symbol(張三)
console.log("name2:",name2);//name2: Symbol(張三)
console.log(name1 === name2);//true
Symbol特點
- Symbol的值是唯一的,可以用來解決命名沖突的問題
- Symbol值不能與其他數據進行運算
let name1 = Symbol.for("張三");
let result = name1 + 100; //err
let result = name1 > 100; //err
let result = name1 + "100"; //err
- Symbol定義的對象屬性不能使用for…in循環遍歷,但是可以使用Reflect.ownKeys來獲取對象的所有鍵名。
Symbol創建對象屬性
- 使用 Symbol給一個對象創建對象屬性,能安全的保證原對象,不會因命名相同將原有的屬性覆蓋。
- 第一種創建方式
let game = {
up: function () {
console.log("我是原本有的up方法!");
},
down: function () {
console.log("我是原本有的down方法!");
}
}
// 聲明一個對象
let methods = {
up: Symbol(),
down: Symbol()
};
game[methods.up] = function(){
console.log("我可以上升!");
}
game[methods.down] = function(){
console.log("我可以快速下降!");
}
console.log(game);
- 可以看到原來的方法和新的方法并沒有發生沖突
- 第二種創建方式
let game = {
up: function () {
console.log("我是原本有的up方法!");
},
down: function () {
console.log("我是原本有的down方法!");
},
[Symbol('up')]: function(){
console.log("我可以上升!");
},
[Symbol("down")]: function(){
console.log("我可以快速下降!");
}
}
console.log(game);
Symbol的內置屬性
Symbol.hasinstance
- 當其他對象使用
instanceof
運算符,判斷是否為該對象的實例時,會調用這個方法
class Person{
static[Symbol.hasInstance](param){
console.log(param);
console.log("我被用來檢測類型了");
return true;//由你決定是打印true 還是false
}
}
let o ={
name: "江流兒"
};
console.log(o instanceof Person);//返回值由你決定來返回是true 還是false
Symbol.isConcatSpreadable
- 對象的
Symbol.isConcatSpreadable
屬性等于是一個布爾值,表示該對象用于Array.prototypt.concat()
時,是否可以展開
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr2[Symbol.isConcatSpreadable] = false;
console.log((arr1.concat(arr2)));//[1, 2, 3, Array(3)]
原文鏈接:https://blog.csdn.net/weixin_45660621/article/details/121912856
相關推薦
- 2022-10-14 Linux環境conda虛擬環境中python解釋器對應問題 + 解決后pip install 路徑
- 2022-06-27 Python使用re模塊實現okenizer(表達式分詞器)_python
- 2022-12-13 詳解如何魔改Retrofit實例_Android
- 2022-10-11 微信小程序與Netty實現的WebSocket聊天程序
- 2022-07-24 CSP?communicating?sequential?processes并發模型_Golang
- 2022-05-14 在Pandas?DataFrame中插入一列的方法實例_python
- 2022-11-05 Python?sklearn庫三種常用編碼格式實例_python
- 2022-06-02 C#?操作Windows注冊表的實現方法_C#教程
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支