ES6 特性

发布于：2023-09-14 ⋅ 阅读:(65) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

一、ES6

1.1 ES6 概念

1.1.1 什么是 ES

  • ES 全称 EcmaScript 是脚本语言的规范
  • JavaScript 是 EcmaScript 的一种实现
  • ES 新特性就是指 JavaScript 的新特性

1.1.2 为什么要使用 ES

  • 语法简单，功能丰富
  • 框架开发应用
  • 前端开发职位要求

1.1.3 为什么要学习 ES6

  • ES6 的版本变动最多，具有里程碑的意义
  • ES6 加入许多新的语法特性，编程实现更简单，高效
  • ES6 是前端发展趋势，就业必备技能

1.1.4 ES6 的兼容性

  • 由于每个浏览器的发展不一样，所以存在一定的兼容性的问题
  • 可以在 http://kangax.github.io/compat-table/es6/ 查找浏览器是否兼容

1.2 let 关键字

1.2.1 let 声明格式

  • let 关键字 与 var 关键字类似，都可以声明变量
let a=100;
  • let 关键字也可以同时声明多个变量
let a,b,c;
let a=521,b='I Love You',c=[5,2,0];

1.2.2 let 关键字的特性

1、变量不能重复声明

  • let 不像 var 那样，重复声明会被覆盖

  • let 如果同时声明了两个重复的变量名，则会直接报错

  • 例如

let b=521;
let b=125;
console.log('let'+b);

image-20230912145947644

2、块级作用域

  • let 关键字定义的变量或函数只在该区域内有效，在区域外部无法访问
  • 例如
{
  let a=1;
}
console.log(a);

image-20230912150322751

3、不存在变量提升

  • 变量提升是指会在代码执行前将变量的声明部分提升到作用域顶部，即将变量声明提前至函数或全局作用域的最前面
  • 这意味着在代码中可以在变量声明前使用变量而不会报错，因为变量已经被提升到了作用域顶部
  • let 关键字声明的变量不存在变量提升，则意味着必须先声明了变量才可以调用
  • 不可以在声明变量之前调用变量

4、不影响作用域链

  • 作用域链是 JavaScript 中用于查找变量的机制。
  • 作用域链是由多个执行上下文的词法环境组成的链式结构。
  • 在访问变量时，JavaScript 引擎首先在当前执行上下文的词法环境中查找该变量。
  • 如果变量未找到，引擎会继续向上查找，即沿着作用域链向外层的词法环境逐级查找。
  • 作用域链的最终目标是找到变量或抵达最外层的全局词法环境。
  • 变量的作用域链形成是在函数定义时确定的，并在函数执行期间保持不变。
  • 作用域链确保了变量的可访问性和作用域的封闭性。
  • 嵌套的函数可以通过作用域链访问外层函数或全局作用域中的变量。
  • 函数内部声明的变量会优先在当前作用域中查找，而不会影响外层作用域中同名的变量。

1.3 const 关键字

const 关键字用于声明常量

1.3.1 const 声明格式

  • 使用 const 关键字来声明常量
const NAME='兰巧儿';

1.3.2 const 常量声明注意事项

  • 必须要有初始值

  • 一般常量名使用大写

  • 常量的值不允许修改

  • const 也属于块及作用域

  • 对于数组和对象的元素修改，不算做对常量的修改，不会报错

    • 例如我声明了一个数组，在向其中添加元素，并不会报错

    • const ARRAYS=[1,2,3];
ARRAYS.push(4);
console.log(ARRAYS)

    • image-20230912152128796

    • 因为本质上数组的内存地址并没有修改

    • 如果直接将数组的值改变，则会报错，类似于这样操作

    • const ARRAYS=[1,2,3];
ARRAYS=5;

1.4 变量的结构赋值

1.4.1 结构赋值的概念

  • 解构赋值是一种用于从数组或对象中提取值并赋给变量的
  • ES6 允许按照一定模式从数组和对象中提取，对变量进行赋值
  • ES6 的结构赋值主要分为 数组结构赋值 和 对象结构赋值

1.4.2 数组的结构

  • 数组的结构赋值是按照变量的顺序赋值的
  • 也就是说，赋值的变量名与数组内的元素按照顺序对应
  • 示例
const NUMBERS=[5,2,1];
let [a,b,c]=NUMBERS;
console.log(a)
console.log(b)
console.log(c)

1.4.3 对象的结构

  • 对象的结构赋值是按照变量的变量名赋值的
  • 顺序可以随意，但是变量名必须于对象内元素名相同，否则会报错
  • 示例
 const Lan={
    name:"兰巧儿",
    age:17,
    show:function () {
      console.log("不务正业的男高")
    }
 };
 let {name,age,show}=Lan;
 console.log(name)
 console.log(age)
 show();

1.5 模板字符串

1.5.1 模板字符串的声明

  • ES6 引入了一种新的字符串声明
  • 使用 `` 符号来声明
  • 示例
let str=`兰巧儿`

1.5.2 模板字符串的特性

1、可以直接进行换行

  • 换行时不需要使用 + 符号来拼接，直接换行即可
  • 例如
  let str=`<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
           </ul>`

2、拼接字符串 ${}

  • 拼接字符串可以使用 ${} 来直接进行拼接
  • 例如
  let str2=`你好`
  let str3=`${str2}世界`
  console.log(str3)

1.6 对象的简化写法

1.6.1 对象简化写法

  • ES6 中允许在对象的大括号内直接写入变量和函数，来作为对象的属性和方法
  • 使得书写更为简单
  • 示例
  let name="兰巧儿"
  let show=function () {
    console.log("大家好")
  }
  const SHCOOL={
    name,
    show
  }
  console.log(SHCOOL)
  • 在声明对象内的方法时，也可以省略冒号以及 function
  • 例如
 const SHCOOL={
    name:"云朵",
    show(){
      console.log("大家好")
    }
  }

1.7 箭头函数

1.7.1 箭头函数概述

  • ES6 中允许使用 箭头 => 来定义函数
  • 使用箭头声明函数 语法
let fn = () =>{
    console.log("你好");
}

1.7.1 箭头函数的特性

  • this 是静态的

    • 箭头函数中，使用 this 关键字，始终指向声明时所在作用域下的 this 的值
    • 无论使用什么方式都无法改变 this 的值
    • 代码示例
    function fn1() {
  console.log(this.name)
}
let fnJ2 = () => {
  console.log(this.name)
}
window.name="兰巧儿"
let shcool={
  name:"巧克力"
}
fn1();
fnJ2();
fn1.call(shcool)
fnJ2.call(shcool)

  • 不能作为构造实例化对象

  • 不能使用 arguments 变量

1.7.2 箭头函数的简写

1、当形参有且只有一个时

  • 当形参只有一个时，可以省略小括号
  • 直接写入参数即可
  • 示例
let fn = n =>{
    return n+n
}
console.log(fn(3));

2、当代码中只有一条语句时

  • 当代码当中只存在一条语句，可以省略大括号
  • 如果是时返回值，也需要省略 return 关键字
let fn = n => n*n
console.log(fn(3));

1.7.3 箭头函数的适用场景

  • 简短的回调函数：箭头函数对于作为回调函数传递给其他函数的简短函数非常适用，尤其是在需要保持代码简洁性的情况下。
  • 函数表达式：箭头函数可以用作函数表达式（function expression），并且更容易阅读和理解。
  • 保持上下文：箭头函数不会创建自己的 this 上下文，而是继承父级作用域中的 this 值。这使得箭头函数在处理上下文问题时更加方便。
  • 简化代码块：对于只包含一行代码的函数体，箭头函数可以通过省略大括号 {} 和 return 语句来简化代码。
  • 避免 this 绑定问题：箭头函数没有自己的 this 值，所以可以避免在使用普通函数时经常出现的 this 绑定问题。
  • 方法的简写：当定义对象方法时，使用箭头函数可以更简洁地定义方法，并且能够正确绑定 this。

1.7.4 箭头函数的不适用场景

  • 对于需要使用 arguments 对象的函数：箭头函数没有自己的 arguments 对象，它继承了父级作用域中的 arguments。如果你需要在函数内部访问函数的参数列表，那么箭头函数将不适用。
  • 对于需要动态绑定 this 的函数：箭头函数继承父级作用域中的 this 值，无法通过 call()、apply() 或 bind() 等方法来改变绑定的 this 值。如果你需要在函数中使用动态绑定的 this，则应该使用普通函数。
  • 对于需要在原型方法中使用的函数：箭头函数没有自己的 prototype 对象，因此不能用作构造函数或原型方法。如果你需要在对象的原型方法中使用函数，并且希望通过 new 关键字实例化对象，则需要使用普通函数。
  • 对于需要使用 yield 关键字的生成器函数：箭头函数不能作为生成器函数使用，因为它们没有内部的迭代状态和 yield 关键字。如果你需要定义生成器函数，那么只能使用普通函数。

1.8 参数默认值

1.8.1 给参数赋默认值

  • 在 ES6 中，运行给参数赋予默认值
  • 示例
  function fn(a,b,c=10) {
    console.log(a+b+c)
  }
  fn(1,2)
  • 这里给参数 c 赋予了默认值 10
  • 则表示，如果不传递参数 c 的值，则默认为 10
  • 如果传递了参数 c 的值，则为用户传递的值

1.8.2 参数的结构赋值

  • 参数也可以与结构赋值结合
  • 示例
function fn({host='127.0.0.1',username,password,port}) {
  console.log(host)
  console.log(username)
  console.log(password)
  console.log(port)
}
let connect={
  username:'root',
  password:'root',
  port:'3306'
}
fn(connect);

1.9 ES6 获取函数实参

1.9.1 rest 参数

  • ES6 获取函数的所有实参可以使用 rest 参数
  • 用来代替 arguments 参数
  • 示例
  function fn(...abc) {
    console.log(abc)
  }
  fn(1,2,3,4,5,6,7,8)
  • rest 参数的格式是在参数前面加上 ...
  • 参数名可以随意命名，例如 ...args、...abc、...ufo
  • rest 参数必须位于形参的最后一位
  • rest 参数返回的是一个数组

1.10 Symbol 类型

1.10.1 Symbol 概述

  • Symbol 是 ECMAScript 6 中引入的一种新的基本数据类型
  • 使用 Symbol 作为属性名可以创建具有唯一性的属性，避免命名冲突。
  • Symbol 可以用于定义隐藏属性，不容易被外部访问或意外覆盖。
  • Symbol 是不可变的，它的值不能被修改。
  • Symbol 的值不能与其他类型进行运算

1.10.2 Symbol 创建

Symbol 的创建主要有两种方式

1、第一种：使用 Symbol() 函数

  • 可以通过调用 Symbol() 函数来创建一个新的 Symbol 值
  • 例如
const mySymbol = Symbol("描述");
  • 括号内的是对 Symbol 的一种描述信息

2、第二种：使用 Symbol.for() 函数

  • Symbol.for() 函数可以创建或检索具有相同键（key）的全局 Symbol
  • 如果已经存在具有相同键的 Symbol，则返回已存在的 Symbol
  • 否则创建一个新的 Symbol，并将其与给定的键关联起来
  • 例如
const mySymbol = Symbol.for('myKey');

1.10.3 Symbol() 创建与 Symbol.for() 的区别

使用 Symbol() 创建 Symbol：

  • 使用 Symbol() 函数创建的每个 Symbol 都是唯一的，即使描述参数相同。
  • 通过 Symbol() 创建的 Symbol 总是在本地作用域中有效，不会自动注册为全局 Symbol。
  • 在不同作用域中使用相同的 Symbol() 调用创建的 Symbol 值是不相等的。

使用 Symbol.for() 创建 Symbol：

  • 使用 Symbol.for() 函数创建的 Symbol 可以在全局共享符号注册表中查找或创建具有相同键的 Symbol。
  • 调用 Symbol.for() 时，如果已经存在具有相同键的 Symbol，则返回已存在的 Symbol，否则创建一个新的 Symbol 并注册到全局符号注册表中。
  • 全局注册表中的 Symbol 是全局唯一的，可以在不同的代码块、文件或执行上下文中共享和访问。

总结：

  • 使用 Symbol() 创建的 Symbol 是本地作用域的唯一值。
  • 使用 Symbol.for() 创建的 Symbol 可以在全局共享符号注册表中查找或创建。
  • Symbol() 创建的 Symbol 是独立的，而 Symbol.for() 创建的 Symbol 在全局共享注册表中被共享。
  • Symbol.for() 更适合需要全局共享和识别的场景，而 Symbol() 则更适合局部使用的场景。

1.9.4 使用 Symbol 解决字符串耦合问题

假如现在存在一个班级对象，用于纪录学生的成绩，假设有两个同学名字相同，但成绩不同

  • 假设两个同学都为 “云朵”，使用正常的字符串解决
  • 示例
  let grade={
    '李四':{css:100,js:89},
    '李四':{css:20,js:35}
  }
  console.log(grade)
  • 这样运行必定存在一个问题，因为名字相同，则会导致最后声明的覆盖以前声明的属性
  • 例如

image-20230913152258680

  • 可以声明两个对象，来代替字符串，且在对象中都添加一个 Symbol 来标识唯一
  • 示例
let user1={
  name:'李四',
  key:Symbol()
}
let user2={
  name:'李四',
  key:Symbol()
}

let grade={
  [user1.key]:{css:100,js:89},
  [user2.key]:{css:20,js:35}
}
console.log(grade)
  • [user.key] 必须要添加中括号，否则会将 Symbol 当作字符串处理
  • 这样就会解决被覆盖的问题了

image-20230913152557618

  • 如果不方便分清，也可以为 Symbol 添加描述

1.11 对象的传播符

1.11.1 对象传播符概念

  • 对象传播符使用三个点（...）语法，将一个对象的属性“展开”到另一个对象中
  • 通过对象传播符，可以轻松复制一个对象的属性到另一个对象
  • 而无需像以前那样使用 Object.assign() 或写一些冗长的代码来手动合并它们
  • 例如
let object1={
  x:1,
  y:2
}
let object2={
  z:3
}
let object3={...object1,...object2}
console.log(object3)
  • 对象传播符将 obj1 和 obj2 的属性“展开”到新对象中，并创建了一个包含三个属性的新对象
  • 如果存在重复的属性名，则后面的属性会覆盖前面的属性

1.11.2 对象传播符与结构赋值一起使用

  • 对象传播符也可以与对象解构语法一起使用来选择和重命名属性
  • 例如
  let object1={a:1,b:2,c:3}
  let {a,...obj2}=object1
  console.log(a)
  console.log(obj2)
  • 使用对象传播符和对象解构语法来选择 a 属性并将其赋值给变量 a
  • 然后将剩余属性合并到 rest 对象中

1.12 数组

1.12.1 map() 方法

  • ES6 中的 Array 对象引入了 map() 方法
  • map() 方法用于创建一个新数组，数组中的元素是原始数组经过指定函数处理后的结果
  • map() 方法接受一个回调函数作为参数，该回调函数会针对原数组的每个元素执行，并将返回的结果组成一个新的数组
  • map() 的基本语法
const newArray = array.map(function(currentValue, index, array) {
  // 回调函数逻辑，返回经过处理的元素
});
  • function：回调函数，用于处理每个数组元素的逻辑。回调函数可以接受三个参数：
    • currentValue：当前正在处理的元素。
    • index（可选）：当前元素的索引。
    • array（可选）：原始数组对象。
  • newArray：由 map() 方法返回的新数组，其中包含原始数组经过处理后的结果

- **使用对象传播符和对象解构语法来选择 `a` 属性并将其赋值给变量 `a`**
- **然后将剩余属性合并到 `rest` 对象中**



## 1.12 数组

### 1.12.1 map() 方法

- **ES6 中的 Array 对象引入了 `map()` 方法**
- **`map()` 方法用于创建一个新数组，数组中的元素是原始数组经过指定函数处理后的结果**
- `map()` 方法接受一个回调函数作为参数，该回调函数会针对原数组的每个元素执行，并将返回的结果组成一个新的数组
- **`map()` 的基本语法**

~~~javascript
const newArray = array.map(function(currentValue, index, array) {
  // 回调函数逻辑，返回经过处理的元素
});
  • function：回调函数，用于处理每个数组元素的逻辑。回调函数可以接受三个参数：
    • currentValue：当前正在处理的元素。
    • index（可选）：当前元素的索引。
    • array（可选）：原始数组对象。
  • newArray：由 map() 方法返回的新数组，其中包含原始数组经过处理后的结果

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布