es5_es5封装教程 - CSDN
精华内容
参与话题
  • ES5学习

    2019-05-22 17:16:42
    目录 一. 1.javascript是什么 2.API 应用程序接口(Application Programming Interfaces) 3.脚本调用策略 4.保留字 5.运算符的完整列表及其优先级 6.可重复代码块——函数 ...(1)....(2)....(3)....9....

    目录

    一.

    1.javascript是什么

    2.API 应用程序接口(Application Programming Interfaces)

    3.脚本调用策略

    4.保留字

    5.运算符的完整列表及其优先级

    6.可重复代码块——函数

    7.立即执行函数

    8.构造器

    (1). 构造器基础

    (2). 构造器中有return

    (3). 构造函数是函数,用构造函数新建的实例是对象

    9.继承

    10.字面量    

    11.对象

     (1). 创建对象的4种方法

    问题


    了一圈捷径,最后发现,还是得踏踏实实一步一步走。

    一.

    1.javascript是什么

    https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript

    javaScript是动态类型语言,它植根于全球数亿网民都在使用的Web浏览器之中,致力于增强网站和Web应用程序的交互性。

    所谓的动态类型语言,意思就是类型的检查是在运行时做的,比如如下代码是不是合法的要到运行时才判断。

    https://baike.baidu.com/item/动态语言/797407?fr=aladdin

    2.API 应用程序接口(Application Programming Interfaces)

    API通常分为两类,浏览器 API  第三方 API 

    用js操作dom树来与html页面进行交互,基本都是通过web API接口实现的。

    3.脚本调用策略

    分‘内部’策略和‘外部’策略

    内部是在程序里写js代码,外部是指引用js文件。

    内部:用事件监听

    外部:用async和defer 这2个对内部不起作用。

    async是和html同时加载代码

    defer是推迟加载

    举例:在body中,内部打印“0”,外部分别打印1到5,控制台打印顺序如下,只有js2被推迟到最后。

    4.保留字

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords

    https://www.runoob.com/js/js-reserved.html

    5.运算符的完整列表及其优先级

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence

    6.可重复代码块——函数

    当遇到经常需要执行的代码,将其写成函数。

    函数 允许你在定义的区块内存储一段代码用来执行一个单独的任务,然后调用该段代码时,你需要使用一个简短的命令,

    而不用重复编写多次该段代码。

    方法:方法是在对象内定义的函数。

               浏览器内置函数(方法)和变量(称为属性)存储在结构化对象内,以使代码更加高效,易于处理。

    函数:是单独定义的?

    当引用的2个js文件都定义了同一个函数,将执行最后加载的文件中的函数。

    js 严格模式 'use strice';

    7.立即执行函数

        等于   函数 a(){} 加上() 再加上执行符号 !,+,-,=, && ,|| 以及逗号(,)操作符都可以讲函数体变成函数表达式

        就是 a(){}() 这样三部分组成

    8.构造器

    (1). 构造器基础

           function Abc(){

             this.ee = 5 ;

           }

          Abc.prototype.ddd= function(){console.log(this.ee);}

          函数Abc就是构造器,只有函数对象有prototype属性

          Abc()函数是Abc.prototype的构造函数,也就是说 Abc === Abc.prototype.constructor

          它的prototype,就是原型。一般所有的方法都定义在构造器的原型上。

          但这样写,直接调用Abc.prototype.ddd()执行方法是不行的,因为this是函数?Abc.prototype是this?

          新建实例Fg,这样可以,因为方法可以通过__proto__属性上溯原型链使用了。

        

          var Fg = new  Abc();

          Fg.ddd();

          new 这个动作,是把Abc函数返回一个名叫Abc的对象,赋给Fg ?

          并不是,应该是引用,因为当构造函数的原型上的属性增加方法,Fg 也可以使用的。

          实际的方法仍然是定义在类里面, 而不是在对象里面。

          如果原型上有方法,对象可以调用,如果在调用后,该方法被删除,再次调用会失败。

          并不是最后定义,对象在定义前能调用。增加属性并没有优先级。

          但在console.log()时,显示的都是最终结果。并不会根据添加删除顺序显示。

          delete Abc.prototype.ddd;

    (2). 构造器中有return

          function Bcd(){

               this.ss = "SSR";

               return 123;

          }

         Bcd.prototype.test1 = function(){

               console.log(456);

          }

          如果return的值是基本数据类型的话,则忽略return,直接返回实例化的对象;

          如果return的值是引用类型的话,则不再返回实例化的对象,而是直接返回return返回的引用类型的值。(就不是实例化了)

          中有5中简单数据类型(也称为基本数据类型): UndefinedNullBooleanNumberString

          还有1中复杂的数据类型————ObjectObject本质上是由一组无序的名值对组成的。

          其中UndefinedNullBooleanNumber都属于基本类型。ObjectArrayFunction则属于引用类型,String有些特殊。

    (3). 构造函数是函数,用构造函数新建的实例是对象

          typeof  Abc 是 function ;

          typeof Fg 是 object ;

          function在prototype上定义的方法,在object的__proto__属性中,可以直接使用。例:Fg.ddd();

                  而构造函数在原型上的属性,不能直接使用,需要加上.prototype  例:Abc.prototype.ddd();

         构造函数在prototype上的constructor中存放构造函数。

    9.继承

        构造器的继承和原型的继承

        (1).构造器的继承,使用call函数

             

        (2).原型的继承,使用create方法

             

        (3). 现在Teacher()prototypeconstructor属性指向的是Person(),执行以下代码,将原型中的构造器改为正确的指向。

       

         在定义新的构造函数Teacher时,我们通过function.call来调用父类的构造函数,

         但是这样无法自动指定Teacher.prototype的值,这样Teacher.prototype就只能包含在构造函数里构造的属性,而没有方法。

         因此我们利用Object.create()方法将Person.prototype作为Teacher.prototype的原型对象,并改变其构造器指向,

         使之与Teacher关联。

     

    10.字面量    

         理解起来,就是数据类型的表达形式,比如用双引号引起来的就是字符串,而不是别的类型。

         https://www.cnblogs.com/radius/p/6874165.html

        (1). 数字的字面量,就是这个数字自己    //9 

              JavaScript中,数字的字面量可以有三种进制:

                    10进制:普通的数字就是十进制

                     8进制:如果以0开头、或者以0o开头、或者以0O开头的都是八进制,八进制只能用0~7来表示

                    16进制:如果以0x开头的都是十六进制。

              小数的字面量也很简单,就是数学上的点。计算机世界中,小数称为“浮点数”。

              允许使用e来表示乘以10的几次幂      //5e5 500000

              Infinity 无穷大

              NaN 英语全名叫做not a number,不是一个数。比较哲学的是,这个“不是一个数”是一个数字字面量。

       (2). 字符串,用双引号、单引号包裹起来。字符串被限定在同种引号之间;也即,必须是成对单引号或成对双引号。

              转义字符,\n  回车换行     \t   tab缩进

              正常情况下,引号内部可以有不同种的引号,比如双引号里面可以有单引号  // "老师说你像'考拉'一样漂亮"

              可以用转义字符,转义引号,或转义自己     // "老师说你像\"考拉\"一样漂亮"     //  "c:\\a\\b.jpg"

       (3). 数组 [ ]

       (4). 对象 { }

    与 字面量创建 不同的是,用构造函数创建,例如 new Object()    new Array() 

    用字面量比用构造函数好的地方是,构造函数不知道有没有被修改过。

    11.对象

     (1). 创建对象的4种方法

               ① 声明一个对象的语法

                        var a = {};

                        var b = { name:"Bob", age:18};

               ② 使用自定义构造函数

                        var Fg= new Abc();

               ③ Object() 构造函数

                        var c = new Object();

                        var d = new Object({
                                           name : 'Chris',
                                           age : 38,
                                           greeting : function() {
                                              alert('Hi! I\'m ' + this.name + '.');
                                            }
                                      })

                      这样创建的是没有名字的对象? 用自定义的构造函数实例化的实例是有名字的对象?

               ④ create() 方法

                       var Fg2 = Object.create(Fg);

    问题

    1.对象的属性取出有2种方法?

    2.数组

    3.字符串中可以包含一个引号,不然,就用转义字符

    4.push方法可向数组末尾添加1个或多个元素,并返回新的长度。

       pop方法删除数组最后一个元素,并返回被删除的元素。

       unshift和shift方法同push和pop方法,他们作用与数组的开头。

    5.value都可以取谁的值?input?p?

       http://www.w3school.com.cn/jsref/prop_attr_value.asp

    6.定义变量没赋值 和 没定义变量

    7.toString()既能把数字转化成字符串,也能把数组转化为字符串。

    8.replace()只能替换字符串中找到的第一个要替换的字符,并替换。并不是把所有能找到的都替换了。要想替换所有,可以与     

       indexOf()配合循环替换下。

    9.字符串分割成数组split(',') 和 数字变成字符串 join(',')     toString()

    10.赛选数组的3种方法

    (1).先筛选分组,后处理末尾

    (2).定义j=0,k=0 在循环时,遇到不欢迎的,j++,欢迎的 k++ 当是Phil或Lola j==2时,末尾加。当k==length-2时,末尾加。

    (3).用join()把它变成字符串,replace(",Phil","") 再 replace(",Loal","") 拒接名单,在join()后indexOf(Phil),如果有就添加,同理。

    11.值变化事件怎么用 

         https://developer.mozilla.org/zh-CN/docs/Web/Events

         https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Events/ValueChange

    12.事件冒泡 事件捕获 事件委托  https://davidwalsh.name/event-delegate

         事件监听 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

         关于阻止冒泡,在触发事件的元素父项有绑定事件时,需要阻止冒泡,如果父元素没有绑定事件,就不用阻止冒泡。

         event.stopPropagation();

    13.判断 任何不是 falseundefinednull0NaN 的值,或一个空字符串('')在作为条件语句进行测试时实际返回true。

    14.switch(true){}  一定要写break

        例1:  这是个失败的例子,因为没有写break,开始以为可以一直判断下去,但是错了,除了第一个判断,

                     其他的判断都被忽略了,只是一直向下执行,打印出的数组有5个值。结论,break是必须的。

                     把break换成continue也是错的。

    var fruits =  "applebananapairorange";
    var toF=[];
    (function(){
        switch(true){
            case fruits.indexOf("apple")>=0 :
                toF.push("apple");
            case fruits.indexOf("banana")>=0 :
                toF.push("banana");
            case fruits.indexOf("case")>=0 : 
                toF.push("case");
            case fruits.indexOf("pair")>=0 :
                toF.push("pair");
            case fruits.indexOf("orange")>=0 :
                toF.push("orange");
        }
        console.log(toF);
    })();

        例2:这样用比用if else 看着简洁

    var num = 25;
    switch (true) {
        case num < 0:
            alert("Less than 0.");
            break;
        case num >= 0 && num <= 10:
            alert("Between 0 and 10.");
            break;
        case num >= 10 && num <= 20:
            alert("Between 10 and 20.");
            break;
        default:
            alert("More than 20.");
    }

    15.  清除元素中的DOM元素   向元素添加DOM元素   设置元素的内容

          list.innerHTML = '';

          ist.appendChild(listItem);

          listItem.textContent=''

    16. for循环 break巧用

          如果不论结果是什么,都会在p元素中输入一个结果。

          这里每次循环都会在p里输入找不到,直到找到,输入找到的值,结束循环。

          这里的else是不是写的很多余不用写else{},直接 在后面加else中的内容

          

          简化例子如下

          

    17. for 晋级 循环迭代

          https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration

    18. 运算符 优先级

          https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators

    19.事件监听

           如果用addEventListener("click")增加的事件移除不掉,

           就换成事件处理程序属性onclick,这样从新赋值,就把之前的点击事件去掉了。

    20.Function构造函数创建函数对象

        函数构造器https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function

        与函数表达式 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/function

        与函数声明 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function

        的差异。

    const adder = new Function("return 5");
    adder();
    // 返回 => 5

    这相当于

     (function anonymous() {
         return 5
      })

    参数并不是必须的,参数和函数体必须是字符串。

    测试2种错误写法:

    用JavaScript语句做参数:var sum4 = new Function('return 5','console.log(7)');

       相当于  (function anonymous(return 5) {
                        console.log(7);
                    })
    用数字做参数:var sum5 = new Function('5','console.log(7)');

       相当于(function anonymous(5) {
                        console.log(7);
                  })

     

    对象自带的属性  http://lzw.me/pages/ecmascript/#282

    window对象自带的属性

    函数自带属性

    数自带属性

    字符串自带属性

    展开全文
  • ES5和6的一些新特性

    2019-11-08 16:31:52
    ES5和6的一些新特性 更详细的大家参考:阮一峰的ES6教程 1.1.let 和 const 命令 var之前,js定义变量只有一个关键字:var var有一个问题,就是定义的变量有时会莫名奇妙的成为全局变量。 例如这样的一段代码: for...

    ES5和6的一些新特性

    更详细的大家参考:阮一峰的ES6教程

    1. 直接挂window下面

    c=0
    

    1.1.let 和 const 命令

    var之前,js定义变量只有一个关键字:var

    var有一个问题,就是定义的变量有时会莫名奇妙的成为全局变量。变量声明自动提前

    例如这样的一段代码:

    for(var i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("循环外:" + i)
    

    你猜下打印的结果是什么?

    在这里插入图片描述

    let所声明的变量,只在let命令所在的代码块内有效。

    我们把刚才的var改成let试试:

    //let 定义的局部变量
    for(let i=1;i<=5;i++){
        console.log(i);
    }
    //let定义的是局部变量,所以在循环体外就无法获取该变量,系统就会报错
    console.log(i);
    

    const

    const声明的变量是常量,不能被修改

    面试题:请你说说var、let、const的区别?

    答:var是比较老的版本的es中定义变量的关键字,他会将变量串为全局变量

       let是es6中新增的关键字,定义局部变量
    
      const是定义常量
    

    1.2.字符串扩展

    string的原始的方法有哪些?

    • indexOf:返回字符串的索引

    • lastIndexOf:返回字符串的最后的索引

    • length:获取字符串长度

    • substr(i,v):从第i个索引开始截取v个长度的字符

    • substring(i,v):从第i个位置截取到第v个位置(不包含v)

    • charAt(i):获取第i个位置的字符

    • concat:字符串连接

    新的API

    ES6为字符串扩展了几个新的API:

    • includes():返回布尔值,表示是否找到了参数字符串。
    • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

    实验一下:

    字符串模板 --代码得写到页面中

    ES6中提供了`来作为字符串模板标记。我们可以这么玩:

    最终效果

    在两个`之间的部分都会被作为字符串的值,不管你任意换行,甚至加入js脚本

    1.3.解构表达式

    数组解构

    比如有一个数组:

    let arr = [1,2,3]
    

    我想获取其中的值,只能通过角标。ES6可以这样:

    const [x,y,z] = arr;// x,y,z将与arr中的每个位置对应来取值
    // 然后打印
    console.log(x,y,z);
    

    例如有个person对象:

    const person = {
        name:"jack",
        age:21,
        language: ['java','js','css']
    }
    

    我们可以这么做:

    // 解构表达式获取值
    const {name,age,language} = person;
    // 打印
    console.log(name);
    console.log(age);
    console.log(language);
    
    • {name:n}:name是person中的属性名,冒号后面的n是解构后要赋值给的变量。

    1.4.函数优化-函数的简写方式

    函数参数默认值

    在ES6以前,我们无法给一个函数参数设置默认值,只能采用变通写法:

    写法一:

    function add(a,b) {
        if(!b){
            b=1
        }
        return a+b;
    }
    console.log(add(10))
    

    写法二:

        function add(a , b) {
            // 判断b是否为空,为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));
    

    现在可以这么写:

    function add(a , b = 1) {
        return a + b;
    }
    // 传一个参数
    console.log(add(10));
    
    // 定义一个加法的方法,传入两个参数a,b,计算a+b的结果,并返回 ;如果b为空,则给b赋默认值1
    //传统做法
    function add1(a,b) {
        if(b==null){
            b=1;
        }
        return a+b;
    }
    
    //传统改进写法一
    function add2(a,b) {
        // 当b的值为null或者undefined的时候,返回结果为false
        if(!b){
            b=1;
        }
        return a+b;
    }
    
    // 传统改进写法二
    function add3(a,b) {
        b = b || 1;//当b不为空的时候,就直接参加计算,当为空的时候,赋值为1
        return a+b;
    }
    
    // 改进写法
    function add4(a, b = 4) {
        return a+b;
    }
    

    箭头函数

    ES6中定义函数的简写方式:

    一个参数时:

    var print = function (a) {
        console.log(a);
    }
    // 简写为:
    var print = a => console.log(a);
    
    // 等号后面的称为  匿名函数
    var print1 = function (a) {
        return a+10;
    }
    
    // 采用箭头函数如何表示
    var print2 = a =>{
        return a+10;
    }
    // 当只有一行代码的时候,可以不需要{},同时不需要return关键字
    var print3 = a => a+10;
    

    多个参数:

    // 两个参数的情况:
    var print = function (a , b) {
        return a + b;
    }
    // 简写为:
    var print = (a,b) => a+b;
    

    代码不止一行,可以用{}括起来

    var print = (a,b) => {
        return a + b;
    }
    
    /***********一个参数使用箭头函数************/
    /*********当使用了箭头函数之后,可以少写代码**********/
    function print1(a){
        return a+1;
    }
    
    // 匿名函数
    var print2 = function (a) {
        return a+1;
    }
    
    // 箭头函数
    var print3 = a => {
        return a+1;
    }
    // 在箭头函数的大括号中,如果只有一行输出代码,那么大括号和return都可以省略
    var print4 = a => a+1;
    
    /************多个参数使用箭头函数*************/
    var print5 = function (a,b) {
        return a+b;
    }
    
    var print6 = (a,b) => a+b;
    

    对象的函数属性简写

    比如一个Person对象,里面有eat方法:

    let person = {
        name:"lucy",
        eat1:function (food) {
            console.log(this.name+"1正在吃"+food);
        },
        eat2: food => console.log(this.name+"2正在吃"+food),// 在这种情况下,无法通过this访问name
        eat3(food){
            console.log(this.name+"3正在吃"+food)
        },
        eat4: food => console.log(person.name+"4正在吃"+food),// 在这种情况下,无法通过this访问name
    
    }
    

    数组中新增了map方法。

    map

    map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。

    举例:有一个字符串数组,我们希望转为int数组

    let arr = ['1','20','-5','3'];
    console.log(arr)
    
    arr = arr.map(s => parseInt(s));
    
    console.log(arr)
    
    展开全文
  • ES5,ES6入门重点

    千次阅读 2019-03-25 13:32:39
    ES5,ES6入门重点 引言:ES5,ES6在高级框架如Vue,React,Angular框架具有很好的支持,在某些不支持ES6语法的浏览器中也可以通过Babel转码器把ES6转为ES5语法,所以可以放心使用ES6语法 在开发环境中可能会用到的...

    引言:ES5,ES6在高级框架如Vue,React,Angular框架具有很好的支持,在某些不支持ES6语法的浏览器中也可以通过Babel转码器把ES6转为ES5语法,所以可以放心使用ES6语法

    在开发环境中可能会用到的操作:

    • 赋值操作
    • 字符串操作
    • 判断操作
    • 常用数组操作
    • 常用对象操作
    • for循环

    ES6

    1.变量的解构赋值

    基本用法

    ES6 以前的用法

    var a=1;
    var b=2;
    var c=3
    

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

    let [a,b,c]=[1,2,3];
    

    高级用法

    (1).默认值

    //解构赋值允许指定默认值
    let [foo=true] = []; //true
    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
    

    (2).对象解构赋值

    // 不用按次序,但是要名相同
    let {foo,bar} = {bar:'World',foo:'Hello'}
    console.log(foo+bar) //HelloWorld
    //如果解构前,已经定义了变量,需要在解构的语句外面加一个圆括号
    let foo;
    ({foo}={foo:'Hello1'})
    

    (3).从函数返回多个值

    //返回数组
    function example(){
    return [1,2,3]
    }
    let [a,b,c]=example();
    // 返回一个对象
    function example() {
    return {
    foo: 1,
    bar: 2
    };
    }
    let { foo, bar } = example();
    

    (4).提取JSON数据

    let jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
    };
    //data: number, key值重命名
    let { id, status, data: number } = jsonData;
    console.log(id, status, number);
    // 42, "OK", [867, 5309]
    

    错误用法

    //等号右边不等与数组或右边不是可遍历的结构就会报错
    let [a]=1;
    let [a]=false;
    let [a]={};
    ...
    

    2.字符串操作

    (1).字符串是否包含

    传统使用indexOf()判断是否包含

    • -includes(str,number):返回布尔值,表示是否找到了参数字符串。
    • -startsWith(str,number):返回布尔值,表示参数字符串是否在原字符串的头部。
    • -endsWith(str,number):返回布尔值,表示参数字符串是否在原字符串的尾部。
    let s = 'Hello world!';
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    s.includes('o') // true
    //第二个参数
    s.endsWith('Hello', 5) // 返回true,搜索前5个字符
    //即
    s.endsWith('Hello', 5)==’Hello’.endsWith('Hello')
    s.includes('Hello',6)  //返回false,从第6个字符传开始搜索
    //即
    s.includes('Hello',6)==' world!'.includes('Hello');
    

    注意:endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

    (2)字符串重复
    str.repeat(param);尽量使用大于0的整数,详情可参考语法标准

    let str='x'.repeat(3);
    console.log(str); //xxx
    

    3.判断操作

    (1)数字判断
    模块化的思想,正常可以使用isNaN判断

    //NaN验证 NaN是特殊的非数字
    console.log(Number.isNaN(NaN)) //true
    // 判断是否为整数
    console.log(Number.isInteger(123.4)) //false
    

    4.数组操作

    Array.from

    Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

    let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3 //必须
    };
    let array1 = Array.from(arrayLike); // ['a', 'b', 'c']
    

    Array.of

    Array.of方法用于将一组值,转换为数组

    Array.of(3, 11, 8) // [3,11,8]
    Array.of(3) // [3]
    Array.of(3,11,8).length //直接获取数组长度
    

    数组用法

    (1)数组唯一
    Array.from(new Set(array));

    let array1=Array.from(new Set([1,1,1]));//[1]
    //不支持对象数组,错误的用法
    let array2=Array.from(new Set([{x:1},{x:1}]));//[{x:1},{x:1}]
    let array3=Array.from(new Set([1,'1'}]))//[1,'1']不同类型不能去重
    

    (2)字符串转数组

    'abc'.split(''); //[a,b,c];
    Array.from('abc');//[a,b,c];
    

    (3)判断数组是否包含

    [1, 2, 3].includes(2) //返回true
    //传统
    if(array.indexOf(2)!==-1){
    doSomething();
    }
    //es2016
    if(array.includes(2)){
    doSomething();
    }
    

    (4)数组查找
    Array.find(func)方法返回第一个符合条件的数组元素,没有符合条件返回undefined

    [1,2,3,4].find(function(item){
    return item>2;
    }) //3
    

    (5)数组索引位置查找Array.find(func)方法返回第一个符合条件的数组元素索引,没有符合条件返回-1

    const index=[1,2,3,4].findIndex(function(item){
    return item>5;
    })
    console.log(index)//-1
    

    for循环

    (1)【ES5语法】for in
    不建议用于数组遍历,数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。不能保证for … in将以任何特定的顺序返回索引。for … in循环语句将返回所有可枚举属性,包括非整数类型的名称和继承的那些。参考连接

    //不建议用于数组遍历
    const array=[1,2,3,4];
    for(const x in array){console.log(array[x]);}
    
    //遍历对象,注意原型污染,使用hasOwnProperty函数,
    //hasOwnProperty函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false,该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。
    Object.prototype.value=3;
    const object={x:1,y:2};
    for(const x in object){
    if(object.hasOwnProperty(x)){
    console.log(object[x]);
    }
    }
    

    (2)【ES6语法】for of
    for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环,以替代 for…in 和 forEach() ,并支持新的迭代协议。for…of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。注意:不可遍历对象,如需遍历对象需要结合Object.keys(someObject)使用

    const string="abc";
    const array=[1,2,3,4];
    for(const item of string){
    console.log(item);//a b c
    }
    for(const item of array){
    console.log(item); //1234,直接返回值,而不是索引,注意与for in 区别
    }
    for(const item of array){
    console.log(item); //1
    break; //可以退出迭代
    }
    for(const item of array){
    continue;   //继续
    console.log(item);  //将不会输出任何东西
    }
    

    (3)优化版for循环
    使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。这种方法基本上是所有循环遍历方法中性能最高的一种

    for(let i = 0,len=arr.length; i < len; i++) {
      console.log(arr[i]);
    }
    

    (4)map循环
    比如返回对象数组的某个值,组成新数组

    const users = [
    {name: "张含韵", "email": "zhang@email.com"},
    {name: "江一燕", "email": "jiang@email.com"},
    {name: "李小璐", "email": "li@email.com"}
    ];
    //传统方法
    const email=[];
    for(const i=0;i<users.length;i++){
    email.push(users.email);
    }
    //map方法
    const emails2 = users.map(function (user) { return user.email; });
    

    (5)forEach循环
    缺点不能break,但可以return false中止循环,效率第二

    const arr = [1, 2, 3];
    arr.forEach((item, index, arr) => { // item为arr的元素,index为下标,arr原数组
    console.log(item); // 1, 2, 3
    console.log(index); // 0, 1, 2
    console.log(arr); // [1, 2, 3]
    });
    //中止循环
    arr.forEach(item=>{
    if(item==2){
    return false;
    }
    })
    

    (6)some
    判断数组重是否有元素符合某条件,如符合返回true,不符合返回false

    const arr = [1, 2, 3];
    //传统
    let isFlag=false;
    for(let i=0;i<arr.length;i++){
    if(arr[i]===2){
    isFlag=true;
    break;
    }
    }
    console.log(isFlag);//true
    //some
    const isFlag2=arr.some((item, index, arr) => { // item为数组中的元素,index为下标,arr为目标数组
    return item===5;
    })
    console.log(isFlag2);//false
    

    (7)every
    判断数组所有元素是否都符合某条件,如全符合返回true,不全符合返回false

    const arr = [1, 2, 3];
    arr.every((item, index, arr) => { // item为数组中的元素,index为下标,arr为目标数组
    return item > 0; // true
    return index == 0; // false
    })
    

    (8)filter
    根据条件过滤,返回新的数组,vue中已经熟练使用了

    const newArray=[1,2,3,4].filter(item=>{
    return item>2;
    })
    console.log(newArray); //[3, 4]
    

    总结:数组操作的几个方法,PHP中也有,应减少使用for(let i=0;i<array.length;i++)

    常用数组操作整合

    ES5

    (1)判断是否为数组

    value instanceof Array //如果来自不同全局执行环境将无法真确解析,如浏览器环境,node.js环境
    Array.isArray(arr) //IE9+
    

    常用对象操作整合

    (1)【ES5语法】Object.keys()获取对象本身(不包括原型链上的属性)的键名
    Object.keys():返回一个由给定对象的所有可枚举自身属性的属性名组成的数组,数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致(两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性)。

    const o = {a:1, b:2,c:3};
    Object.keys(o) // ["a", "b", "c"]
    

    (2)【ES5语法】删除对象某个属性参考链接

    const user={id:1,name:'zhu','created_at':'2018-11-12'};
    console.log(user);//{id: 1, name: "zhu", created_at: "2018-11-12"}
    delete user.created_at; //或者 delete user['created_at'];
    console.log(user);//{id: 1, name: "zhu"}
    
    //错误用法,严格模式下会报错
    const user='1';
    delete user;
    console.log(user);
    

    常用判断注意事项

    Number.isInteger('100')
    //false,即字符串为false,如Number.isInteger($('#dom').text())就有可能为false,慎用
    
    Number.isInteger(NaN) //false
    
    const array=[],object={};
    if(array){console.log('[]为真')}
    if(object){console.log('{}为真')}
    
    if(-1){console.log('负数为真')}
    if([]==[]){console.log('相等')}//不相等
    if(null==undefine){console.log('相等')}
    if(null==0){console.log('相等')} //不相等
    if(undefined==0){console.log('相等')} //不相等
    if(undefined===void 0){console.log('全等')} //使用void 0可以节省字符,undefined在某些浏览器可以被重写,所以都建议用void 0判断
    let test=[]
    while(test){
    console.log('死循环,因为if([])为真,一直输出,所以数组应该慎用while循环');
    }
    while(test==[]){
    console.log('test==[]永远为false,不会输出');
    }
    

    参考链接:

    [1]http://es6.ruanyifeng.com/#docs/object
    [2]https://blog.csdn.net/huhao0829/article/details/79315457
    [3]http://www.sohu.com/a/256702171_647584

    展开全文
  • ES5

    2019-06-05 17:30:24
    1:ES5简介 ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正。 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。 2:严格模式简介...

    1:ES5简介

    ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准修正。 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。

    2:严格模式简介

    除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。

    设立"严格模式"的目的,主要有以下几个:

    1:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。

    2:消除代码运行的一些不安全之处,保证代码运行的安全。

    3:提高编译器效率,增加运行速度。

    4:为未来新版本的Javascript做好铺垫。

    "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。

    3:进入严格模式

    进入“严格模式”的标志,书写这行语句:"use strict";

    老版本的浏览器会把它当作一行普通字符串,加以忽略。

    'use strict'

    a = 2;

    console.log(a);

     

    4:如何调用严格模式

    "严格模式"有两种调用方法,适用于不同的场合。

    针对整个脚本文件:将"use strict"放在脚本文件的第一行,则整个脚本都将以"严格模式"运行。如果这行语句不在第一行,则无效,整个脚本以"正常模式"运行。如果不同模式的代码文件合并成一个文件,这一点需要特别注意。

    针对单个函数:将"use strict"放在函数的第一行,则整个函数以"严格模式"运行。

    脚本文件的变通写法:因为第一种调用方法不利于文件合并,所以更好的做法是,借用第二种方法,将整个脚本文件放在一个立即执行的匿名函数之中。

    // a.js

    'use strict';

    var a = 4;

    var b = 3;

    console.log(a + b);

    // b.js

    c = 2;

    d = 9;

    console.log(c + d);

    a写的代码设置了严格模式,会影响b写的代码

    解决方案:

    // a.js

    (function (){

    'use strict';

    var a = 4;

    var b = 3;

    console.log(a + b);

    })();

    // b.js

    (function(){

    c = 2;

    d = 9;

    console.log(c + d);

    })();

    5:严格模式改变语法和行为

    严格模式对Javascript的语法和行为,都做了一些改变。

    1:全局变量显式声明。

    在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。因此,严格模式下,变量都必须先用var命令声明,然后再使用。

    2:函数形参不允许重复。

    3:禁止使用with语句。

    4:禁止函数内部this关键字指向全局对象,this指向undefined。

    5:函数必须声明在顶层。

    将来Javascript的新版本会引入“块级作用域"。为了与新版本接轨,严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说,不允许在非函数的代码块内声明函数。

    // if(1){function a(){}} else {function a() {}}

    6:ES5新增函数方法

    注:新增方法IE6/7/8均不支持。

    讲解this变量的两种使用场景。

    1:bind方法:改变了函数内部上下文的this。返回值是函数。在调用返回函数时,传入的实参是在bind中传入参数的基础上往后排的。

     

    // this

    // this是函数内部默认内置的一个变量

     

    1:全局变量中,this指向的是window

    console.log(this);

    2:在函数内部,this指向的是window

    function sum(){

    console.log(this);

    }

    sum();

       3:在方法内部,this指向的是方法的拥有者

    var obj = {

    name:'张三',

    introduce: function(){

    console.log(this.name);

    }

    };

    obj.introduce();

     

    // bind方法

    // 函数身上的方法,返回值是一个内部this变量值发生变化的方法

    var name = '张三';

    function hello(){

    var name = '李四';

    console.log(this.name);

    }

    hello.bind();

    var newHello = hello.bind();

    newHello();

    7:ES5新增数组方法

    1:forEach方法:遍历数组。第二个参数为可选的上下文参数(改变this指向)。

     

    forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。forEach不会遍历空位置的内容。如:[1, , 3],只会遍历1和3。

    var arr = [1,2,3,4];

    arr.forEach(function(v,k,arr){

    console.log(v,k,arr);

    });

    2:map方法:将数组映射成新数组。回调函数需要有返回值。

     

    var arr = [2,6,4,8];

    var newArr = arr.map(function (v){

    return v * 2;

    });

    console.log(newArr);

    3:filter方法:指数组过滤后,返回过滤后的新数组。 filter的callback函数需要返回布尔值true或false。

    var arr = [4,5,6,7];

    var newArr = arr.filter(function (v){

    if(v > 5){

    return true;

    }else {

    return false;

    }

    });

    console.log(newArr);

    4:some方法:指是否“某些项”合乎条件。返回布尔值。只要数组中有一项符合条件,则返回true。

     

    var arr = [5,9,6,8];

    var newArr = arr.some(function (v){

    if(v > 6){

    return true;

    }else {

    return false;

    }

    });

    console.log(newArr);

    5:every方法:所有项都必须合乎条件。返回布尔值。

    语法:array.every(callback, [ thisobject]); 必须每一项都要符合条件,否则返回false。

    var arr = [3,4,5,6];

    var bool = arr.every(function (v){

    if(v > 0){

    return true;

    }else {

    return false;

    }

    });

    console.log(bool);

    6:indexOf方法:返回整数索引值,如果没有匹配(严格匹配),返回-1。 fromIndex可选,表示从这个位置开始搜索,若缺省或格式不合要求,使用默认值0。

    var arr = [2,3,4,5];

    var iIndex = arr.indexOf(-3);

    console.log(iIndex);

    7:lastIndexOf方法:从数组的末尾开始查找,而不是从开头。还有一个不同就是fromIndex的默认值是array.length - 1而不是0。

    var arr = [2,3,4,5,3,4,5,6,7];

    var iIndex = arr.lastIndexOf(3);

    console.log(iIndex);

    8:reduce方法:归并。递归减少。

    callback函数接受4个参数:之前值、当前值、索引值以及数组本身。initialValue参数可选,表示初始值。若指定,则当作最初使用的previous值;如果缺省,则使用数组的第一个元素作为previous初始值,同时current往后排一位,相比有initialValue值少一次迭代。

    案例:

    解析:

    var arr = [1,2,3,4];

    var result = arr.reduce(function (previous,current,index,arr){

    return previous + current;

    });

    console.log(result);

    说明:

    1:因为initialValue不存在,因此一开始的previous值等于数组的第一个元素。

    2:从而current值在第一次调用的时候就是2。

    3:最后两个参数为索引值index以及数组本身array。

    9:reduceRight方法:和reduce用法类似,实现上差异在于reduceRight是从数组的末尾开始实现。

    案例:

      

    说明:

    10:Array.isArray():判断一个变量是否为数组。

    var obj = [];

    console.log(Array.isArray(obj));

    11:ES5新增字符串方法

    trim方法:去除字符串首尾的空白字符。

    var str = ' hello world ';

    console.log(str.trim());

    12:ES5新增JSON对象方法

    1:JSON.parse:将一个JSON格式的字符串转换成对象。

    var str = '{"name":"张三"}';

    console.log(JSON.parse(str));

    2:JSON.stringify:将对象转换成JSON格式的字符串。

    var obj = {name:'张三'};

    console.log(JSON.stringify(obj));

    13:字符串

    JS中的任何数据类型都可以当作对象来看。所以string既是基本数据类型,又是对象。

    14声明字符串

    var sStr = ‘字符串’;

    var oStr = new String(‘字符串’);

    15:字符串属性

    1.length

          计算字符串的长度(不区分中英文)。

    var str = 'hello world';

    console.log(str.length);

    2.constructor

    对象的构造函数。

    var str = 'hello world';

    console.log(str.constructor);

    16:字符串方法

    1.myStr.charAt(num)

    返回在指定位置的字符。  

    var str = 'hello world';

    console.log(str.charAt(4));

    2.myStr.charCodeAt(num)

    返回指定位置的字符的Unicode(是字符编码的一种模式)编码。

    var str = 'hello world';

    console.log(str.charCodeAt(4));

    3.String.fromCharCode()

    String的意思就是不能用自己定义的字符串名字来调用,例如定义一个变量字符串 var str="";只能用String来定义调用。接受一个或多个指定的Unicode值,然后返回一个或多个字符串。(把unicode编码转换为字符串)。

    var str = 'hello world';

    console.log(String.fromCharCode(107));

    4.myStr.indexOf()

    返回某个指定的字符串,在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。第二个参数指定开始查找的起始位置。

    var str = 'hello world';

    console.log(str.indexOf('r'));

    5.myStr.lastIndexOf()

    返回一个指定的字符串值最后出现的位置,如果要检索的字符串值没有出现,则该方法返回 -1。第二个参数指定开始查找的起始位置,只能指定正数。

    var str = 'hello world';

    console.log(str.lastIndexOf('l'));

    6.myStr.match()

    在字符串中检索指定的值,返回的值是数组。如果匹配不到返回null。配合正则来用。

    var str = 'hello world';

    console.log(str.match('ll'));

    7.myStr.search()

    返回出现的位置,查找不到返回-1。配合正则来用。

    var str = 'hello world';

    console.log(str.search('ll'));

    8.myStr.replace(“需替换的字符串”,“替换后的字符串”)

    将字符串中的一些字符替换为另外一些字符。配合正则使用。

    var str = 'hello world';

    console.log(str.replace('ll','**'));

    9.myStr.slice(start,end)

    从指定的开始位置,到结束位置(不包括结束位置)的所有字符串。如果不指定结束位置,则从指定的开始位置,取到结尾。注意的是,myStr.slice() 与 myArr.slice() 相似。

    var str = 'hello world';

    console.log(str.slice(2,5));

    10.myStr.substring(start,end)

    从指定的开始位置,到结束位置(不包括)的所有字符串。如果不指定结束位置,则从指定的开始位置,取到结尾。

    var str = 'hello world';

    console.log(str.substring(2,7));

    11.substr(start,length)

    从指定的位置开始取指定长度的字符串。如果没有指定长度,从指定开始的位置取到结尾。 ECMAscript 没有对该方法进行标准化,因此反对使用它

    如果substr的start指定为负数,则该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。

    var str = 'hello world';

    console.log(str.substr(2,7));

    ——————————   slice(start,end)  vs  substring(start,end)   ————————————

    slice参数可以是负数,如果是负数,从-1开始指的是字符串结尾。

    substring参数是负数的时候,会自动转换为0。

    —————————————————————————————————————————————

    12.split("分割位置",[指定的长度])

    将一个字符串分割成数组。

    var str = 'a=b&c=d&e=f';

    var arr = str.split('&');

    console.log(arr);

    13.toLowerCase()

    用于把字符串转换为小写。

    var str = 'Hello World';

    console.log(str.toLowerCase());

    14.toUpperCase()

    将字符串转换为大写。

    var str = 'Hello World';

    console.log(str.toUpperCase());

    17ASCII码和字符集

    ASCII:American Standard Code for Information Interchange,美国信息交换标准代码。

    Unicode编码

    Unicode(统一码、万国码、单一码)是计算机科学领域里的一项业界标准,包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。 Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个字符。

    如汉字"经"的编码是0x7ECF,注意字符码一般用十六进制来 表示,为了与十进制区分,十六进制以0x开头,0x7ECF转换成十进制 就是32463,UCS-2用两个字节来编码字符,两个字节就是16位二进制, 2的16次方等于65536,所以UCS-2最多能编码65536个字符。

    GBK编码

    GBK全称《汉字内码扩展规范》(GBK即“国标”、“扩展”汉语拼音的第一个字母,英文名称:Chinese Internal Code Specification)。GBK 向下与GB2312编码兼容,向上支持 ISO 10646.1国际标准,是前者向后者过渡过程中的一个承上启下的产物。

    UTF-8编码

    UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。 UTF-8用1到4个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言(如英文,日文,韩文)。

     

    展开全文
  • ES5知识点

    2018-09-15 22:08:36
    1.严格模式: 使得Javascript在更严格的语法条件下运行,目的是消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为  消除代码运行的一些不安全之处,为代码的安全运行保驾护航,为未来新版本的...
  • es6新特性

    千次阅读 2019-03-29 16:15:40
    ES6语法 const 与 let 变量 使用var带来的麻烦: function getClothing(isCold) { if (isCold) { var freezing = 'Grab a jacket!'; } else { var hot = 'It's a shorts kind of day.';... ...
  • JavaScript-ES6新特性

    2019-03-23 17:31:19
    1.ES6中的常量写法 // 常量命名 const PI = 3.1415926 console.log(PI); // 作用域 const callbacks = []; for(var i = 0; i<= 3;i++){ callbacks[i] = function(){ return i*2 ... c...
  • es6新特性分享

    2018-04-28 09:41:35
    1、字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:includes()/startsWith()/endWith()返回bool值includes => 是否包含字符startsWith => 首字母是否包含字符endWith => 末尾是否...
  • ES5&ES6新特性

    千次阅读 2018-12-06 20:07:03
    ES5和6的一些新特性 1、let和const var有一个问题,就是定义的变量有时会莫名奇妙的成为全局变量。 for(var i = 0; i &lt; 5; i++){ console.log(i); } console.log("循环外:" + i)   1、...
  • ES5与ES6的对比不同点

    万次阅读 2017-03-17 11:08:16
    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不...
  • es6转es5的在线工具

    万次阅读 2018-12-14 21:51:16
    有时自己写的带有es6语法的js不能执行,但是偷懒找个在线工具 https://babeljs.io/en/repl.html 有可能需要翻墙才能访问
  • 1.Babeljs,在线转换地址 2.es6console, 在线转换及运行
  • 模板字符串必须用 `` 包含 变化的部分用 ${xyz}定义 <script type="text/javascript"> let obj={name:'bob',age:18} let str=`姓名:${obj.name},年龄:${obj.age}` console.log(str) ...
  • webpack - 如何把es6编译成es5

    千次阅读 2016-12-12 20:48:13
    目录: 配置: 需要说明的地方: 如果不用es2016,es2017,是不需要babel-preset-es2016,babel-preset-es2017,babel-polyfill模块,index.js无须require("babel-polyfill")
  • ES6代码转为ES5代码babel在线转换

    千次阅读 2018-11-28 14:08:07
    ES6代码转为ES5代码babel在线转换 es6转es5还是很有用的。有的时间项目不大,不用配置webpack,就是个单页文件,又想用es6语法,写完可以直接转换一下就OK了。快捷方便。 https://www.babeljs.cn/repl/ ...
  • 今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈。下面附上流程创建个文件夹,初始化一下,首先全局安装webpacknpm install webpack -g然后安装babelnpm install --save-dev babel-core ...
  • VUE es6转es5

    千次阅读 2019-03-04 13:37:01
    转载: Vue2.0 ES6语法降级ES5 由于部分低版本的手机还不支持ES6语法,将会导致vue报错。综合了网上的各种办法,我的项目现在终于成功降级ES5. 首先安装插件 npm install -D babel-preset-es2015 babel-core ...
  • es5 es6 互相转换

    千次阅读 2017-09-06 08:49:43
    新建项目,dist存放ES6格式的,src存放ES5格式的,如下index.html内容,此处引用dist中的js2.打开终端(ctrl + · ) npm需要安装,安装node即可。node.js安装以及配置环境变量 自动生成一个文件 package.json此时...
  • 在使用rollup + babel打包ES6代码时老是报错: resolve failed: { Error: Cannot find module 'babel-runtime' ... Error transforming ***.js with 'babel' plugin: It looks like your Babel configuration ...
  • 微信小程序开发ES6转ES5的深坑

    千次阅读 2019-05-15 16:24:10
    本人是小程序入门开发者,由于最近刚入门所以是避免不了踩到深当中,今天这个ES6转ES5就困扰了我半天,话不多说进入正题。 由于开发需要用了 wxParse(是一个专门解析后台返回的富文本(html格式的数据)) ,根据文档...
1 2 3 4 5 ... 20
收藏数 57,952
精华内容 23,180
关键字:

es5