ES6入门教程_es6教程-程序员宅基地

技术标签: 前端  es6  javascript  

    本次ES6入门教程可以帮助大家快速认识学习ES6,但涉及的深度还需要挖掘,一些代码的底层原理还需要剖析出来,但仅凭一门编程语言,很不容易涵盖全部要点,我也会随着不断的学习,进行思考辩证,回溯更新文章的内容。

目录

ES6介绍

let变量声明以及声明特性

let实践案例练习

const声明常量以及特点

变量的解构赋值

模板字符串

对象的简化写法

箭头函数以及声明特点

箭头函数的实践及应用

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

rest参数

拓展运算符

Symbol介绍与创建

Symbol的内置属性

迭代器

生成器

生成器函数参数

生成器函数实例1

生成器函数实例2

Promise介绍与基本使用

Promise封装读取文件

Promise封装Ajax请求

Promise.prototype.then方法

Promise实践练习

Promise对象catch方法

集合介绍与API

集合实践

Map的介绍与API

class介绍与初体验

class的类继承

ES6的数值拓展

ES6的对象方法拓展

模块化


ES6介绍

  ES全称ECMAScript,是脚本语言的规范,而平时经常编写的javaScript是ECMAScript的一种实现,所以ES新特性其实指的就是javaScript的新特性。

  ES6是其中的一个重要版本,变动内容最多,具有里程碑意义,加入许多新的语法特性,就业必备。

let变量声明以及声明特性

let a;//声明变量
//1、变量不能重复声明
let star="123";
let star="345";//由于变量已经存在,则再声明的话会报错
//2、块级作用域
{
let let_test=123;
}
console.log(let_test);//因为let是块级作用域,所以或报错
/*-----------------------------------------------------*/
{
var var_test=123; 
}
console.log(var_test);//var是函数作用域,所以在整个函数内都是有效的
//3、声明变量不会提升到代码块顶部,即不存在变量提升
console.log(song);
var song="恋爱达人";//输出undefined  但如果是 let song="恋爱达人";则会报错
//4、不影响作用域链
{
    let school="望子成龙小学";
    function fn(){
       console.log(school);//会先在该作用域下寻找变量school,若没有找到,则到它的上层作用域寻找
    }
    fn();
}

let实践案例练习

问题很简单,点击其中一个的方格,方格颜色变为粉红色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>let案例实战</title>
  <style type="text/css">
    .item {
      height: 30px;
      width: 30px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 class="page-header">点击切换颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>
<script>
//方法一:用var方法

//获取div元素对象
let items = document.getElementsByClassName("item");

//遍历并绑定事件
for(var i=0;i<items.length;i++){
  items[i].onclick=function(){
  //items[i].style.background="pink";这样的写法是错误的,因为我们说过当遍历绑定完事件后,发生点击事件这里面的i是会变为3的
  //因为这里的i是循环结束的i,因为监听事件是异步的
    this.style.background="pink";//这里的this指的是所发生点击事件的那个元素
 }
}

//方法二:用let方法

let items = document.getElementsByClassName("item");

//遍历并绑定事件
for(let i=0;i<items.length;i++){
  items[i].onclick=function(){
  items[i].style.background="pink";
}
//用let是可以的,因为let是块作用域,类似于
//{
//  let i=0;
//  items[i].onclick=function(){
//  items[i].style.background="pink";
//}
//{
//  let i=1;
//  items[i].onclick=function(){
//  items[i].style.background="pink";
//}
</script>

  这里对注释中的部分进行一个解释:因为let是块作用域,所以for循环中使用let也就等价于在代码块中先使用let进行变量的声明,然后再赋予点击事件,那对应的i肯定是块作用域的i。

const声明常量以及特点

const常量:值不能修改的量

const SCHOOL='望子成龙小学';
//1、一定要赋初始值
//2、一般常量使用大写
//3、常量的值不能修改
//4、块级作用域
//5、对于数组和对象的元素修改,不算作对常量的修改,不会报错
const TEAM=['UZI','MXLG','Ming','Letme'];
TEAM.push('Meiko');
//常量地址没有改变
//TEAM=100;这样就会报错

变量的解构赋值

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

 <script>
        // 数组解构
        const F4=['小沈阳','刘能'];
        let [xiao,liu]=F4;
        console.log(xiao);
        console.log(liu);

        // 对象解构
        const zhao={
            name:'赵本山',
            age:'不详',
            xiaopin:function(){
                console.log("我可以演小品");
            }
        };
        let {name,age,xiaopin}=zhao;
        console.log(name);
        console.log(age);
        console.log(xiaopin);

        // 平常的读取方法是这样的,可见简化了重复的对象名
        // zhao.name;zhao.age;zhao.xiaopin
    </script>

模板字符串

ES6引入新的声明字符串的方式 ` `

    <script>
        // 1、声明
         let str=`我是一个字符串!`;
         console.log(str);
        // 2、内容中可以直接出现换行符
        let str_s=`<ul>
            <li>沈腾</li>
            <li>马丽</li>
            <li>魏翔</li>
            </ul>`;
        // 3、变量拼接
            let lovest='魏翔';
            let out=`${lovest}是我心目中最搞笑的演员`;
            console.log(out);
    </script>   

对象的简化写法

 <script>
            // ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
            // 这样的书写更加简洁
            let name='望子成龙小学';
            let change=function(){
                console.log("我们可以改变你!")
            }
            const school={
                name,
                change,
                improve(){
                    console.log("我们可以提高你的技能!");
                }
            };
           school.change();
        </script>

箭头函数以及声明特点

//声明函数
            let fn=function(a,b){
             return a+b;
            }
            //箭头函数
            let fn_row=(a,b)=>{
            return a+b;
            }
            // 调用函数
            let result=fn_row(1,2);
            console.log(result);
            
    // 1、箭头函数this是静态的,this始终指向函数声明时所在作用域下的this的值
            function getName(){
                console.log(this.name);
            }
            let getName2=()=>{
                console.log(this.name);
            }
            window.name='望子成龙小学';
            // 直接调用(上面两个例子this指的都是window)
             getName();// 望子成龙小学
             getName2();//望子成龙小学
    
            const school={
                name:"SCHOOL"
            }
          
            // call方法调用  使用 call() 方法,可以编写能够在不同对象上使用的方法。
            getName.call(school);//SCHOOL
            getName2.call(school);//望子成龙小学
  // 2、不能作为构造实例化对象
             let Person=(name,age)=>{
                 this.name=name;
                 this.age=age;
             }

 // 3、不能使用arguments变量
             let fn_a=()=>{
                 console.log(arguments);
             }
             fn_a(1,2,3);
// 4、(1)省略小括号:当形参有且只有一个的时候
            let add=n=>{
                return n+n;
            };
            console.log(add(9));

   // (2)省略花括号,当代码体只有一条语句的时候,此时return必须省略
            let pow=n=> n*n;
            console.log(pow(9));

箭头函数的实践及应用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>箭头函数实战</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background: #58a;
            }
        </style>
    </head>
    <body>
         <div id="ad"></div>
        <script>
            let ad=document.getElementById('ad');
            ad.addEventListener("click",function(){
            // // 保存this的值
            // let _this=this;
            // // 定时器
            // setTimeout(function(){
            //     _this.style.background='pink';
            // },2000)
            setTimeout(()=>{
                this.style.background='pink';
            },2000);
            });
    //    需求2
    const arr=[1,6,9,10,100,25];
    const result=arr.filter(item=>item%2===0);
    console.log(result);

    // 箭头函数适合与this无关的回调,定时器,数组的方法回调
    //箭头函数不适合与this有关的回调,事件回调,对象的方法
    const Person={
        name:'尚硅谷',
        getName:()=>{
            this.name;
        }
    }//这种即调用不了对象本身的name属性
       </script>
    </body>
</html>

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

<script>
    // 1.形参初始值,具有默认值的参数,一般位置要靠后(潜规则)
         function add(a,b,c=10){
            return a+b+c;
         }
         let result=add(1,2);
         console.log(result);
   //  2、与解构赋值结合
        //正常
        function connect(options){
          host=options.host;
          age=options.age;
        }
        // 简化后
        function connect({host,age}){
            host=host;
            age=age;
        }
        // 调用函数
        connect({
        host:'atguigu',
        age:12
        })
       </script>

rest参数

 <script>
        //    rest参数
        function date(...args){
            console.log(args);
        }
        date('阿衰','庄酷');
        // rest参数必须要放到参数最后
        function fn(a,b,...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1,2,3,4,5,6);
       </script>

拓展运算符

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>拓展运算符</title>      
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <script>
            // [...]拓展运算符能将【数组】转换为逗号分隔的【参数序列】
            // 声明一个数组...
            const tfboys=['王源',"王俊凯","易烊千玺"];
            function chunwan(){
                console.log(arguments);
            }
            chunwan(tfboys);
            chunwan(...tfboys);

            // 拓展运算符的应用
            // 1、数组的合并
            const kuaizi=['王太利','肖央'];
            const fenghuang=['曾毅','玲花'];
            const zuixuanxiaopingguo=[...kuaizi,...fenghuang];
            console.log(zuixuanxiaopingguo);
            // 2、数组的克隆
            const sanzhihua=['E','G','M'];
            const sanyecao=[...sanzhihua];
            console.log(sanyecao);
            // 3、将伪数组转换为真正的数组
            const divs=document.querySelectorAll('div');
            const divArr=[...divs];
            console.log(divArr);
       </script>
    </body>
</html>

Symbol介绍与创建

Symbol表示独一无二的值,类似于字符串的数据类型

 <script>
        // 创建Symbol
        let s=Symbol();
        // console.log(s,typeof s);
        
        let s2=Symbol('kaven');     //Symbol()返回的值都是唯一的
        let s3=Symbol('kaven');
        console.log(s2==s3);        // false s2和s3不相同

        // Symbol.for创建
        let s4=Symbol.for('kaven'); //Symbol.for(key) 通过key来查找Symbol,找到的话,则返回 
                                                   // Symbol,否则创建一个新的Symbol
        let s5=Symbol.for('kaven');
        console.log(s4==s5);        //true s4和s5相同
       
        </script>

        // 不能与其他数据进行运算
        let result=s+s;
        //七大类型 USONB you are so niubility
        //u underfined
        //s symbol string
        //o object
        //n null number
        //b boolean

Symbol的内置属性

其实就是在特定情况下,通过改变对象的属性,来改变对象的表现

<script>
         class Person{
            static[Symbol.hasInstance](param){
                return true;
            }
         }
         let o={};
         console.log(o instanceof Person);//true
        //  特定场景下 改变对象的属性 来改变对象的表现
        </script>

迭代器

     const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];
     
      // 使用for of来遍历数组
      for (let v of xiyou) {
        console.log(v);
      }
      
 //迭代器方法
 //(1)创建一个指针对象,指向当前数据结构的起始位置
      let iterator=xiyou[Symbol.iterator]();
    
 //(2)调用对象的next的方法
    // 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    </script>

生成器

  生成器是ES6中新增的一种函数控制、使用的方案,它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。

<script>
      // 生成器其实就是一个特殊的函数
      // yield相当于函数代码的分隔符
      function* gen() {
        //第一部分
        console.log("hello");
        yield "a";
        //第二部分
        console.log("world");
        const number=yield "b";
        //第三部分
        console.log("111");
        console.log(number);
        yield "c";
        //第四部分
        console.log("222");
      }
    
       let generator=gen();//生成器函数返回值是一个生成器
       generator.next();//会执行代码直到遇到yield才停止,经历了console.log("hello");所以会输出"hello"
       //console.log( generator.next());返回值是{ value: 'a', done: false } 
       generator.next();//经历了console.log("world");所以会输出"world"

      //我们在调用next函数的时候,可以给它传递参数,那么这个参数会作为上一个yield语句的返回值
       generator.next(123);//经历了console.log("111");和console.log(number);  所以会输出"111"和123
    </script>

生成器函数参数

<script>
      function* gen(arg) {
        // 一
        console.log(arg);
        let one = yield 111;
        // 二
        console.log("one:" + one);
        yield 222;
        // 三
        yield 333;
        // 四
      }
      let iterator = gen("AAA");
      console.log(iterator.next());
      console.log(iterator.next("BBB"));
    </script>

生成器函数实例1

<script>
    // 异步操作 文件操作、网络操作(ajax,request)、数据库操作
    // 1s 后控制台输出 111 2s后控制台输出222 3s后输出333
    // 回调地狱
    // setTimeout(()=>{
    // console.log(111);
    // setTimeout(()=>{
    // console.log(222);
    // },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(){
        console.log("before");
        yield one();
        console.log("beforeTwo");
        yield two();
        yield three();
    }
    let iterator=gen();
    iterator.next();
    </script>

生成器函数实例2

<script>
    // 模拟获取 用户数据  订单数据  商品数据
    function getUsers(){
        setTimeout(()=>{
            let data="用户数据";
            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();
       console.log(users);
       let orders=yield getOrders();
       console.log(orders);
       let goods=yield getGoods();
       console.log(goods);
    }
    let iterator=gen();
    iterator.next();
    </script>

Promise介绍与基本使用

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

<script>
      // 实例化Promise对象
      // resolve :异步操作执行成功后的回调函数
      // reject:异步操作执行失败后的回调函数
      const p = new Promise(function (resolve, reject) {
        //做一些异步操作
        setTimeout(function () {
          console.log("执行成功!");
          resolve("我是成功!!");
        }, 1000);
      });
  
      //  .then() 方法需要两个参数,第一个参数作为处理已兑现状态的回调函数,而第二个参数则作为处理已拒绝状态的回调函数。
      p.then(
        function (value) {
            console.log(value);
        },
        function (reason) {
            console.log(reason);
        }
      );
    </script>

Promise封装读取文件

// 1、引入fs模块
const fs=require('fs');
// // 2、调用方法读取文件
// fs.readFile('./resource/为学.md',(err,data)=>{
//     // 如果失败,则抛出错误
//     if(err) throw err;
//     // 如果没有出错,则输出内容
//     console.log(data.toString());
// });
    // 使用Promise封装
    const p=new Promise(function(resolve,reject){
        fs.readFile('./resource/为学.md',(err,data)=>{
            if(err)reject(err);
            resolve(data);
        });
    });
    p.then(function(value){
    console.log(value.toString());
    },function(reason){
    console.log(reason);
    });

Promise封装Ajax请求

   Ajax:Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:HTML ,CSS, JavaScript, DOM, XML(en-US), XSLT, 以及最重要的 XMLHttpRequest。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>发送Ajax请求</title>      
    </head>
    <body>
        <script>
            const p=new Promise((resolve,reject)=>{
            // 1、创建对象
            const xhr=new XMLHttpRequest();
            // 2、初始化
            xhr.open("GET","https://api.apiopen.top/api/sentences");
            // 3.发送
            xhr.send();
            // 4、绑定事件,处理响应结果
            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);
        var body=document.querySelector('body');
        body.innerHTML=value
        },function(reason){
        console.error(reason);
        })
       </script>
    </body>
</html>

Promise.prototype.then方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>rest参数</title>      
    </head>
    <body>
        <script>
        // 调用then方法 then方法的返回结果是Promise对象,对象状态由回调函数的执行结果决定
        // 链式调用
        p.then(value=>{}).then(value=>{});
       </script>
    </body>
</html>

Promise实践练习

  读取多个文件

const fs=require('fs');
const p=new Promise(function(resolve,reject){
    fs.readFile('./resource/为学.md',(err,data)=>{
        resolve(data);
    });
});
p.then(value=>{
  return new Promise((resolve,reject)=>{
    fs.readFile('./resource/静夜思.md',(err,data)=>{
        resolve([value,data]);
    })
  })
}).then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile('./resource/咏鹅.md',(err,data)=>{
            value.push(data);
            resolve(value);
        })
      })
}).then(value=>{
    console.log(value.join('\r\n'));
})

Promise对象catch方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Promise catch</title>      
    </head>
    <body>
        <script>
            const p=new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    reject("出错了");
                },1000);
            });
            p.catch(reason=>{
                console.error(reason);
            })
            // 不用catch 用then也完全可以的
            // p.then(value=>{
            // console.log(value);
            // },reason=>{
            //  console.error(reason);
            // });
        </script>
    </body>
</html>

集合介绍与API

  ES6提供了新的数据结构Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了iterator接口,所以可以使用【拓展运算符】和【for...of】进行遍历。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Promise catch</title>      
    </head>
    <body>
<script>
    // 声明一个set  集合
       let s=new Set();
       let s2=new Set(['大事儿','小事儿','大事儿']);
    // 自动去重
       console.log(s2);

    // 元素个数
       console.log(s2.size);
    // 添加新的元素
       s2.add('喜事儿');
    // 删除元素
       s2.delete('坏事儿');
    // 检测
       console.log(s2.has('好事儿'));
    // 清空
       s2.clear();
    // 遍历
       for(let v of s2){
        console.log(v);
       }
 </script>
    </body>
</html>

集合实践

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Set集合实践</title>      
    </head>
    <body>
<script>
   let arr=[1,2,3,4,5,4,3,2,1];
   // 1、数组去重
   let result=[...new Set(arr)];
   // 2、交集
   let arr2=[4,5,6,5,6];
   let s2=new Set(arr2);
   let result_s=[...new Set(arr)].filter((item)=>{
   if(s2.has(item)){
      return true;
   }else{
    return false;
   }
   });
   // 3、并集
   let union=new Set([...arr,...arr2]);
   // 4、差集
   // !s2.has(item)
      console.log(result_s);
</script>
    </body>
</html>

Map的介绍与API

  Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Set集合实践</title>      
    </head>
    <body>
        <script>
            // 声明Map
            let m=new Map();
            // 添加元素
            m.set('name','小南湖');
            m.set('change',function(){
                console.log('美丽的风景!')
            });
            let key={
                school:'SCHOOL'
            };
            m.set(key,['北京','上海']);
            // size
            // 删除
            m.delete('name');
            // 获取
            m.get(key);
            // 清空
            m.clear();
            // 遍历
            for(let v of m){
                console.log(v);
            }
        </script>
    </body>
</html>

class介绍与初体验

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>class</title>
  </head>
  <body>
    <script>
      // ES5  函数对象
      //   function Phone(brand,price){
      //     this.brand=brand;
      //     this.price=price;
      //   }
      //   Phone.prototype.call=function(){   原型
      //     console.log("phone");
      //   }
      //   let Huawei=new Phone('华为',5999);
      //   Huawei.call();

      class Phone {
         constructor(brand, price) {
           this.brand = brand;
           this.price = price;
         }
         call() {
           console.log("yes phone");
         }
       }
       let onePlus = new Phone("1+", 1299);
       onePlus.call();
    </script>
  </body>
</html>

      class Phone{
        // 静态属性
        static name='手机';
        static change(){
            console.log("可以改变世界");
        }
      }
    //   静态属性属于类,而不属于实例对象
      let nokia=new Phone();
      console.log(nokia.name);//undefined
      console.log(Phone.name);//手机

class的类继承

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>对象继承</title>
  </head>
  <body>
    <script>
      // ES5 构造函数继承
    //   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是SmartPhone的this
    //     this.color = color;
    //     this.size = size;
    //   }
    //   // 设置子集构造函数的原型
    //   SmartPhone.prototype = new Phone();
    //   SmartPhone.prototype.constructor = SmartPhone; //这行可以不加
    //   // 声明子类的方法
    //   SmartPhone.prototype.photo = function () {
    //     console.log("我可以拍照");
    //   };
    //   const chuizi = new SmartPhone("锤子", 1000, "黑色", "5.5inch");
    //   console.log(chuizi);

      // ES6  类继承
      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;
        }
        photo(){
         console.log("拍照");
        }
        call(){
            console.log("我可以视频通话");
        }
      }
      const xiaomi=new SmartPhone('小米',799,'黑色','4.7inch');
      console.log(xiaomi);

      class Good{
        get price(){
            console.log("price被读取了")
            return "i love you";
        }
        set price(newVal){
            console.log("price被修改了")
            // 可以在里面做修改值的判断
        }
      };
      let s=new Good;
      console.log(s.price);
      s.price='free';
    </script>
  </body>
</html>

ES6的数值拓展

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数值拓展</title>
  </head>
  <body>
    <script>
        // 0.Number.EPSILON是JavaScript表示的最小精度
        // EPSILON属性的值接近于2.220446049250313...
        console.log(0.1+0.2);//0.30000000000000004  这里看到并不等于0.3
        function equal(a,b){
            if(Math.abs(a-b)<Number.EPSILON){
                return true;
            }else{
                return false;
            }
        }
        // 1.二进制和八进制
        let b=0b1010;//二进制
        let o=0o777;//八进制
        //111111111 2的9次方-1
        let d=100;//十进制
        let x=0xff;//十六进制
        // 2.Number.isFinite 检测一个数值是否为有限数
        Number.isFinite(100/0);
        // 3.NUmber.isNaN 检测一个数值是否为NaN
        Number.isNaN(123);
        // 4.Number.parseInt 字符串转整数
        // 5.Number.isInteger判断一个数是否为整数
        // 6.Math.trunc 将数字的小数部分抹掉
        // 7.Math.sign判断一个数到底为正数 负数 0
    </script>
  </body>
</html>

ES6的对象方法拓展

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>对象的方法</title>
  </head>
  <body>
    <script>
    // 1.Object.is 判断两个值是否完全相等
    console.log(Object.is(NaN,NaN));true
    console.log(NaN===NaN);//false
    // 2.Object.assign 对象的合并
    const config1={
        host:'localhost',
        port:3306,
        name:'root',
        pass:'root'
    };
    const config2={
        host:'http://kaven.com',
        port:33060,
        name:'kaven.com',
        pass:'iloveyou',
        test2:'test2'
    };
    console.log(Object.assign(config1,config2));//后者覆盖前者
// 3.Object.setPrototypeOf 设置原型对象 Object.getPrototypeOf
   const school={
      name:'望子成龙小学'
   }
   const cities={
      place:['北京','上海','深圳']
   }
   Object.setPrototypeOf(school,cities);
   console.log(school);
    </script>
  </body>
</html>

模块化

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


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

//在t1.js这个文件下
//多行暴露
export let name='望子成龙小学';
export let teach=function(){
    console.log("teaching");
}
//在t2.js这个文件下
// 统一暴露
let name='望子成龙小学';
let teach=function(){
    console.log("teaching");
}
export{name,teach};
//在t3.js这个文件下
// 默认暴露
export default{
    school:'KAVEN',
    sing:function(){
        console.log("sing a song");
    }
}


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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>模块化</title>
  </head>
  <body>
   
    <script type="module">
      // 1.通用的导入方式
      import * as m1 from "./js/t1.js";
      console.log(m1);
      import * as m2 from "./js/t2.js";
      console.log(m2);
      import * as m3 from "./js/t3.js";
      console.log(m3);
      // 2.解构赋值形式
      import { school as highschool, teach } from "./js/t1.js";
      import { default as m3 } from "./js/t3.js";
      //   3.简便形式 针对默认暴露
      import m3 from "./js/t3.js";
    </script>
  </body>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_55154022/article/details/125874035

智能推荐

Windows内核驱动中操作文件_win 内核模式读文件-程序员宅基地

文章浏览阅读5.7k次。一. 在驱动中使用文件在Windows执行体中,通过文件对象来代表文件,该文件对象是一种由对象管理器管理的执行体对象。例如:目录也是由文件对象代表的。内核组件通过对象名来引用文件,即在文件的全路径前面加\DosDevices。(在Windows 2000及后续操作系统中,\??等同于\DosDevices)。例如,文件C:\WINDOWS\example.txt的对象名为\DosDevic_win 内核模式读文件

【经验总结】SQL注入Bypass安全狗360主机卫士_sql_inject bypass-程序员宅基地

文章浏览阅读811次。0x00 前言这类的文章已经是比较多了,本文也主要是作为学习笔记来记录,主要是记录一下我在学习 SQL 注入 Bypass 的过程,同时前人的不少绕过方法已经失效了,所以这里也是记录一下最新规则的一些绕过方法。0x01 环境搭建测试环境:Win7 + Apache + MySQL 5.7.26 + PHP 5.5.45测试代码:<?phpif ($_GET['id']==null..._sql_inject bypass

matlab仿真fir滤波器,基于matlab的FIR滤波器的设计与仿真-程序员宅基地

文章浏览阅读768次。基于matlab的FIR滤波器的设计与仿真 毕 业 设 计 论 文 基于matlab的FIR滤波器的设计与仿真 指导老师姓名: 专 业 名 称:电子信息工程技术 班 级 学 号: 09136210 论文提交日期:2011年12月15日 论文答辩日期:2011年12月16日 2011年 12月 15 日 摘 要 FIR滤波器是数字滤波器系统中常见的滤波器。论文针对窗函数法、最优化设计法和最小约束二乘..._一种基于短波校时信号的fir滤波器matlab仿真设计

Python-Django初体验—创建Django项目并实现页面跳转功能_django跳转到指定页面-程序员宅基地

文章浏览阅读8.7k次,点赞14次,收藏85次。关于Python-Django创建新项目,并实现页面跳转功能。_django跳转到指定页面

1024程序员节,送18本技术书籍给大家,祝大家节日快乐_1024送书-程序员宅基地

文章浏览阅读1.9w次,点赞167次,收藏214次。新的资源等你来去,永久免费哦~【作者注】: 1024已经过去了,本文的送18本书的活动也已经结束了(原文内容已经删除)。考虑到该文章可能还会被一些朋友看到,所以我在这留了一波福利,永久有效,希望能对大家有用,也希望大家能够感受到我一片心意。免费给大家赠送一波很有价值的架构师视频教程,总共四个阶段,非常棒的资源。领取方式如下:扫描上方二维码关注我的公众号『程序员私房菜』,在公众号内回..._1024送书

Spring .NET框架概览-程序员宅基地

文章浏览阅读68次。Spring.NET 是一个关注于.NET企业应用开发的应用程序框架。它能够提供宽广范围的功能,例如依赖注入、面向方面编程(AOP)、数据访问抽象, 以及ASP.NET集成等。基于java的spring框架的核心概念和价值已被应用到.NET。Spring.NET 1.0 包含一个完全功能的依赖注入容器和AOP库。后续的发布将包含对ASP.NET、Remoting和数据访问的支持。下图展现出了 Sp..._.net spring.core spring.data spring.service 框架

随便推点

soul源码分析数据同步篇之HTTP长轮询同步流程_长轮询数据流程图-程序员宅基地

文章浏览阅读280次。说明本文代码基于soul 2021.2.4 master分支版本。准备请先阅读soul官方文档 数据同步原理,对soul数据同步原理有个基本的了解。如何开启HTTP同步策略这个小节主要引自soul官网 使用不同的数据同步策略soul-admin的配置application.yml中添加如下配置,或是在启动参数中添加--soul.sync.http='',然后重启服务:soul: sync: http: enabled: truesoul-bootstrap的_长轮询数据流程图

入职IT岗位,如何做一份出彩的简历_简历如何出彩 it行业-程序员宅基地

文章浏览阅读502次。工作信息千万条,应聘上才是第一条。简历不出彩,何以博眼球?面试过的同学可能都知道,行业千千万万,但只有那些专业性特别强,像IT行业、金融行业之类的工作需要你的简历必须出彩,不能光只有基本信息。一份基本的简历,是我们和人事交流的开始;一份真正好的简历,才是通向一份好工作的敲门砖。那么如何在众多求职者投递的简历当中脱颖而出,一眼被HR相中,这是一门学问,值得我们去认真对待。当我还在学校的时候,从不曾想到过这个问题。制作的简历自然也是平平无奇,因为确实不知道面试官需要求职者应该具备如何的闪光点。._简历如何出彩 it行业

易优cms 多语言版本的分页变量修改_eyoucms后台页面修改-程序员宅基地

文章浏览阅读961次。在使用多语言版本时,遇到了分页没有多语言时怎么处理?这个需要改动分页PHP文件,文件目录 根目录corelibrary hinkpaginatordriver。Eyou.php是PC端,Mobile.php是手机端然后打开Eyou.php修改PC端分页打开后找到下面代码,替换红色部分1,大改在97行 /** * 共N页 N条 * @param string $t..._eyoucms后台页面修改

Android O(8.0) Keyguard之启动流程_android keyguardbouncer-程序员宅基地

文章浏览阅读1.8k次。今天开始梳理SystemUI Keyguard源码话不多说首先从启动流程开始:起点是在 SystemUI/src/com/android/systemui/SystemUIService.javaonCreate() -> ((SystemUIApplication) getApplication()).startServicesIfNeeded();启动SystemUI各..._android keyguardbouncer

数据扁平化-程序员宅基地

文章浏览阅读6.4k次,点赞3次,收藏23次。什么是扁平化数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下:var arr = [1, [2, [3, 4]]];console.log(flatten(arr)) // [1, 2, 3, 4]一、递归我们最一开始能想到的莫过于循环数组元素,如果还是一个数..._数据扁平化

PPPOE和pppd的流程详解--good_pppd pppoe-程序员宅基地

文章浏览阅读1w次,点赞3次,收藏18次。PPD是用户态应用程序,负责PPP协议的具体配置,如MTU、拨号模式、认证方式、认证所需用户名/密码等一 终端 终端介绍 终端是一种字符型设备,它有多种类型,通常使用tty来简称各种类型的终端设备。看下面一副图展示了计算机系统与终端之间得联系。 终端驱动程序的主要功能是在程序与相关设备之间进行数据传递。在一个LINUX内核自身的内部_pppd pppoe

推荐文章

热门文章

相关标签