let-const-解構賦值-字串

Zingiber發表於2019-09-20

let和const

let基本用法

用法類似var，表示常量，只在let命令所在程式碼塊內有效。

const基本用法

const宣告只讀常量。一旦宣告常量的值不能變。一旦宣告，必須立即賦初始值，不能留到以後賦值。

const foo = {};

// 為 foo 新增一個屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個物件，就會報錯
foo = {}; // TypeError: "foo" is read-only
複製程式碼

本質：const實際上保證的，並不是變數的值不得改動，而是變數指向的那個記憶體地址所儲存的資料不得改動。

let和const共同點

1.不存在變數提升

變數提升：var命令會發生“變數提升”現象，即變數可以在宣告之前使用，值為undefined

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let或const 的情況
console.log(bar1); // 報錯ReferenceError
console.log(bar2)
let bar1 = 2;
const bar2 = 3;
複製程式碼

2.暫時性死區

只要塊級作用域內，存在let或const命令，它所宣告的變數就繫結這個區域，不再受外部的影響。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
複製程式碼

在程式碼塊內，使用let或const命令宣告變數之前，該變數都是不可用的。這在語法上，稱為“暫時性死區”。

ES6 規定暫時性死區和let、const語句不出現變數提升，主要是為了減少執行時錯誤，防止在變數宣告前就使用這個變數，從而導致意料之外的行為。

3.不允許重複宣告

let和const不允許在相同作用域內重複宣告一個變數。

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  var a = 10;
  let a = 1;
}

// 報錯
function func(){
    let a = 10;
    let a = 1;
}

// 不報錯
function func(){
    var a = 10;
    var a = 1;
}
複製程式碼

4.不繫結全域性作用域

當在全域性作用域中使用 var 宣告的時候，會建立一個新的全域性變數作為全域性物件的屬性。

// var
var value = 1;
console.log(window.value); // 1

// let const
let value = 1;
console.log(window.value); // undefined
複製程式碼

塊級作用域

塊級作用域存在於

函式內部
塊中（i字元{}之間）

let和const都是塊級宣告的一種。也就是在指定塊的作用域之外無法訪問塊內宣告的變數。

好處

1.外層程式碼塊不受內層程式碼塊影響，外層作用域無法讀取內層作用域的變數，內層作用域可以定義外層作用域的同名變數而不受影響。

// ES6
function foo(){
    let a = 0;
    if(true){
        let a = 1;
    }
    console.log(a); // 0
}

// ES5
function foo(){
    var a = 0;
    if(true){
        var a = 1;
    }
    console.log(a); // 1
}
複製程式碼

2.迴圈變數不會洩漏為全域性變數

// ES6
let s = 'hello';
for(let i = 0;i<s.length;i++){
  console.log(s[i]);
}
console.log(i); // 報錯， i is not defined

// ES5
var s = 'hello';
for(var i = 0;i<s.length;i++){
  console.log(s[i]);
}
console.log(i); // 5
複製程式碼

關於迴圈的塊級作用域：上面講了 let 不提升，不能重複宣告，不能繫結全域性作用域等等特性，可是為什麼在這裡就能正確列印？

在 for 迴圈中使用 let 和 var，底層會使用不同的處理方式。let的底層實現：在 for (let i = 0; i < s.length; i++) 中，即圓括號之內建立一個隱藏的作用域,然後每次迭代迴圈時都建立一個新變數，並以之前迭代中同名變數的值將其初始化。

let s = 'hello';
for(let i = 0;i<s.length;i++){
  let i = 0;
  console.log(s[i]);
}
//輸出五行 h
複製程式碼

3.函式執行更簡潔

// ES6
{
    ...;
    // 直接寫函式內的程式碼，相當於自執行的匿名函式
}

// 匿名立即執行函式表示式
(function(){
    ...;
}());
複製程式碼

ES6六種宣告變數的方法

var(ES5)
function(ES5)
let(ES6)
const(ES6)
import(ES6)
class(ES6)

變數的解構賦值

陣列的解構賦值

基本用法：

從陣列中按變數位置提取值，對變數賦值,只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。如果解構不成功變數的值為undefined。

// 簡單例子
let [a, b, c] = [1, 2, 3];

// 巢狀
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

// 不完全解構，等號左邊部分匹配一部分右邊的陣列
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
複製程式碼

如果等號右邊轉為物件後，不具備Iterator介面，或者本身不具備Iterator介面，會報錯

// 報錯
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

// set,map 可以使用陣列的解構賦值
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

let map = new Map([
  ['name', '張三'],
  ['title', 'Author']
]);
let [foo] = map;
console.log(foo); // [ 'name', '張三' ]
複製程式碼

預設值

允許指定預設值,如果預設值是一個表示式，那麼這個表示式是惰性求值的，即只有在用到的時候，才會求值。

ES6 內部使用嚴格相等運算子（===），判斷一個位置是否有值。所以，只有當一個陣列成員嚴格等於undefined，預設值才會生效。

實際場景可以用來進行容錯處理

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
// x='a', y='b'
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
複製程式碼

預設值可以引用解構賦值的其他變數，但該變數必須已經宣告。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
複製程式碼

物件的解構賦值

基本用法

物件的屬性沒有次序，變數必須與屬性同名。如果變數名在屬性中不存在，解構失敗，值為undefined。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

複製程式碼

物件的解構賦值，可以很方便地將現有物件的方法，賦值到某個變數。

const { log } = console;
log('hello') // hello
複製程式碼

如果變數名與物件內屬性名不一樣，必須寫出下面這種形式

物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
複製程式碼

可用於巢狀解構的物件。（遵循規則：物件遵循變數名等於物件內部屬性，陣列遵循對應位置賦值。）

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

複製程式碼

如果解構模式是巢狀的物件，而且子物件所在的父屬性不存在，那麼將會報錯

// 報錯
let {foo: {bar}} = {baz: 'baz'};
複製程式碼

物件的解構賦值可以取到繼承的屬性。

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);

const { foo } = obj1;
foo // "bar"
複製程式碼

預設值

物件解構賦值可指定預設值，預設值生效條件是，物件的屬性嚴格等於undefined。

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null
複製程式碼

注意點

1.如果要將一個已經宣告的變數用於解構賦值，必須非常小心。

// 錯誤的寫法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// JavaScript 引擎會將{x}理解成一個程式碼塊
// 正確的寫法
let x;
({x} = {x: 1});
複製程式碼

2.陣列本質是特殊的物件，因此可以對陣列進行物件屬性的解構。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last, length} = arr;
first // 1
last // 3
length // 3
複製程式碼

字串的解構賦值

字串被轉換成類似陣列的物件

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5
複製程式碼

數值和布林值的解構賦值

如果等號右邊是數值和布林值，則會先轉為物件，可以獲取到Number物件和Boolean物件的屬性和方法。(只要等號右邊的值不是物件或陣列，就先將其轉為物件)

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
複製程式碼

函式引數的解構賦值

函式引數可以使用解構賦值，也可以使用預設值

function add([x, y=3]){
  return x + y;
}

add([1]); // 4
複製程式碼

圓括號問題

解構賦值使用起來方便，但是編譯器解析起來不方便，一個式子是模式還是表示式，沒辦法一開始就知道，必須解析到等號或者一直沒有等號才知道。ES6中，只要有可能導致歧義，就不能使用圓括號。

解構賦值不能使用圓括號的情況

變數宣告

// 全部報錯
let [(a)] = [1];
let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};
let { o: ({ p: p }) } = { o: { p: 2 } };
複製程式碼

函式引數（也屬於變數宣告）

// 全部報錯
function f([(z)]) { return z; }
function f([z,(x)]) { return x; }
複製程式碼

賦值語句的模式

// 全部報錯
({ p: a }) = { p: 42 };
([a]) = [5];
[({ p: a }), { x: c }] = [{}, {}];
複製程式碼

可以使用圓括號的情況

賦值語句的非模式部分可以使用圓括號

[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確
[(parseInt.prop)] = [3]; // 正確
複製程式碼

用途

交換變數值

let x = 1;
let y = 2;

[x, y] = [y, x];
複製程式碼

從函式返回多個值

// 返回一個物件

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
複製程式碼

函式引數的定義

// 引數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 引數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

複製程式碼

提取JSON資料

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
複製程式碼

函式引數預設值

function second({x, y = 2}) {
    console.log("x："+x ,"y："+ y);
}
second({}); // x:undefined y:2
second({x:100}); // x:100 y:2
second({x:100,y:200}); // x:100 y:200
複製程式碼

遍歷Map結構

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world
複製程式碼

輸入模組的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");
複製程式碼

字串的擴充套件

字元的Unicode表示法

採用\uxxxx表示一個字元，xxxx表示字元的Unicode碼點，這個表示法只限於碼點在\u0000~\uFFFF之間的字元，超出範圍要用雙位元組的形式表示

"\u0061"; //a
"\uD842\uDFB7"; // "?"
"\u20BB7"; // " 7",\u20BB是不可列印字元，顯示一個空格

// ES6對Unicode表示法的改進
"\u{20BB7}"; // "?"
"\u{41}\u{42}\u{43}"; // "ABC"
複製程式碼

字串的遍歷器介面

ES6為字串新增了遍歷器介面

for (let item of 'foo') {
  console.log(item)
}
// "f"
// "o"
// "o"
複製程式碼

特殊字元

JavaScript 規定有5個字元，不能在字串裡面直接使用，只能使用轉義形式。

U+005C：反斜槓（reverse solidus)
U+000D：回車（carriage return）
U+2028：行分隔符（line separator）
U+2029：段分隔符（paragraph separator）
U+000A：換行符（line feed）

模版字串

模版字串是增強版的字串，用反引號（`）標識。可以當作普通字串使用，也可以定義多行字串，也可以在字串中嵌入變數。

基本用法

let message = `Hello World`;
複製程式碼

要在模版字串中使用反引號，可以使用反斜槓轉義

let message = `Hello \` World`;
複製程式碼

空格、縮緊、換行都被保留

let message = `
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
`;
複製程式碼

如果你不想要這個換行，可以使用trim方法消除它。

let message = `
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
`.trim();
複製程式碼

嵌入變數

模板字串中嵌入變數，需要將變數名寫在${}之中。其實不止變數，任意的 JavaScript 表示式都是可以的

let x = 1, y = 2;
let message = `<ul><li>${x}</li><li>${x + y}</li></ul>`;
console.log(message); // <ul><li>1</li><li>3</li></ul>
複製程式碼

支援巢狀

let arr = [{value: 1}, {value: 2}];
let message = `
	<ul>
		${arr.map((item) => {
			return `
				<li>${item.value}</li>
			`
		})}
	</ul>
`;
console.log(message);
/*
	<ul>
		
				<li>1</li>
			,
				<li>2</li>
			
	</ul>
*/
複製程式碼

在 li 標籤中間多了一個逗號，這是因為當大括號中的值不是字串時，會將其轉為字串，比如一個陣列 [1, 2, 3] 就會被轉為 1,2,3，逗號就是這樣產生的。可以用join消除。

模板字串之中還能呼叫函式

function fn() {
  return "Hello World";
}

console.log(`foo ${fn()} bar`); // foo Hello World bar
複製程式碼

標籤模板

模板字串可以緊跟在一個函式名後面，該函式將被呼叫來處理這個模板字串。稱為標籤模板。

標籤模板其實不是模板，而是函式呼叫的一種特殊形式。“標籤”指的就是函式，緊跟在後面的模板字串就是它的引數。

let x = 'Hi', y = 'Kevin';
var res = message`${x}, I am ${y}`;
console.log(res);
// 等同於
message(["",", I am ", ""],"Hi","Kevin");
複製程式碼

message函式用來處理返回的字串。

function message(literals, value1, value2) {
    // ...
}
// 等同於
function message(literals, ...values){
    //...
}
複製程式碼

函式第一個引數為陣列，陣列成員是模版字串中沒有變數替換的部分。變數替換隻發生在陣列的第一個成員之後。

字串新增方法

String.fromCodePoint()

靜態方法返回使用指定的程式碼點序列建立的字串。

引數： num1, ..., numN：一串 Unicode 編碼位置，即“程式碼點”。

返回值：使用指定的 Unicode 編碼位置建立的字串。

console.log(String.fromCodePoint(9731, 9733, 9842, 0x2F804));
// expected output: "☃★♲你"
複製程式碼

例項方法includes(), startsWith(), endsWith()

用來確定一個字串是否包含在另一個字串中

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
複製程式碼

1.includes()

判斷一個字串中是否包含在另一個字串，根據情況返回true或false。

引數：

searchString要在此字串中搜尋的字串。
position，可選。從當前字串的哪個索引位置開始搜尋子字串，預設值為0。

區分大小寫

2.startsWith()

判斷當前字串是否以另外一個給定的子字串開頭，根據結果返回true或false。

引數：

searchString要搜尋的子字串。
position 可選。在 str 中搜尋 searchString 的開始位置，預設值為 0，也就是真正的字串開頭處。

3.endsWith()

判斷當前字串是否是以另外一個給定的子字串“結尾”的，根據判斷結果返回 true 或 false。

引數：

searchString要搜尋的子字串。
length，可選。作為 str 的長度。預設值為 str.length。

例項方法：repeat()

構造並返回一個新字串，該字串包含被連線在一起的指定數量的字串的副本。

引數：count--介於0和正無窮大之間的整數 : [0, +∞) 。表示在新構造的字串中重複了多少遍原字串。引數如果是小數，會取整。

x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
複製程式碼

例項方法：padStart(), padEnd()

用於字串補全長度

1.padStart()

用另一個字串填充當前字串(重複，如果需要的話)，以便產生的字串達到給定的長度。填充從當前字串的開始(左側)應用。

引數：

targetLength當前字串需要填充到的目標長度。如果這個數值小於當前字串的長度，則返回當前字串本身。
padString 可選填充字串。如果字串太長，使填充後的字串長度超過了目標長度，則只保留最左側的部分，其他部分會被截斷。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
複製程式碼

2.padEnd()

同上，填充從當前字串末尾(右側)開始填充

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
複製程式碼

例項方法：trimStart()/trimLeft, trimEnd()/trimRight()

trimStart() / trimLeft()方法移除原字串左端的連續空白符並返回，方法並不會直接修改原字串本身。

trimEnd() / trimRight()方法移除原字串右端的連續空白符並返回,方法並不會直接修改原字串本身。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"
複製程式碼

JavaScript 字串解構賦值
2018-08-25
JavaScript字串賦值
JS解構賦值
2019-02-16
JS賦值
JavaScript 物件解構賦值
2018-08-20
JavaScript物件賦值
ES6學習-4 解構賦值（1）陣列的解構賦值
2021-05-23
賦值陣列
ES6解構賦值
2021-05-21
賦值
JavaScript陣列解構賦值
2018-08-24
JavaScript陣列賦值
es6-解構賦值
2018-09-15
賦值
變數的解構賦值
2020-11-10
變數賦值
ES6 解構賦值
2020-09-24
賦值
JavaScript解構賦值的用途
2018-03-08
JavaScript賦值
ES6新特性總結之解構賦值和字串模板
2018-09-28
賦值字串
ES6之解構賦值
2019-05-05
賦值
ES6 解構賦值+改名
2020-12-30
賦值
ES6學習解構賦值
2019-02-17
賦值
ES6-解構賦值及原理
2019-01-21
賦值
JavaScript函式引數解構賦值
2018-09-20
JavaScript函式賦值
ES6中的解構賦值
2020-10-29
賦值
深入解析 ES6：解構賦值
2015-07-26
賦值
解構賦值還有這麼多玩法？
2018-03-26
賦值
ES6：變數的解構賦值
2017-04-14
變數賦值
ES6 變數的解構賦值
2017-03-01
變數賦值
ES6 => new Set || map||...解構賦值
2017-12-26
賦值
ECMAScript6變數的解構賦值
2017-12-19
變數賦值
[譯]JavaScript ES6解構賦值指南
2015-06-19
JavaScript賦值
Javascript 解構賦值,將屬性/值從物件/陣列中取出,賦值給其他變數
2020-10-04
JavaScript賦值物件陣列變數
ECMAScript 6入門 - 變數的解構賦值
2020-04-04
變數賦值
ES6 - 變數的解構賦值解析
2019-03-31
變數賦值
ES6之變數的解構賦值
2019-02-02
變數賦值
ES6 - let與const，解構賦值
2018-11-25
賦值
JavaScript 解構賦值小括號的應用
2018-09-19
JavaScript賦值
基礎知識梳理~ES6 解構賦值
2019-12-14
賦值
深入ES6 三變數的解構賦值
2021-09-09
變數賦值
ES6 -- 變數的解構賦值的用途
2018-08-21
變數賦值
【ES6基礎】解構賦值（destructuring assignment）
2019-02-20
賦值Struct
ES6入門之變數的解構賦值
2019-04-10
變數賦值
ES6學習筆記(五)【解構賦值，Iterator】
2019-04-06
筆記賦值
JavaScript ECMAScript 6 筆記 -2 《變數的解構賦值》
2017-09-27
JavaScript筆記變數賦值
es6分享——變數的解構賦值
2016-03-19
變數賦值

let-const-解構賦值-字串

let和const

let基本用法

const基本用法

let和const共同點

1.不存在變數提升

2.暫時性死區

3.不允許重複宣告

4.不繫結全域性作用域

塊級作用域

好處

ES6六種宣告變數的方法

變數的解構賦值

陣列的解構賦值

基本用法：

預設值

物件的解構賦值

基本用法

預設值

注意點

字串的解構賦值

數值和布林值的解構賦值

函式引數的解構賦值

圓括號問題

解構賦值不能使用圓括號的情況

可以使用圓括號的情況

用途

字串的擴充套件

字元的Unicode表示法

字串的遍歷器介面

特殊字元

模版字串

模版字串是增強版的字串，用反引號（`）標識。可以當作普通字串使用，也可以定義多行字串，也可以在字串中嵌入變數。

基本用法

嵌入變數

標籤模板

字串新增方法

String.fromCodePoint()

例項方法includes(), startsWith(), endsWith()

1.includes()

2.startsWith()

3.endsWith()

例項方法：repeat()

例項方法：padStart(), padEnd()

1.padStart()

2.padEnd()

例項方法：trimStart()/trimLeft, trimEnd()/trimRight()

相關文章