ES6知识归纳记录1

最新推荐文章于 2025-08-18 22:48:58 发布

原创最新推荐文章于 2025-08-18 22:48:58 发布 · 210 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ES6 #数组解构赋值 #变量

基础知识专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了ES6相较于ES5的改进，包括块级作用域、let与const变量声明、解构赋值、箭头函数等核心特性，以及它们如何改变JavaScript的编程实践。

1、ES5和ES6

ES6	ES5
块级作用域（可以任意嵌套）	只有 1、函数作用域； 2、全局作用域
函数声明：允许在“ 块级作用域内 ”声明，前提是大括号成立；（ps: es6环境会报错，避免使用，必要时可写成函数表达式）	函数声明：只能在 “ 顶层作用域 ”和 “ 函数作用域 ”之中声明
箭头函数和字符串插值
类定义和继承
展开运算符等

2、let 、const、var

let	const	var
块级作用域		1、函数作用域；2、全局作用域
“ 不 ” 存在变量提升；易造成“ 暂时性死区（TDZ）- 报错 ”		存在变量提升
同一块级作用域，变量 “不可以重复声明 ”		变量可重复声明
变量	只读常量 1、不能改变（分简单数据类型和复合数据类型）； 2、声明后要立即赋值

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function() {
     console.log(i);
    }
}
a[3](); // 10

---------分割线----------

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function() {
     console.log(i);
    }
}
a[3](); // 3

3、解构赋值 *****（可用于嵌套）

1、【数组】解构赋值

注意：左右两边解构保持一致

经典的有 import { a, b, c} from '../../model'; 就是解构赋值

完全解构赋值

let [a, b, c] = [1, 2, 3]   // a=1, b=2, c=3

let [a, [[b], c]] = [1, [[2], 3]]   // a=1, b=2, c=3

let [ , , c] = [1, 2, 3]   // c=3

不完全解构赋值

let [a, b] = [1, 2, 3]   // a=1, b=2

let [a, [b]] = [1, [2, 3]]   // a=1, b=2

解构赋值undefined(取不到值)

let [a, b, c] = [1, 2]  // a=1, b=2, c=undefined

let [a] = []  // a=undefined

解构赋值出错

let [a] = true/NaN/undefined/null/{}/1   //语法错误

解构赋值允许默认值(有两个特例：undefined和null)

let [a, b='x'] = [1]   // a=1, b=x

let [a, b='x'] = [1, undefined]   // a= 1, b= x

let [a, b='x'] = [1, null]   // a=1, b=null

引用变量时，该变量必须提前声明，否则报错

let [m=1, n=m] = [2]  // m= 2, n = 2  (x已经提前声明)

let [m=1, n=m] = []  // m= 1, n = 1  (x已经提前声明)

let [ m=f() ] = [1]  // m= 1  (匿名函数没有提前声明)

let [m=n, n=1] = []  // 语法错误

2、【对象】解构赋值

a、与【数组】解构赋值区别：

数组：取值与值的位置有关
对象：取值与属性名同名才能取到正确值

解构赋值取值

let {b, a} = {a: '你好', b: 'jason'}  // a='你好' ， b='jason'

解构赋值undefined(取不到值)

let {a, b} = {a: '你好'} // a='你好', b=undefined

别名的应用（简写）

原理是：先找到同属性名的，再赋值给对应的变量；下面title是模式， t才是变量

let { title: t } = { title: '你好'}  // t='你好', title 报错没有定义

解构赋值允许默认值 (有两个特例：undefined和null)

let {a, b=2} = {a: 1}  // a=1, b=2

let {a:t=5} = {a:2} // t=2

let {a=5} = {a: undefined} // a=undefined

let {a=5} = {a: null} //a=null

嵌套赋值

let m=[]
let n={}
({ a: n.name, b: m[0] } ={ a: 'jam', b: true })
// m = [true]
// n = {name: jam}

定义变量后，不能将大括号写在行首(正确写法如下)

let i;
({i} ={i: 1})

特殊解构赋值

let a = [1, 2, 3]
let {0: first, [a.length-1]: last} = arr;
// first = 1
// last = 3

3、【字符串】解构赋值

把它看成类似 ‘数组’

let [a, b, c, d, e, length:len] = 'hello' 
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
// len = 5

4、【数值和布尔值】解构赋值

先将数值和布尔值转换为“对象” let {toString: s} = 123/true

但是undefined 和 null 会报错（因为无法转为对象）

5、【函数参数】解构赋值

function a([x, y]){
  return x+y
}
a([1, 2]); // 3

//---------- 分割线 ----------

function b({x=0, y=0} = {}) {
    return [x, y]
}
b({x: 3, y: 8}) // [3, 8]
b({x: 3}) // [3, 0]