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

智能推荐

《吴恩达机器学习》12 支持向量机_svm普遍使用的准则描述不正确的是:( )(n为特征数,m为训练样本数。)-程序员宅基地

文章浏览阅读553次。支持向量机前言一、优化目标二、大间隔分类器1、直观理解2、数学原理三、核函数四、使用SVM总结前言到目前为止,我们已经见过一系列不同的学习算法。在监督学习中,许多学习算法的性能都非常类似,因此,重要的不是你该选择使用学习算法 A 还是学习算法 B,而更重要的是,应用这些算法时,所创建的大量数据在应用这些算法时,表现情况通常依赖于你的水平。比如:你为学习算法所设计的特征量的选择,以及如何选择正则..._svm普遍使用的准则描述不正确的是:( )(n为特征数,m为训练样本数。)

allegro 自动批量创建device文件_allegro 自动批量生成device文件脚本-程序员宅基地

文章浏览阅读4.5k次。学习allegro,画一块板子时,老师给了个封装库,可惜里面没有device文件,导入第三方网标时却必须有。老师让一个一个的创建,太麻烦,随想办法搞了个自动创建的脚本。思路如下:一、allegro 中录制创建device文件的脚本;file -> script ; record; 开始录制脚本file -> Create Device;创建device文件ctrl + s 保存_allegro 自动批量生成device文件脚本

LVS三种工作模式及原理详解-程序员宅基地

文章浏览阅读6.1k次,点赞9次,收藏55次。什么是 LVS?LVS 是 Linux Virtual Server 的简写,也就是 Linux 虚拟服务器,是一个虚拟的服务器集群系统,本项目在 1998 年 5 月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一。官方网站:http://www.linuxvirtualserver.org,LVS 实际上相当于基于 IP 地址的虚拟化应用,为基于 IP 地址和内容请求分发的负载均衡提出了高效的解决方法,现在 LVS 已经是 Linux 内核标准的一部分。使用 LVS 可以达到的技术目标_lvs

第五讲 相关系数_线性相关系数举例-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏25次。相关系数总体 ——所要考察对象的全部个体叫做总体.我们总是希望得到总体数据的一些特征(例如均值方差等)样本 ——从总体中所抽取的一部分个体叫做总体的一个样本.计算这些抽取的样本的统计量来估计总体的统计量:例如使用样本均值、样本标准差来估计总体的均值(平均水平)和总体的标准差(偏离程度)。例子:我国10年进行一次的人口普查得到的数据就是总体数据。大家自己在QQ群发问卷叫同学帮忙填写得到的数据就是样本数据这里的相关系数只是用来衡量两个变量线性相关程度的指标;也就是说,你必须先确认这两个_线性相关系数举例

Python零基础之基本概念-程序员宅基地

文章浏览阅读391次。Python 语言1. 基本概念简介,快速,门槛低Python的创始人为吉多*范罗苏姆 (Gudio van Rossum)吉多 龟书 大神Python的起源可以追溯到1989年12月,由Guido van Rossum(Python社区的仁慈独裁者)创建,作为一个在圣诞节期间工作的爱好项目,Python的名字不是取义于大蟒蛇,而是来自于英国喜剧团Monty Python。Python诞生于ABC语言,是van Rossum工作的荷兰CWI研究所的终止项目,van Rossum也在研究叫Amoe

[转载]个人认为最好的BERT讲解博客(上)_!test -d bertviz_repo && echo-程序员宅基地

文章浏览阅读2.7k次,点赞6次,收藏14次。這是一篇 BERT 科普文,帶你直觀理解並實際運用現在 NLP 領域的巨人之力。 如果你還有印象,在自然語言處理(NLP)與深度學習入門指南裡我使用了 LSTM 以及 Google 的語言代表模型 BERT 來分類中文假新聞。而最後因為 BERT 本身的強大,我不費吹灰之力就..._!test -d bertviz_repo && echo

随便推点

python的ORM技术:使用sqlalchemy操作mysql数据库_python里sqlalchemy如何操作mysql数据库-程序员宅基地

文章浏览阅读664次。#!/usr/bin/env python# -*- coding: utf-8 -*-from sqlalchemy import Column, String, create_engine, Integer, Date, Float, ForeignKeyfrom sqlalchemy.orm import sessionmaker, relationshipfrom sqlalch..._python里sqlalchemy如何操作mysql数据库

JNI层 C如何掉用java接口-程序员宅基地

文章浏览阅读1.1k次。JNIEXPORT jboolean JNICALL Java_com_company_BossLi_registerCallback (JNIEnv *env, jobject obj){ BOOL bRet = FALSE; bRet = CModuleAddCallBack(hMoudle, postCallBack); return

【吴恩达深度学习编程作业】4.4特殊应用——人脸识别和神经风格转换(问题未解决)_吴恩达 人脸识别 数据database出错-程序员宅基地

文章浏览阅读896次,点赞2次,收藏8次。参考文章:1.人脸识别与神经风格转换 2.神经风格转换编程作业神经网络风格中遇到的问题已经解决了并将解决方案写在了备注里面,但是人脸识别那里运行到database就出错了,目前仍没有找到解决方案,报错信息:Traceback (most recent call last): File "G:/Project/PYTHON/Demo01/Deep_Learning/test4_4/人脸识别.py", line 108, in <module> database["daniel_吴恩达 人脸识别 数据database出错

hadoop 8088端口网页无法打开的原因分析_hadoop 为什么8088访问不了-程序员宅基地

文章浏览阅读4.7w次,点赞5次,收藏27次。首先master和slaves的节点正常http://server71:50070 (HDFS管理界面)正常可以打开http:// server71:8088 yarn管理界面打不开Master(server71)Slaves(server72,73,74)[root@server71 bin]# jps2271 NameNode_hadoop 为什么8088访问不了

谈一下如何设计Oracle 分区表_如何设计分区表-程序员宅基地

文章浏览阅读3k次。在谈设计Oracle分区表之间先区分一下分区表和表空间的个概念:表空间:表空间是一个或多个数据文件的集合,所有数据对象都存放在指定的表空间中,但主要存放表,故称表空间。分区表:分区致力于解决支持极大表和索引的关键问题。它采用他们分解成较小和易于管理的称为分区的片(piece)的方法。一旦分区被定义,SQL语句就可以访问的操作某一个分区而不是整个表,因而提高管理的效率。分区对于数据仓_如何设计分区表

PHP多张图片拼接成长图_php 图片合成-程序员宅基地

文章浏览阅读205次。将多张图片,按照规格合成一张图片。_php 图片合成