尚硅谷ES5_6_7教程
(01. 尚硅谷_ECMAScript入門介紹&)
01. 尚硅谷_ECMAScript入門介紹&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECMAScript理解</title>
</head>
<body>
<button id="testBtn">測試</button>
<!--
1. 它是一種由ECMA組織（前身爲歐洲計算機製造商協會）制定和發佈的腳本語言規範
2. 而我們學的 JavaScript 是ECMA的實現, 但術語ECMAScript和JavaScript平時表達同一個意思
3. JS包含三個部分：
1). ECMAScript（核心）
2). 擴展==>瀏覽器端
* BOM（瀏覽器對象模型）
* DOM（文檔對象模型）
3). 擴展==>服務器端
* Node
4. ES的幾個重要版本
* ES5 : 09年發佈
* ES6(ES2015) : 15年發佈, 也稱爲ECMA2015
* ES7(ES2016) : 16年發佈, 也稱爲ECMA2016 (變化不大)
-->
<script type="text/javascript">
</script>
</body>
</html>
(02. 尚硅谷_ES5_嚴格模式&)
02. 尚硅谷_ES5_嚴格模式
雅閣模式禁止自定義函數中的this指向window
必須要使用var聲明變量
創建eval作用域
對象不能有重名屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_嚴格模式</title>
</head>
<body>
<!--
1. 理解:
* 除了正常運行模式(混雜模式)，ES5添加了第二種運行模式："嚴格模式"（strict mode）。
* 顧名思義，這種模式使得Javascript在更嚴格的語法條件下運行
2. 目的/作用
* 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行爲
* 消除代碼運行的一些不安全之處，爲代碼的安全運行保駕護航
* 爲未來新版本的Javascript做好鋪墊
3. 使用
* 在全局或函數的第一條語句定義爲: 'use strict';
* 如果瀏覽器不支持, 只解析爲一條簡單的語句, 沒有任何副作用
4. 語法和行爲改變
* 必須用var聲明變量
* 禁止自定義的函數中的this指向window
* 創建eval作用域
* 對象不能有重名的屬性
-->
<script type="text/javascript">
</script>
</body>
</html>
new時候this指向實例對象
eval定義的變量沒有自己的作用域
(03. 尚硅谷_ES5_json對象擴展&)
03. 尚硅谷_ES5_json對象擴展&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_JSON對象</title>
</head>
<body>
<!--
1. JSON.stringify(obj/arr)
* js對象(數組)轉換爲json對象(數組)
2. JSON.parse(json)
* json對象(數組)轉換爲js對象(數組)
-->
<script type="text/javascript">
</script>
</body>
</html>
(04. 尚硅谷_ES5_Object對象方法擴展&)
04. 尚硅谷_ES5_Object對象方法擴展&
原型裏面的屬性可以被繼承
defineProperties擴展屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_Object擴展</title>
</head>
<body>
<!--
ES5給Object擴展了一些靜態方法, 常用的2個:
1. Object.create(prototype, [descriptors])
* 作用: 以指定對象爲原型創建新的對象
* 爲新的對象指定新的屬性, 並對屬性進行描述
- value : 指定值
- writable : 標識當前屬性值是否是可修改的, 默認爲false
- configurable: 標識當前屬性是否可以被刪除 默認爲false
- enumerable： 標識當前屬性是否能用for in 枚舉 默認爲false
2. Object.defineProperties(object, descriptors)
* 作用: 爲指定對象定義擴展多個屬性
* get ：用來獲取當前屬性值得回調函數
* set ：修改當前屬性值得觸發的回調函數，並且實參即爲修改後的值
* 存取器屬性：setter,getter一個用來存值，一個用來取值
-->
<script type="text/javascript">
</script>
</body>
</html>
對象本身兩個方法回調
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
對象本身的兩個方法
* get propertyName(){} 用來得到當前屬性值的回調函數
* set propertyName(){} 用來監視當前屬性值變化的回調函數
-->
<script type='text/javascript'>
</script>
</body>
</html>
(05. 尚硅谷_ES5_數組的擴展&)
05. 尚硅谷_ES5_數組的擴展&
prototype給實例增加屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_Array擴展</title>
</head>
<body>
<!--
1. Array.prototype.indexOf(value) : 得到值在數組中的第一個下標
2. Array.prototype.lastIndexOf(value) : 得到值在數組中的最後一個下標
3. Array.prototype.forEach(function(item, index){}) : 遍歷數組
4. Array.prototype.map(function(item, index){}) : 遍歷數組返回一個新的數組，返回加工之後的值
5. Array.prototype.filter(function(item, index){}) : 遍歷過濾出一個新的子數組， 返回條件爲true的值
-->
<script type="text/javascript">
/*
需求:
1. 輸出第一個6的下標
2. 輸出最後一個6的下標
3. 輸出所有元素的值和下標
4. 根據arr產生一個新數組,要求每個元素都比原來大10
5. 根據arr產生一個新數組, 返回的每個元素要大於4
*/
</script>
</body>
</html>
(06. 尚硅谷_ES5_call,apply,bind用法詳解&)
06. 尚硅谷_ES5_call,apply,bind用法詳解&
強制綁定this
foo.apply(obj,33) obj調用foo傳遞33參數，bind的this是調用的obj而不是window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_Function擴展</title>
</head>
<body>
<!--
1. Function.prototype.bind(obj) :
* 作用: 將函數內的this綁定爲obj, 並將函數返回
2. 面試題: 區別bind()與call()和apply()?
* 都能指定函數中的this
* call()/apply()是立即調用函數
* bind()是將函數返回
-->
<script type="text/javascript">
</script>
</body>
</html>
(07. 尚硅谷_ES6_let const關鍵字&)
07. 尚硅谷_ES6_let const關鍵字&
不能重複聲明，不存在var提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_let關鍵字</title>
</head>
<body>
<button>測試1</button>
<br>
<button>測試2</button>
<br>
<button>測試3</button>
<br>
<!--
***let
1. 作用:
* 與var類似, 用於聲明一個變量
2. 特點:
* 在塊作用域內有效
* 不能重複聲明
* 不會預處理, 不存在提升
3. 應用:
* 循環遍歷加監聽
* 使用let取代var是趨勢
-->
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_const關鍵字</title>
</head>
<body>
<!--
1. 作用:
* 定義一個常量
2. 特點:
* 不能修改
* 其它特點同let
3. 應用:
* 保存不用改變的數據
-->
<script type="text/javascript">
</script>
</body>
</html>
(08. 尚硅谷_ES6_變量的解構賦值&)
08. 尚硅谷_ES6_變量的解構賦值&
解構的目標是對象，只能以對象來接收，對象中可以設置屬性，{}相當於全局變量usernam必須是本來對象的屬性obj.xxx
只需要一部分數據
數組的解構賦值，根據下標一一對應，與寫的什麼沒有關係
直接使用，在函數內部聲明瞭username與age直接使用即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_變量的解構賦值</title>
</head>
<body>
<!--
1. 理解:
* 從對象或數組中提取數據, 並賦值給變量(多個)
2. 對象的解構賦值
let {n, a} = {n:'tom', a:12}
3. 數組的解構賦值
let [a,b] = [1, 'atguigu'];
4. 用途
* 給多個形參賦值
-->
<script type="text/javascript">
</script>
</body>
</html>
(09. 尚硅谷_ES6_模板字符串&)
09. 尚硅谷_ES6_模板字符串&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_模板字符串</title>
</head>
<body>
<!--
1. 模板字符串 : 簡化字符串的拼接
* 模板字符串必須用 `` 包含
* 變化的部分使用${xxx}定義
-->
<script type="text/javascript">
</script>
</body>
</html>
(10. 尚硅谷_ES6_對象的簡寫方式&)
10. 尚硅谷_ES6_對象的簡寫方式&
如果key與value一樣，可以省略一個
去掉:和function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_簡化的對象寫法</title>
</head>
<body>
<!--
簡化的對象寫法
* 省略同名的屬性值
* 省略方法的function
* 例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};
-->
<script type="text/javascript">
</script>
</body>
</html>
(11. 尚硅谷_ES6_箭頭函數詳解&)
11. 尚硅谷_ES6_箭頭函數詳解&
只有一條語句和表達式要省略大括號，自動返回計算結果
多條語句必須return要返回結果
箭頭函數所處的對象就是this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_箭頭函數</title>
</head>
<body>
<button id="btn1">測試箭頭函數this_1</button>
<button id="btn2">測試箭頭函數this_2</button>
<!--
* 作用: 定義匿名函數
* 基本語法:
* 沒有參數: () => console.log('xxxx')
* 一個參數: i => i+2
* 大於一個參數: (i,j) => i+j
* 函數體不用大括號: 默認返回結果
* 函數體如果有多個語句, 需要用{}包圍，若有需要返回的內容，需要手動返回
* 使用場景: 多用來定義回調函數
* 箭頭函數的特點：
1、簡潔
2、箭頭函數沒有自己的this，箭頭函數的this不是調用的時候決定的，而是在定義的時候處在的對象就是它的this
3、擴展理解： 箭頭函數的this看外層的是否有函數，
如果有，外層函數的this就是內部箭頭函數的this，
如果沒有，則this是window。
-->
<script type="text/javascript">
</script>
</body>
</html>
與外層函數的this一樣，常規函數this誰調用它this就是誰
外面是箭頭函數，此時的this就是window
本質在window下定義的箭頭函數
(12. 尚硅谷_ES6_三點運算符&)
12. 尚硅谷_ES6_三點運算符&
argument是僞數組不具備數組一般屬性，value可以遍歷比arguments方便
少了一個佔位符2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_3點運算符</title>
</head>
<body>
<!--
* 用途
1. rest(可變)參數
* 用來取代arguments 但比 arguments 靈活,只能是最後部分形參參數
function fun(...values) {
console.log(arguments);
arguments.forEach(function (item, index) {
console.log(item, index);
});
console.log(values);
values.forEach(function (item, index) {
console.log(item, index);
})
}
fun(1,2,3);
2. 擴展運算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);
-->
<script type="text/javascript">
</script>
</body>
</html>
把2，3，4，5放在1，6中間
...arr不是一個數組
(13. 尚硅谷_ES6_形參默認值&)
13. 尚硅谷_ES6_形參默認值&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_形參默認值</title>
</head>
<body>
<!--
* 形參的默認值----當不傳入參數的時候默認使用形參裏的默認值
function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
}
-->
<script type="text/javascript">
</script>
</body>
</html>
(14. 尚硅谷_ES6_promise對象原理詳解&)
14. 尚硅谷_ES6_promise對象原理詳解&
Promise是同步執行，同步阻塞，同步函數中執行異步操作
成功調用resolve()，.then()有兩個回調，根據promise返回的狀態執行成功的回調與失敗的回調
根據狀態碼成功resolve返回第一個回調
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_Promise對象</title>
</head>
<body>
<!--
1. 理解:
* Promise對象: 代表了未來某個將要發生的事件(通常是一個異步操作)
* 有了promise對象, 可以將異步操作以同步的流程表達出來, 避免了層層嵌套的回調函數(俗稱'回調地獄')
* ES6的Promise是一個構造函數, 用來生成promise實例
2. 使用promise基本步驟(2步):
* 創建promise對象
let promise = new Promise((resolve, reject) => {
//初始化promise狀態爲 pending
//執行異步操作
if(異步操作成功) {
resolve(value);//修改promise的狀態爲fullfilled
} else {
reject(errMsg);//修改promise的狀態爲rejected
}
})
* 調用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))
3. promise對象的3個狀態
* pending: 初始化狀態
* fullfilled: 成功狀態
* rejected: 失敗狀態
4. 應用:
* 使用promise實現超時處理
* 使用promise封裝處理ajax請求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();
-->
<script type="text/javascript">
</script>
</body>
</html>
get請求的參數是查詢字符串req.query.id，post請求參數在請求體 req.query.body
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', {title: 'Express'});
});
router.get('/news', function (req, res, next) {
res.set('Access-Control-Allow-Origin', '*');
var id = req.query.id;
console.log('/news id='+id);
var news = {
id: id,
title: 'news title1...',
content: 'news content1...',
commentsUrl: '/comments?newsId='+id
};
res.json(news);
});
router.get('/comments', function (req, res, next) {
res.set('Access-Control-Allow-Origin', '*');
console.log('/comments newsId=' + req.query.newsId);
var newsId = req.query.newsId;
var comments = [
{
id: 1,
content: 'comment content1111...',
newsId : newsId
},
{
id: 2,
content: 'comment content2222...',
newsId : newsId
}];
res.json(comments);
});
module.exports = router;
bin/www
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('es_server:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
可以修改爲同步方式
onreadystatechange發送一次請求調用4次，有5種狀態碼，初始化爲0，發送send爲1，200和304成功狀態碼
獲取的data是字符串，需要變爲一個對象
可以繼續鏈式調用
(16. 尚硅谷_ES6_Symbol屬性介紹_01&)
16. 尚硅谷_ES6_Symbol屬性介紹_01&
Symbol是原始數據類型，同一個Symbol調用屬性值都是唯一值
對象實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Symbol</title>
</head>
<body>
<!--
前言：ES5中對象的屬性名都是字符串，容易造成重名，污染環境
Symbol：
概念：ES6中的添加了一種原始數據類型symbol(已有的原始數據類型：String, Number, boolean, null, undefined, 對象)
特點：
1、Symbol屬性對應的值是唯一的，解決命名衝突問題
2、Symbol值不能與其他數據進行計算，包括同字符串拼串
3、for in, for of遍歷時不會遍歷symbol屬性。
使用：
1、調用Symbol函數得到symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
2、傳參標識
let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')
3、內置Symbol值
* 除了定義自己使用的Symbol值以外，ES6還提供了11個內置的Symbol值，指向語言內部使用的方法。
- Symbol.iterator
* 對象的Symbol.iterator屬性，指向該對象的默認遍歷器方法(後邊講)
-->
<script type="text/javascript">
</script>
</body>
</html>
(17. 尚硅谷_ES6_Symbol屬性介紹_02&)
17. 尚硅谷_ES6_Symbol屬性介紹_02&
Symbol不能被for in遍歷出來
(18. 尚硅谷_ES6_iterator接口機制_01&)
18. 尚硅谷_ES6_iterator接口機制_01&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iterator遍歷器</title>
</head>
<body>
<!--
概念： iterator是一種接口機制，爲各種不同的數據結構提供統一的訪問機制
作用：
1、爲各種數據結構，提供一個統一的、簡便的訪問接口；
2、使得數據結構的成員能夠按某種次序排列
3、ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要供for...of消費。
工作原理：
- 創建一個指針對象(遍歷器對象)，指向數據結構的起始位置。
- 第一次調用next方法，指針自動指向數據結構的第一個成員
- 接下來不斷調用next方法，指針會一直往後移動，直到指向最後一個成員
- 每調用next方法返回的是一個包含value和done的對象，{value: 當前成員的值,done: 布爾值}
* value表示當前成員的值，done對應的布爾值表示當前的數據的結構是否遍歷結束。
* 當遍歷結束的時候返回的value值是undefined，done值爲false
原生具備iterator接口的數據(可用for of遍歷)
1、Array
2、arguments
3、set容器
4、map容器
5、String
。。。
-->
<script type="text/javascript">
</script>
</body>
</html>
arguments僞數組沒有數組的一般方法可以使用for of遍歷，普通對象沒有interator接口
(21. 尚硅谷_ES6_Generator函數簡介_01&)
21. 尚硅谷_ES6_Generator函數簡介_01&
可暫停執行，生成指針對象，調用next執行內部的邏輯，普通js邏輯不會阻塞
指針執行最後返回函數的返回值，默認undefined
在哪暫停的，就在哪裏啓動，傳入的參數就是返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generator函數</title>
</head>
<body>
<!--
Generator函數
概念：
1、ES6提供的解決異步編程的方案之一
2、Generator函數是一個狀態機，內部封裝了不同狀態的數據，
3、用來生成遍歷器對象
4、可暫停函數(惰性求值), yield可暫停，next方法可啓動。每次返回的是yield後的表達式結果
特點：
1、function 與函數名之間有一個星號
2、內部用yield表達式來定義不同的狀態
例如：
function* generatorExample(){
let result = yield 'hello'; // 狀態值爲hello
yield 'generator'; // 狀態值爲generator
}
3、generator函數返回的是指針對象(接11章節裏iterator)，而不會執行函數內部邏輯
4、調用next方法函數內部邏輯開始執行，遇到yield表達式停止，返回{value: yield後的表達式結果/undefined, done: false/true}
5、再次調用next方法會從上一次停止時的yield處開始，直到最後
6、yield語句返回結果通常爲undefined， 當調用next方法時傳參內容會作爲啓動時yield語句的返回值。
-->
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
// 對象的symbol.iterator屬性 指向遍歷器對象
// 案例練習
/*
* 需求：
* 1、發送ajax請求獲取新聞內容
* 2、新聞內容獲取成功後再次發送請求，獲取對應的新聞評論內容
* 3、新聞內容獲取失敗則不需要再次發送請求。
*
* */
</script>
</body>
</html>
返回每一個yield對應的狀態
$.get返回url，保證成功調用next()又能看到url
傳遞url，寫在getNews中的SX.next()保證了上一次請求已經成功
傳遞的'aaa'就是返回的url
(24. 尚硅谷_ES6_async函數詳解及應用_01&)
24. 尚硅谷_ES6_async函數詳解及應用_01&
以同步流程表達異步操作
遇到await不會向下執行，直到等待完異步纔會繼續向下執行，await接收promise，async返回值是promise對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>async函數</title>
</head>
<body>
<!--
async函數(源自ES2017)
概念： 真正意義上去解決異步回調的問題，同步流程表達異步操作
本質： Generator的語法糖
語法：
async function foo(){
await 異步操作;
await 異步操作；
}
特點：
1、不需要像Generator去調用next方法，遇到await等待，當前的異步操作完成就往下執行
2、返回的總是Promise對象，可以用then方法進行下一步操作
3、async取代Generator函數的星號*，await取代Generator的yield
4、語意上更爲明確，使用簡單，經臨牀驗證，暫時沒有任何副作用
-->
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
普通函數await返回值就是當前函數執行完畢的返回值
調用成功狀態的返回值
上面的異步任務執行成功以後纔會執行下面的
返回值data作爲resolve的參數
一旦狀態爲reject失敗，後面await不會繼續執行
失敗會返回result爲false
(26. 尚硅谷_ES6_class類使用詳解&)
26. 尚硅谷_ES6_class類使用詳解&
constructor中的屬性都會放到類的原型上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_class</title>
</head>
<body>
</body>
<!--
1. 通過class定義類/實現類的繼承
2. 在類中通過constructor定義構造方法
3. 通過new來創建類的實例
4. 通過extends來實現類的繼承
5. 通過super調用父類的構造方法
6. 重寫從父類中繼承的一般方法
-->
<script type="text/javascript">
</script>
</html>
extends實現類型繼承，super調用父類構造方法
(27. 尚硅谷_ES6_字符串，數組的擴展&)
27. 尚硅谷_ES6_字符串，數組的擴展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_字符串擴展</title>
</head>
<body>
<!--
1. includes(str) : 判斷是否包含指定的字符串
2. startsWith(str) : 判斷是否以指定字符串開頭
3. endsWith(str) : 判斷是否以指定字符串結尾
4. repeat(count) : 重複指定次數
-->
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_數值擴展</title>
</head>
<body>
<!--
1. 二進制與八進制數值表示法: 二進制用0b, 八進制用0o
2. Number.isFinite(i) : 判斷是否是有限大的數
3. Number.isNaN(i) : 判斷是否是NaN
4. Number.isInteger(i) : 判斷是否是整數
5. Number.parseInt(str) : 將字符串轉換爲對應的數值
6. Math.trunc(i) : 直接去除小數部分
-->
<script type="text/javascript">
</script>
</body>
</html>
(28. 尚硅谷_ES6_數組方法的擴展&)
28. 尚硅谷_ES6_數組方法的擴展&
form包裝完畢就有數組的真方法了
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_數組擴展</title>
</head>
<body>
<button>測試1</button>
<br>
<button>測試2</button>
<br>
<button>測試3</button>
<br>
<!--
1. Array.from(v) : 將僞數組對象或可遍歷對象轉換爲真數組
2. Array.of(v1, v2, v3) : 將一系列值轉換成數組
3. find(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素下標
-->
<script type="text/javascript">
</script>
</body>
</html>
(29. 尚硅谷_ES6_對象方法的擴展&)
29. 尚硅谷_ES6_對象方法的擴展&
obj4是obj3的原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_對象擴展</title>
</head>
<body>
<!--
1. Object.is(v1, v2)
* 判斷2個數據是否完全相等
2. Object.assign(target, source1, source2..)
* 將源對象的屬性複製到目標對象上
3. 直接操作 __proto__ 屬性
let obj2 = {};
obj2.__proto__ = obj1;
-->
<script type="text/javascript">
</script>
</body>
</html>
(30. 尚硅谷_ES6_深度克隆_01&)
30. 尚硅谷_ES6_深度克隆_01&
輸出wade堆棧模型
數組拷貝方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>對象的深度克隆</title>
</head>
<body>
<!--
1、數據類型：
* 數據分爲基本的數據類型(String, Number, boolean, Null, Undefined)和對象數據類型
- 基本數據類型：
特點： 存儲的是該對象的實際數據
- 對象數據類型：
特點： 存儲的是該對象在棧中引用，真實的數據存放在堆內存裏
2、複製數據
- 基本數據類型存放的就是實際的數據，可直接複製
let number2 = 2;
let number1 = number2;
- 克隆數據：對象/數組
1、區別： 淺拷貝/深度拷貝
判斷： 拷貝是否產生了新的數據還是拷貝的是數據的引用
知識點：對象數據存放的是對象在棧內存的引用，直接複製的是對象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 複製了obj在棧內存的引用
2、常用的拷貝技術
1). arr.concat(): 數組淺拷貝
2). arr.slice(): 數組淺拷貝
3). JSON.parse(JSON.stringify(arr/obj)): 數組或對象深拷貝, 但不能處理函數數據
4). 淺拷貝包含函數數據的對象/數組
5). 深拷貝包含函數數據的對象/數組
-->
<script type="text/javascript">
</script>
</body>
</html>
深拷貝
call綁定this，slice截取字符串最後一個可以使用-1
不能指向同一個內存地址，要繼續遍歷獲取的value值
嵌套對象，result爲最終克隆的數據
(32. 尚硅谷_ES6_set，map容器詳解&)
32. 尚硅谷_ES6_set，map容器詳解&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_Set和Map數據結構</title>
</head>
<body>
<!--
1. Set容器 : 無序不可重複的多個value的集合體
* Set()
* Set(array)
* add(value)
* delete(value)
* has(value)
* clear()
* size
2. Map容器 : 無序的 key不重複的多個key-value的集合體
* Map()
* Map(array)
* set(key, value)//添加
* get(key)
* delete(key)
* has(key)
* clear()
* size
-->
<script type="text/javascript">
</script>
</body>
</html>
(33. 尚硅谷_ES6_for of用法詳解&)
33. 尚硅谷_ES6_for of用法詳解&
數組去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_for_of循環</title>
</head>
<body>
<!--
for(let value of target){}循環遍歷
1. 遍歷數組
2. 遍歷Set
3. 遍歷Map
4. 遍歷字符串
5. 遍歷僞數組
-->
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<script type="text/javascript">
</script>
</body>
</html>
(34. 尚硅谷_ES7_方法介紹&)
34. 尚硅谷_ES7_方法介紹&
