var、let、const的區別，物件被定義為常量不受保護，自執行函式注意事項，箭頭函式特點，物件擴充套件運算和物件解構運算,label語句，for...in...和for...of...的區別
var、let、const的區別
| var | let | const | |
|---|---|---|---|
| 作用域 | 函式 | 花括號內 | 全域性 |
| 是否可重複宣告 | 可以 | 不可以 | 不可以 |
| 宣告後是否可修改 | 是 | 是 | 否 |
| 是否屬於window | 是 | 否 | 否 |
物件被定義為常量不受保護
const a={"key":"value"}
a.key="abc"
const b=["a","b","c"]
b.push
該程式碼執行不會報錯
七種基本資料型別
布林值、null、undefined、數字、任意精度整數、字串、代表
自執行函式注意事項
var name="zhang";//必須要加這個分號，不然後面自執行函式報錯
(function(){
console.log(name)
})()
箭頭函式特點
沒有原型屬性，沒有this，不可用作建構函式，所以箭頭函式繼承封閉範圍內的this值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>buttons</button>
</body>
<script>
window.onload = function() {
let userName = "zhang";
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
(function() {
console.log(this)//window
})();
//該函式有自己的this，指向window
(() => {
console.log(this)//button
})()
//該函式無自己的this，指向上一層物件
}
}
</script>
</html>
this的區分
let username="zhang"
let user={
username:"huan",
say(){
console.log(username)//zhang
console.log(this.username)//huan
setTimeout(function(){
console.log(this.username)//undefined
},1000)
setTimeout(()=>{
console.log(this.username)//huan
},2000)
}
user.say()
}
物件擴充套件運算和物件解構運算
擴充套件：在不改變原物件的前提下，生成一個新物件繼承原物件，並新增屬性
解構：在不改變原物件的前提下，將原物件的屬性複製出來
window.onload = function() {
var obj = {
a: 00,
b: 123
}
var ext = {
...obj,
c: 20
}
console.log(ext)//Object{a:0,b:123,c:20}
//擴充套件
var props = {
"color": "red",
"lineheight": 1.5,
"fontsize": "12px"
}
var {
color,
lineheight
} = props
console.log(color, lineheight)//red 1.5
//解構
}
label語句
對迴圈進行標記，便於指定break或continue的迴圈物件
//停止外層迴圈
window.onload = function() {
var num = 0
outter:
for (var i = 0; i < 10; i++) {
inner:
for (var j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
break outter;
}
num++;
}
}
console.log(num)//55
}
//停止內層迴圈
window.onload = function() {
var num = 0
outter:
for (var i = 0; i < 10; i++) {
inner:
for (var j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
break inner;
}
num++;
}
}
console.log(num)//95
}
//不使用label標記，則停止內層迴圈
window.onload = function() {
var num = 0
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
break;
}
num++;
}
}
console.log(num)//95
}
for...in...和for...of...的區別
1前者適用範圍更廣；後者僅適用array、map、set等的可迭代，不適用object
2前者既可以迭代物件的key，又能迭代物件的value；後者只可迭代出物件的value
window.onload = function() {
//for...in...
let obj = {
"firstname": "huan",
"lastname": "zhang"
}
for (var item in obj) {
console.log(item,obj[item])//firstname huan,lastname zhang
}
let ar = ["a", "b", "c"]
for (var item in ar) {
console.log(item, ar[item])//0 a,1 b,2 c
}
}
window.onload = function() {
//for...of...
let ar = ["a", "b", "c"]
for (var item of ar) {
console.log(item)//a,b,c
}
let obj = {
"firstname": "huan",
"lastname": "zhang"
}
for (var item of obj) {
console.log(item)//此處報錯，TypeError:obj is not iterable
}
}
陣列的some方法
遍歷陣列中每個元素，判斷其是否滿足指定函式的指定條件,返回true或者false
let arr=[1,2,20,13,22]
arr.list.some((item,index,array)=>{
//item 當前元素
//index 當前元素下標
//array 當前陣列
//1.如果一個元素滿足條件,返回true,且後面的元素不再被檢測
//2.所有元素都不滿足條件，則返回false
//3.不會改變原始陣列
//4.不會對空陣列進行檢測;陣列為空的話，直接返回false
if(item>18){
return true
}
})
陣列的filter方法
遍歷陣列中每個元素，更加其內部條件，返回一個新陣列
let arr=[1,5,51,6,8]
let new_arr=arr.filter(item=>{
if(item>2){
return item
}
})
console.log(new_arr)//(4) [5, 51, 6, 8]