ES6新标准

最新推荐文章于 2024-09-20 13:37:59 发布
最新推荐文章于 2024-09-20 13:37:59 发布
阅读量1.3k 收藏 5
点赞数
分类专栏： 前端学习笔记 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39759664/article/details/109285231
版权

1. 块级作用域绑定

1.1 let变量声明及声明特性

  1. 变量不可以重复定义 （var可以）
  2. 块级作用域 还有全局 函数 eval
  3. 不存在变量的提升
  4. 不影响作用域链
    在这里插入图片描述小练习：
    在这里插入图片描述

1.2 const

注意：

  • 一定要赋值
  • 一般常量使用大写
  • 常量的值不能修改下
  • 也是块级作用域
  • 对于数组和对象的元素的修改，不算是对常量的修改 不会报错
    a. 声明常量
    const SCHOOL=“西安”；

1.3 解构赋值

ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值

  • 数组结构
    在这里插入图片描述
  • 对象的解析
    在这里插入图片描述

2.模板字符串

ES6引入新的声明字符串的方式，[``] ’ ’ " "
模板字符串的特点：

  1. 内容中可以直接出现换行符
  2. 变量拼接
/*ES6引入新的声明字符串的方式 【``】 ' '  "   "
    */
/*1. 声明：*/
     let str=`我是一个字符串哦`;
       console.log(str,typeof  str);

/**
 * 特性：
 * 1. 内容中可以直接出现换行符
 * 2. 变量拼接
 */
let kk =`<ul><li>沈腾</li><li>玛丽</li><li>艾伦</li><li>费翔</li></ul>`
    let man=`kunkun`;
    let things=`${man}真厉害`;
    console.log(things);

3.对象的简化写法

1. ES6允许大括号里面，直接写入变量和函数，作为对象的属性和方法
2.ES6声明函数变简单了 取消了function

在这里插入图片描述

ES6以前：
const abc={
up:function(){
   }
}


ES6:
const abc={
up(){
       }
  }

4.箭头函数

ES6允许使用箭头函数：（=>）来定义函数

ES6之前：
声明一个函数：
let fn=function（）{

}

ES6：
let fn =（形参列表）=>{
函数的实体
}
调用函数：
let result=fn(实参);

1. this是静态的，this始终指向函数声明时，所在作用域下的this的值（很重要）
并无自己的this
2.  不能作为构造函数实例化对象
3. 不能使用arguments变量
   let fn=()=>{
   console.log(arguments)}
4.箭头函数的简写
   a.  省略小括号：当形参有且仅有1个
    let add=(n)=>{
    return n+n;
 }
可以换成：   let add=n=>{
    return n+n;
}
b.省略花括号：当代码只有一条语句的时候可以省略，此时return 必须省略 ，而且语句的执行结果就是函数的返回值
let pow=（n）=>n*n;
console.log(pow(8));

4.1 箭头函数的实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            background-color: chartreuse;
        }

    </style>
</head>
<body>
    <div id="ad">

</div>
<script  >
/*需求：点击 div后两秒将颜色切换为粉色
    */
//1. 获取元素
    let ad=document.getElementById("ad");
    /*绑定事件*/
    ad.addEventListener("click",function(){
//定时器：
        setTimeout( () =>  {
            //修改背景颜色
            this.style.backgroundColor="pink";
        },2000)
});

    //2.从数组中返回是偶数的元素
    const str=[100,200,201,206,205];
    const result=str.filter(function (arr) {
        if(arr%2===0){
            return true;
        }else {
            return false;
        }
    });
    console.log(result);

    const results=str.filter(item=>item%2===0
);
    console.log(results);
/**
 * 箭头函数适合与this无关的问题,定时器,数组的方法回调
 * 箭头函数不适合与this有关的回调,事件回调,对象的方法
 */

</script>
</body>
</html>

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

5.函数参数的默认值

ES6允许给函数参数赋值初始值

  1. 形参初始值： 具有默认值的参数，一般位置要靠后（潜规则）
  2. 与结构赋值结合使用
//与结构赋值结合:
    function connect({host='127.0.0.1',username,password,prot}) {
        console.log(host);
        console.log(username);
        console.log(password);
        console.log(prot);
    }
    connect({
        host:'localhost',
        username:'kunkun',
        password:"tjk",
        prot:3306
    })

6. rest参数

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

<body>
<script  >
//获取实参的方式:
    function date() {
        console.log(arguments);
    }
    date('kunkun','tjk','田甲坤');
    date1('kunkun','tjk','田甲坤');
    function date1(...args) {
        console.log(args);
    }
</script>
</body>

在这里插入图片描述
区别：arguments 获取的数据是object类型的数据
rest参数是数组类型的==可以使用数据的api
rest参数必须放在参数之后

7.扩展运算符

...扩展 运算符能将数组转化为逗号分隔的参数序列

<script  >
const tfbosys=['易烊千玺','王元','王俊凯'];
function chunwan() {
   console.log(arguments)
};
chunwan(tfbosys);
chunwan(...tfbosys);

</script>

在这里插入图片描述

7.1 扩展运运算符的应用-数组的合并

//1. 数组的合并
    const kuaizi=['王太利','小样'];
    const fenghuangchuanqi=['增益','零花'];
    const result=[...kuaizi,...fenghuangchuanqi];
    console.log(result);

在这里插入图片描述

7.2 扩展运算符的应用-数组的克隆

<script  >
//数组的克隆
const sanzhihua=['B','G','M'];
const sanyecao=[...sanzhihua];
console.log(sanyecao);

</script

在这里插入图片描述

7.3将伪数组转化为数组

<body>
<div></div>
<div></div>
<div></div>
<script  >
//将伪数组转化为数组
    const divs=document.querySelectorAll("div");
    console.log(divs);
    const  divss=[...divs];

    console.log(divss);

</script>

在这里插入图片描述

8.symbol 的介绍与创新

8.1 Symbol对象的创建

ES6引入一种新的数据类型symbol，表示独一无二的值，是一种类似与字符串的数据类型

  • 特点：
  1. Symbol的值是唯一的，用来解决命名冲突问题
  2. Symbol的值不能与其他数据类型相运算
  3. Symbol定义的对象属性，不能使用for in循环遍历，但可以使用Relect.ownKeys来获取对象的所有键名
<script  >
//symbole的介绍
    //(1)创建Symbol
    let s= Symbol();
    console.log(s ,typeof  s);
   //(2)创建Symbol
    let s2=Symbol("tjk");
    let s3=Symbol("Kunkun");   //加入参数只是对该Symbol对象进行描述.无实际作用
    console.log(s2===s3);
    //(3)创建Symbol  此方法创建了一个symbol对象  描述具有实际作用,用以确定对象一致
    let s4=Symbol.for("kunkun");
    let  s5=Symbol.for("kunkun");
    console.log(s4===s5);
    console.log(s4,typeof s4);

/**
 * 注意事项:
 * 1. 不能与其他数据进行运算
 * 2. 那么js的数据类型有USONB   
 */
</script>

在这里插入图片描述

8.2 对象添加symbol类型的属性

8.2.1:第一种：
<script  >
//symbole向对象中添加方法   up down
    let game={
        name:"tjk",
        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)
</script>

在这里插入图片描述

8.2.2 第二种：
//第二种：
    let youxi={
        name:"狼人杀",
        [Symbol('say')]:function () {
            console.log("我可以发言");
        },
        [Symbol("自爆")]:function () {
            console.log("zibaol ");
        }
    }
    console.log(youxi);

在这里插入图片描述

8.3 Symbol的内置属性

除了定义自己使用的 Symbol 值以外， ES6 还提供了 还提供了 11个内置的 Symbol值指向语言内部使用的方法。 可以称这些方法为魔术，因它们会在特定的场景下自动执行。

Symbol.hasInstance当其他对象使用 instanceof运算符，判断是否为该对对象的实例，会调用这个方法
Symbol.isConcatSpreadable对象的 Symbol.isConcatSpreadable属性等于的是一个 布尔值，表示该对象用于 Array.prototype.concat()时， 是否可以展开。 是否可以展开。
Symbol.species创建衍生对象时，会使用该属性
Symbol.match当执行 str.match(myObject) 时，如果该属性存在会调用他，返回该方法的值。
Symbol.replace当该对象被 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值
Symbol.search当该对象被 当该对象被 str. search (myObject)方法调用时，会返回该方法的返回值。
Symbol.split当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator对象进行 for…of循环时，会调用 Symbol.iterator方法， 返回该对象的默认遍历器
Symbol.toPrimitive该对象被转为原始类型的值时，会调用这个方法,返回该对象应的原始类型值。
Symbol. toStringTag在该对象上面调用返回该方法的返回值
Symbol. unscopables该对象指定了使用 with关键字时，哪些属性会被 with环境排除。

9.迭代器

9.1 迭代器的基本知识

迭代器（iterator） 是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口，就可以完成遍历操作
1）ES6 创造了一种新的遍历命令 for…of，iterator主要供for…of消费
2）原生具备iterator接口的数据
array,Arguments,set,map,string,TypedArray,nodeList
3）工作原理：
创建一个指针对象，指向当前的 数据结构的起始位置
第一个调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法,指针一直往后移，直到最后一个对象
每调用next方法返回一个包含value和done属性的对象
注意：需要自定义遍历数据的时候，要想到迭代器

for in
在这里插入图片描述
在这里插入图片描述
for of
在这里插入图片描述
在这里插入图片描述

9.2 自定义迭代器遍历数据

<script  >
const stu={
    name:"kunkun",
    stus:[
        "xiaoming",
        "xiaohong",
        "xiaoliang",
        "xaiozhang"
    ],
    //增加迭代器接口
    [Symbol.iterator](){
        let index=0;
     //   let _this=this;
        return {
        //指针函数用以方便this的指定
            next:() =>{
                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 stu){
    console.log(v);
}
</script>

10. 生成器

10.1 生成器的基础

<script  >
//生成器其实就是一个特殊的函数
    //异步编程 纯回调函数

    function *gen() {
        console.log("111");
        yield '11111111';    //函数代码的分隔符
        console.log("222");
        yield '22222222';
        console.log("333");
        yield '33333333';
        console.log("444");
        yield '44444444';
    }
    let  iterator=gen();//调用后并没执行
    iterator.next();//执行了
    iterator.next();
    iterator.next();
    iterator.next();

</script>

生成器函数声明的时候必须在function后加* ，调用的时候直接调用不会执行，调用必须用next函数才可执行，并且执行一次只能在一块代码分割符中的代码

10.2 生成器的参数

<script  >
//生成器其实就是一个特殊的函数
    //异步编程 纯回调函数
    function *gen(args) {
        console.log(args);
      let one= yield '11111111';    //函数代码的分隔符
       console.log(one);
       let  two=yield '22222222';
        console.log(two);
        let  three=   yield '33333333';
        console.log(three);
        let  four=    yield '44444444';
        console.log(four);
    }
    //执行获取迭代器对象
    let  iterator=gen('AAA');//调用后并没执行
//next 方法可以传入实参
    console.log(iterator.next());
    console.log(iterator.next("bbb"));//第二次调用next语句，传入的实参是作为第一个yield整体的返回结果
    console.log(iterator.next('ccc'));
    console.log(iterator.next('ddd'));
</script>

第二次调用next 的方法，传入的参数是作为第一个yeild的语句的返回值结果

10.3 生成器的实例

<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");
        iter.next();
    },1000)
}
function two(){
    setTimeout(()=>{
        console.log("222");
        iter.next();
    },2000)
}
function three(){
    setTimeout(()=>{
        console.log("333");
    },3000)
}

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

let iter=iterator();
iter.next();//这样做可以避免地狱回调
</script>

10.4生成器实例2

<script  >
//模拟获取， 用户数据 订单数据 商品数据
    function  getUser() {
        setTimeout(()=>{
            let data='用户数据';
             iterator.next(data);
        },1000);
    }
function  getOrder() {
    setTimeout(()=>{
        let data='订单数据';
        iterator.next(data);
    },1000);
}
function  getGoods() {
    setTimeout(()=>{
        let data='商品数据';
        iterator.next(data);
    },1000);
}
function *gen() {
  let user=  yield getUser();
  console.log(user);
   let order=yield getOrder();
    console.log(order);
  let goods=  yield getGoods();
    console.log(goods);
}
//调用生成器函数
    let iterator=gen();
    iterator.next();
</script>

在这里插入图片描述

11.Promise

11.1 介绍和基本使用

promise是ES6引入的异步编程的新解决方案，语法上promise是一个构造函数，用来封装异步操作，并可以获得其成功和失败的结果

  • promise构造函数：Promise（excutor）{}
  • Promise.prototype.then方法
  • Promise.prototype.catch方法
<script>
//实例化promise对象
    const p=new Promise(function (resolve ,reject) {
        setTimeout(function () {
            let data='数据库中的数据';
            //resolve//表示成功
          //  resolve(data);
           let error='数据抽取失败';
            reject(error);//表示失败了
        },1000)
    });
    //调用promise对象的then方法
    p.then(function (value) {
        //成功的参数是value
        console.log(value);
    },function (reason) {
        //失败的参数是reason
        console.error(reason);
    })
</script>

在这里插入图片描述

11.2 promise-ajax

<script>
    const  p=new Promise((resolve,reject)=>{
        //创建对象
        const xhr=new XMLHttpRequest();
        //初始化
        xhr.open('GET','https://api.apiopen.top/getJoke');
        //发送
        xhr.send();
        //绑定事件
        xhr.onreadystatechange=function () {
            //判断
            if (xhr.readyState===4){
                //判断响应状态
                if(xhr.status>=200&&xhr.status<300){
                    //表示成功
                    resolve(xhr.response);
                }else{
                    reject(xhr.status);
                }
            }
        }
    });
    p.then(function (value) {
        console.log(value);
    },function (reason) {
        console.error(reason);
    })
</script>

11.3 Promise.then 的返回值

调用then方法，then方法的返回结果是promise对象，对象状态由回调函数的执行结果决定

  1. 如果回调函数中返回结果是非promise类型的属性，状态为成功，返回值为对象的成功
  2. 返回值类型还可以是promise 类型的
  3. 还可以链式调用

在这里插入图片描述
catch方法：

<script>
const p=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        //设置p对象的状态为失败，并设置失败的值
        reject("出错了！");
    },1000);
});
p.catch((reason)=>{
    console.warn("出错了");
})
</script>

12 集合

12.1 set集合

<script>
    const s1=new Set();
    const s2=new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);//会自动清除重复的数据
    console.log(s2);
    s2.add('tjk');//添加数据
    s2.delete('小事儿');//删除数据
   console.log( s2.has('大事儿'));//查看数据是否存在
    //清空
    s2.clear();
    console.log(s2);
    //for .. of循环遍历
    for (let ss2 of s2){
        console.log(ss2);
    }

</script>

12.2 Set集合实践

<script>
let arr=[1,2,2,3,4,5,6,4,5,6,7,8,9];
//1.数组去重
    let result=new Set(arr);
    console.log(result);
//2.交集
    let arr2=[2,3,5,6];
    let result2=[...new Set(arr)].filter(item=>{
        let s2=new Set(arr2);
        if(s2.has(item)){
            return true;
        }else{
            return false;
        }
    })
    console.log(result2);
    //3.并集
    let union=[...arr,...arr2];
    console.log(union);
    let result3=new Set(union);
    console.log(result3);
    //4.差集
    let diff=[...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));
    console.log(diff);
</script>

在这里插入图片描述

12.3 map集合

ES6提供了Map数据结构。它类似于对象， 也是键值对集合

<script>
   //声明Map
   let m=new  Map();
   //添加元素
   m.set("name",'tjk');
   console.log(m);
   m.set('key',['中国','陕西','韩城']);
   //删除
   m.delete('name');
   console.log(m);
   //获取
   console.log(m.get('key'));
   //for of
   for (let mm of m){
       console.log(mm);
   }
   //清空
   m.clear();

</script>

13 Class

引入class类的概念是为了将ES6表现得更像传统语言的写法，使对象的原型更加清晰，更像是面向对象编程
ES5利用构造方法来实现实例化对象

<script>
    //手机
    function Phone(brand,price) {
        this.brand=brand;
        this.price=price;

    }
    //添加方法
    Phone.prototype.call=function () {
        console.log("我可以打电话");
    }

    //实例化对象
    let huawie=new Phone('华为','5999');
    huawie.call();
    console.log(huawie);
</script>

ES6

class Phone{
    //构造方法，名字不能重复
    constructor(brand,price){
        this.brand=brand;
        this.price=price;
    }
    //方法必须使用该语法
    call(){
      console.log("我可以打电话");
    }
}

let huawei=new Phone("1+",'59999');
huawei.call();
console.log(huawei);

13.1 Class静态变量

<script>
class Phone{
    //构造方法，名字不能重复
    static name='手机';//是属于类的name  不是实例化对象的name
    static change(){
        console.log("是吗，是的");
    }

}
    let  nokia=new Phone();
    console.log(nokia.name);
    console.log(Phone.name);
</script>

在这里插入图片描述类中的静态变量和方法，是属于类的，重新实例化以后不属于实例化对象

13.2 ES5的构造函数和继承

<script>

    //手机
    function Phone(brand, price){
        this.brand = brand;
        this.price = price;
    }

    Phone.prototype.call = function(){
        console.log("我可以打电话");
    }

    //智能手机
    function SmartPhone(brand, price, color, size){
        Phone.call(this, brand, price);
        this.color = color;
        this.size = size;
    }

    //设置子级构造函数的原型
    SmartPhone.prototype = new Phone;
    SmartPhone.prototype.constructor = SmartPhone;

    //声明子类的方法
    SmartPhone.prototype.photo = function(){
        console.log("我可以拍照")
    }

    SmartPhone.prototype.playGame = function(){
        console.log("我可以玩游戏");
    }

    const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');

    console.log(chuizi);


</script>

13.3 ES6类的继承

<script>
class phone{
    //构造函数
    constructor (brand,price){
        this.brand=brand;
        this.price=price;

    }

    //成员属性
    call(){
        console.log("我可以打电话");
    }
}
//子类
class smartPhone extends phone{
    constructor(brand,price,color,size){
        super(brand,price);
        this.color=color;
        this.size=size;
    }
    puoto(){
        console.log("我可ui拍照");
    }
    palyGanme(){
        console.log("我可以玩游戏");
    }
}
const  xiaomi=new smartPhone("小米",'3444','heise','5.99' );
console.log(xiaomi);
xiaomi.palyGanme();
xiaomi.puoto();
</script>

在这里插入图片描述

13.4 Get 和Set

<script>
        // get 和 set  
        class Phone{
            get price(){
                console.log("价格属性被读取了");
                return 'iloveyou';
            }

            set price(newVal){
                console.log('价格属性被修改了');
            }
        }

        //实例化对象
        let s = new Phone();

        // console.log(s.price);
        s.price = 'free';
    </script>

14.其余细节

14.1 数值扩展

    <script>
        //0. Number.EPSILON 是 JavaScript 表示的最小精度
        //EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
         function equal(a, b){
             if(Math.abs(a-b) < Number.EPSILON){
                 return true;
             }else{
                 return false;
             }
         }
         console.log(0.1 + 0.2 === 0.3);
         console.log(equal(0.1 + 0.2, 0.3))

        //1. 二进制和八进制
         let b = 0b1010;
         let o = 0o777;
         let d = 100;
         let x = 0xff;
         console.log(x);

        //2. Number.isFinite  检测一个数值是否为有限数
         console.log(Number.isFinite(100));
         console.log(Number.isFinite(100/0));
         console.log(Number.isFinite(Infinity));
        
        //3. Number.isNaN 检测一个数值是否为 NaN 
         console.log(Number.isNaN(123)); 

        //4. Number.parseInt Number.parseFloat字符串转整数
         console.log(Number.parseInt('5211314love'));
         console.log(Number.parseFloat('3.1415926神奇'));

        //5. Number.isInteger 判断一个数是否为整数
         console.log(Number.isInteger(5));
         console.log(Number.isInteger(2.5));

        //6. Math.trunc 将数字的小数部分抹掉  
         console.log(Math.trunc(3.5));

        //7. Math.sign 判断一个数到底为正数 负数 还是零
        console.log(Math.sign(100));
        console.log(Math.sign(0));
        console.log(Math.sign(-20000));

    </script>

14.2 对象的扩展

<script>
//1.Object is判断两个值是否完全相等
    console.log(Object.is(200,200));//从一定程度上可以认为是===
    console.log(Object.is(NaN,NaN));//从一定程度上可以认为是===
    console.log(NaN===NaN);
//2.Object.assign对象合并
    const config1={
        host:'localhost',
        port2:'3306',
        name:"tjk",
        password:'tjk',
        test1:'test1'

    };
    const config2={
    host:'127.0.0.1',
    port1:'33060',
    name:"tjktzz",
    password:'tjktzz',
    test1:'test2'
}
console.log(Object.assign(config2,config1));

    //3. Object.setPrototypeOf();//设置原型对象   Object.getPrototypeOf();
    const school={
        name:'西安',
        age:'10086',
        pass:'100788'
}
const  classRoom={
        name:10099,
        location:'xian'
}
console.log(Object.setPrototypeOf(school,classRoom));
</script>

在这里插入图片描述
Object.assign()介绍

14.3 模块化

模块化是指将一个很大的程序文件，拆分成许多小的文件，然后将小文件组合起来

  • 模块化的好处：
  1. 防止命名冲突
  2. 代码复用
  3. 高维护性
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述还可以这样进行暴露：
    export{Object1，Object2}
    默认暴露
    exprot default{
    Object1，Object2
    }
  • 引入：
    在这里插入图片描述简便形式的引入只能针对于默认暴露
小玩偶啊
关注
专栏目录
es6新标准:字符串的扩展
01-08
// 有时候单行也可以 ，但是会碰见换行的...es6给我们新增了一些 新的操作方式 1.首先是字符串 我们可以通过 for of 进行遍历 for(var item of hello){ console.log(item); // 输出 h e l l o } 2.同时 es5中提供
C++返回类型和return语句【归纳】
Bitdancing的专栏
08-27 1541
C++返回类型和return语句、不要返回局部对象的引用或指针、使用尾置返回类型……
写一个函数的声明，使其返回数组的引用并且该数组包含10个string对象（笔记）
weixin_42492218的博客
04-20 342
1.string( &func( ))[10]; 上述声明的含义是: func ()表示调用func函数无须任何实参，(&func( ) )表示函数的返回结果是一个引用，( &func( ))[10]表示引用的对象是一个维度为10的数组，string (&func( )) [10]表示数组的元素是string对象。 2.使用类型别名 typedef string arr [10]; arr& ...
ES6标准---【九】【学习ES6标准看这一篇就够了！！！】
最新发布
zheshiyangyang的博客
09-20 1066
以往ES6文章JavaScript在浏览器中的加载传统方法加载规则注意顶部变量外部不可用this关键字返回undefinedJavaScript的循环加载ES6模块的循环加载块级作用域let取代var全局变量和线程安全ES6标准---【一】【学习ES6看这一篇就够了！！】_es6学习-CSDN博客ES6标准---【二】【学习ES6看这一篇就够了！！】_es6中的includes-CSDN博客ES6标准---【三】【学习ES6看这一篇就够了！！！】-CSDN博客ES6标准---【四】【学习ES6标准看这一篇就
JavaScript的ES6规范新特性
hanbing1307的博客
03-13 690
新的原始类型为Symbol，在此之前，JS支持支持6种数据类型：Object，String，Boolean，Number，Null，Undefined。let和const关键字还有一个特性：“暂时性死区”，即在使用了该关键字的块级作用域中，其内部使用let和const关键字声明的变量与外部作用域中的变量相互隔绝，互不影响。他们声明的变量仅在let和const关键字所在的代码块内起作用，即在使用let和const的那一对大括号{}内起作用，也称块级作用域（ES6之前只有函数作用域和全局作用域）。
ES6快速入门
白豆五的博客
08-11 398
ES6 （全称：ECMAScript 6.0）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是使 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript和JavaScript的关系一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。...
ES6标准
Zing_ing的博客
04-12 647
前端es6是模块化开发；es6模块化规范就是浏览器端与服务器端通用的模块化开发规范，其中定义了每一个JavaScript文件都是一个独立的模块，导入其他模块成员使用import关键字，向外共享模块成员使用export关键字。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需要再额外学习 AMD、CMD 或 CommonJS等模块化规范。
es6标准入门
06-05
**ES6标准入门** ES6，全称ECMAScript 2015，是JavaScript语言的一个重要版本更新，为开发者带来了许多新特性，极大地提升了开发效率和代码质量。本篇文章将深入探讨ES6的主要特点，帮助初学者快速入门。 ### 1. ...
三ES6新特性.pdf
07-13
ES6新特性中比较突出的包括： 1. const关键字：使用const声明的常量具有块级作用域，一旦赋值后不可更改。在声明常量时必须立即初始化，否则后续尝试赋值会引发错误。 2. let关键字：let关键字允许声明块级作用域...
ES6标准入门 第3版
05-23
《ES6标准入门 第3版》是一本深入探讨JavaScript ES6新特性的权威指南，针对JavaScript开发者，尤其是希望提升技术水平和理解最新语言标准的程序员。本书详细介绍了自ES6（ECMAScript 2015）发布以来的一系列重要...
ES6标准入门 高清
07-23
本书为中级难度，适合那些已经对JavaScript语言有一定了解的读者，可以作为学习这门语言最新进展的工具书，也可以作为参考手册供大家随时查阅新语法。 第3版增加了超过30%的内容，完全覆盖了ES2017标准，相比第2版...
es6标准入门_阮一峰最新版_第三版pdf
01-16
es6标准入门 阮一峰 第三版 这里是第三版 包含es7等语法介绍
ES6补充
qq_53169429的博客
10-07 341
let var const区别 var可以重复定义 let只可以定义一次，否则报错 const拥有let的所有优点，不同的是，通过const声明的变量是只读的。 var被视作全局变量 如果你创建一个函数，将它存储起来，稍后在使用i变量的for循环中使用。这么做可能会出现问题。 这是因为存储的函数会总是指向更新后的全局i变量的值。 var printNumTwo; for (var i = 0; i < 3; i++) { if (i === 2) { ...
es6规范
illiii的博客
04-20 346
在ES6中，我们可以使用 import 关键字引入模块，通过 export 关键字导出模块，功能较之于前几个方案更为强大，也是我们所推崇的，但是由于ES6目前无法在浏览器中执行，所以，我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。 // 使用方法 -npm install babel-cli browserify -g -npm install babel-preset-es2015 --save-dev CommonJS和AMD都是运行时加载。ES6在
ES6（全称ECMAScript 6）标准de
Self_discipline8的博客
06-24 569
ES6（全称ECMAScript 6）标准的理解 ES6（全称ECMAScript 6）是javaScript的标准，ES6是一个概念，但javaScript是对这个概念的实现。 一、export default 、export、import的使用 1）export default:输出是匿名的，不需要指定特定的名称； 2)Import不需要添加大括号{} 二、export导入指定变量或者函数等 ①export let sum=(x,y)=>{函数体} ②import {暴露的变量或者方法
ES6(ECMAScript 6.0) 新特性
2301_76144723的博客
06-18 1101
（1）解构就是取出数据，解构赋值是对赋值运算符的扩展（2）是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值（3）主要有两种形式： 数组解构和对象解构（1）模板字符串使用反引号 `` 将字符串包裹（2）可作为普通字符串（3）可用来定义多行字符串，即可以将换行字符串原生输出（4）字符串插入变量和表达式, 使用 ${}（5）字符串中可以调用函数（1）箭头函数提供更加简洁的函数书写方式。（2）基本语法是：(参数列表) => { 函数体 }
ES6——Symbol(2)，HTML常用的五种标签
m0_61331407的博客
03-16 917
在 ES5 使用字符串表示常量。例如：但是用字符串不能保证常量是独特的，这样会引起一些问题：default:try {// green 引发异常// 传递异常对象到错误处理但是使用 Symbol 定义常量，这样就可以保证这一组常量的值都不相等。用 Symbol 来修改上面的例子。default:try {// green 引发异常// 传递异常对象到错误处理。
es6新增的html标签,ES6新增特性——Promise
weixin_36170766的博客
06-03 848
一：为什么会出现？1、场景一：在很多业务需求中，你需要通过ajax进行多次请求，而且每次请求返回的数据需要作为参数进行下一次的请求，于是会出现ajax层层嵌套问题。多个请求操作层层依赖，加上每一层还会有复杂的业务逻辑需要处理，使得代码可读性很差，不直观，难以维护和调试。注：这种回调函数层层嵌套又称为回调地狱//请求A$.ajax({success:function(res1) {//请求B$.aj...
JavaScript的新规范ES6
旺旺的博客
07-31 904
目录前言const , let and var 的区别：对象的创建箭头函数Map和Set模板字符串三点运算符Symbol类型总结 前言 因为是学习vue的基础，所以在这里就不得不提一下JavaScript的新规范。 ES6; 也就是在javaScript的语法相对于之前的话有所不同 const , let and var 的区别： const , let 是 ES6 中用于声明变量的新关键字...
ES6入门指南：新标准与扩展功能详解
《ES6标准入门（第二版）》是一本深入浅出的JavaScript语言升级教程，主要针对ECMAScript 6 (ES6)新特性进行讲解。该书分为多个章节，涵盖了ES6与JavaScript的关系、历史发展以及部署策略，重点介绍了核心语法和功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值