首页 > 其他 > 详细

ECMAScript6 新特性学习

时间:2020-07-11 17:56:30      阅读:49      评论:0      收藏:0      [点我收藏+]

1.let 和 const命令

  以前js中常用的ES3.0,声明变量时使用 var,被var声明的变量是一个全局变量,整个js代码块都可以用。

  ES6新增了let,被let声明的变量只能在当前代码块使用。  

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

  const则是ES6新增的常量声明命令,被申明的常量,后续不能再发生变化。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

2.变量的解构赋值

  ES6允许按照一定的模式,从数组和对象中提取值,并赋给变量,这被称为解构(Destructuring)。

  1.数组的解构

    本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。 

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = [‘a‘];
x // "a"
y // undefined
z // []

  解构赋值允许指定默认值。

let [foo = true] = [];
foo // true

let [x, y = ‘b‘] = [‘a‘]; // x=‘a‘, y=‘b‘
let [x, y = ‘b‘] = [‘a‘, undefined]; // x=‘a‘, y=‘b‘
let [x, y = ‘b‘] = [‘a‘, null]; // x=‘a‘, y=null

  ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。 

  2.对象的解构是根据对象名称来找对应值得,所以当对象中没有匹配到对应的对象名称时,会返回undefined 

let { bar, foo } = { foo: aaa, bar: bbb };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: aaa, bar: bbb };
baz // undefined

    例一将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。例二将console.log赋值到log变量。

// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log(‘hello‘) // hello

    如想自定义要赋值的变量名,做法如下

let { foo: baz } = { foo: ‘aaa‘, bar: ‘bbb‘ };
baz // "aaa"

let obj = { first: ‘hello‘, last: ‘world‘ };
let { first: f, last: l } = obj;
f // ‘hello‘
l // ‘world‘

    对象解构的默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = ‘Something went wrong‘ } = {};
msg // "Something went wrong"

3.map和reduce函数

  map会对数组中的每个元素分别做处理(分散处理)。

let array = [‘2‘,‘3‘,‘4‘,‘5‘,‘6‘];
let array2 = array.map(s => parseInt(s));
array2
(5) [2, 3, 4, 5, 6]

  reduce则是会拿数组中第一个元素和第二个元素当做首元素a和次元素b做运算,然后再拿刚才的运算结果当成a,数组中的第三个元素当做b继续做运算,再拿远算结果继续一直到数组最后一个(聚合处理)

let sum = array2.reduce((a,b) => a+b);
sum
20

4.强烈建议去以下地址去学习ES6,当前时间不够,先做简单了解,后续有空去该网站学习。

  https://es6.ruanyifeng.com/

    

ECMAScript6 新特性学习

原文:https://www.cnblogs.com/wangsanmuya/p/13284226.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!