JavaScript高级、ES6（一）

最新推荐文章于 2024-08-01 10:49:17 发布

何时能脱坑

最新推荐文章于 2024-08-01 10:49:17 发布

阅读量1k

点赞数 7

文章标签：前端 javascript 学习 es6

本文链接：https://blog.csdn.net/weixin_59675867/article/details/125749378

版权

ES6的概念

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。

新增变量

let变量：

1.let声明的变量只在所处于的块级有效。（关于作用域，下文会详细介绍）

举例：

let b=2; // 全局变量
if(1==1){
		let a=1; // 局部变量
		console.log(a);//1
		console.log(b);//2
}
console.log(a); // 程序报错
console.log(b);//2

2.let不存在变量提升，var变量可以在变量声明前使用，let不能这样。

3.let暂时性死区：只要块级作用域内存在let，它所声明的变量就“绑定”这个区域，不再受外部的影响。

举例：

let a = 1;
if (true) { 
	 a = 2; // 程序报错
     let a = 1;
}

4.不允许重复声明

举例：

// 报错
function func() {
		let a = 10;
		var a = 1;
}
function func() {
		let a = 10;
		let a = 1;
}
function func(arg) {
		  let arg;
		}
--------------------
// 不报错
function func(arg) {
	  {
	    let arg;
	  }
}

let和var作比较：

var arr = [];
// 用var声明i
for (var i = 0; i < 3; i++) {
		 arr[i] = function () {
		     console.log(i); 
		 }
 }
// var不会产生块级作用域
arr[0](); // 3
arr[1](); // 3
arr[2](); // 3
-----------------------------
var arr = [];
//用let声明i
for (let i = 0; i < 3; i++) {
		 arr[i] = function () {
		     console.log(i); 
		 }
 }
// 每次循环都产生一个块级作用域，互不干扰
arr[0](); // 0
arr[1](); // 1
arr[2](); // 2

const变量：

1.声明常量，常量就是值（内存地址）不能变化的量，和let一样具有块级作用域。

2.const 声明常量必须赋值，常量赋值不能修改。

举例：

const a=2;
a=3;
console.log(a);// Missing initializer in const declaration
-----------------------
const person = {
    name: '张三',
    age: 18
};
// 不报错
person.name ="李四";
person.age=20;
	  
// 报错
person = {};

let、const、var 的区别：

使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
使用let，const的声明的变量不属于顶层对象，返回undefined

拓展：就let，const的声明的变量不属于顶层对象举例

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

let b = 2;
console.log(window.b); // undefined

const c = 3;
console.log(window.c); // undefined

即let和const声明的变量不会成为window对象的属性

作用域

基本概念：

作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问。

作用域分为： 局部作用域 和 全局作用域

全局作用域：

js文件和<script>标签的（最外层）就是所谓的全局作用域，全局作用域中声明的变量，任何其它作用域都可以被访问。

为 window 对象动态添加的属性默认也是全局的
函数中未使用任何关键字声明的变量为全局变量
尽可能少的声明全局变量，防止全局变量被污染

局部作用域：

函数作用域：

函数内部声明的变量，在函数外部无法被访问
函数的参数也是函数内部的局部变量
不同函数内部声明的变量无法互相访问

块级作用域：

{ } 包裹的代码就是代码块，代码块内用let和const声明的变量外部将无法被访问。

let 和 const 声明的变量会产生块作用域，var 不会产生块作用域
不同块作用域之间的变量无法互相访问

作用域链：

作用域链本质上是底层的变量查找机制。

在函数被执行时，会优先查找当前函数作用域中查找变量，如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域
嵌套关系的作用域串联起来形成了作用域链
子作用域能够访问父作用域，父级作用域无法访问子级作用域

解构赋值

数组解构：

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
变量的顺序对应数组单元值的位置依次进行赋值操作

举例：

// 一维数组解构
let[a,b,c] = [1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

// 二维数组解构
let arr = [1,2,[3,4]]
let[a,b,[c,d]] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 4

// 省略变量
let[a,,c] = [1,2,3]; 
console.log(c); // 3

// 声明变量比数组项多
let [x,y] = ['a'];
console.log(y); // undefined

let [x,y = 2] = ['a'];
console.log(y); // 2  只有当一个数组成员严格等于undefined，默认值才会生效

数组解构应用，变量交换：

let a = 1
let b = 2;
[b,a] = [a,b]
console.log(a) // 2
console.log(b) // 1

对象解构:

左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
对象属性的值将被赋值给与属性名相同的变量
注意解构的变量名不要和外面的变量名冲突否则报错
对象中找不到与变量名一致的属性时变量值为 undefined

举例：

let person = {name:"张三",age:18};
let {name,age,height} = person;
console.log(name); // 张三
console.log(age); // 18
console.log(height); // undefined

当解构的变量名与外面的变量名冲突时，可改变解构的变量名：

let { realname: myname,age: myage,height=173 } = { realname: '张三', age: 18};
console.log(myname) // 张三
console.log(myage) // 18
console.log(realname) // realname is not defined
console.log(height) // 当属性没有的时候支持默认值

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

数组与对象嵌套时解构：

// 数组对象解构
const arr = [
    {
        name: '张三',
        age: 18
    }
]
const [{name,age}] = arr
console.log(name) // 张三
console.log(age) // 18

// 多级对象解构
const home = [
    {
        name: '张三',
        borther: {
            name01: '李四',
            name02: '王五'
        }
    }
]
const [{name,borther: {name01,name02}}] = home
console.log(name01); // 李四
console.log(name02); // 王五

以上就是全部内容了，如果对你有帮助的话，还请点赞收藏加关注！！！