重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
ECMAScript常用操作有哪些
本篇内容主要讲解“ECMAScript常用操作有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ECMAScript常用操作有哪些”吧!
创新互联公司：于2013年成立为各行业开拓出企业自己的“网站建设”服务，为上千多家公司企业提供了专业的成都网站设计、网站建设、外贸网站建设、网页设计和网站推广服务， 按需网站策划由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。
ECMA(European Computer Manufacturers Association)
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作用域。会解析传入的字符串，让解析器执行 对象不能有重名的属性
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不是调用的时候决定的，而是定义的时候处在的对象就是它的
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,0promise(承诺)
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常用操作有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
标题名称：ECMAScript常用操作有哪些
URL地址：http://cqcxhl.com/article/ghhidg.html