ES6常用API

ES6常用API

1、let

let关键字,用来声明变量,它的用法类似于var。
1、let不允许重复声明变量;

var a = 1;
var a = 2;
console.log(a);//2

var b = 3;
let b = 4;
console.log(b);//Identifier 'b' has already been declared

2、 不会添加到window对象下

let b = 4;
console.log(window.b);//undefined

3、let声明变量仅在块级作用域内有效;

if(12){
    // var a = 12;
    let a = 34;
}
console.log(a);//a is not defined

for(var i=0;i<5;i++){
    console.log(i);//0 1 2 3 4
}
console.log(i);// 5

for(let i=0;i<5;i++){
    console.log(i);//0 1 2 3 4
}
console.log(i);// i is not defined

4、不能通过let声明和形参相同的变量;

function fn(a,b){
// var a=1;
let a=1;
}
fn(2,3);//Identifier 'a' has already been declared

5、let声明变量不会提升;

console.log(a);//undefined
var a = 11;

console.log(b);//报错,Cannot access 'b' before initialization
let b = 22;
注意:let声明的变量一定要在声明之后使用,否则报错。

6、暂时性死区

var a = 2;
function test(){
    console.log(a);//报错,Cannot access 'b' before initialization
    let a = 4;
}
test();
应用
var lis = document.querySelectorAll('.list li');
for(var i=0;i<lis.length;i++){
    lis[i].index = i;
    lis[i].onclick = function(){
        lis[this.index].style.color = 'red';
    }
}
for(let i=0;i<lis.length;i++){
    lis[i].onclick = function(){
        lis[i].style.color = 'red';
    }
}

2、const

const和let以上的特性一样
const声明常量

let b=2;
b=4;
console.log(b);//4
const a = 123;
a = 456;// 报错,Assignment to constant variable.
const与let类似,但是,const常量一旦声明,常量将不能重新赋值!

let x;
const y;// 报错,Missing initializer in const declaration
意味着,const一旦声明,就必须立即初始化,不能留到以后赋值!

在工作中,通常为了和变量区分, 声明常量使用大写
const USER_NAME = '张三丰';

const声明的常量不能改变嘛?
不能,常量的内存地址不能改变
本质:const实际上保证的,并不是值不能改变,而是指向的那个内存地址不能改变。

const USER = {
    name: 'xm',
    age: 24
}
USER.age = 25;
USER = {// 报错,Assignment to constant variable.
    name: 'xm',
    age: 25
}
console.log(USER.age);

3、箭头函数

语法:(形参)=>{函数体}

function fn(a,b){}
setTimeout(()=>{});
fun()=>{};// 报错, Malformed arrow function parameter list
let fun = ()=>{};
fun();

什么时候可以简写:
1.只有一个形参时,参数的小括号可以省略

[1,2].forEach(item=>{
    console.log(item);
});

2.当函数体只有一句代码,或只有返回值时,函数体的{}也可以省略

let fn = _ => _ ;  //等同于fn = (_)=>{return _}
console.log(fn(111));

箭头函数需要注意的地方:
1.关于 this 指向问题,箭头函数中没有自己的 this
箭头函数中的this指向外层函数的this

setTimeout(function(){
    console.log(this);//window
},1000);

box.onclick = function(){
    console.log(this);//box
    // setTimeout(function(){
    //     console.log(this);//window
    // },1000);
    setTimeout(()=>{
        console.log(this);//box
    },1000);
}
let test = (a,b)=>a+b;

2.箭头函数内部的 this 不能改变指向

let obj = {a:123};
setTimeout(function(){
    console.log(this);
}.bind(obj),1000);//{a:123}

setTimeout(()=>{
    console.log(this);
}.bind(obj),1000);//报错,missing ) after argument list

3.箭头函数内部没有arguments对象。更不能通过arguments对象访问传入参数。

let fn1 =(a,b)=>{
    console.log(arguments[0]);//报错,arguments is not defined
};
fn1(2,3);

4.不能作为构造函数使用,不能使用new调用

let fn1 = function(){};
function fn2(){};
new fn1();
new fn2();
let fn3 = ()=>{};
new fn3();//fn3 is not a constructor

注意:

1、如果没有参数要有小括号
2、如果有一个参数可以不用小括号
3、如果有多个参数必须加小括号
4、如果仅有一条语句,并且返回该内容,(ES5中的return),可以不写return
5、如果有多条语句,必须加{}将内容括起来,否则将会认为是函数外语句,并且如果return就必须加return语句。
6、箭头函数的this指向是原代码块的this指向,不受其他执行影响。

3、template string((字符串模板)

1、ES6中字符串模板使用反引号 ` 表示,字符串模板中可以解析变量和函数,使用 ${ } 解析


// let showHtml = '<div class="header"><span>'+tit1+'</span><span>'+tit2+'</span></div><div class="content"><span>'+con1+'</span><span>'+con2+'</span></div>';

let showHtml = '<div class="header">'+
                    '<span>'+tit1+'</span>'+
                    '<span>'+tit2+'</span>'+
                '</div>'+
                '<div class="content">'+
                    '<span>内容1</span>'+
                    '<span>内容2</span>'+
                '</div>';

let test = (a,b)=>a+b;

let str = `
    <div class="header">
        <span>${tit1}</span>
        <span>${tit2}</span>
    </div>
    <div class="content">
        <span>${con1}</span>
        <span>${con2}</span>
        <span>${test(3,5)}</span>
    </div>`;

// show.innerHTML = str;
// let name = '小明';
// let age = 24;
// function fn(a,b,c){
//     console.log(a);
//     console.log(b);
//     console.log(c);
// }
// fn `大家好,我叫${name},今年${age}岁`;
// fn `大家好,我叫,今年岁`;
// 函数后面跟字符串模板,函数内部第一个参数一定是数组
</script>
</body>
</html>

4、Destructuring(解构赋值)

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

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

// 数组解构赋值
let arr = [24,77,86,66];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
// let d = arr[3];
//  let [a,b,c,d] = arr;
// console.log( a,d );

// 对象解构赋值
// let obj = {
//     name: 'xiaohong',
//     friends: ['xw','xf','xd'],
//     sex: '女'
// }
// let {name,friends,sex} = obj;
// console.log(name);
// console.log(sex);

// 函数参数解构赋值
// function fn(n,a,s,f){

// }
// fn('xm',23,'男',['xh','xw']);

解构赋值可以作用在函数的参数上,让函数参数的值传递顺序改变
// function fn({n,a,s,f}){
    
// }
// fn({f:['xw','xh'],s:'男',n:'xm',a:25});

5、函数的默认参数

// 基本用法
function first(x = 1, y = 2) {
    console.log("x:"+x ,"y:"+ y);
}
first(); // 'x:1 y:2'
first(100); // 'x:100 y:2'

// 与解构赋值结合
function second({x, y = 2}) {
    console.log("x:"+x ,"y:"+ y);
}
second({}); // 'x:undefined y:2'
second({x:100}); // 'x:100 y:2'
second({x:100,y:200}); // 'x:100 y:200'

// 这种写法在传入多个形参时可以不按顺序写入,会方便很多,但有个问题,
// 没有默认值时,每次都要传“{}”就会显得很麻烦,于是我们可以再设置一次默认值。

// 双重默认值
function third({x = 1 ,y = 2} = {}) {
    console.log("x:"+x ,"y:"+ y);
}
third(); // 'x:00 y:2'
third({x:100,y:200}); // 'x:100 y:200'
third({x:100}); // 'x:100 y:2'

6、includes()方法

1、数组的 includes() 方法用来判断一个数组是否包含一个指定的值,返回布尔值

arr.includes(value,index);
value 要查找的元素值
index 从 index 索引处开始查找 value,默认为 0,可选

2、字符串的 includes() 方法用于判断一个字符串是否包含一个指定的值,返回布尔值

str.includes(searchString,index);
searchString 要搜索的字符串
index 从 index 索引处开始搜索searchString ,默认为 0,可选

// includes()判断数组是否有某个元素
let arr = [1,2,3,4];
console.log( arr.includes(3) );//true
console.log( arr.includes(2,2) );//false

let str = 'hello world';
console.log( str.includes('a') );//false
console.log( str.includes('e',4) );//false

7、Array.from( )

Array.from:将含有length属性,以数字为key的对象、类数组转成真正的数组。
Array.from(obj, map函数);
第一个参数为要转换的对象,第二个参数为一个函数,可选,类似map函数。
map函数 : 遍历数组--操作数组--返回数组
var arr = [1,2,3,4,5];
var newArr = arr.map( (item) => { return item*2 } );
console.log( newArr );

类数组元素集合:
var lis = document.getElementsByTagName("li");
console.log(lis);
lis.push('abc');
console.log(lis);

将lis集合(类数组)转成 数组:
lis = Array.from(lis);
console.log( lis )
lis.push('abc');
console.log(lis);

将对象转成 数组:
var obj = {
    "0" : 10 ,
    "1" : 20 ,
    "2" : 30 ,
    "length" : 3
};
var arr = Array.from( obj );
console.log( arr );

第二个参数是一个匿名函数 实现的是map功能:
var newArr = Array.from( obj , (item) => { return item*2; } )
console.log( newArr );

8、三个点(…)

扩展运算符用三个点号表示,其功能是把数组或类数组对象(部署了iterator接口)展开成一系列用逗号隔开的参数序列。
console.log(...[1, 2, 3]);
console.log(1, ...[2, 3, 4], 5);

var lis = document.getElementsByTagName("li");
console.log([...lis]);

其他用法:
var arr1 = [1,2];
var arr2 = [3,4,5];
function addItems(arr, ...items) {
    arr.push(...items);
};
addItems(arr1,...arr2);  =>  addItems(arr1,3,4,5);
console.log(arr1);

arr.push(...items) 和 addItems(arr1,...arr2) 函数调用都使用了扩展运算符将数组变为参数序列
注意这行:function addItems(arr, ...items) 这里的三个点并不是扩展运算符,而是 rest运算符

rest运算符也是三个点,其功能与扩展运算符恰好相反,把逗号隔开的参数序列组合成一个数组

var arr = [1,2,3];
function fn(...args) {// rest运算符 组合数组
console.log(args);
};
fn(...arr);// 扩展运算符 展开数组
console.log(...arr);

9、Set 和 Map

ES6 提供了两种新的数据结构 Set 和 Map。

Set 是一个构造函数,用来生成 Set 数据结构,它类似于数组,但是成员的值都是唯一的、没有重复的, 初始化 Set 可以接受一个数组或类数组对象作为参数,也可以创建一个空的 Set:

var s1 = new Set();
var s2 = new Set([1, 2, 3]);
console.log(s1);
console.log(s2);

在 Set 中成员的值是唯一的,重复的值自动被过滤掉

var s1 = new Set([1, 2, 2, 3, 1, 4]);
console.log(s1);

Set 的一些属性方法:
size:返回成员总数
add(value):添加某个值,返回Set结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表示该值是否为Set的成员
clear():清除所有成员,没有返回值

var set = new Set([1,2]);
set.add(3);// 添加成员
console.log(set.size);// 3 成员总数
console.log(set);// Set(3) {1, 2, 3}
set.add([4,5]);// 添加成员
console.log(set.size);// 4 成员总数
console.log(set.has(2));// true 有该成员
console.log(set);// Set(4) {1, 2, 3, [4, 5]}
set.delete(2);// 删除成员
console.log(set);// Set(3) {1, 3, [4, 5]}
console.log(set.has(2));// false 没有该成员
set.clear();// 清除所有成员
console.log(set);// Set(0) {}

得益于数据结构 Set 查找更快速高效,但也因为数据结构的内部数据是无序的,无法实现按下标改查,排序等操作

var arr = [1,2,3,'a',4,'b'];
var set = new Set(arr);
console.log(set[0]);// undefined
console.log(set['a']);// undefined

Set 没有类似 getter 的方法,怎么取值呢?
可以遍历取值,或者可以把 Set 转成真正的数组!

var s5 = new Set([4,5,6,7,8]);
var [a,b,c] = [...s5];
console.log(a);
console.log(b);
console.log(c);

var arr = [...s5];
console.log(arr[0]);

遍历 Set 对象

var set = new Set(['a','b','c','d']);
set.forEach((val,key,set)=>{
    console.log('val: '+val);
    console.log('key: '+key);
    console.log(set);
});

使用ES6的 for of 遍历(数组,类数组)

var set = new Set(['a','b','c','d']);
for (const val of set) {
    console.log(val);
}

for/of 与 for/in

for/of:遍历值

var arr = [4,5,6,7];
for (var val of arr) {
    console.log(val);//4 5 6 7
}

for/in:遍历键

var arr = [4,5,6,7];
for (var key in arr) {
    console.log(key);//0 1 2 3
}

var str = 'javascript';
for (var val of str) {
    console.log(val);
}

Map
是一个构造函数,用来生成 Map 数据结构,它类似于对象,也是键值对的集合,但是“键”可以是非字符串, 初始化 Map 需要一个二维数组,或者直接初始化一个空的 Map:

var m1 = new Map();
var m2 = new Map([['a', 123], ['b', 456], [3, 'abc']]);
console.log(m1);
console.log(m2);

Map 的一些操作方法:

set(key, value):设置键值对
get(key):获取键对应的值
has(key):是否存在某个键
delete(key):删除某个键值对,返回一个布尔值,表示删除是否成功

var map = new Map([['a', 123], ['b', 456], [3, 'abc']]);
map.set('c',789);
console.log(map.get('c')); // 789
console.log(map.has('b')); // true 此key存在
map.delete(3); // true 成功删除key
console.log(map); // Map(3) {"a" => 123, "b" => 456, "c" => 789}

遍历 Map 对象

var map = new Map([['a', 123], ['b', 456], [3, 'abc'],['c', 789]]);
map.forEach((val,key,obj)=>{
    console.log('val: '+val);
    console.log('key: '+key);
    console.log(obj);
});

当然也可以使用ES6的 for of 遍历

var map = new Map([['a', 123], ['b', 456], [3, 'abc'],['c', 789]]);
for (const item of map) {
    console.log( item );//数组
}
for (const [key,val] of map) {
    console.log(key+' : '+val);
}

传统 Object 用字符串作键,Object 结构提供了“字符串 — 值”的对应
Map 结构提供了“值 — 值”的对应,是一种更完善的 Hash 结构实现
如果你需要“键值对”的数据结构,Map 比 Object 更快速 更高效 更合适。

10、Symbol类型

// Symbol 表示独一无二的值,第七种数据类型
// console.log( Date.now() === Date.now() );//true
// console.log( Math.random() === Math.random() );//false

// 创建Symbol值
let s1 = Symbol('age');
let s2 = Symbol('phone');//参数phone,描述信息
// console.log(s1);
// console.log(s2);
// console.log( s1 === s2 );//false
console.log( typeof s1 );// 'symbol'

let obj = {
    name: '张三',
    // age: 24,
    sex: '男',
    // s1: 24
    [s1]: 24,
    [s2]: 13500009999,
    [Symbol('address')]: '深圳市宝安区后瑞地铁站'
}
// console.log(obj);
// console.log( obj.s1 );//undefined  对象.属性
// console.log( obj[s1] );//24  对象['属性']
// console.log( obj[Symbol('address')] );//undefined


// 避免以下操作访问到Symbol属性
// for (let key in obj){
//     console.log(key);
// }

// console.log( Object.keys(obj) );

// console.log( Object.getOwnPropertyNames(obj) );

// let obj2 = JSON.stringify(obj);
// console.log(obj2);


// 获取对象的所有Symbol属性
let attrs = Object.getOwnPropertySymbols(obj);
// console.log(attrs);// [Symbol(age), Symbol(phone), Symbol(address)]
// console.log( obj[attrs[2]] );


// 如何每次都能得到相同的Symbol值
let s3 = Symbol.for('age');//生成一个独一无二的值
let s4 = Symbol.for('age');// 系统会自动检测,如果这个值已经存在,就不再重新生成,返回已生成的值
// console.log( s3 === s4 );//true
// console.log( Symbol.for('age') === Symbol.for('age') );//true

let obj3 = {
    name:'xh',
    [Symbol.for('age')]: 24,
    [Symbol.for('sex')]: '男'
}
console.log( obj3[Symbol.for('age')] );

console.log( Symbol.keyFor(s3) );// 'age'


console.log( [1,2] );

11、Object扩展

Object.getOwnPropertySymbols(obj) 
方法会返回当前对象的所有 Symbol 属性,返回数组


Object.setPrototypeOf(obj1,obj2)
方法用来设置一个对象的 prototype 对象,与Object.getPrototypeOf 方法配套

es5 实现原型链接
var obj1 = Object.create(obj2); // 创建一个空对象,并把该对象的原型链接到obj2对象

es6 实现原型链接
Object.setPrototypeOf(obj1,obj2); // 把对象obj1的原型链接到obj2


Object. getOwnPropertyDescriptors(obj)
获取指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。
var obj2 = {
    name: 'xm',
    age: 23
}
var attrObj1 = Object.getOwnPropertyDescriptor(obj2,'name'); // ES5获取一个属性的描述符
var attrObj2 = Object. getOwnPropertyDescriptors(obj2); // 获取所有自身属性的描述符
console.log(attrObj1);
console.log(attrObj2);
{
    configable: true,
    enumerable: true,
    writeable: true,
    value: 'xm'
}


Object.values(obj)
方法返回一个数组,成员是参数对象自身的所有可枚举属性的值(与Object.keys配套)
var obj = { foo: 'abc', baz: 123 };
console.log(Object.values(obj));


Object.entries(obj)
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj); // [ ["foo", "bar"], ["baz", 42] ]

Object.entries方法可以将对象转为真正的Map结构
const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }


Object.assign(target,source)
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = Object.assign({}, obj1);
console.log(obj1.c === obj2.c); // ture
Object.assign 方法是一种对象浅拷贝,如果对象属性是引用类型,只能是拷贝引用地址

对象深拷贝
var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1.c === obj2.c); // false

jQuery.extend(boolean,target,source);


Object.is(val1,val2)
方法用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
不同之处只有两个:一是: +0不等于-0,二是: NaN等于自身。

+0 === -0 //true
NaN === NaN // false

{} === {} // false
Object.is({}, {}); // false

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

12、ES6 类与继承

1、ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。
新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。
无需考虑ES5中令人头疼的几个部分:构造函数、原型、继承…
2、用class定义一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

3、class之间可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承,要清晰和方便很多。
4、super关键字,它指向父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

5、ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

// Class 类 (语法糖)
class Cat {// 父类
    constructor(n,c){//构造函数
        this.name = n;//对象自身属性
        this.color = c;//对象自身属性
        this.traint = function (){
            console.log('喵喵~');
        }
    }
    type = 'animal';//对象自身属性
    skill(){//原型对象上的方法
        console.log('抓老鼠');
    }
    static sayHi(){//静态方法,Cat.sayHi()
        console.log('hi~~');
    }
}
let cat1 = new Cat('小黑','baise');
// console.log( cat1 );
// console.log(cat1.name);
// cat1.skill();
// console.log( cat1.__proto__ === Cat.prototype );//true
// Cat.sayHi();

// 继承
class Dog extends Cat {//子类
    constructor(f,n,c){
        super(n,c);//先调用super方法  Cat.call(this,n,c)
        this.food = f;
        // console.log( super.type );//undefined
        // console.log( this.type );//animal
        // this.skill();//'抓老鼠'
        // super.skill();//'抓老鼠'
        // super.traint();//报错
        // console.log( super );//报错
        // console.log( super === Cat.prototype );
    }
}
let dog1 = new Dog('骨头','大黄','yellow');
console.log( dog1.food );
dog1.skill();
console.log( dog1.name );
console.log( dog1.type );
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页