es6核心（一）

最新推荐文章于 2024-03-28 16:42:38 发布
最新推荐文章于 2024-03-28 16:42:38 发布
阅读量223 收藏 1
点赞数 1
分类专栏： 前端语法规范 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46199553/article/details/119821335
版权

什么是 ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

ES6 是前端发展趋势，就业必备技能

1.7.ES6 兼容性

http://kangax.github.io/compat-table/es6/ 可查看兼容性

ECMASript 6 新特性

2.1.let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

  1. 不允许重复声明
  2. 块儿级作用域
  3. 不存在变量提升
  4. 不影响作用域链
    应用场景：以后声明变量使用 let 就对了

2.2. const 关键字

const 关键字用来声明常量，const 声明有以下特点

  1. 声明必须赋初始值
  2. 标识符一般为大写
  3. 不允许重复声明
  4. 值不允许修改
  5. 块儿级作用域
    注意: 对象属性修改和数组元素变化不会出发 const 错误
    应用场景：声明对象类型使用 const，非对象类型声明选择 let
  <script>
        //声明变量
        let a;
        let b,c,d;
        let e = 100;
        let f = 521, g = 'iloveyou', h = [];

        //1. 变量不能重复声明
        // let star = '罗志祥';
        // let star = '小猪';

        //2. 块儿级作用域  全局, 函数, eval
        // if else while for 
        // {
        //     let girl = '周扬青';
        // }
        // console.log(girl);

        //3. 不存在变量提升
        // console.log(song);
        // let song = '恋爱达人';

        //4. 不影响作用域链
        {
            let school = 'hello';
            function fn(){
                console.log(school);
            }
            fn();
        }

    </script>

案例


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        //获取div元素对象
        let items = document.getElementsByClassName('item');

        //遍历并绑定事件
        for(let i = 0;i<items.length;i++){
            items[i].onclick = function(){
                //修改当前元素的背景颜色
                // this.style.background = 'pink';
                items[i].style.background = 'pink';
            }
        }
        
    </script>
</body>

</html>

2.3.变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

//数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
//对象的解构赋值
const lin = {
 name: '林志颖',
 tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;
//复杂解构
let wangfei = {
 name: '王菲',
 age: 18,
 songs: ['红豆', '流年', '暧昧', '传奇'],
 history: [
 {name: '窦唯'},
 {name: '李亚鹏'},
 {name: '谢霆锋'}
 ]
};
let {songs: [one, two, three], history: [first, second, third]} = 
wangfei;

2.4.模板字符串

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

  1. 字符串中可以出现换行符
  2. 可以使用 ${xxx} 形式输出变量
// 定义字符串
let str = `<ul>
<li>沈腾</li>
 <li>玛丽</li>
 <li>魏翔</li>
 <li>艾伦</li>
 </ul>`;
// 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;

注意：当遇到字符串与变量拼接的情况使用模板字符串

2.5.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这
样的书写更加简洁。

let name = 'hello';
let slogon = '永远追求行业更高标准';
let improve = function () {
 console.log('可以提高你的技能');
}
//属性和方法简写
let a = {
 name,
 slogon,
 improve,
 change() {
 console.log('可以改变你')
 }
};

2.6.箭头函数

ES6 允许使用「箭头」（=>）定义函数。
箭头函数的注意点:

  1. 如果形参只有一个，则小括号可以省略
  2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的
    执行结果
  3. 箭头函数 this 指向声明时所在作用域下 this 的值
  4. 箭头函数不能作为构造函数实例化
  5. 不能使用 arguments
/**
* 1. 通用写法
*/
let fn = (arg1, arg2, arg3) => {
 return arg1 + arg2 + arg3;
}
/**
* 2. 省略小括号的情况
*/
let fn2 = num => {
 return num * 10;
};
/**
* 3. 省略花括号的情况
*/
let fn3 = score => score * 20;
/**
* 4. this 指向声明时所在作用域中 this 的值
*/
let fn4 = () => {
 console.log(this);
}
let school = {
 name: 'hello111	1',
 getName(){
 let fn5 = () => {
 console.log(this);
 }
 fn5();
 }
};

箭头函数的使用案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        //需求-1  点击 div 2s 后颜色变成『粉色』
        //获取元素
        let ad = document.getElementById('ad');
        //绑定事件
        ad.addEventListener("click", function(){
            //保存 this 的值
            // let _this = this;
            //定时器
            setTimeout(() => {
                //修改背景颜色 this
                // console.log(this);
                // _this.style.background = 'pink';
                this.style.background = 'pink';
            }, 2000);
        });

        //需求-2  从数组中返回偶数的元素
        const arr = [1,6,9,10,100,25];
        // const result = arr.filter(function(item){
        //     if(item % 2 === 0){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });
        
        const result = arr.filter(item => item % 2 === 0);

        console.log(result);

        // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
        // 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法

    </script>
</body>

</html>

参数默认值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数参数默认值</title>
</head>
<body>
    <script>
        //ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        // function add(a,c=10,b) {
        //     return a + b + c;
        // }
        // let result = add(1,2);
        // console.log(result);

        //2. 与解构赋值结合
        function connect({host="127.0.0.1", username,password, port}){
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            host: '百度.com',
            username: 'root',
            password: 'root',
            port: 3306
        })
    </script>
</body>
</html>

2.7. rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

/**
* 作用与 arguments 类似
*/
function add(...args){
 console.log(args);
}
add(1,2,3,4,5);
/**
* rest 参数必须是最后一个形参
*/
function minus(a,b,...args){
 console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);

2.8. spread 扩展运算符

扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

/**
* 展开数组
*/ 
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){
 console.log(arguments);
}
fn(...tfboys)
/**
* 展开对象
*/
let skillOne = {
 q: '致命打击',
};
let skillTwo = {
 w: '勇气'
};
let skillThree = {
 e: '审判'
};
let skillFour = {
 r: '德玛西亚正义'
};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};

2.9.Symbol

2.9.1.Symbol 基本使用
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点

  1. Symbol 的值是唯一的，用来解决命名冲突的问题
  2. Symbol 值不能与其他数据进行运算
  3. Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可 以 使 用
    Reflect.ownKeys 来获取对象的所有键名
  <script>
        //向对象中添加方法 up down
        let game = {
            name:'俄罗斯方块',
            up: function(){},
            down: function(){}
        };     
        //声明一个对象
        // let methods = {
        //     up: Symbol(),
        //     down: Symbol()
        // };
        // game[methods.up] = function(){
        //     console.log("我可以改变形状");
        // }
        // game[methods.down] = function(){
        //     console.log("我可以快速下降!!");
        // }
        // console.log(game);
        //
        let youxi = {
            name:"狼人杀",
            [Symbol('say')]: function(){
                console.log("我可以发言")
            },
            [Symbol('zibao')]: function(){
                console.log('我可以自爆');
            }
        }
        console.log(youxi)
    </script>

2.10. 迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提
供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

  1. ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费
  2. 原生具备 iterator 接口的数据(可用 for of 遍历)
    a) Array
    b) Arguments
    c) Set
    d) Map
    e) String
    f) TypedArray
    g) NodeList
  3. 工作原理
    a) 创建一个指针对象，指向当前数据结构的起始位置
    b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
    c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
    d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
    注: 需要自定义遍历数据的时候，要想到迭代器.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义遍历数据</title>
</head>

<body>
    <script>
        //声明一个对象
        const banji = {
            name: "终极一班",
            stus: [
                'xiaoming',
                'xiaoning',
                'xiaotian',
                'knight'
            ],
            [Symbol.iterator]() {
                //索引变量
                let index = 0;
                //
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { value: _this.stus[index], done: false };
                            //下标自增
                            index++;
                            //返回结果
                            return result;
                        }else{
                            return {value: undefined, done: true};
                        }
                    }
                };
            }
        }

        //遍历这个对象 
        for (let v of banji) {
            console.log(v);
        }
    </script>
</body>

</html>

2.11. 生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

function * gen(){
 yield '一只没有耳朵';
 yield '一只没有尾巴';
 return '真奇怪'; }
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

代码说明：

    • 的位置没有限制
  2. 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到
    yield 语句后的值
  3. yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next
    方法，执行一段代码
  4. next 方法可以传递实参，作为 yield 语句的返回值

生成器传参：

<script>
        function * gen(arg){
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three = yield 333;
            console.log(three);
        }

        //执行获取迭代器对象
        let iterator = gen('AAA');
        console.log(iterator.next());
        //next方法可以传入实参
        console.log(iterator.next('BBB'));
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
        
    </script>

实例：

  <script>
        // 异步编程  文件操作 网络操作(ajax, request) 数据库操作
        // 1s 后控制台输出 111  2s后输出 222  3s后输出 333 
        // 回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000);
        //     }, 2000);
        // }, 1000);

        function one(){
            setTimeout(()=>{
                console.log(111);
                iterator.next();
            },1000)
        }

        function two(){
            setTimeout(()=>{
                console.log(222);
                iterator.next();
            },2000)
        }

        function three(){
            setTimeout(()=>{
                console.log(333);
                iterator.next();
            },3000)
        }

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

    </script>

<script>
        //模拟获取  用户数据  订单数据  商品数据 
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据';
                //调用 next 方法, 并且将数据传入
                iterator.next(data);
            }, 1000);
        }

        function getOrders(){
            setTimeout(()=>{
                let data = '订单数据';
                iterator.next(data);
            }, 1000)
        }

        function getGoods(){
            setTimeout(()=>{
                let data = '商品数据';
                iterator.next(data);
            }, 1000)
        }

        function * gen(){
            let users = yield getUsers();
            let orders = yield getOrders();
            let goods = yield getGoods();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

        

    </script>
程序猿向前跑
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6核心语法
06-21
本课程4小时带你快速运用ES6的核心用法，其中包括: let和const命令、 箭头函数、解构、扩展的对象和数组、Symbol/Set/Map新数据类型、强大的迭代器和生成器、Promise和async解决 异步操作、class类 的使用以及ES6的...
ES6核心语法整理笔记
05-16
主要总结了ES6的一些核心语法，整理成一个思维导图，能帮助快速复习回顾
ES6 let const关键字
小志的博客
10-08 244
在es6中，引入了let和const关键字； let关键字是用来取代var的； let作用，与var类似，用于声明一个变量； 一、let关键字特点： 1，在块级作用域里有效 实例： 报错：ReferenceError: a is not defined 2、不能重复声明 实例： 报错如下图： 二、const关键字特点 1、const关键字用来定义常量；不可改变，其他特性和let一样； 实例...
ES6 变量、常量声明总结
weixin_30892037的博客
08-03 202
前言 较之前ES5，新版本在声明上有改变，现根据文档教程，总结下不同之处，时长温习。 一、var 对比 let 　　1、作用域不同 　　　　let只在命令所在的代码块 {} 里有效 　　　　ES5只有全局作用域和函数作用域，没有块级作用域，带来很多不合理的场景，比如： 　　　　第一种场景，内层变量可能会覆盖外层变量。 　　　　 var tmp = new Dat...
ES6-可选链式操作符（?.）
最新发布
weixin_46479909的博客
03-28 278
可以判断操作符之前属性是否有效，从而链式读取对象的属性或返回 undefined,如果它的上一层是undifiend 则不会去取它的点下面的东西。
Es6新特性 --- 别人不知道的 可选链式操作符
m0_71835253的博客
07-09 593
可选链式操作符
webpack打包ES6+语法及?.等可选链式操作符的问题
qq_41538952的博客
04-15 1763
问题背景：在开发时往往会追求最新语法，但是在使用webpack打包时，可能存在无法检测到这种语法并转换为es5语法这类问题，从而导致部署之后项目报错等问题。这些依赖项将启用 babel 转换器，并配置 babel 转换器以将可选链式操作符转换为 ES5 代码。1.首先需要保证babel-loader依赖项已更新到最新版本，以便在编译过程中将其转换为 ES5 代码。预设，该预设将将您的 ES6+ 代码转换为 ES5 代码，并启用。插件以将可选链式操作符转换为 ES5 代码。
javascript: ES6中的可选链操作符，空值合并运算符等
mosowe
10-08 514
文章目录获取object所有键的值：ES6中的可选链操作符: ?ES6中新出的空值合并运算符: ??Promise并发请求 获取object所有键的值： let obj = { a:1, b:2, c:3 } Object.values(obj) //[1, 2, 3] ES6中的可选链操作符: ? // es5 const name = obj && obj.name; // es6 const name = obj?.name; // obj是已经声明过的 E
ES6核心介绍
02-20
介绍es6的语法和差异性。 理解es6和es5的差别。 一起来学习起来吧。
ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（上）
01-08
文章目录一.ES6是什么？目标二.新特性1.const 与 let 变量let与const规则和var的区别2.模版字变量3.解构赋值定义：解构模型数组模型的解构（Array）对象模型的解构（Object）4 对象字面量简写法5.迭代器Iterator迭代...
30分钟快速入门掌握ES6/ES2015的核心内容（下）
08-27
主要给大家介绍了如何通过30分钟快速入门掌握ES6/ES2015的核心内容的相关资料，之前给大家介绍过基础的一些内容，下面继续来介绍一些其他的新特性，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
ES601、es6 的兼容性以及编译
Owen的博客
03-21 317
1、es6 （ES2015）兼容性 es6 在2015年发布正式版，兼容性在逐渐提高。 目前能兼容 es6 的有：IE10+、Chrome、Firefox、移动端、Node.js 2、es6 编译 因为 es6 的兼容性问题，在低版本浏览器使用时，需要编译成浏览器能懂的 js 语言。 目前有两种常见的编译方式：在线转换、提前编译（推荐） （1）在线转换：是通过 babel（browse...
浅谈ES6 常用 新特性 并了解其兼容性解决方案
weixin_33725270的博客
10-19 328
es6 兼容性 如何使用babel来编译我们的js（es6）代码 首先来谈一下es6 es6在大多数情况是没问题，据了解国内的环境，大部分业务（银行系统除外）支持到IE8就可以了，如果要兼容到IE6+，可以借助babel插件来完成，只要babel支持的都没问题的。 ES6新特性在Babel下的兼容性列表 ES6特性 兼容性 ...
ES6 可选链 操作符
czx3387170的博客
12-03 1091
一、 ?. 可选链操作符（?.）允许读取位于连接对象链深处的属性值,而不必明确验证链中的每个引用是否有效。 let nestedProp = obj.first && obj.first.second; // 等价于 let nestedProp = obj.first?.second; js会在尝试访问obj.first.second之前隐式的检查并确定obj.first既不是null也不是undefined。如果obj.first是null或者undefined,表达式将会短路计
Babel/Plugin -JS支持ES6新语法[可选链操作符/空值合并操作符/空值合并操作符]
fly_666的博客
06-27 874
Babel/Plugin -JS支持ES6新语法[可选链操作符/空值合并操作符/空值合并操作符]
ES6/6+语法新特性
qq_50904696的博客
12-22 6795
ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。平时经常编写的JavaScript，是ECMAScript 的一种实现，所以ES新特性其实指的就是JavaScript的新特性。ES6 加入许多新的语法特性，使编程的实现更简单、高效1、一定要赋初始值。2、一般常量名使用大写。3、常量的值不能修改。4、const也遵循块级作用域。5、对于数组和对象的修改，不算做对常量的修改，不会报错。
vuecli中配置 es2020 可选链操作符 ?.和空值合并??兼容
sonnyface的博客
09-03 2472
1.安装插件：@babel/plugin-proposal-optional-chaining 和@babel/plugin-proposal-nullish-coalescing-operator 可选链?. npm install @babel/plugin-proposal-optional-chaining --save yarn add@babel/plugin-proposal-optional-chaining 空值合并 ?? npm install @babel/pl...
ES6兼容问题
Front小思的博客
01-23 2749
由于有些浏览器版本的发布是在 es6 定稿和发布之前的，因此对于老版本的浏览器是没有对 es6 的特性进行兼容的，针对 es6 的兼容问题，许多团队也做出了相应的开发，将 es6 的语法转换成针对浏览器可以识别的 es5 语法，充当一个翻译官的角色；比较通用的工具有：babel、jsx、traceur、es6-shim 等。 一上车就遇到的梗！！！开发中，不管你是大佬还是小菜，一定会晕倒ES6的兼容问题，因为现在ES6用的比较潮流的。下面来总结一下不同环境下有关ES6的相关兼容。 具体ES6兼容解决方案：.
深入理解es6 pdf
06-26
综上所述，深入理解ES6 PDF是一本非常好的ES6入门指南，它帮助读者了解ES6的核心知识和技能，带领读者建立ES6的编程思想和风格，以便更好地应对现代Web应用开发的挑战，同时也是学习ES6语言的必备指南。 ### 回答3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值