ECMAScript常用操作有哪些

本篇内容主要讲解"ECMAScript常用操作有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"ECMAScript常用操作有哪些"吧!

ECMA(European Computer Manufacturers Association)

ECMA(前身为欧洲计算机制造商协会)指定和发布的脚本语言规范JS包含三个部分：        1.ECMAScript(核心)        2.扩展==浏览器端                1.BOM(浏览器对象模型)                2.DOM(文档对象模型)        3.扩展==服务器端            1.NODEES几个重要的版本        ES5：09年发布        ES6（ES2015）：15年发布        ES7（ES2016）：16年发布前端几个好用的浏览器插件：        FE前端助手：可以自动化格式Chrome浏览器的json数据  

严格模式：

除了正常运行外（混杂模式），ES5添加了第二种运行模式："严格模式"(script mode)这种模式使得javascript在更严格的语法条件下运行使用：        在全局或函数的第一条语句定义为：'use script'        如果浏览器不支持，只解析为一条简单的语句，没有任何副作用        语法和行为改变：        必须用var声明变量        禁止自定义的函数中的this指向window        创建eval作用域。会解析传入的字符串，让解析器执行        对象不能有重名的属性

json对象的扩展

1.JSON.stringify(obj/arr)        js对象（数组）转换为json对象（数组）2.JSON.parse(json)        json对象（数组）转换为js对象（数组）

数组扩展

1.Array.prototype.indexOf(value)        -- 得到值在数组中的第一个下标2.Array.prototype.lastIndexOf(value)        -- 得到值在数组中的最后一个下标3.Array.prototype.forEach(function(item,index){})        -- 遍历数组4.Array.prototype.map(function(item,index){})        -- 遍历数组返回一个新的数组，返回加工之后的值5.Array.prototype.filter(function(item,index){})        -- 遍历过滤出一个新的子数组，返回条件为true的值            var arr = [2,4,3,1,5,6,7,8];        arr.indexof(2):获取数组中2的下标值               //数组中的每个值都加10        var map = arr.map(function(item,index){           return item+10;         });                                //过滤大于3的数组                var filter = arr.filter(function(item,index){            return item > 3;        })              

函数的扩展

1.Function.protorype.bind(obj)        作用：将函数内的this绑定为obj，并将函数返回        call()和apply()的区别：        相同点：都是立即调用函数    不同点：call()传入的参数是一个一个的，apply()传入的参数为数组形式        var obj = {username:'kobe'}        function foo(){        console.log(this);    }        fun(); //此时调用的this为window        foo.call(obj);//此时调用的this为object    bind()和以上的区别：通常用其指定回调函数的this        绑定完this不会立即调用函数，而是将函数返回。传参方式和call()一样    var bar = foo.bind(obj);        bar();//此时调用就是obj这个对象        简化写法：foo.bind(obj)();        例如：            setTimeout(function(){            console.log(this); //此时的this是window对象        },1000);        调用bind函数可以将回调函数指定为特定对象调用            setTimeout(function(){            console.log(this); //此时的this是obj对象        }.bind(obj),1000);

let、const关键字

此处开始是ES6语法：1.let        -作用：与var类似，用于声明一个变量        -特点：在块级作用域内有效                          不能重复声明              不会预处理，不存在提升        -应用：                          循环遍历加监听              使用let取代var是趋势                            2.const                - 作用：定义一个常量                - 特点：不能修改、其他特点同let一样                - 应用：保存不用改变的数据

变量的解构赋值（对象的解构赋值）

从对象或数组提取数据，并赋值给变量（多个）1.对象解构赋值：        let {n,a} = {n:'tom',a:12};        console.log(n,a);2.数组的解构赋值        let [a,b] = [1,'guigu'];        console.log(n,a);3.函数的改变        let obj = {username:'kobe',age:39};        function foo({username,age}{            console.log(username,age);                  });        foo(obj);

模板字符串（简化拼接）

1.模板字符串必须用``(esc下面的那个)包含2.变化的部分用${xxx}定义let obj = {username:'kode',age:39};let str = '我的名字叫做：'+obj.username+'，年龄是：'+obj.age;let str2 = `我的名字叫：${obj.username},年龄是:${obj.age}`;对象的简写方式：        let username = 'kon';        let age = 39;        let obj = {        username:username,        age:age,        getName:function(){            return this.username;        }    }        let obj = {        username,       // 同名的属性可以不写        age,        getName(){      // 可以省略对象函数的function            return this.username;        }    }

箭头函数

1.箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是定义的时候处在的对象就是它的  this2.扩展理解：        1.箭头函数的this看外层的是否有函数          如果有，外层函数的this就是内部箭头函数的this，          如果没有，则this就是window        let obj = {        getName:function(){            //此处如果写箭头函数，那么所指向的是obj，因为箭头函数外层是常规函数        }    }          let obj = {        getName:() =>{            //此处如果写箭头函数，那么所指向的是window，因为箭头函数外层是箭头函数        }    }      3.场景        1.没有形参：小括号不能省略        2.只有一个形参：小括号可以省略                        let fun2 = a => console.log(a);            3.两个及以上的形参:小括号不能省略                        let fun3 = (x,y) => console.log(x,y);                        fun3(25,36);        4.函数体的情况            1.函数体只有一条语句或者表达式的时候，可以省略{}                        let fun = (x,y) => x+y; 可以省略return                        2.如果有多个语句或者表达式,{}不能省略的                let fun = function(){}简化：let fun = () => console.log('我是箭头函数');         fun();

三点运算符

rest(可变)参数：        作用：用来取代arguments，但比arguments灵活，只能最后部分形参参数                function foo(a,b){                arguments.callee();//调用此函数就等于在foo内部再一次调用自己        }        arguments:这是一个伪数组        1.此属性可以获取函数上面的实参的值                2.arguments.callee()：代表调用函数自身，代替递归使用                1.function foo(a,b){            console.log(arguments); //获取的数据为【伪数组】,无法使用foreach等方法        }        2.function(...value){            console.log(value)；//获取的值为【真数组】，可以使用foreach方法        }        foo(2,3);        //灵活性改变，如果存在占位符a，那么剩下的数字就会存入到...value数组中        3.function foo(a,...value){            console.log(value);  // 10,11,12,13        }        foo(3,10,11,12,13);使用三点运算符，可以灵活使一个数组插入另一个数组，默认调用的是iterator接口        let arr1 = [1,6];        let arr2 = [2,3,4,5];        //将arr2插入到arr1中        arr1 = [1,...arr2,6];

形参默认值

function foo(a,b){    this.a = a;    this.b = b;}let obj = new foo(); //如果不传入形参，会导致a,b都为underfinedES6提供新的默认形参：        function foo(a=0,b=0){        this.a = a;        this.b = b;    }        let obj = new foo();//此时的foo传入的是形参默认值0,0

promise(承诺)

promise对象：代表了【未来】某个将要发生的事件（通常是一个异步操作）。有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（俗称'回调地狱'）ES6的promise是一个构造函数，用来生成promise实例。回调地狱：回调函数如果嵌套多了，会导致耦合度极高，导致不可预期的错误。2.promise对象有三个状态：        1.pending：初始化    2.fullfilled：成功状态    3.rejected：失败状态    let pro = new Promise((resolve,reject)=>{    //这两个形参都是函数!!!    //初始化promise状态：pending    console.log('111');        //异步操作，通常是发送ajax请求，开启定时器    setTimeout(()=>{        console.log('333');        //根据异步任务的返回结果来去修改promise的状态        resolve('哈哈');//代表异步执行【成功】，修改promise的状态为 fullfilled 成功状态                reject('啦啦'); //代表异步执行【失败】，修改promise的状态为 rejected 失败状态            },3000);});//then里面有两个回调函数，第一个为成功，第二个为失败,里面回调参数data//data参数根据resolve和reject传输的内容来pro.then((data)=>{    //这个函数为成功的回调    console.log(data,'成功了');},(error)=>{    //这个函数为失败的回调    console.log(error,'失败了');});

Symbol

前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境。Symbol：        概念：ES6中添加了一种【原始数据类型】symbol            （已有的原始数据类型：String、Number、boolean、null、underfined、对象）        特点：            1.symbol属性对应的值是唯一的，解决命名冲突        2.symbol值不能与其他数据进行计算，包括同字符串拼接        3.for in，for of遍历时不会遍历symbol属性。                4.可以定义常量:用去区别其他数据标识                        const Person_key = Symbol('person_key');            使用：            1.调用Symbol函数得到symbol值                let symbol = Symbol()            let obj = {}            obj[symbol] = 'hello'                2.传参标识                let symbol = Symbol('one')；            console.log(symbol); //Symbol('one')                        3.内置Symbol值                除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向其他语言内部            使用的方法。                        Symbol.iterator                                - 对象的Symbol.iterator属性，指向该对象的默认【遍历器】方法

iterator

概念：iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制作用：        1.为各种数据结构，提供一个统一的、简便的访问接口        2.使得数据结构的成员能够按某种次序排列        3.ES6创造了一种新的遍历命令for...of循环，Iterator接口主要提供for...of消费工作原理：        1.创建一个指针对象（遍历器对象），指向数据结构的起始位置    2.第一次调用next方法，指针自动指向数据结构的第一个成员    3.接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员    4.每调用next方法返回的是一个包含value和done的对象，{value：当前成员的值，done:布尔值}            - value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束                - 当前遍历结束的时候返回的value值是underfined，done值为false原生具备iteratro接口的数据(可用for of遍历)        扩展理解：            1.当数据结构上部署了Symbol.iterator接口，该数据就是可以用【for..of】遍历                2.当使用for of去遍历目标数据的时候，该数据会自动去找Symbol.iterator属性        //Symbol.iterator 属性指向指向对象的默认遍历器方法。模拟iterator遍历器：这也是底层的实现function Myiterator() {//模拟指针对象（遍历器对象），iterator接口    let index = 0;//记录指针的位置    return {//遍历器对象        next() {            return index < arr.length ? {value: arr[index++], done: false} :                                                                                     {value: undefined, done: true};        }    }}let arr = ['wang',2,'abc',5];let mykiss = Myiterator(arr);console.log(mykiss.next());console.log(mykiss.next());console.log(mykiss.next());console.log(mykiss.next());console.log(mykiss.next());     iterator接口部署到指定的【数据类型】上，可以使用for of遍历数组、字符串、arguments（不能用for，each因为是伪数组），set容器，map容器

forEach、for-in与for-of的区别

foreach：方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回for in：总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值for of:【在ES6中】,增加了一个for of循环,使用起来很简单，for of不能对象用 

Generator函数

Promise依赖于回调函数，所以推出generator概念:        1.ES6提供的解决异步编程的方案之一        2.Generator函数是一个【状态机】，内部封装了不同状态的数据        3.用来生成【遍历器对象】iterator        4.可暂停函数（惰性求值），yield可暂停，next方法可启动。每次返回的是yield后的表达式结果        特点：        1.function与函数名之间有一个【星号】        2.内部用yield表达式来定义不同的状态                例如：                function* generatorExample(){            console.log('开始执行');                let result = yield 'hello'; //状态值为hello            yield 'generator'；//状态值为geneartor            let result = yield 'generator';            console.log(result);//此时的结果为underfined，如果在next方法中参入参数                                //返回值就是传参内容aaaaa            return '返回的结果';        }                let MG = generatorExample();//返回的是指针对象                MG.next();      //每调用一次，返回一个yield后面的值                MG.next();      //每调用一次，返回一个yield后面的值                MG.next('aaaaa');//可以传入        3.geneartor函数返回的是【指针对象】，而不是执行函数内部逻辑        4.调用next方法函数内部逻辑开始执行，遇到yield表达式停止，      返回          -- {value:yield表达式后的结果/underfined，done:false/true}        5.再次调用next方法会从上一次停止时的yield处开始，直到最后    6.yield语句返回结果通常为underfined，当调用next方法时传参内容会作为启动时yield语句的返回          值        对象Symbol.iterator属性，指向遍历器对象let obj = {username:'kobe',age:33};//for of无法遍历对象，可以使用generator进行遍历obj[Symbol.iterator] = function* Test(){    yield 1;    yield 2;    yield 3;}for(let i of obj){    console.log(i);//打印出来的就是yield后面跟的内容}案例：发起ajax请求        function* sendXML(){        let url = yield getNews('http://localhost:3000/news/ID=2');        yield getNews(url);    }        function getNews(url){        $.ajax(url,function(data){            let commentURL = data.commentUrl;            let url = 'http://localhost:3000' + commentURL;            //当获取新闻内容成功后，发送请求获取对应的评论内容            //调用next传参会作为上次暂停时yield的返回值            sx.next(url);        })    }        let sx = sendXML();        //发送请求获取新闻内容        sx.next();              

asnc函数详解及应用

ES7的东西概念：真正意义上的去解决异步回调的问题，同步流程表达异步操作本质：Generator的语法糖语法：        async function foo(){                await 异步操作;                await 异步操作;        }        特点：        不需要像Generator去调用next方法，调用await等待，当前的异步操作完成就往下执行        返回的总是Promise对象，可以用then方法进行下一步操作        async取代Generator函数的星号*，await取代Generator的yield        语法上更为明确，使用简单，没有副作用。        案例：发送ajax请求        async function getNews(url){        return new Promise((resolve,reject) => {            $.ajax({                method：'GET',                url,                success:data => resolve(data),                error:data => reject()            })        })    }            async function sendXML(){        let result = await getNews('http://localhost:3000/news?id=7');                result = await getNews('http:localhost:3000' + result.commentUrl);    }        sendXML();

class类的详用

1.通过class定义类/实现类的继承2.在类中通过constructor定义构造方法3.通过new来创建类的实例4.通过extends来实现类的继承5.通过super来调用父类的构造方法6.重写从父类中继承的一般方法//平常创建对象function Person(name,age){    this.name = name;    this.age = age;}let p = new Person('kond',22);//使用class定义类class Person{    constructor(name,age){//定义构造方法        this.name=name;        this.age=age;    }    getName(){//定义一般方法        console.log(this.name);    }}let p = new Person('king',33);p.getName();//使用class实现继承class StartPerson extends Person{    constructor(name,age,salary){        super();        this.salary = salary;    }}

字符串、数组的扩展

字符串的扩展    1.includes(str):判断是否包含指定的字符串    2.startsWith(str)：判断是否以指定字符串开头    3.endsWith(str)：判断是否以指定字符串结尾    4.repeat(count):重复指定次数    数值的扩展        1.二进制与八进制数值表示法：二进制用0b，八进制用0o            console.log(0b1010);  //代表十进制10        2.Number.isFinite(i):判断是否是有限大的数        3.Number.isNaN(i):判断是否为NAN        4.Number.isInteger(i):判断是否是整数        5.Number.parseInt(str):将字符串转换为对应的数值            Number.parseInt('123abc') //123        6.Math.trunc(i):直接去除小数部分      数组的扩展：        1.Array.from(v):将伪数组对象或可遍历对象转换为真数组        2.Array.of(v1,v2,v3):将一系列值转换为数组                let arr = Array.of(1,2,'abc',true);        3.find(function(value,index,arr){return true})：找出第一个满足条件true的元素            let arr2 = [2,3,4,5,6,7,8];                                let result = arr2.find(function(item,index){            return item > 4;        })                    4.findIndex(function(value,index,arr){return true})：找出第一个满足条件返回true的                                                                                                             元素的下标                                                         对象方法扩展：        1.1.Object.is(v1,v2):判断2个数据是否完全相等            0 == -0  // true                NaN == NaN //false                Object.is(0,-0) //false 底层比较的是字符串数值                Object.is(NaN,NaN) //true        2.Object.assign(target,source1,source2)：将源对象的属性复制到目标对象上             let obj = {}         let obj2 = {username：'zhang',age:22}         Object.assign(obj,obj2);        3.直接操作__proto__属性            let obj2 = {}        obj2.__proto__ = obj1;

深度克隆

基本数据类型拷贝：        拷贝后会生成新的数据，修改拷贝以后的数据不会影响原数据        对象/数组拷贝：        拷贝后不会生成新的数据，而是拷贝引用。修改拷贝以后的数据会影响拷贝数据的方法：        1.直接赋值给一个变量                             //浅拷贝        2.Object.assign()                                //浅拷贝        3.Array.prototype.concat()                 //浅拷贝        4.Array.prototype.slice()             //浅拷贝        5.JSON.parse(JSON.stringify)    //深拷贝!!!        浅拷贝：        拷贝的引用，修改拷贝以后的数据会影响原数据深拷贝：        拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据

set、map容器

1.Set容器：无序不可重复的多个value的集合体        set()        set(array)        add(value)        delete(value)        has(value)        clear()        size()2.Map容器：无序的key不重复的多个key-value的集合体        Map()        Map(array)        set(key,value) //添加        get(key)        delete(key)        has(key)           //判断是否存在        clear()        size    let set = new Set([1,2,3,3,4,5,6]);set.add(7);let map = new Map([['aaa','username'],[36,age]])map.set(78.'haha');map.delete(78);for of循环：        1.遍历数组    2.遍历set    3.遍历map    4.遍历字符串    5.遍历伪数组

到此，相信大家对"ECMAScript常用操作有哪些"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！