let,const,var
<script>
/*
1 let着绊、const征堪、var 都可以用來聲明變量
2 var 過時(shí)的技術(shù) 有很多弊端-外面很多老程序員 以為 了解var 各種各樣的弊端-是技術(shù) 錯(cuò)誤!
1 如果你在網(wǎng)絡(luò)上看文章 或者 視頻 只要它使用 var 不用看 過時(shí)!!
2 快畢業(yè)了 去刷面試題 不晚!
3 let 和 const
4 const 聲明了變量之后 這個(gè)變量 永遠(yuǎn)不能被修改!!淆攻! const 聲明的變量 叫做 常量!嘿架!
1 使用了const定義的變量 表示它永遠(yuǎn)不會(huì)被改變
項(xiàng)目名稱 - 拼汐汐
2 規(guī)范程序員設(shè)計(jì) 我們的程序
哪些變量需要被修改 哪些不要被修改
10ml 100ml
3 什么時(shí)候使用const
1 多看老師的使用
2 擔(dān)心 先使用 let
4 對(duì)于 有經(jīng)驗(yàn)的程序員 都知道const和let區(qū)別程序員
能使用 const 就不使用let
5 let
定義變量 也可以修改變量
*/
const username = '悟空';
// 修改 常量
username = '八戒';
if()
</script>
<script>
// 修改 等于號(hào)
// let a = 1;
// a = 2; // 修改
// const b = 3;
// b = 4; // 修改
// const obj = { a: 1 };
// obj.a = 2;
const list = ['a', 'b'];
// list.push('c');
// console.log(list);
// list[2]='c';
list = 1;
</script>
函數(shù)的簡寫
<script>
/*
1 箭頭函數(shù) 也是一種函數(shù) 寫法上 簡潔 靈活-飄逸-(老子都看不懂) 常用
*/
// 普通函數(shù)
function func1() {
console.log('func1');
}
// 普通函數(shù)
const func2 = function () {
console.log('func2');
};
// 箭頭函數(shù)
const func3 = () => {
console.log('func3');
};
func1(); // 函數(shù)的調(diào)用
func2(); // 函數(shù)的調(diào)用
func3(); // 函數(shù)的調(diào)用
// 箭頭函數(shù)是匿名函數(shù)瓶珊,一般做為參數(shù)傳遞
// let test = function (a,b){
// let sum = a + b
// return sum
// }
// let test = (參數(shù)) => {函數(shù)體}
// 幾個(gè)小細(xì)節(jié)
// 1.如果函數(shù)體只有一句,那么可以省略{},同時(shí)默認(rèn)會(huì)返回函數(shù)體的結(jié)果耸彪,不能寫return
// 2.如果只有一個(gè)參數(shù)艰毒,那么可以省略()
// 3.如果沒有參數(shù),()也不能省略
// let test = (a,b) => a + b // 不能有大括號(hào)
let test = a => a + 10
let res = test(100)
console.log(res)
</script>
函數(shù)參數(shù)默認(rèn)值
<script>
const fun1 = () => 123
const fun2 = () => `abc`
const fun3 = () => true
const fun4 = () => [1, 2, 3]
//讓箭頭函數(shù) 猜猜大括號(hào)是什么意思
//1 猜 對(duì)象的符號(hào)
//2 猜 函數(shù)的結(jié)構(gòu) 符號(hào)
//如果拿到箭頭函數(shù) 省略大括號(hào) 的情況下 想要返回一個(gè)對(duì)象 固定語法 加一個(gè)()
const fun5 = () => ({ unername: `悟空` })
console.log(fun5())
</script>
返回對(duì)象
<script>
const func1 = () => 123;
const func2 = () => 'abc';
const func3 = () => true;
const func4 = () => [1, 2, 34];
// 讓箭頭函數(shù) 你猜猜 我大括號(hào)是什么意思
// 1 猜 對(duì)象的 符號(hào)
// 2 猜 函數(shù)體結(jié)構(gòu) 符號(hào)
// 如果你的箭頭函數(shù) 省略大括號(hào)的 情境下 想要返回 一個(gè)對(duì)象 固定語法 添加一個(gè)小括號(hào)
const func5 = () =>( { username: '悟空' });
</script>
函數(shù)參數(shù)的默認(rèn)值
<script>
// (msg="大家好") "大家好" 就是msg 默認(rèn)值
// 如果 調(diào)用函數(shù)的時(shí)候 你沒有傳遞 就使用默認(rèn)值
// 如果 傳遞了參數(shù) 就會(huì)使用傳遞的參數(shù) 而不會(huì)使用 默認(rèn)值
// const func1 = (msg = '大家好') => {
// console.log(msg);
// };
// func1("你好"); // 輸出什么 undefined
// 定義一個(gè)函數(shù) 接收一個(gè)數(shù)組 告訴我們 這個(gè)數(shù)組的長度
const getLength = (arr = []) => console.log(arr.length);
const list=['a'];
getLength(list);
getLength();
</script>
解構(gòu)
<script>
//解構(gòu) 只是一直更加方便 來獲取數(shù)據(jù)的寫法而已
//const arr = [`a`, `b`, `c`, `d`]
//獲取 數(shù)組的 前兩個(gè)數(shù)據(jù) lowb
//const str1 = arr[0]
//const str2 = arr[1]
//console.log(str1, str2)
//數(shù)組解構(gòu) 關(guān)注 順序
const [str1, str2] = arr
console.log(str1, str2)
交換變量
//交換變量
let a = 100
let b = 200;
// let c = a
// a = b
// b = c
// console.log(a, b)
[b, a] = [a, b]
console.log(a, b)
對(duì)象解構(gòu)
//對(duì)象解構(gòu)
const obj = { username: `悟空`, skill: `72變` }
// const username = obj.username
//const skill = obj.skill
const { username, skill } = obj
console.log(username)
console.log(skill)
</script>
對(duì)象簡寫
在定義對(duì)象的時(shí)候,如果屬性名和變量名一致,那么可以實(shí)現(xiàn)簡寫
<script>
//在定義對(duì)象的時(shí)候,如果屬性名和變量名一致,那么可以實(shí)現(xiàn)簡寫
const name = "悟空"
// const skill = "72變"
// const obj = {
// name, skill
// }
//console.log(obj)// {name:"悟空",skill:"72變"}
const obj = {
name,
say() {
console.log(`方法`)
}
}
console.log(obj)
obj.say()
</script>
剩余運(yùn)算符
<script>
/*
剩余運(yùn)算符 是一種比較方便我們獲取數(shù)據(jù)的方式
*/
const arr = [`a`, `b`, `c`, `d`, `e`]
// const [letter1, letter2] = arr
//console.log(letter1, letter2)
//希望可以獲得到 剩下所有的元素 都放在新的數(shù)組中
const [let1, let2, ...list] = arr
console.log(list)
</script>
const obj = { a: 1, b: 2, c: 3, d: 4, e: 5 }
const { a, b, c, d, ...obj2 } = obj
console.log(a)//1
console.log(obj2)//5
//假設(shè)需求 封裝函數(shù)幫我計(jì)算傳入數(shù)據(jù)的 總和
calc(1)
calc(1, 2)
calc(1, 2, 3)
function calc(...parame) {
//parame 可以獲取到所有傳遞給calc的參數(shù) 封裝到一個(gè)數(shù)組中
console.log(parame)
}
值類型和引用類型
<script>
// js數(shù)據(jù)類型 分成了兩種 1 值類型 2 引用類型
// 1 值類型 簡單數(shù)據(jù)類型 字符串搜囱、數(shù)字丑瞧、布爾類型、
// 2 引用類型 對(duì)象 蜀肘、 數(shù)組
// 兩者區(qū)別 體現(xiàn) =
// 值類型 使用 = 復(fù)制
// 引用類型 使用 = 關(guān)聯(lián)在一起
// let a =1 ;
// let b = a;
// // b a 的一份復(fù)制 兩個(gè)值 一樣 但是兩個(gè)數(shù)據(jù)是完全獨(dú)立绊汹!
// b=10;
// // a 不會(huì)發(fā)生變化
// console.log(a);
const obj = { username: '悟空' };
// 也使用 =
const newObj = obj; // newObj 看起來和 obj 數(shù)據(jù)一樣 兩個(gè)數(shù)據(jù) 本身一起! 修改了其中的任意一個(gè)扮宠,另外一個(gè)也會(huì)收到影響
newObj.username = '八戒';
console.log(obj);
</script>
復(fù)制引用類型-剩余運(yùn)算符
<script>
// 復(fù)制一份 對(duì)象 西乖, 修改新的數(shù)據(jù)之后 舊的數(shù)據(jù) 不要收到影響
// const obj = { username: '悟空', height: 100 };
// // const newObj=obj;
// const newObj = { ...obj };
// // const newObj = { username:"悟空",height:100 };
// newObj.username = '八戒';
// console.log(obj);
const list = ['a', 'b'];
// const newList = list; //
const newList = [...list];
newList.push('c');
console.log(list);
</script>
數(shù)組方法map
<script>
// map 返回 處理后的數(shù)組
// map 數(shù)組的一個(gè)方法 也會(huì)遍歷 數(shù)組 接收一個(gè)函數(shù)
const arr = ['a', 'b', 'c'];
// ['<li>a</li>','<li>b</li>','<li>c</li>']
// const newArr = [];
// arr.forEach(function (value) {
// newArr.push(`<li>${value}</li>`);
// });
// console.log(newArr);
const newArr = arr.map(function (value, index) {
return `<li>${index}-${value}</li>`;
});
console.log(newArr);
</script>
<script>
// 簡寫
//map 數(shù)組的一個(gè)方法
//map 數(shù)組的一個(gè)方法 也會(huì)遍歷數(shù)組 接收一個(gè)函數(shù)
const arr = [`a`, `b`, `c`, `d`]
//[`<li>a</li> ``<li>b</li>`` <li>c</li> ``<li>d</li>`]
const newArr = arr.map(value => `<li>${value}</li>`)
console.log(newArr)
</script>
數(shù)組方法 filter
<script>
// filter 過濾 返回 過濾后的數(shù)組
const arr = [1, 3, 5, 7, 9];
// 返回 大于 3的數(shù)據(jù) 重新組成數(shù)組 low!!!
// const newArr = [];
// arr.forEach(function (value) {
// if (value > 3) {
// newArr.push(value);
// }
// });
// console.log(newArr);
// filter 會(huì)遍歷數(shù)組 返回 滿足了你條件的(函數(shù)內(nèi) 返回true!坛增! ) 新的數(shù)組
const newArr = arr.filter(function (value) {
if (value > 3) {
// 滿足條件的元素
return true;
} else {
return false;
}
});
// 想一想 結(jié)合箭頭函數(shù) 簡寫;竦瘛!
console.log(newArr);
</script>
<script>
//簡寫
//filter 過濾 返回 過濾后的數(shù)據(jù)
const arr = [1, 3, 5, 7, 9]
//返回 大于 3的數(shù)據(jù) 重新組成數(shù)組
//filter 會(huì)遍歷數(shù)組 返回 滿足了你條件(函數(shù)內(nèi) 返回 true)的新的數(shù)組
const newArr = arr.filter(value => value > 3)
console.log(newArr)
</script>
案例 選擇下拉框出現(xiàn)對(duì)應(yīng)個(gè)數(shù)姓名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>17-filter-大案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
同學(xué)姓名的長度
<select>
<option value="">請選擇</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<ul></ul>
</div>
<script>
// 獲取到下拉列表的值
const select = document.querySelector('select');
// 綁定change事件
select.addEventListener('change', function () {
// 獲取選中的值
// console.log(this.value);
const length = this.value; // 字符串類型
// 數(shù)組 同學(xué)名稱
const names = [
'黃圣飛',
'梁子聰',
'王錦雙',
'韋嘉敏',
'劉雅琴',
'王鵬',
'黃華松',
'溫玉秋',
'梁志斌',
'謝騏蔚',
'彭偉維',
'鄭鴻生',
'文榮樁',
'陶子路',
'葉海民',
'邵將',
'郭武漢',
'王自選',
'方澤基',
'吳海波',
'黃仁杰',
'歐陽家銘',
'黃浩釗',
'汪煜博',
'賴澤贏',
'范明健',
'邱浩暢',
'李文俊',
'陳培琪',
'鄧堪錦',
'張家銣',
'賀淘星',
'曾銳華',
'鄧祥威',
'張澎',
'饒定洲',
'陸天豪',
'廖藍(lán)飛',
'王漢亮',
'覃雄智',
'曾玉萍',
'周儒浩',
'馬紫欣',
'肖甜',
'史溢煒',
'陳頌文',
'李龍章',
'夏一鳴',
'陽賜林',
'何富鋮',
'廖東',
'韋家祥',
'王翠玲',
'吳士釗',
'付宇洋',
'林儀',
'郭倩儀',
'黎開宙',
'馮隆義',
'羅健賢',
'楊秀鴻',
'徐志軍',
'李樹昆',
'覃啟嫻',
'許龍輝',
'曹外',
'郝璐',
'康梅飛',
'陳結(jié)源',
'黃貴斌',
'劉玉軒',
'吳栩然',
'倪金輝',
'宋煒',
'李振林',
'吳卓龍',
'郭宇',
'蘇銘軒',
'楊凱文',
'張祖勇',
'何冠儒',
];
// 過濾數(shù)組 名字長度
const filterList = names.filter((value) => value.length == length);
// 對(duì)數(shù)組做遍歷 拼接成 li標(biāo)簽
let html = '';
// 模擬 指定條件
filterList.forEach((value) => {
html += `<li>${value}</li>`;
});
// 插入到 ul標(biāo)簽中
const ul = document.querySelector('ul');
ul.innerHTML = html;
});
</script>
</body>
</html>
優(yōu)化版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>17-filter-大案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
同學(xué)姓名的長度
<select>
<option value="">請選擇</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<ul></ul>
</div>
<script>
const names = [
'黃圣飛',
'梁子聰',
'王錦雙',
'韋嘉敏',
'劉雅琴',
'王鵬',
'黃華松',
'溫玉秋',
'梁志斌',
'謝騏蔚',
'彭偉維',
'鄭鴻生',
'文榮樁',
'陶子路',
'葉海民',
'邵將',
'郭武漢',
'王自選',
'方澤基',
'吳海波',
'黃仁杰',
'歐陽家銘',
'黃浩釗',
'汪煜博',
'賴澤贏',
'范明健',
'邱浩暢',
'李文俊',
'陳培琪',
'鄧堪錦',
'張家銣',
'賀淘星',
'曾銳華',
'鄧祥威',
'張澎',
'饒定洲',
'陸天豪',
'廖藍(lán)飛',
'王漢亮',
'覃雄智',
'曾玉萍',
'周儒浩',
'馬紫欣',
'肖甜',
'史溢煒',
'陳頌文',
'李龍章',
'夏一鳴',
'陽賜林',
'何富鋮',
'廖東',
'韋家祥',
'王翠玲',
'吳士釗',
'付宇洋',
'林儀',
'郭倩儀',
'黎開宙',
'馮隆義',
'羅健賢',
'楊秀鴻',
'徐志軍',
'李樹昆',
'覃啟嫻',
'許龍輝',
'曹外',
'郝璐',
'康梅飛',
'陳結(jié)源',
'黃貴斌',
'劉玉軒',
'吳栩然',
'倪金輝',
'宋煒',
'李振林',
'吳卓龍',
'郭宇',
'蘇銘軒',
'楊凱文',
'張祖勇',
'何冠儒',
];
const select = document.querySelector('select');
select.addEventListener('change', function () {
const length = this.value;
renderByNameLength(length);
});
// 根據(jù)數(shù)字來渲染對(duì)應(yīng)長度的名稱
function renderByNameLength(length) {
const filterList = names.filter((value) => value.length == length);
let html = '';
filterList.forEach((value) => {
html += `<li>${value}</li>`;
});
const ul = document.querySelector('ul');
ul.innerHTML = html;
}
</script>
</body>
</html>
數(shù)組方法-every
<script>
// every 檢測數(shù)值元素的每個(gè)元素是否都符合條件 全部都符合 返回 true 否則就返回false
// const names = ['黃圣飛', '梁聰', '王錦雙', '韋嘉敏', '劉雅琴'];
// // 判斷一下 上面所有同學(xué)的名稱 是不是 長度 都是大于2
// const result = names.every(function (value) {
// console.log(value);
// if (value.length > 2) {
// return true;
// } else {
// return false;
// }
// });
// const result2 = names.every((v) => v.length > 2);
// console.log(result);
// every 對(duì)于空數(shù)組 也會(huì)直接返回true
const arr = [];
const result = arr.every((v) => false);
console.log(result);
</script>
數(shù)組方法-some
<script>
// some 檢測數(shù)組元素中 只有有一個(gè)條件 都返回true
const arr = [
'健康',
'健康',
'健康',
'健康',
'健康',
'健康',
'健康',
'健康',
'健康',
'健康',
];
// some方法來判斷 隊(duì)列 是不是有危險(xiǎn)
const result = arr.some((value) => value === '中招');
if (result) {
console.log('有危險(xiǎn)');
} else {
console.log('健康');
}
</script>
面試題
var變量問題
<script>
// console.log(abc);
// var abc = 123;
// var abc;
// // console.log(abc);
// abc = 123;
// if(true){
// let a=123;
// }
// console.log(a);
let a = 123;
let a = 456;
console.log(a);
</script>
偽數(shù)組
<script>
// 偽數(shù)組 dom 具有 forEach方法
// const liList = document.querySelectorAll('li');
// liList.length=0;
// console.log(liList);
const list=[1,23];
list.length=0;
console.log(list);
</script>
全局函數(shù)this指向問題
<script>
/*
一般來說 this的指向 判斷依據(jù) 誰調(diào)用了 函數(shù) this 指向誰
其實(shí) 當(dāng)我們定義了全局的函數(shù)的時(shí)候收捣,默認(rèn)是掛載到了window 全局變量上
全局函數(shù) 其實(shí)就是 window的一個(gè)屬性而已 只不過 平時(shí)寫代碼的時(shí)候 可以省略這個(gè)window
小結(jié)
1 當(dāng)我們定義全局的函數(shù)的時(shí)候 本質(zhì)是給window添加了一個(gè) 屬性(函數(shù)類型)
2 當(dāng)我們調(diào)用這個(gè)函數(shù) 的時(shí)候 abc() 本質(zhì) window.abc() -- window 可以被省略而已
*/
// function abc() {
// console.log("ABC");
// console.log(this);
// }
// // window.abc = function () {
// // console.log('ABC');
// // console.log(this);
// // };
// // window.abc();
// abc();
// const obj ={
// username:"悟空",
// say(){
// console.log(this);
// }
// }
// say();
</script>
箭頭函數(shù)this執(zhí)行
<body>
<button>點(diǎn)擊</button>
<script>
/*
1 箭頭函數(shù)沒有內(nèi)部的this
2 當(dāng)你的函數(shù)執(zhí)行體代碼中 有出現(xiàn)了 this 慎用 箭頭函數(shù)=彀浮! - 遵循0瞻楣颠!
*/
// const obj = {
// username:"悟空",
// say:()=>console.log(this)
// }
// const func = () => console.log(this);
const button=document.querySelector("button");
button.addEventListener("click", ()=> {
// this.innerText="被修改哈"
console.log(this);
})
</script>
</body>
bind 尽纽、call 、 apply 修改 this的指向
<script>
/*
1 bind 童漩、call 弄贿、 apply 修改 this的指向
1 call 和 apply 會(huì)在調(diào)用原函數(shù)的同時(shí)也修改this的指向
2 bind會(huì)幫你修改this指向 但是 不會(huì)直接調(diào)用原函數(shù) 而是會(huì)返回一個(gè) 修改了this指向 的新函數(shù)
3 call 和 apply 區(qū)別 傳遞參數(shù)的方式不同而已
obj.say.call(newObj,1,2)
obj.say.apply(newObj,[1,2])
2 默認(rèn)情況下 this的指向 - 誰調(diào)用了我 this 指向誰
*/
const obj = {
username: '悟空',
// say() {
// console.log(this.username, 'obj中的say方法 ');
// },
say(a, b) {
console.log(a, b);
},
};
const newObj = {
username: '八戒',
};
// obj.say.call(newObj);// 八戒 obj中的say方法
// obj.say.apply(newObj);// 八戒 obj中的say方法
// const fn = obj.say.bind(newObj); // 返回一個(gè)新的函數(shù) 新函數(shù)內(nèi)部 修改this指向的功能
// obj.say.call(newObj,1,2) ;
// obj.say.apply(newObj,[1,2]) ; // 參數(shù)必須要以數(shù)組的形式來傳遞
const fn = obj.say.bind(newObj);
fn(1, 2);
</script>