ES6标准入门第7-9章笔记

最新推荐文章于 2022-06-21 20:07:18 发布

Mr_Xiao_Ming2

最新推荐文章于 2022-06-21 20:07:18 发布

阅读量225

点赞数

分类专栏：笔记文章标签： ES6

本文链接：https://blog.csdn.net/Mr_Xiao_Ming2/article/details/80034000

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第七章数组扩展

1. Array.from()

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

类似数组对象和可遍历对象。
let arraylike{
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
};
Array.from(arraylike);//['a','b','c']
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回后的数组。

2. Array.of()

Array.of用于将一组数值转换为数组。
Array.of(3,4,5);//[3,4,5]

这个方法的主要目的是弥补数组构造函数Array()的不足。比如Array(3)；会识别为长度为3的数组。

3. copyWithin()

copyWithin方法，在当前数组内部将指定位置的成员复制到其他位置（会覆盖现在的成员），他接受3个参数

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

4. find()和findIndex()

find方法，用于找出第一个符合条件的数组成员。如果没有符合的，则返回undefined。
[1,2,3,4].find(n=>n>3);//4
findIndex方法则返回第一个符合条件的成员的位置。如果没有，则返回-1

5. fill()

fill方法使用给定值填充数组
[1,2,3].fill(2);//[2,2,2]
也可以这样,在指定位置填充
[1,2,3].fill(3,1,2);//[1,3,3]

6. 数组空位

不同与ES5，ES6对于数组的空位会用undefined来填充。
[,,1];//[undefined,undefined,1]

第八章函数

1. 函数参数的默认值

ES6允许为函数设置默认值
function fnc(a=1,b=2){}
fnc();//a=1,b=2
还可以与解构赋值结合使用
function fnc({x,y=5}){
    console.log(x,y);
}
fnc({});//undefined,5
fnc({x:1});//1,5
fnc({x:1,y:2});//1,2
fnc();Error
参数的默认值应当是函数的尾参数，否则容易报错。
function fnc(x=1,y){}
fnc(,1);//报错

2. 函数的length属性

指定默认值后，函数的length属性将返回没有指定默认值的参数个数。也就是说设定了默认值后，函数length属性将失真。

3. 作用域

代码理解更为直观
var x = 1;
function fnc(x,y=x){
console.log(y);
};
fnc(2);//2
若是调用时x没有生成，则看全局变量
var x=1;
function fnc(y=x){
    let x = 2;
    console.log(y);
}
fnc();//1
如果调用函数时，x未定义，则会报错

4. rest参数

个人认为，rest参数真的是一个强大的参数。

rest参数（形式为"...变量名"），用于获取函数的多余参数。
function add(...values){
    let sum = 0;
    for(var val of values){
        sum+=val;
    }
    return sum;
}
add(1,2,3,4);//10

同默认值，rest参数必须放在最后一位。且也不计入length属性的长度。

5. 扩展运算符

扩展运算（spread）是三个点(...)。他好比rest参数的逆运算，将一个数组转换为用逗号分隔的参数序列。
console.log(...[1,2,3]);//1,2,3

6. name属性

匿名函数

var fnc = function(){};
fnc.name//ES5会为空，而ES6则为fnc

7. 箭头函数

基本用法

ES6允许使用箭头（=>）定义函数

var f = v=>v;
//等同于
var f = function(v){
return v;
}

//若需要多个参数

var f = (x,y)=>x+y;
//若箭头函数的代码块多于一条语句
var f = (x,y)=>{return x+y}
//若返回值是一个对象，则需要用括号括起来
var f = (x,y)=>({x:1,y:2});

箭头函数的this指向的是定义时所在的对象

function fnc(){
var x=1;
return ()=>this.x;//1
}

箭头函数不能用做构造函数
箭头函数没有arguments对象
不可以使用yield命令，因此箭头函数不能用作Generater函数
箭头函数自身没有this

第9章对象的扩展

1. 属性的简洁表示法

ES6允许直接写入变量和函数做为对象的属性和方法。这样书写更加简洁。
var foo='bar';
var baz={foo};
baz;//{foo:'bar'}
//等同于
var baz={foo:'bar'};
除了属性可以简写，方法也可以简写。
var o{
    method(){
        return "hello";
    }
}
//等同于
var o={
    method:function(){
        return "hello";
    }
}
如果某个方法的值是一个Generator函数，则其前面需要加上星号。

2. 属性表达式

JavaScript可以使用表达式做为属性名，这时表达式要写在方括号内。
var obj{
    ['a'+'bc']:123;
}

3. 方法的name 属性

对象方法也是函数，因此也有name属性。

4. Object.is()

Object.is用来比较两个值是否严格相等。它与（===）的行为基本一致。

不同之处：

+0 === -0;//true
NaN ===NaN;//false
Object.is(+0,-0);//false
Object.is(NaN,NaN);//true

5. Object.assign()

Object.assign方法用于将源对象的所有可枚举属性复制到目标对象。它至少要有两个对象作为参数。第一个参数是目标对象，后面都是源对象。只要有一个参数不是对象，都会报错。
var a={a:1,b:1};
var b={b:2,c:2};
var c={c:3};
Object.assign(a,b,c);//{a:1,b:2,c:3}
用途：