深入浅出ES6---第一篇

最新推荐文章于 2023-04-22 11:30:00 发布

NINE-NINE

最新推荐文章于 2023-04-22 11:30:00 发布

阅读量771

点赞数

分类专栏： ES6 文章标签： es6

本文链接：https://blog.csdn.net/m0_38099607/article/details/72887942

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算我们现在不打算使用ES6，但是也该懂点ES6的语法了。

let和const

这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。
注意:ES6里let和const没有变量的提升，一定要声明后再使用，但代码编译成ES5之后，变量提升依旧存在.
let
（1）在ES5只有全局作用域和函数作用域，没有块级作用域，而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

let name = 'yuu'

while (true) {
    let name = 'xiao'
    console.log(name)  //xiao
    break
}

console.log(name)  //yuu

（2）另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量，而使用let则不会出现这个问题。

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

const
const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变,当我们尝试去改变用const声明的常量时，浏览器就会报错。
const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug.

const PI = Math.PI
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

注意：当值为基础数据类型时，那么这里的值，就是指值本身。而当值对应的为引用数据类型时，那么这里的值，则表示指向该对象的引用。这里需要注意，正因为该值为一个引用，只需要保证引用不变就可以，我们仍然可以改变该引用所指向的对象。

const obj = {
    a: 20,
    b: 30
}

obj.a = 30;
obj.c = 40;

console.log(obj); // Object {a: 30, b: 30,c:40}
这种情况下只要不是直接覆盖obj的值，只改变属性什么的还是还可以

模版字符串

模板字符串是为了解决使用+号拼接字符串的不便利而出现的。使用反引号“(键盘上esc下面那个键) 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

默认参数（Default Parameters）

以前我们通过下面方式来定义默认参数:

var link = function (height, color, url) {
    var height = height || 50;
    var color = color || 'red';
    var url = url || 'http://azat.co';
    ...
}

但是到参数值是0后，就有问题了，因为在JavaScript中，0表示fasle，它是默认被hard-coded的值，而不能变成参数本身的值。但在ES6，我们可以直接把默认值放在函数声明里:

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

多行字符串（Multi-line Strings ）

ES6的多行字符串是一个非常实用的功能。在ES5中，我们不得不使用以下方法来表示多行字符串：

alert("你好，\n 我叫\n yuu");

然而在ES6中，仅仅用反引号就可以解决了：

alert(`你好
我叫
olive`);

解构(destructuring)赋值

数组以序列号一一对应，这是一个有序的对应关系。
对象根据属性名一一对应，这是一个无序的对应关系。
数组的解构赋值

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a,b,c)  // 1,2,3

对象的解构赋值

const MYOBJ = {
    className: 'trigger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

// es5
var loading = MYOBJ.loading;
var clicked = MYOBJ.clicked;

// es6
const { loading, clicked } = MYOBJ;
console.log(loading);// false

// 还可以给一个默认值，当props对象中找不到loading时，loading就等于该默认值
const { loadings = false, clicked } = MYOBJ;
console.log(loadings);// false

展开运算符(spread operater)

在ES6中用…来表示展开运算符，它可以将数组方法或者对象进行展开。
1.函数调用中使用展开运算符

//函数调用里，将一个数组展开成多个参数，我们会用到apply：
function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);

//ES6
function test(a,b,c) { }
var args = [0,1,2];
test(...args);

2.数组字面量中使用展开运算符
有了ES6，我们可以直接加一个数组直接合并到另外一个数组当中.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

展开运算符也可以用在push函数中，可以不用再用apply()函数来合并两个数组.

var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']

3.用于解构赋值

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

注意：解构赋值中展开运算符只能用在最后，否则会报错
4.展开运算符可以将伪数组变成真正的数组

var list=document.querySelectorAll('div');
var arr=[..list];

Object.prototype.toString.apply(list) // "[object NodeList]"
　Object.prototype.toString.apply(arr) // "[object Array]"