ES6相关知识
- 1、什么是ES6
- 2、为什么使用ES6
- 3、ES6新增语法
- 4、解构函数
- 5、箭头函数
- 6、ES6的内置对象扩展
1、什么是ES6
ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。
2、为什么使用ES6
每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。
例如:变量的提升特性增加了程序运行时的不可预测性;语法过于松散,实现相同的功能,不同的人可能会写出不同的代码。
3、ES6新增语法
1、let
let是用于声明变量的关键字,只在所处的块级作用域内有效。
if(flag){
let a = 10
}
console.log(a)
//结果:a is not defined
if(flag){
var a = 10}
console.log(a)
//结果:10
由代码结果可知:let关键字声明的变量具有块级作用域,在块级作用域外无法访问;var关键字声明的变量具有全局作用域,在全局作用域下可以访问到。
let声明的变量不存在变量提升
console.log(a)
let a = 20
//结果:a is not defined
2.const
const是用于声明常量的关键字,只在所处的块级作用域内有效。
if(flag){
let a = 10
}
console.log(a)
//结果:a is not defined
声明常量时必须赋值
const PI;
// 结果:Missing initializer in const declaration
常量赋值后,值不能修改
const PI = 3.14;
PI = 100;
//结果 Assignment to constant variable
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary);
// ['a', 'b'];
ary = ['a', 'b'];
//结果 Assignment to constant variable
let、const、var的区别
1.使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
2.使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
3.使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值
4、解构函数
ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构
数组解构
let [a, b, c] = [1, 2, 3];
console.log(a)
//结果:1
console.log(b)
//结果:2
console.log(c)
//结果:3
//如果解构不成功,变量的值为undefined
对象解构
let person = {name:'李四',age:20}
let {naem,age}=person
console.log(name)
//李四
console.log(age)
//20
let{name:Name,age:Age}=person
console.log(Name)
//李四
console.log(age)
//20
5、箭头函数
()=>{ }为箭头函数
()代表函数;
=>指向那一块代码块
{}函数体
const fn = ()=>{}把一个函数赋值给fn
函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
function sum(num1, num2) {
return num1 + num2;
}
//es6写法
const sum = (num1, num2) => num1 + num2;
如果形参只有一个,可以省略小括号
function fn (v) {
return v;
}
//es6写法
const fn = v => v;
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
const obj = { name: '张三'}
function fn () {
console.log(this);
//this 指向 是obj对象
return () => {
console.log(this);
//this 指向 的是箭头函数定义的位置,那么这个箭头函数定义在fn里面,而这个fn指向是的obj对象,所以这个this也指向是obj对象
}
}
const resFn = fn.call(obj);
resFn();
剩余参数
剩余参数语法允许我们将一个不定量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。
function sum (first, ...args) {
console.log(first);
// 10
console.log(args);
// [20, 30]
}
sum(10, 20, 30)
6、ES6的内置对象扩展
Array的扩展方法
扩展运算符
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3,相当于下面的代码
console.log(1,2,3);
扩展运算符可以应用于合并数组
// 方法一
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];
// 方法二
ary1.push(...ary2);
将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];
构造函数方法:Array.from()
将伪数组或遍历对象转换为真正的数组
//定义一个集合
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实例方法:find()
用于找出第一个符合条件的数组成员,如果没有找到返回undefined
let ary = [{id: 1,name: '张三' }, {id: 2,name: '李四' }];
let target = ary.find((item, index) => item.id == 2);
//找数组里面符合条件的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个
实例方法:findIndex()
用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index);
//结果: 2
实例方法:includes()
判断某个数组是否包含给定的值,返回布尔值。
[1, 2, 3].includes(2)
//结果: true
[1, 2, 3].includes(4)
//结果: false