ECMAScript 6.0(也可以称为ECMAScript2015),ECMAScript 6.0简称 ES6,是语言的标准。
出来的时间已经很久了,但是我们在工作中,有时候也不会使用。今天我们就来介绍一下。
1、块级作用域(let、const)
块级作用域,就是有{}括号中可用范围,不像之前var定义的变量都是函数作用域。
let定义的变量可以改变值,const定义的都是静态变量,不可以修改的。但是像数组,只对数据进行push操作的话,也可以定义成const的。
2、模版字符串
反引号(``),变量(${})
const msg = 'hello world';
const str =`你好,
${msg}
再见`;
console.log(str);
12345
3、解构赋值
从数组和对象中提取值 ,对变量进行赋值 ,这被叫作解构赋值。
// 数组解构
let [a,b,c]=[1,2,3];
console.log(c);
// 对象解构
let {name:myname,age}={name:'lily',age:12};
console.log(myname,age)
// 字符串解构
let str = 'qaz';
let [a,b,c]=str;
console.log(a,b,c);
12345678910
4、箭头函数
箭头函数作为普通函数的一个补充,将this指向了函数体之外最近一层的this,而不是向普通JS一样将this指向window变量。
function fn(){
console.log('real',this) //{a:100}
var arr = [1,2,3]
//普通JS
arr.map(function (item){
console.log('js',this) //window
return item + 1
})
//箭头函数
arr.map(item => {
console.log('es6',this) //{a:100}
return item + 1
})
}
fn.call({a:100}) //将{a:100}设置为this
123456789101112131415
5、函数默认参数
function(a, b=0){ //如果b为空,默认b等于0
}
12
6、剩余参数&扩展运算符
语法都是...arr。不同在于,剩余参数是将一个不定数量的参数表示为一个数组。扩展运算符是将数组(对象)转为用逗号分隔的参数序列。
//剩余参数是把参数转成数组
function func(arg1, ...args){
// arg1 == 1, args == [2,3,4]
}
func(1,2,3,4);
const sum = (...args) =>{
let total = 0;
arrgs.foreach(item => total += item);
return total;
}
1234567891011
//扩展运算符,合并数组
let arr1 = [1,3,5];
let arr2 = [2,4,6];
let arr3 = [...arr1, ...arr2]; // arr3 == [1,3,5,2,4,6];
// 或者
arr1.push(...arr2); // arr1 = [1,3,5,2,4,6];
1234567
剩余参数是把参数转成数组,扩展运算符是把数组转成非数组。
7、对象新增方法,Object.assign()
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); // Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }
123456
8、Set和Map数据结构
Set类似于数组,但是成员的值都是唯一的,没有重复的值。
const s = new Set([1,2,3,4,5,5]); // 会剔除重复的值,实际上 s=={1,2,3,4,5}
s.size; // 5, 数据结构的大小
12
add(value):添加某个值,返回Set结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表该值是否为Set的成员
clear(value):清除所有成员,没有返回值
s.add(6).add(7);++
s.delete(7); //true
s.delete(8); //false
s.has(6); //true
s.has(7); //false
s.clear() // s.size === 0
s.forEach( value => console.log(value)); //遍历s数据结构的值
1234567891011
Map是类似Object的一种键值对集合
9、最后其他es6常用的语法
es6模块化 中 import和export 用法
(前端工程化以及如何通过Node.js中babel来编译es6模块化代码)
es6的 promise对象 (JavaScript进阶之Ajax的问题和什么是promise)
asyn 和 await 函数 (fetch和axios接口调用方式的用法)
(Es6简化操作的一些数组方法使用及原理)
标签:ES6,const,log,...,常见,语法,let,数组,console From: https://www.cnblogs.com/crispyChicken/p/17184298.html