ECMAScript常用操作有哪些

ECMA(前身为欧洲计算机制造商协会)指定和发布的脚本语言规范

JS包含三个部分：
	1.ECMAScript(核心)
	2.扩展==浏览器端
		1.BOM(浏览器对象模型)
		2.DOM(文档对象模型)
	3.扩展==服务器端
    	1.NODE


ES几个重要的版本
	ES5：09年发布
	ES6（ES2015）：15年发布
	ES7（ES2016）：16年发布

前端几个好用的浏览器插件：
	FE前端助手：可以自动化格式Chrome浏览器的json数据	

除了正常运行外（混杂模式），ES5添加了第二种运行模式："严格模式"(script mode)
这种模式使得javascript在更严格的语法条件下运行

使用：
	在全局或函数的第一条语句定义为：'use script'
	如果浏览器不支持，只解析为一条简单的语句，没有任何副作用
	
语法和行为改变：
	必须用var声明变量
	禁止自定义的函数中的this指向window
	创建eval作用域。会解析传入的字符串，让解析器执行
	对象不能有重名的属性

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);

此处开始是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不是调用的时候决定的，而是定义的时候处在的对象就是它的
  this

2.扩展理解：
	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都为underfined


ES6提供新的默认形参：
	function foo(a=0,b=0){
        this.a = a;
        this.b = b;
    }
	let obj = new foo();//此时的foo传入的是形参默认值0,0

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,'失败了');

});

前言：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是一种接口机制，为各种不同的数据结构提供统一的访问机制

作用：
	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：方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回

for in：总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值

for of:【在ES6中】,增加了一个for of循环,使用起来很简单，for of不能对象用	

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();	


	

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();

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)	//深拷贝!!!
	

浅拷贝：
	拷贝的引用，修改拷贝以后的数据会影响原数据
深拷贝：
	拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据

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.遍历伪数组