文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

ES6知识点1

时间：2019-12-13 19:43:55   收藏：0   阅读：106

1 课程介绍

1.1简介

? ES6 既是一个历史名词（特指2015年发布的标准ES2015），也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017等。

1.2环境安装

? Node.js是JavaScript语言的服务器运行环境，对ES6的支持度比浏览器更高。

? 网址：https://nodejs.org/en/

? 默认安装

1.2.1NPM使用

? 本地安装

? npm install <模块名> 使用：require(‘模块名‘)

? 全局安装

安装模块    npm install    <模块名>  -g
卸载模块    npm uninstall  <模块名>
更新模块    npm update  <模块名>
搜索模块    npm search  <模块名>

2 声明和表达式

2.1解构赋值

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

? 如果解构不成功，变量的值就等于undefined。

? 如果等号的右边不是数组（不是可遍历的结构），将会报错。

? 解构赋值不仅适用于var命令，也适用于let和const命令。

? (1)设置默认值

? 解构赋值允许指定默认值。当等式右边没值或是undefined时，使用默认值。

语法  let [变量=默认值]=[赋值]

? (2)对象的解构赋值

? 解构不仅可以用于数组，还可以用于对象。

var { name, age } = { name: "sss", bar: "12" };    // name：sss ，age：12

? 注意变量必须与属性同名，才能取到正确的值，位置顺序没关系。

? 如果变量名与属性名不一致，必须写成下面这样：

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };        //  baz ："aaa"

? 对象的解构赋值的内部机制是：先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

技术分享图片

? (3)字符串的解构赋值

? 此时的字符串被转换成了一个类似数组的对象。

let [a, b, c, d] = 'nice';     // a为n，b为i，c为c，d为e

? (4)函数参数的解构赋值

function add([x, y]){
  return x + y;
}
add([1, 2]);     // 3

//设置默认值
function move({x = 1, y = 2} = {}) {    // 默认参数 x=1,y=2
  return [x, y];
}
move({x: 3, y: 8});     // [3, 8]
move({x: 3});     // [3, 2]
move({});     // [1, 2]
move();     // [1, 2]

? （5）不能使用圆括号的情况

? 建议只要有可能，就不要在解构中放置圆括号。

? <1>变量声明语句中，不能带有圆括号。

? <2>函数参数中，模式不能带有圆括号。

? <3>赋值语句中，不能将整个模式或嵌套模式中的一层，放在圆括号之中。

总结：解构赋值的使用场景

function move({x = 1, y = 2} = {}) { // 默认值
  return [x, y];
}

move({x: 3});     //   y使用默认值，x：3， y：2

2.2 let和const

2.2.1 let命令

console.log(aa)  // 输出undefined
var aa=2222;    // 实际上是分两步执行  var aa；aa=2222；
let num=111;
let num=222;  // 报错内容：Identifier 'num' has already been declared

2.2.2const命令

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

? const一旦声明变量就必须立即初始化，不能留到以后赋值。

? 只声明不赋值同样会报错。

? const声明的常量不能重新赋值。

    const aa= []; 
    aa.push('firstNumber');     // 可执行 
    aa.length = 0;      // 可执行 
    aa= ['secondNumber'];      // 报错

2.3 Symbol数据类型

2.3.0概述

? 通常情况下，我们可以通过调用Symbol()函数来创建一个Symbol实例

let s1 = Symbol()

传入一个可选的字符串参数，相当于给你创建的Symbol实例一个描述信息：

let s2 = Symbol('another symbol')

2.3.1作为属性名的Symbol

由于每一个Symbol值都是不相等的，这意味着Symbol值可以作为标识符用于对象的属性名，这就能保证不会出现同名的属性。

var name= Symbol();

// 第一种写法
var student= {};
student[name] = 'jack!';    //  Symbol值name作为student的属性


// 第二种写法
var student= {
  [name]: 'jack!'        //注意要使用方括号包裹，不放在方括号中，该属性的键名就是字符串
};

注意，Symbol值作为对象属性名时，不能用点运算符，要使用方括号。

取值对象的Symbol类型的属性也要用方括号。普通属性是直接用点运算符。

因为点运算符后面总是字符串

2.3.2 Symbol类型定义常量

- 用于定义一组常量，保证这组常量的值都是不相等的。

- 常量使用Symbol值最大的好处，就是其他任何值**都不可能有相同的值**了。
levels = {
  DEBUG: Symbol('debug'),
  INFO: Symbol('info'),
  WARN: Symbol('warn')
};

console.log(levels.DEBUG)        //  Symbol(debug)
console.log(levels.INFO)           //   Symbol(info)
console.log(levels.WARN)         //  Symbol(warn)

2.3.3 属性名的遍历

? Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、JSON.stringify()等返回。

var obj = {};

var name = Symbol('name');
var age = Symbol('age');
obj[name] = 'huang';
obj[age] = '23';

var objectSymbols = Object.getOwnPropertySymbols(obj);        // 是个数组，可以用for循环遍历
console.log(objectSymbols)        //  [ Symbol(name), Symbol(age) ]
console.log(obj[name])        //  huang     取出Symbol类型的属性要用方括号
var name = Symbol('name');
var age = Symbol('age');

var obj = {
    [name] : 'huang',    //  Symbol类型属性
    [age] : '23',        //  Symbol类型属性
    num : 1        //  普通属性
};

console.log( Reflect.ownKeys(obj))  // [ 'num', Symbol(name), Symbol(age) ]返回值是数组

2.3.4Symbol.for()，Symbol.keyFor()

    var s1 = Symbol.for("foo");
    Symbol.keyFor(s1)             // "foo"       使用Symbol.for有登记名字

    var s2 = Symbol("foo");
    Symbol.keyFor(s2)             // undefined        使用Symbol未登记名字

2.3.5 单例中使用Symbol

const FOO_KEY = Symbol.for('foo');        // 使FOO_KEY变成Symbol类型

function A() { 

  this.foo = 'hello';
}

if (!global[FOO_KEY]) {    //  如果不存这个实例创建新的，存在就跳过

    global[FOO_KEY] = new A();           // 创建一个新的实例，把实例放到顶层对象global
}

module.exports = global[FOO_KEY];        // 暴露这个实例，可以被其他文件引用

3 内置对象及扩展

3.1字符串的扩展

3.1.1字符的Unicode表示法

console.log("\u20BB7");    // JavaScript会理解成 \u20BB+7 ，所以只会显示一个空格，后面跟着一个7
console.log("\u{20BB7}");   //输出：告

3.1.2遍历字符串

    for (let i of 'abcd') {
      console.log(i)
    }
    //a
    //b
    //c
    //d

3.1.3其它方法

'a'.repeat(3)        // "aaa"
'ok'.repeat(2)     // "okok"
'ok'.repeat(0)     // ""
'ok'.repeat(3.9)     // "okokok"        参数为小数只取整数部分，参数为负数会报错，参数为NaN就是0

3.1.4模板字符串

    $('.op').append(`
        I am ${info.age} years old
    `)

3.15标签模板

alert`123`    // 字符串123跟在 alert函数后面
// 等同于
alert(123)

var a = 5;
var b = 10;
tag`Hello ${ a + b } world ${ a * b }`;        // tag表示一个函数
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

3.2正则的扩展

3.2.1正则（RegExp）构造函数

3.2.2 u修饰符

? ES6对正则表达式添加了u修饰符，含义为“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符。也就是说，会正确处理四个字节的UTF-16编码。

/^\uD83D/u.test('\uD83D\uDC2A')               // 打印值为false
//★结果说明：加了u修饰符以后，ES6就会识别其为一个字符，所以第一行代码结果为false。

3.2.3y 修饰符

? y修饰符，叫做“粘连”（sticky）修饰符

var r = /abc\d/y;
r.sticky     // true

3.3数值的扩展

3.3.1二进制和八进制表示法

3.3.2Number对象

? ES6新提供了Number.isFinite()和Number.isNaN()两个方法,只对数值有效，非数值一律返回false。

3.3.3Math对象的扩展

3.4数组的扩展

3.4.1Array.from方法

? 用于将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

// 类似数组的对象
var arr= {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES6的写法
var  arr2 = Array.from(arr);     // ['a', 'b', 'c']

Array.from('hello')        //  ['h', 'e', 'l', 'l', 'o']

Array.from([1, 2, 3], (x) => x * x)        // [1, 4, 9]        =>是箭头函数

3.4.2Array.of方法

Array.of(7, 8, 9)     // [7,8,9]
Array.of(13)         // [13]
Array.of()     // []
Array.of(13).length     // 1

var num = Array(2);        // 使用Array 方法
var num2 = Array.of(2);    // 使用Array.of 方法
num.length          //  2
num2.length        //  1

3.4.3数组实例copyWithin()方法

? 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

语法 Array.prototype.copyWithin(target, start = 0, end = this.length)

其中有三个参数（应该是数值类型，不是的话会自动转为数值）：

//将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。
[1, 2, 3, 4, 5].copyWithin(0, 3)  // 替换后的结果 [4, 5, 3, 4, 5]

//将下标为3号和4号位复制到下标为0号位和1号位  
[1, 2, 3, 4, 5].copyWithin(0, 3, 5)        //     [4, 5, 3, 4, 5]

//     -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)        //     [4, 2, 3, 4, 5]

/从下标为2开始替换（也就是数值9），后两个参数没写，替换的内容默认从下标为0开始（数值8，5，9）
[8,5,9,4,3].copyWithin(2)    //  [ 8, 5, 8, 5, 9 ]

3.4.4数组实例的find()和findIndex()

3.4.5其他数组实例的方法

3.5函数的扩展

3.5.1箭头函数

? ES6允许使用“箭头”（=>）定义函数。箭头函数使得表达更加简洁。

var    f = (参数)=>{ 代码块}
var    ff = (x,y)=>{ return x+y }
// 相当于
var f = function(参数){ 代码块 }
var ff = function(x,y){ return x+y }

const full = ({ first, last }) => first + ' ' + last;
// 等同于
var person={ first, last }；
function full(person) {
  return person.first + ' ' + person.last;
}

3.5.2箭头函数this对象指向

3.5.3函数的默认值

//ES6之前
function log(x, y) {
    y = y || 'aaa';        // 设置y的默认值为aaa
    console.log(x, y);
}

//ES6
function log(x, y = 'aaa') {
    console.log(x, y);
}

//对象的解构赋值
function foo({x, y = 5}) {
  console.log(x, y);
}
foo({})     // undefined, 5
foo({x: 1})     // 1, 5
foo({x: 1, y: 2})     // 1, 2
foo()     // 报错内容：TypeError: Cannot read property 'x' of undefined

3.5.4函数的length属性

(function (a) {}).length     // 1
(function (a = 5) {}).length     // 0
(function (a, b, c = 5) {}).length     // 2

(function (a = 0, b, c) {  }).length     // 0
(function (a, b = 1, c) {  }).length     // 1

3.5.5函数默认值的作用域

var x=1;    // 全局变量x
function f(x, y = x) { console.log(y);  }
f(5);   //5 
//★：结果说明：调用时，由于函数作用域内部的变量x已经生成，所以y等于参数x，而不是全局变量x。

let x = 1;        // 全局变量 x
function f(y = x) {
  let x = 2;        // 局部变量 x 
  console.log(y);
}
f() // 1
//★结果说明：函数调用时，y的默认值变量x尚未在函数内部生成，所以x指向全局变量。

3.5.6rest参数

function add(...values) {
  let sum = 0;
  for (var num of values) {
    sum += num;
  }
  return sum;
}
add(4, 5, 6,7)    // 22

3.5.7扩展运算符

console.log( ...[1, 2, 3] )    // 1   2   3
console.log(  ...[1, 2, ...[1,2,5],3] )    // 1  2  1  2  5  3
console.log(  ...[1, 2, [1,2,5],3] )    // 1  2  [ 1, 2, 5 ]  3

function add(x, y) {
    return x + y;
}
var numbers = [4, 38];
add(...numbers)     // 42

3.5.8尾调用和尾递归

//**尾调用**
function f(x){
    return g(x);
}

//递归**
function foo(n) {
  if (n === 1) return 1;
  return n * foo(n - 1);
}
foo(5)     // 120

原文：https://www.cnblogs.com/xuzhengguo/p/12036959.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！