源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Javascript 6里的4个新语法

  • 时间:2020-07-28 06:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript 6里的4个新语法
JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段 如果您对 ES6 还不太熟悉,下面4个简单的基础用法可以帮助您快速了解ES6 [b]1.使用 let 和 const 声明变量 [/b]在传统的 ES5 代码中,变量的声明有两个主要问题 (1)缺少块儿作用域的支持 (2)不能声明常量 ES6中,这两个问题被解决了,增加了两个新的关键字:let 和 const 块儿作用域使用 let
var a = 1;
if (true) {
  var b = 2;
}
console.log(a); // 1
console.log(b); // 2

ES5 中 if 块儿内声明的变量 b 可以在块儿外访问
// in ES6
let a = 1;
if (true) {
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

ES6 中 if 块儿内使用 let 声明的变量 b 不能在块儿外访问 下面这段代码是常见的一个比较迷惑人的情况
var a = [];
for (var i=0; i< 5; i++) {
  a.push(function() {
    console.log(i);
  });
}
a.forEach(function(value) {
  value();
});

运行结果是:5, 5, 5, 5, 5 使用 let 声明循环中的变量 i
var b = []; 
for ( let i=0; i< 5; i++) {
  b.push(function() {
    console.log(i);
  });
}
b.forEach(function(value) {
  value();
});

运行结果是:0, 1, 2, 3, 4 [b]定义常量使用 const[/b]
// in ES5

var MY_CONSTANT = true;

MY_CONSTANT = false;

ES5 中不能定义常量,值可以被改,只能靠我们自己来保证
// in ES6
const MY_CONSTANT = true;
MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable

ES6 中使用 const 声明的常量是不可以被改的 [b]2.模板字符串 [/b]下面这种字符串与变量的拼接方式是比较常见的 var url = ‘http://www.' + domain + ‘.com/' + path + ‘?' + queryParams; ES6 提供了简洁的用法 let url = `http://www.${domain}.com/${path}?${queryParams}`; [b]3.新的 Set 和 Map 对象 [/b]ES5 中我们经常使用数组来存储动态数据,例如
var collection = [];
collection.push(1, 2, 1);
console.log(collection); // [ 1, 2, 1]

其中包含了重复数据,如果不想有重复数据,需要使用代码判断
function addToCollection(collection, value) {

  if (collection.indexOf(value) < 0) {

    collection.push(value)

  }

}

ES6 提供了 Set 对象,处理这个情况就方便多了
let collection = new Set();
collection.add(1);
collection.add(2);
collection.add(1);
console.log(collection); // Set {1, 2}

Set 还可以方便的遍历集合,和处理集合中的数据 ES5 中通常使用 object 来存储键值对数据,例如
var collection = {};
collection.a = ‘abc';
collection.b = ‘xyz';

ES6 有了 Map,就可以这样使用
let collection = new Map();
collection.set(‘a', ‘abc');
collection.set(‘b', ‘xyz');

遍历也很简单
collection.forEach(function(value, key) {
  console.log(key + ":" + value);
});
console.log(collection.size);
[b]4.函数参数 [/b]ES6 中函数的参数有两个新特性 默认值
function doSomething(someObject) {
  console.log(someObject);
}

这里有可能会出现运行时错误,需要验证参数
function doSomething(someObject) {
  if (someObject === undefined) {
    someObject = {};
  }
  console.log(someObject);

}

这类的验证代码非常普遍,ES6 中可以给参数设置默认值,就简单了很多
function doSomething(someObject = {}) {

  console.log(someObject);

}

[b]对象解构[/b] 我们常会把一个包含键值对的对象做为参数传给某个函数,然后在函数内获取对象的各个属性
function doSomething(someObject) {
  var one = someObject.propOne;
  console.log(one);
  var two = someObject.propTwo;
  console.log(two);
  var three = someObject.propThree;
  console.log(three);

}

ES6 可以让我们直接在参数中解构对象参数
function doSomething({ propOne, propTwo, propThree }) {
  console.log(propOne);
  console.log(propTwo);
  console.log(propThree);

}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部