es6入门

来源:互联网 发布:鄂州翔天软件 编辑:程序博客网 时间:2024/05/19 19:16

1、let

用来声明变量,但是所声明的变量,只在let命令所在的代码块内有效。不存在变量提升。let实际上为 JavaScript 新增了块级作用域。

{  let a = 10;  var b = 1;}a // ReferenceError: a is not defined.b // 1

var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子

var a = [];for (var i = 0; i < 10; i++) {  a[i] = function () {    console.log(i);  };}a[6](); // 10

上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。


2、const

声明一个只读的常量。一旦声明,常量的值就不能改变。

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

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值,否则会报错。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。


3、变量的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

以前,为变量赋值,只能直接指定值。

let a = 1;let b = 2;let c = 3;

ES6允许写成下面这样。

let [a, b, c] = [1, 2, 3];let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"

如果解构不成功,变量的值就等于undefined。
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。


4、数组扩展

(1)Array.from()

Array.from方法用于将两类对象转为真正的数组

let arrayLike = {    '0': 'a',    '1': 'b',    '2': 'c',    length: 3};// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']// NodeList对象let ps = document.querySelectorAll('p');Array.from(ps).forEach(function (p) {  console.log(p);});// arguments对象function foo() {  var args = Array.from(arguments);  // ...}

(2)Array.of()

Array.of方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]Array.of(3) // [3]Array.of(3).length // 1

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。


(3)copyWithin()

[1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5]

上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。


(4)find()和findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)// -5

上面代码找出数组中第一个小于0的成员。
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。


(5)fill()

fill方法使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]

上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']

上面代码表示,fill方法从1号位开始,向原数组填充7,到2号位之前结束。


5、Symbol

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型。

let s = Symbol();typeof s// "symbol"

Symbol函数前不能使用new命令,Symbol值不能与其他类型的值进行运算,会报错。

0 0