ES6-ES10新特性
ES6新特性
let和const
let:
// let特性： 1. 声明的变量是块级作用域（{}） 2.不会变量提升 3.不能声明重复的变量 4.不能成为window全局属性
if(true){
var a = 100;
let b = 200; // 块级作用域
}
console.log(a)
// console.log(b)
let c = 300;
console.log(c); //
// let d = 400;
let d = 500;
console.log(d)
let e = 600;
console.log(window.e)
const
// const声明常量： 1、不能修改值 2、也是块级作用域 3.声明的时候需要给初始值
if(true){
const PI = 3.14;
}
// PI = 3.15; //报错
// console.log(PI);
const MAX;
console.log(MAX); //报错 没有给初始值
- 都是块级作用域
{}，且没有没有提升效果, - const声明的变量是常量，只必须赋值不能修改
- let声明的变量不会自动成为window全局属性
模板字符串
let name = "kobe bryant";
let age = "41";
var obj = {
age: 18
}
let str = "我的名字是" + name + ",年龄是 " + age; // es5
console.log(str)
let str2 = `我的名字是${name},年龄是 ${age}`; // es6
let str3 = `我的名字是${name},年龄是 ${obj.age}`; // es6
console.log(str2)
es6-解构赋值
let arr = ['罗志康','汪东城','廖泽焕'];
var first = arr[0];
var two = arr[1];
var three = arr[2];
console.log(two);
let [a,b,c] = arr; // 解构数组
console.log(a)
let obj = {
name: 'lebron james',
number: 23
}
// let name = obj.name;
// console.log(name)
let number = 24;
// 属性名必须和原对象属性名一致， 可以通过冒号：取别名，防止变量名重复
let {name,number:mynumber} = obj;
console.log(name)
console.log(number) // 24
console.log(mynumber) // 23
let directive = "v-html";
// let result = directive.split('-'); // [v,html]
// console.log(result[1])
let [,cd] = directive.split('-'); // [,cd]; //代表舍去第一个变量
console.log(cd) // 'html'
function foo(){
return {
email: '[email protected]',
sex: "男"
}
}
let {email} = foo();
console.log(email)
解构对象用{}接收，变量重复时，可以用：取别名
解构数组用[]接收，变量名任意
展开运算符
语法：
[...变量名]
作用：
- 函数接收多个参数
- 复制对象（属于浅克隆）
- 调用函数传参
- 转成真数组,语法： […伪数组]
// 场景1： 复制对象（浅克隆）
var obj1 = {name:'kobe',age:"24",hobby:{a:1}};
var obj2 = {...obj1};
console.log(obj1)
// 场景2： 给函数传参
function add(a,b,c){
return a + b + c
}
let total = add(1,2,3);
console.log(total); // 6
let number = [4,5,6];
let total2 = add(...number);
// let total3 = add.call(null,4,5,6)
let total3 = add.apply(null,number)
console.log(total2); // 15
console.log(total3); // 15
// 场景3： 接受函数的多个参数,相当于替代了arguments
function myAdd(...args){
console.log( args ); // 接受所有的实参，是一个真数组
let total = 0;
args.forEach(function(v){
total += v;
})
return total;
}
console.log( myAdd(1,2,3,4,5) ); // 15
// 场景4： 转成真数组,语法： [...伪数组]
let divs = document.getElementsByTagName('div'); // divs伪数组
console.log([...divs])
es6对象的简写
let name='Ming',age='18',city='Shanghai';
// 只要属性名和变量名同名的情况，才可以简写
let student = {
name
age,
city,
// getName:function(){
// alert('my name is' + this.name)
// }
getName(){
alert('my name is' + this.name)
},
getAge(){
alert('my age is' + this.age)
},
address:"中国深圳"
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
student.getName();
student.getAge();
console.log(student.address);
箭头函数this指向问题
箭头函数,不会绑定this指向， this=>默认指向父级上下文中的this
示例1：
var foo = function(a,b){
return a + b;
}
console.log( foo(100,200) ); // 300
// 箭头函数
var bar = (c,d) => {
return c + d;
}
console.log( bar(200,200) ); // 400
// 如果函数体{}内只有一个语句可以省略{}和return关键字
var par = (num1,num2) => num1 * num2
console.log( par(6,6) ); // 36
// 如果函数没有形参可以写成（）或 _
var sayHi = () => {
return '你好'
}
var sayHello = _ => '你好'
console.log( sayHello() )
// 对象中的箭头函数
var obj = {
name: "kobe",
getName:function(){
// 普通函数 this=>指向最后的调用者
console.log('普通函数',this)
return this.name;
}
}
console.log(obj.getName())
var obj2 = {
name: "kobe",
getName:() => {
// 箭头函数,不会绑定this指向， this=>默认指向父级上下文中的this
console.log('箭头函数',this)
return this.name;
}
}
console.log(obj2.getName())
:
示例2：
var name = "window";
var obj = {
name:"大锤",
getName: function(){
// 函数第一层this是obj
// var _this = this;
// var _that = this;
var _self = this;
console.log("1my name is " + this.name);
(function(){
// 内部函数this是window
console.log("2my name is " + _self.name);
})()
}
}
obj.getName();
var obj2 = {
name:"大锤",
getName2: function(){
// 函数第一层this是obj
console.log("1my name is " + this.name);
(()=>{
// 箭头函数中的this是直接绑定外层函数的this
console.log("2my name is " + this.name);
})()
}
}
obj2.getName2();
箭头函数中的this是直接绑定外层父级上下文函数中的this
箭头函数中不能使用arguments，可用展开运算符代替。如： (…args)=>{}
var foo = (...args) => {
console.log(args)
}
foo(10,20);
其他es6方法
- Array.isArray(变量)； 判断一变量是否数组,是返回true,否则false
- [1,2,3].includes(3); includes()判断数组中是否存在某个元素，存在返回true,否则返回false
- 2**3: 求指数运算，2的3次方等于8，以前需要Math.pow(2,3)
- Object.keys(obj); 获取对象的obj的所有的键，并在一个数组中返回
- Object.values(obj); 获取对象的obj的所有的值，并在一个数组中返回
- str.startsWith(substr); 判断一个字符串是否以特定子串开头
console.log( Array.isArray([]) ); // true
console.log( Array.isArray({}) ); // false
console.log( [1,2,3].includes(3) ); // true
console.log( [1,2,3].includes(4) ); // false
console.log( 2**3 ); // 8
let obj = {
name: "kobe",
age: "24"
}
console.log( Object.keys(obj) )
console.log( Object.values(obj) )
var str = "v-html";
console.log( str.startsWith('v-') ); // true
console.log( str.startsWith('vv-') ); // false
promise async/await
class和extends关键字
// class 和 extends本质还是原型继承，只是他们的语法糖写法（简写形式）
// new Object() {}语法糖形式
class Animal {
constructor(name,age){
this.name = name;
this.age = age;
}
getEmail(){
console.log("parent-我的邮箱是"+this.email);
}
getName(){
console.log("my name is" + this.name);
}
}
var cat = new Animal('波斯猫',3);
console.log(cat);
console.log(cat.getName());
class Dog extends Animal{
constructor(name,age,email){
// 要先执行父类的构造函数super()
super(name,age);
this.email = email;
}
// getEmail(){
// console.log("son-我的邮箱是"+this.email);
// }
}
var hashiqi = new Dog('hashiqi',2,'[email protected]');
console.log(hashiqi);
hashiqi.getEmail();
hashiqi.getName();
相关链接
ES6、ES7、ES8、ES9、ES10新特性一览
ECMAScript(ES6,ES7,ES8,ES9) features 需备梯子