ES6新增特性

白小水i

已于 2023-05-19 11:42:45 修改

阅读量45

点赞数

文章标签： javascript 开发语言 es6

于 2023-05-18 08:49:03 首次发布

本文链接：https://blog.csdn.net/m0_62508027/article/details/130738861

版权

1. let 关键字

1. 变量不能重复声明

2. 块级作用域

3. 不存在变量提升

4. 不影响作用域链

2. const 关键字

1. 一定要赋初始值

2. 一般常量使用大写（小写也可以）

3. 常量的值不能修改

4. 块级作用域

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const定义常量</title>
</head>
<body>
    <script>
        // 声明常量
        const school = 'dongbei';
        console.log(school); // 'dongbei'
        // 1. 一定要赋初始值
        // 2. 一般常量使用大写（小写也可以）
        // 3. 常量的值不能修改
        // 4. 块级作用域
        // 5. 对于数组和对象的元素修改，不算做对常量的修改，不报错
        const t = [1, 2, 4, 4];
        t.push(5);
        console.log(t); // [1, 2, 4, 4, 5]
        t[2] = 3;
        console.log(t); // [1, 2, 3, 4, 5]
    </script>
</body>
</html>

3. 模板字符串

模板字符串（template string）是增强版的字符串，用反引号【` `】标识，特点：

字符串中可以出现换行符
可以使用 ${xxx} 形式输出变量

应用场景：当遇到字符串与变量拼接的情况使用模板字符串

// ES6 引入新的声明字符串的方式  反引号 
// let str = `我是字符串`;
// console.log(str, typeof str); // 我是字符串 string
// 1. 内容中可以直接出现换行符
let str = `<ul><li>沈腾</li>
        <li>玛丽</li></ul>`;
console.log(str);
// 2. 直接变量拼接
let l = `yusheng`;
let b = `${l}是最棒的选手`;
console.log(b);

4. 简化对象写法

ES6允许在大括号{ }里面，直接写入变量和函数，作为对象的属性和方法。

let name = 'yusheng';
let change = function() {
    console.log('是最棒的选手');
}
const hua = {
    name,
    change,
    // 与以下代码等价
    // improve: function() {
    //     console.log('可以进步');
    // }
    improve() {
        console.log('可以进步');
    }
}

5. 箭头函数

1. this 是静态的，始终指向函数声明时所在作用域下的this值，不能使用 call 调用去改变

function getName() {
  console.log(this.name);
}
let getName1 = () => {
  console.log(this.name);
}
window.name = 'yusheng';
const obj = {
  name: 'guanjun'
}
// 直接调用
getName(); // yusheng
getName1(); // yusheng
// call()调用，普通函数可以改变this指向，但是箭头函数不行
getName.call(obj); // guanjun
getName1.call(obj); // yusheng

2. 不能作为构造函数实例化对象

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let n = new Person('yusheng', 28);
console.log(n); // Person is not a constructor

3. 不能使用arguments变量

let fn = () => {
    console.log(arguments);
}
fn(1, 2, 3); // Uncaught ReferenceError: arguments is not defined

4. 箭头函数简写

（1）当形参有且仅有一个，省略 ()

(2) 当代码体只有一条语句，省略 {} 此时return必须省略，语句的执行结果就是函数的返回值

// (1) 当形参有且仅有一个，省略 ()
let add = n => {
    return n+n;
}
console.log(add(9));
// (2) 当代码体只有一条语句，省略 {}  此时return必须省略，语句的执行结果就是函数的返回值
let pow = n =>  n * n;
console.log(pow(9));

6. rest 参数

1. ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments，作用与 arguments 类似，将接收的参数序列转换为一个数组对象（arguments 是伪数组）

2. 语法格式：fn(a, b, ...args)，写在参数列表最后面

3. 应用场景：rest 参数非常适合不定个数参数函数的场景

// rest 参数,用于获取函数的实参   用于代替 arguments
// ES5 获取实参
// function date() {
//     console.log(arguments);
// }
// date('yusheng', 'youzi');
// ES6 rest 参数
function date(...args) {
    console.log(args); // 可以使用数组的方法 map() filter() every()
}
date('yusheng', 'youzi'); // ['yusheng', 'youzi']
// rest 必须放在参数的最后
function fn(a, b, ...args) {
    console.log(a, b, args);
}
fn(1, 2, 3, 4, 5, 6); // 1 2 [3, 4, 5, 6]

7. 扩展运算符

// ... 扩展运算符,能将数组转换为逗号分隔的参数序列
const a = ['yusheng', 'ansk', 'youzi'];
function hua() {
    console.log(arguments);
}
hua(...a); // 等同于 hua('yusheng', 'ansk', 'youzi')
hua(a);

扩展运算符的用法：

// 1. 数组合并
const kuaizi = ['wtl', 'xy'];
const fenghuang = ['zy', 'lh'];
const he = kuaizi.concat(fenghuang);
const he1 = [...kuaizi, ...fenghuang];
// 2. 数组克隆
const yusheng = ['Yuzuru', 'youzi', 'ansk'];
const ys = [...yusheng];
console.log(ys); //  ['Yuzuru', 'youzi', 'ansk']
// 3. 将伪数组转为真数组
const divs = document.querySelectorAll('div');
console.log(divs); // NodeList[3]
const a = [...divs];
console.log(a);

8. 模块化语法

模块功能主要由两个命令构成

●export 命令用于规定模块的对外接口

●import 命令用于输入其他模块提供的功能

1. 分别暴露

m1.js 文件

// 分别暴露
export let school = 'ABCD';

export function teach() {
  console.log('学习123');
}

2. 统一暴露

m2.js 文件

// 统一暴露
let school = "B站云学院";
function study() {
  console.log('在这里上大学!');
}

export { school, study }

3. 默认暴露

m3.js 文件

// 默认暴露 [暴露的数据可以是任意类型]
export default {
  school: 'B站学堂',
  change: function () {
    console.log('通过自学改变');
  }
}

4. 导入方式

1. 通用导入方式

// 1. 通用的导入方式,三种暴露方式都可以用
// 引入 m1.js 模块内容
import * as m1 from './js/m1.js';
// 引入 m2.js 模块内容
import * as m2 from './js/m2.js'
// 引入 m3.js 模块内容
import * as m3 from './js/m3.js';

2. 解构赋值导入


// 2. 解构赋值形式
import { school, teach } from './js/m1.js'
// 重名了,使用别名
import { school as B, study } from './js/m2.js'
// 固定写法,default as B ,给 default 起别名为 B ,不能直接使用 default
import { default as d } from './js/m3.js';

3. 简便形式：针对默认暴露

// 3. 简便形式:针对默认暴露
import m3 from './js/m3.js';