一、ECMAScript简介
ECMA (欧洲计算机制造商协会)
这个组织的目标是评估、开发和认可计算机标准。
1996 年 11 月,Netscape( JavaScript 的创造者,网景公司),决定将 JavaScript提交给ECMA。1997年,ECMA发布并规定了浏览器脚本语言的标准,即ECMA1.0版。
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,在 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
- ES5 : 2009年发布
- ES6 : 2015年发布, 也称为ECMA2015
- ES7 : 2016年发布, 也称为ECMA2016
- ES10:2019年发布
- ES 2020
**总结:**ECMAScript 和 JavaScript 的关系是,前者是后者的规则,后者是前者的一种实现。
二、严格模式
JavaScript 严格模式, 即在严格的条件下运行。
关键词:'use strict’
为什么有严格模式
- 消除 JavaScript 语法的一些不合理、不严谨之处,减少一些怪异行为
- 消除代码运行的一些不安全之处,保证代码运行的安全
- 提高编译器效率,增加运行速度
- 为未来新版本(es6)的 JavaScript 做好铺垫
严格模式的几个特点说明
-
严格模式下,变量使用前,必须要先声明
var age=20; console.log(age);
-
严格模式下,禁止函数中的 this 指向Window
function f(username,pwd){ this.username=username; this.pwd=pwd; return this.username+this.pwd } console.log(f("rypy",123456));
-
严格模式下,eval函数存在独立作用域
var username="rypy"; eval("var username='rypy1';console.log(username);");//将可执行类型的字符串代码转换为真的的代码。 console.log(username);
三、let和const关键词
1、概念
let 定义变量,
const 定义常量,定义的常量必须再声明的时候初始化,且赋值以后不能改变(注:不能改变的类型包含:数值,字符串,布尔等基本类型)
const关键词的特性
1、声明的时候,必须要初始化。否则会报错。
var age;
console.log(age);//undefined
const age;
console.log(age);//报错,变量未初始化
2、声明的变量,初始化以后,值不能改变。否则报错。
const age=20;
age=30;//报错,不能改变值
console.log(age);
2、特性:
2.1、块级作用域
{
var a=20;
}
console.log(a);
{
let b=30;
}
console.log(b);
2.2、同一作用域,不能重复声明
{
var a=20;
var a=30;
console.log(a);//30
}
{
let b=20;
let b=30;
console.log(b);//报错,Identifier 'a' has already been declared
}
2.3、不存在变量提升(暂时性死区)
{
console.log(age);
var age=20;
}
{
console.log("我是变量b的死区");
console.log(b);
console.log("sssss");
console.log("aaaaaaa");
console.log("我是变量b的死区");
let b=30;
}
3、应用
3.1 循环中的应用
for(var i=0;i<5;i++){}
console.log(i);//5
for(let j=0;j<5;j++){}
console.log(j);//报错,j is not defined
3.2 点击事件中的应用
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<script>
let btns=document.querySelectorAll("button");
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
console.log("按钮被点击"+i);
}
}
</script>
四、解构赋值
4.1 概念:
ES6 允许按照一定模式(即规则),从数组和对象中提取值,对变量进行赋值,这被称为解构赋值(Destructuring)。
4.2 数组解构
4.2.1 形式
let [a,b,c,d]=[1,2,3,4];
4.2.2 规则
数组的解构赋值,先找形式[ ],再找" ,",进行一对一匹配。
4.2.3 用法
完全解构
let [a,b,c,d,e,f]=[1,2,3,4,5,6];
不完全解构
1. 值比变量多
let [a,b,c]=[1,2,3,4,5,6];
console.log(a);
console.log(b);
console.log(c);
2.变量比值多
let [a,b,c,d]=[1,2];
console.log(c);//undefined
**注:**在ES6中没有null关键,如果变量没有赋值默认都是undefined
let [a,b]=false;
console.log(a);//报错?因为不是数组的形式
4.2.4 默认值
概念
数组的默认值指在等号的左边给变量进行赋值。由于代码的执行顺序是从上到下,从左到右,所以先默认值,再赋值。
特例规则
1.当赋值的变量中,赋值部分为undefined的时候,默认值优先。
2.当赋值的变量中,赋值部分为null的时候,变量的值为null。
let [a,b=3,c]=[1,2,3];
console.log(b);
let [a,b=22,c]=[1,,3];
console.log(b);//22
let [a,b=22,c]=[1,null,3];
console.log(b);//null
4.2.5 作用
数组交换(重新赋值)
let a=1;
let b=2;
let c=3;
[a,b,c]=[c,c,a];//值的交换。
console.log(a);
console.log(b);
console.log(c);
4.3 对象解构
和数组不同的是,对象是无序的。
4.3.1 形式
let user={username:"rypy",pwd:"123456"};
let {username}=user;
console.log(username);
4.3.2 规则:
在对象的解构赋值中,先找{},再找键名,键名相同赋值成功,键名不同赋值失败。
4.3.3 用法:
完全解构
let {username:uname,pwd:pwd}={username:"rypy",pwd:123456};
console.log(uname);
console.log(pwd);
不完全解构
- 值比变量多
let {username}={username:"rypy",pwd:123456};
- 变量比值多
let {username,pwd}={username:"rypy"};
4.3.4 默认值
概念
对象的解构赋值默认值,指在等号左边给变量进行赋值
let {username:uname="admin",pwd:pwd}={pwd:123456};
console.log(uname);
let {username="admin1"}={};
console.log(username);
特例规则
let {username:uname="rypy"}={username:"admin"};
console.log(uname);
let {username:uname="rypy"}={};
console.log(uname);
let {username:uname="rypy",pwd}={username:null,pwd:""};
console.log(uname);//null
console.log(pwd);//""
4.3.5 使用场景(多用于ajax返回的json数据)
可以解构JSON格式的数据,可以按需解构
五、模板字符串
5.1 写法
`字符串1${}字符串2`
5.2 用法(好处)
1、模板字符串可以输出中英文字符,
2、模板字符串可以输出变量
3、模板字符串可以输出对象的属性
4、模板字符串可以调用函数,并且获取到函数的返回值
5、模板字符串可以使用标签,并且可以将标签转义
6、模板字符串可以使用javascript代码进行逻辑判断(三目运算符)
六、对象扩展
6.1 属性简写
let username="rypy";
let pwd=123456;
let user={username,pwd};//对象的属性和值的简写
//let user={username:"rypy",pwd:123456}
console.log(user);
6.2 方法简写
let obj={
f(){
console.log("我是对象的方法");
}
}
obj.f()
6.3 变量值作为属性名和方法名
变量的值作为对象中的属性名,可以采用[]获取变量的值。变量是可以做拼接操作的。
let a="username";
let b="getUsername";
let c="aaa"
let obj={
[a+c]:"rypy",
[b](){
return "haha";
}
}
//获取对象中变量的属性值
console.log(obj[a]);
console.log(obj.username);
console.log(obj[b]());
console.log(obj.getUsername());
6.4 对象的常用方法
6.4.1 合并对象
对象.assign(参数1,参数2…参数n):将多个对象序列进行合并操作,即是将参数2…参数n合并到参数1上(此合并生成的参数1是深拷贝),并生成新的对象(此对象是浅拷贝参数1)。
Object.assign(user,user1,user2);
console.log(user);
user1.sex="nv";
console.log(user1);
console.log(user);
let obj= Object.assign(user,user1,user2);//方法的返回值和参数1之间是浅拷贝。
console.log(obj);
console.log(user);
obj.username="admin";
console.log(user);
6.4.2 获取对象的键名
Object.keys(对象):以一维数组的形式输出对象的键名。
let user={username: "rypy", pwd: 123456, sex: "男", admin: "0"};
console.log(Object.keys(user));
6.4.3 获取对象的键值
Object.values(对象):以一维数组的形式输出对象的键值
let user={username: "rypy", pwd: 123456, sex: "男", admin: "0"};
console.log(Object.values(user));
6.4.4 获取对象的键值对数组
Object.entries(对象):将对象的键值对转换为二维数组,每个键名和键值形成一个一维数组。
let user={username: "rypy", pwd: 123456, sex: "男", admin: "0"};
console.log(Object.entries(user));
6.4.5 给对象添加新的属性
1、Object.create(原对象,{新属性配置});给对象添加新的属性
let user={username:"rypy",pwd:123456};
let newUser=Object.create(user,{
admin:{
value:"0",//设置新对象的属性值
writable:true,//设置新对象的属性值是否可以改变,默认值是false
configurable:true,//设置新对象的属性值是否可以删除,默认值是false
enumerable:true,//设值新对象的属性值是否可以枚举(循环输出),默认值false
},
admin1:{
value:"hhhh"
}
});
console.log(user);
newUser.admin="1";
// delete newUser.admin;//删除对象中的属性
console.log(newUser);
for(let i in newUser){
console.log(newUser[i]);
}
2、Object.defineProperties(原对象,新属性方法),向对象中添加属性。
let user={username:"rypy",pwd:123456};
let newUser=Object.defineProperties(user,{
admin:{
get(){//获取对象中的属性的时候被调用,从而获取属性的值
//console.log("我被调用get");
return this.adminvalue;
},
set(value){//设置对象中的属性值的时候被调用,从而设置属性的值
//console.log("我被调用set"+value);
this.adminvalue=value;
}
}
});
newUser.admin="aaaa";
// console.log(newUser.admin);
console.log(user);//
console.log(newUser);
//user.username="admin";
newUser.username="admin1";
console.log(user);
console.log(newUser);
七、数组的扩展
7.1 循环遍历数组
1、引用.forEach(),遍历数组,回调函数中的参数一为数组的元素,回调函数参数二为数组的下标。、
arr.forEach(function(item,index){
console.log(item ,index);
});
2、引用.map(),遍历数组,根据返回生成新的数组,数组的个数与原数组相同…
let newArr=arr.map(function(item,index){
return item+5;
});
console.log(newArr);
3、引用.filter(),遍历数组,根据返回值的布尔类型结果,生成新的数组。功能:通常完成数组的过滤。
let newArr=arr.filter(function(item,index){
return item>5;
});
console.log(newArr);
7.2 将其它类型转换为数组
1、Array.from(对象),将含有length属性的且键名为数值的对象,转换为真正的数组。注:必须要给length属性赋值,如果不设置length属性,则生成空数组。
let obj={0:"rypy",1:"aaaa",19:"bbbb",length:20}//注:此对象的键名必须是Number类型,必须要含有长度属性
console.log( Array.from(obj));
2、Array.of(),将序列形式的参数转换为数组。
console.log(Array.of(1,3,5,7,3,"sasdfadf",6,8,function a(){},78,9,true,0,5,3,8));
7.3 for形式输出数组
let of:循环输出数组元素
let obj={username:"rypy",pwd:123456,isadmin:"0"};
for(let [key,values] of Object.entries(obj)){
//[key,values]=item
if(key==="pwd")obj[key]=values.toString();
}