javascript-es6语法

前言

前前后后作为开发已经3年多了,却发现自己只是做了项目,好多东西都没系统地整理和理解,仅停留在运用,甚至很多东西都是一知半解。最近通过自我反省开始进行总结性工作。
大致会分为javascript(包含es5,es6,jquery),css(包含css3),vue,nodejs(包含服务端渲染),lua,按键精灵,建站,小程序(微信小程序,支付宝小程序),app(伪app开发),爬虫等。
本文一般讲解常用或者必须要了解的部分,深入学习部分可自行看资料或者自主学习了解。
我一般讲的实战应用偏多,理论偏少,日常工作中必定会用到的。(主要是我也不是科班出身,理论理解较少)。

相关资料或原文

归纳

  • js和es6的区别
  • let和const
  • 解构
  • 模板字符串
js和es6的区别

js就是javascript,是Netscape这家公司开发的,es6是ECMA这家公司对javascript功能的延伸扩展,每年语法标准协会都会对开发人员提出的优化进行汇总并且决定是否将新方法功能纳入语法,由于是两家公司,涉及商业问题以及名誉问题,所以ECMA公司将新提出的延伸扩展在被录用后,将其命名为:ECMAScript。es6全名为:ECMAScript 2015,是2015年6月份发布的一个大版本6.0,由于和之前的版本存在比较大且明显的区别,无法一次性全部加入,于是会在之后的时间里慢慢加入新的语法,所以ECMAScript 2015年之后的版本统称为es6。javascript是基础,es6是对它的扩展延伸。
另外语法标准协会会在每年的6月份发布语法的更新,但是你也不一定会用到,毕竟js还是依赖于浏览器的实现,浏览器不支持新的语法,一切都不好说。

let 和 const

letconstvar差不多,只是作用域不同,var具有全局作用域,letconst具有局部作用域,即只在它所在的代码块生效。比如:

var arr = [], arr2 = [];
for (var i = 0; i < 10; i++) {
  arr[i] = function() {
    console.log(i);
  }
}
for (let j = 0; j < 10; j++) {
  arr2[j] = function() {
    console.log(j);
  }
}
console.log(arr[6]()); // 10
console.log(arr2[6]()); // 6
// 这是因为let只在自己代码块生效,var会影响到代码块外部,由于循环完毕,i已经等于10,所以如此

另外letconst不存在变量提升,不可重复声明,且增加了块级作用域运用:

// 不可变量提升:
console.log(a); // 报错
let a = 0;


// 不可重复声明:
let b = b;
console.log(b); // 报错


// 这样是可以的
function c() {
  let d = 0;
  if (true) {
    let d = 1;
  }
  console.log(d)
}
c(); // 0


// 块级作用域
{
  let e = 0;
  function fn() {
    console.log(e);
  }
  fn(); // 0
  console.log(e); // 0
}
fn(); // 0
console.log(e); // 报错未定义

此处说下constlet区别,const是常量,指向地址不能改变,在初始时就需要赋值:

const a; // 报错,一旦声明就需要赋值


const a = 0;
a = 1; // 报错,不可重新赋值


const arr = [];
arr = [1, 2, 3]; // 报错,重新赋值了
// 不报错,未重新赋值,只是改变了内部数据
arr[0] = 0;
arr[1] = 1;


let aa = 11;
let bb = 22;
let fn = function fn1() {console.log(aa)}
const fun = fn;
fun(); // 11
aa = 33;
fun(); // 33
fn = function fn2() {console.log(bb)}
fun(); // 33,说明在下2行
// 因为fun常量在初始化时指向的是fn,而fn指向fn1这个方法,堆栈内存地址确定,
// 由于const是不能重新赋值的,所以即使后面fn改了指向,const仍旧指向fn1这个方法。
解构

解构,可以理解为解体重构,解构一般用于变量赋值,增加默认值,其他比较高深的可自主学习。
变量赋值:比如你有很多数据要声明:

// js方法
var a = 0, b = 1, c = 2; 
// es6的解构方法
let [a, b, c] = [1, 2, 3];

增加默认值,一般用在方法中:

// js的增加默认值
function fn1(param) {
  param = param ? param : 0;
}

// es6的解构
function fn2(param = 0) {
  // todo
}

解构在于一一对齐,对应不到值的变量其值就是undefined

你可能感兴趣的:(javascriptes6)