ES6
这篇文章介绍一下ES6新增的语法，常用方法，以及其他内容。
历史
ECMAScrit 是96年 网景公司吧javascript提交给 欧洲计算器制作联合会
版本
- 97年1.0
- 98年2.0
- 99年3.0（之前学js版本）
- 2000年4.0 被和谐
- 09年 5.0（很多新特性没有学）
- 15年ES6正式确定
let与const
- let 局部变量声明
- 只在当前代码块里面有效
- 不能重复声明
- 不会变量提升（在变量声明前访问会报错）
- const 常量声明
- 声明必须赋值
- 赋值不能修改（简单数据类型）
- 建议变量名 大写
解构赋值
对象
- 基本语法
let {name,age} = {name:"Tom",age:18}; // name:Tom,age:18
let{name:foo} = {name:"Tom"}; // foo值就是 Tom
- 剩余值
...rest
- 默认值
let {name,age,weight=120} = {name:"Tom",age:18}
没有顺序 变量名必须和对象的键名一致
数组
- 基本语法
let [a,b] = [12,18] // a 12 b 18
- 可以嵌套
let [a,b[c,d,e]] = [1,2,[3,4,5]] // c 3 d 4 e 5
- 可以忽略
let [a,,b] = [1,2,3]; // a 1 b 3
- 剩余值
let [a,...rest]=[1,2,3,4,5] // rest [2,3,4,5]
- 字符串
let [a,b,c,d]="中国加油"; // a 中 b 国
- 默认值
let [a,b=20]=[30]; // b 20 如果解析出来的值是undefined 那么就会用默认值代替
字符串
- 去除空白
'string'.trim() // 去掉两边空白
'string'.trimLeft() // 去掉左边空白
'string'.trimRight() // 右边空白
- 检测是否包含
'string'.includes('s') // 字符串是否包含's',返回true
'string'.startsWith('s') // 字符串是否以's'开头,返回true
'string'.endsWith('s') // 字符串是否以's'开头,返回false
- 重复
'a'.repeat(10) // 将字符串重复10次 返回 'aaaaaaaaaa'
- 填充
padStart(len,s) 以s字符串补齐len长度
padEnd(len,s) 以s字符串补齐len长度 从后面
- 字符串模板
. 符号`` \（反引号，TAB建上面\）
- 可以在字符串模板里面任意换行
- 单双引号 特殊符号不需要转义
- 添加变量 ${变量名}
var name = "Mike";
var age = 18;
var str = `大家好我的名字是${name} 今年我${age}岁了`;
数字
- Number.isNaN() 检测是不是NaN
- Number.isInteger() 是不是整数
- 求幂运算符
// 新增求幂运算符 **
2**3 == 2*2*2 // true
- 转换
Number.parseInt() //转换为整数
Number.parseFloat() //转换为浮点数
Set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
// 声明
const s = new Set();
// add方法用来添加一个元素
[1,2,3,4,5,6].forEach(item => {s.add(item)});
console.log(s) // Set([1,2,3,4,5,6])
// Set函数可以接受一个数组作为参数，用来初始化
let arr = [1,2,3,4,5,6];
const s2 = new Set(arr);
console.log(s2) // Set([1,2,3,4,5,6])
// 遍历Set对象一般使用for of
for ( let v of s2) {
console.log(v) // 1,2,3,4,5,6
}
// size属性返回Set对象的长度
console.log(s2.size) // 6
// has方法检测是否包含该元素,返回一个布尔值
console.log(s2.has(2)) // true
// delete方法用来删除一个元素,返回一个布尔值
console.log(s2.delete(2),s2) // true
// Array.from方法可以将 Set 结构转为数组。
console.log(Array.from(s2)) // Array [1,2,3,4,5,6]
//clear方法用来清空Set对象 没有返回值
console.log(s2.clear(),s2) //undefined Set(0)
Map
ES6 提供了新的数据结构 Set。
特点：
- 键名可以是任意数据类型
- 属性排列是有顺序的
- 长度可以通过size获取
// 声明
const m = new Map();
console.log(m) // Map()
// set方法设置键名key对应的键值为value，然后返回整个 Map 结构
m.set({name:'张三'},1)
console.log(m) // Map({'name':'张三':1})
// get方法用来获取key的值
m.set('age','张三')
console.log(m.get('age')) // '张三'
// 遍历Set对象一般使用for of
for ( let [k,v] of m) {
console.log(k,v) // {'name':'张三'} : 1,'age' : '张三'
}
// has方法用来检测是否包含某个键值,返回一个布尔值
console.log(m.has('age')) // true
// size属性返回改Map结构的长度
console.log(m.size) // 2
// Array.from方法可以将 Map 结构转为数组。
console.log(Array.from(m)) // [{'name':'张三'},1],['age','张三']
// delete方法用来删除某个属性,返回一个布尔值
console.log(m.delete('age'),m) // true
// 复制Map对象
let m2 = new Map([...m]);
console.log(m2) // Map({'name':'张三':1})
//clear方法用来清空Map对象 没有返回值
console.log(m.clear(),m) // undefined Map(0)
Symbol
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。
Symbol 值通过Symbol函数生成。
这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。
凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突
特点：
- 每个symbol都不相等
- 通常作为对象的属性名
- 设置或访问对象时候 只能用 []语法
let s1 = Symbol('key01');
let s2 = Symbol('key01');
console.log(s1 == s2) // false
let obj = {[s1]:'张三','s2':'李四'}
console.log(obj) // s2: "李四",Symbol(key01): "张三"
数组
详见 ES6数组连接
函数
-
箭头函数
箭头函数是函数的简写形式
特点- => 左边是函数的参数
- => 右边是函数的执行语句 也是返回值
arr.forEach(item=>console.log(item)) arr.map(item=>item*2)- => 如果参数不是一个用()包裹参数
arr.reduce((a,b)=>a+b)- => 如果执行语句有多条用{}
arr.forEach((item,index)=>{console.log(item,index);})- => 如果执行语句多条，返回用return 关键字
let arr = [1,2,3,4,5] arr.map((item) => { console.log(item); return item ++; })- => 如果返回的是对象用（）
arr.map(item=>({pic:item}))- => this指向 当前的指向环境
默认参数
function add(a=1,b=1){ alert(a+b) } add(4,5); add();
- 不定参数
function add(...args){ // args 就是函数参数的数组列表 }
类
定义：创造实例对象的一个模板
// class 类名{}
class Animal {
// 构造函数
constructor(name){
this.name = name;
}
// 方法
say() { // es6中对象的方法可以简写为方法名加括号
console.log(this.name);
}
// 静态方法定义
static toName(){}
// 静态属性定义
static price=100；
}
// 静态方法
Animal.toName()
// 静态属性
Animal.price; // 100
// 实例化对象
let animal = new Animal('旺财');
// 继承 class 类名 extends 父类名{} super()
class Dog extends Animal{
constructor(){
super(); // 调用继承对象的构造方法
}
}
- getter setter
- 成对出现
- 不能够直接赋值和设置已经有的属性
class Person { consturctor(age){ this.age = age; } // d1.Age 调用大写的Age属性是会执行 get Age()这个函数 返回的小写age的值 get Age(){ return this.age; } // 当 d1.Age=15抵用 set Age 这个方法 最终设置是小写age的值 set Age(val){ this.age = val } }
模块
详见 ES6module连接