当前位置:   article > 正文

ES6中常用语法_es6语法

es6语法

ECMAScript 6.0(也可以称为ECMAScript2015),ECMAScript 6.0简称 ES6,是 JavaScript 语言的标准。

出来的时间已经很久了,但是我们在工作中,有时候也不会使用。今天我们就来介绍一下。

1、块级作用域(let、const)

块级作用域,就是有{}括号中可用范围,不像之前var定义的变量都是函数作用域。
let定义的变量可以改变值,const定义的都是静态变量,不可以修改的。但是像数组,只对数据进行push操作的话,也可以定义成const的。

2、模版字符串

反引号(``),变量(${})

const msg = 'hello world';
const str =`你好,
${msg}
再见`;
console.log(str);
  • 1
  • 2
  • 3
  • 4
  • 5

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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

5、函数默认参数

  function(a, b=0){   //如果b为空,默认b等于0
  }
  • 1
  • 2

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
//扩展运算符,合并数组
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];
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

剩余参数是把参数转成数组,扩展运算符是把数组转成非数组。

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 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

8、Set和Map数据结构

Set类似于数组,但是成员的值都是唯一的,没有重复的值。

const s = new Set([1,2,3,4,5,5]);	// 会剔除重复的值,实际上 s=={1,2,3,4,5}
s.size;		// 5, 数据结构的大小
  • 1
  • 2

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数据结构的值	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Map是类似Object的一种键值对集合

9、最后其他es6常用的语法

es6模块化 中 import和export 用法 (前端工程化以及如何通过Node.js中babel来编译es6模块化代码)

es6的 promise对象 (JavaScript进阶之Ajax的问题和什么是promise)

asyn 和 await 函数 (fetch和axios接口调用方式的用法)

(Es6简化操作的一些数组方法使用及原理)

谢谢大家!欢迎留言讨论!

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号