首先唠唠ES的发展史,ES6为ECMAScript的六个版本。ESMAScript是一个语言的标准。
ESMAScript+WEBapi(DOM、BOM)=JavaScript
ActionScript+WEBapi(DOM、BOM)=flash
年份 | 版本 | 事件 |
---|---|---|
1996 | ES1.0 | Netscape公司把js交个了ECMA的组织,es正式出现 |
2007 | ES4.0 | 由于更新过大,未被认同,被废除 |
2008 | ES3.1 | 是目前大量使用的,是严重缩水的4.0,名字Harmony |
2015.06 | ES6.0 | ES6正式发布 又称 ES2015 |
2016 | ES7 | 就不在使用版本号了,而是使用年份的代号了 |
标准委员会最终决定,标准在每年6月正式发布并作为当年的正式版本,接下来的时间里就在此版本的基础上进行改动,直到下一年6月草案就自然变成新一年的版本,这样一来就无需以前的版本号,只要用年份标记即可。ECMAscript 2015是在2015年6月发布ES6的第一个版本。ECMAscript 2016是ES6的第二个版本、以此类推,…下面步入正题。
let声明变量
let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域)
总结:
1.let声明的变量不会挂在window中,不会造成全局变量的污染
2.新增了一个块级作用域一个{}为一个作用域,以前只有函数作用域,全局作用域
3.let不允许重复声明
4.let不会声明提前(只是人为看到的效果,实际上是有提前的,提前在临时性的死区中)
console.log(num)
let num = 100;
console.log(num)
//报错:Uncaught ReferenceError: Cannot access 'num' before initialization
const声明常量
1.不允许被修改,否则会报错(不允许改变内存空间的地址)
2.const声明和赋值必须一次性完成,并且后期不允许改变存储空间的地址
const
let a = 10;
a = 100;
console.log(a);
const obj = {};
obj.name = "jack";
console.log(obj)
const abc;
console.log(abc)
字符串模板
模板字符串是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。 模板字符串中嵌入变量和函数,需要将变量名写在${}之中
//字符串换行
let str = `今天
居然
停电了`
console.log(str)
const a = 10;
//ES5
var string = '这个数字是'+ a;
//ES6
var string = `这个数字是${a}`;
…运算符 起到参数收集作用
- 收集符只能出现一次
- 一个函数,剩余参数收集只能在最后一个形参
//收集、收集参数只能放在最后一个参数
function num (a,...arg){
console.log(a,arg);
}
num(1,2,3,4)
//展开
let arr = [1,2,3];
console.log(...arr);
let arr2 = [4,5,6];
let newArr = [...arr,...arr2];
console.log(newArr)
// 浅克隆
let arr1 = [1,2,3,4,{name:"jack"}];
let arr2 = [...arr1];
console.log(arr1,arr2);
console.log(arr1 == arr2);
console.log(arr1[4] == arr2[4]);
函数
- ES6中参数可以加默认值
function fun (a,b=10,c=20){
return a+b+c;
}
console.log( fun(30) )//60
console.log( fun(10,undefined,30) )//50
//null在数学中,默认的为0,不要传递null
console.log( fun(10,null,30) ) //40
- 创建一个元素,插入到某个元素中
name:创建的标签,大多数为div
container:需要往那个元素中插入,大多数为container、contetn、内容
function createElement(name = 'div',container = getContainere(),content){
const ele = document.createElement(name);
if(content){
ele.innerHTML = content
}
container.appendChild(ele)
}
function getContainer(){
return document.getElementById("container");
}
createElement(undefined,undefined,"demo")
箭头函数
箭头函数的写法
- 如果参数只有一个,可以省略小括号
const fun = num => {
console.log(num)
}
fun(100)
- 如果箭头函数只有一条返回语句,可以省略花括号,可以省略return. 参数 => 返回值
const fun1 = num => num%2 !== 0;
console.log(fun(3))
3.如果返回值是一个对象的时候,就会认为成函数体,把返回值变成表达式的形式
const obj = (a,b) => ({
a : a,
b : b
})
console.log( obj(1,2) )
与普通函数的区别
1.箭头函数中没有this、argument、new、target,如果要强行使用,则指向函数外层对应的this,argument,new.target
const fun = () => {
console.log(this)
}
fun() //window
- 箭头函数没有原型,所以占用的空间非常小,不能当成构造函数使用
应用场景
- 临时使用的函数,并不会刻意的去调用。(如:1.异步的事件处理 2.事件处理)
- 继续去沿用外层的this
- 对象的属性不要去用箭头函数,除非是特别的需求
- 数组方法的时候,保证代码的简洁
this指向问题
1.对象调用函数,this指向对象
2.直接调用函数,this指向window
3.如果使用了new关键字,this指向新创建的对象
4.如果使用apply、call、bind、this指向绑定的数据
5.如果是DOM事件函数,this指向事件源
对象
- 属性简写
- 方法简写
function fun(name,age,sex){
return{
//属性简写
name,
age,
//方法简写
sex(){
console.log(this.name,this.age)
}
}
}
const user = fun("t
Tom","16")
console.log(user);
user.sex()
- 计算属性名
const prop1 = "name";
const prop2 = "say";
const user = {
[prop1] : "Tom",
[prop2](){
console.log(this[prop1);
}
}
console.log(user[prop1])
user[prop3]()
新增API
- is()
//基本上和===一样,除了一下两种情况
console.log(NaN === NaN);//false
console.log(+0 === -0)//true
console.log(Object.is(NaN,NaN));//false
console.log(Object.is(+0,-0));//false
console.log(Object.is({},{}));//false
- assign()用于混合对象,带浅克隆
const obj1 = {
a : 123,
b : 456,
c : "abc"
}
const obj2 = {
a : 789,
e : "asdf"
}
// 将2的内容覆盖到1 会对1产生影响
const obj = Object.assign({},obj1,obj2)
console.log(obj)//{a: 789, b: 456, c: "abc", e: "asdf"}
console.log(obj == obj1)//false
-
getOwnpropertyNames()枚举的顺序,返回一个数组,枚举出来对象的属性,顺序是由厂商规定的。先排数字,升序,再排其他
-
setPrototypeOf(),设置某个对象的隐式原型 proto
const obj1 = {
a : 1
}
const obj2 = {
b : 2
}
//obj1.__proto__ = obj2 必须要通过构造函数来完成
// Object.setPrototypeOf(obj1,obj2)
console.log(obj1)
构造函数
1.类的声明不会被提升,和let constf一样,有临时性死区
2.类的所有代码都在严格模式中执行
3.类的所有方法都是不可枚举的
4.类的所有方法都无法当成构造函数直接使用
5.类的构造器必须使用new,来调用