ES6学习

最新推荐文章于 2023-01-13 12:58:10 发布

webmastar

最新推荐文章于 2023-01-13 12:58:10 发布

阅读量273

点赞数

本文链接：https://blog.youkuaiyun.com/webmastar/article/details/79528415

版权

转自：http://blog.youkuaiyun.com/column/details/es6-study.html

一、let和const命令

let和const声明的变量只在代码块内有效

不存在变量提升

变量一定要在声明后使用，否则报错

不允许重复声明

const命令

声明一个只读的常量,一旦声明，常量的值就不能改变
一旦声明变量，就必须立即初始化，不能留到以后赋值

let命令、const命令、class命令声明的全局变量，不属于全局对象的属性

let b = 1;
window.b // undefined

二、解构赋值

数组的解构赋值

let [foo, [[bar], baz]] = [1, [[2], 3]];
let [ , , third] = ["foo", "bar", "baz"];
let [head, ...tail] = [1, 2, 3, 4];

给相应位置赋值undefind，不会影响默认值

var [x = 1] = [undefined];
x // 1

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

字符串的解构赋值

const [a, b, c, d, e] = 'hello';

函数参数的解构赋值

function add([x, y])

用途：

变量交换

[x, y] = [y, x];

函数返回多个值

return [1, 2, 3];

函数的定义

function f([x, y, z]) { ... }

提取JSON数据

let { id, status, data: number } = jsonData;

函数参数的默认值

function foo(x = 11, y = 31)

三、字符串扩展

for...of循环遍历字符串

for (let i of text){ ... }

一个字符串是否包含在另一个字符串中，ES5只有indexof

includes()：返回布尔值，表示是否找到了参数字符串
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部

将原字符串重复n次

'x'.repeat(3)   // "xxx"

padStart()和padEnd() 补全长度，第一个值为最小长度，省略第二个值默认使用空格补全，等于或大于最小长度返回原字符串，补全后超过最小长度，则对补全的字符串进行截取

'x'.padStart(5, 'ab') // 'ababx'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'abc'.padStart(10, '0123456789')// '0123456abc'
'x'.padStart(4) // '   x'

模板字符串

// 多行字符串
`In JavaScript this is
 not legal.`

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

ES5中的常用字符串方法

toUpperCase()把一个字符串全部变为大写
toLowerCase()把一个字符串全部变为小写
indexOf()会搜索指定字符串出现的位置
substring()返回指定索引区间的子串
split()把字符串分割为字符串数组
replace()替换与正则表达式匹配的子串
search()检索与正则表达式相匹配的值

四、数值与数组

数值的扩展

Number.isFinite(), Number.isNaN()

Number.parseInt(), Number.parseFloat()

数组的扩展

Array.from()

`Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）

Array.of()

`Array.of`方法用于将一组值，转换为数组,主要目的，是弥补数组构造函数Array()的不足

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

copyWithin()

copyWithin在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员）

target（必需）：从该位置开始替换数据
start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数

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

find方法，用于找出第一个符合条件的数组成员,没有则返回undefined

findIndex方法,返回第一个符合条件的数组成员的位置,没有则返回-1

填充数组

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

['a', 'b', 'c'].fill(7, 1, 2)//填充值，开始位置，结束位置
// ['a', 7, 'c']

数组实例的entries()，keys()和values()，都是遍历方法

for (let index of ['a', 'b'].keys()) {//遍历键名}
for (let elem of ['a', 'b'].values()) {//遍历键值}
for (let [index, elem] of ['a', 'b'].entries()) {//遍历键值对}

数组的空位

0 in [undefined, undefined, undefined] // true 0位置有值
0 in [, , ,] // false 0位置没值

ES5中的常用数组方法

concat()连接两个或更多的数组，并返回结果
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度
reverse()颠倒数组中元素的顺序
shift()删除并返回数组的第一个元素
slice(start,end)从某个已有的数组返回选定的元素
- start:必需,规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置
- end:可选,规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素
sort(sortby)对数组的元素进行排序,sortby可选，但必须是函数
splice(index,howmany,item1,.....,itemX)删除元素，并向数组添加新元素
- index:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
- howmany:必需。要删除的项目数量。如果设置为 0，则不会删除项目
- item1,…..,itemX:可选。向数组添加的新项目
unshift()向数组的开头添加一个或更多元素，并返回新的长度

五、函数与对象

function log(x, y = 'World') {}//参数的默认值
log('Hello', 'China') // Hello China

function foo({x, y = 5}) {}//与解构赋值默认值结合使用
foo({x: 1, y: 2}) // 1, 2

应用

合并数组

[...arr1, ...arr2, ...arr3]

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

字符串转数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

箭头函数（=>）

var f = v => v;

//等价于

var f = function(v) {
  return v;
};

对象的拷贝Object.assign()

//同名属性，后面覆盖前面
var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
//该方法实行的是浅拷贝，即如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

六、Set、Map

Set

//不能添加相同的值
var s = new Set();
[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));

[...set]
// [1, 2, 3, 4]

Set实例的属性和方法

实例的属性

Set.prototype.constructor：构造函数，默认就是Set函数
Set.prototype.size：返回Set实例的成员总数

实例的方法:

操作方法
- add(value)：添加某个值，返回Set结构本身。
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- has(value)：返回一个布尔值，表示该值是否为Set的成员。
- clear()：清除所有成员，没有返回值
遍历方法
- keys()：返回一个键名的遍历器
- values()：返回一个键值的遍历器
- entries()：返回一个键值对的遍历器
- forEach()：使用回调函数遍历每个成员

Map

var m = new Map();
var o = {p: "Hello World"};

m.set(o, "content")
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

Map实例的属性和方法

实例的属性

size属性返回Map结构的成员总数
实例的方法

操作方式

set(key, value)：设置key所对应的键值，然后返回整个Map结构(本身)
get(key)：读取key对应的键值
has(key)：返回一个布尔值，表示某个键是否在Map数据结构中
delete(key)：删除某个键，返回布尔值
clear()：清除所有成员，没有返回值
遍历方法

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回所有成员的遍历器
forEach()：遍历Map的所有成员

七、Generator函数与Promise对象

执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

如果把yield和return一起使用的话，那么return的值会作为最后的返回值

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

    // (jquery)封装Promise对象和ajax过程
    var jqGetAjaxPromise = function(param){
        return new Promise(function(resolve, reject){
            $.ajax({
                url: param.url,
                type: 'get',
                data: param.data || '',
                success: function(data){
                    resolve(data);
                },
                error: function(error){
                    reject(error)
                }
            });
        });
    };
    // 调用示例
    var p2 = jqGetAjaxPromise({    
        url: 'cross-domain1.txt'
    });
    p2.then(function(data){      
        console.log(data);
        return jqGetAjaxPromise({  
            url:'cross-domain2.txt'
        });
    }).then(function(data2){   
        console.log(data2);
    }).catch(function(err){
        console.log(err);
    });

Promise.all()

var p = Promise.all([p1, p2, p3]);
//p1、p2、p3都是Promise对象的实例，如果不是，就会先调用Promise.resolve方法
//将参数转为Promise实例，再进一步处理

p的状态由p1、p2、p3决定，分成两种情况
1. 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
2. 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

Promise.race()

var p = Promise.race([p1, p2, p3]);
//p1、p2、p3都是Promise对象的实例，如果不是，就会先调用Promise.resolve方法
//将参数转为Promise实例，再进一步处理

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数

八、Class

构造方法： constructor()

继承：class ColorPoint extends Point{ ... } 子类必须在constructor方法中调用super方法