美文网首页
es6新增方法

es6新增方法

作者: 悦者生存 | 来源:发表于2019-05-01 20:31 被阅读0次

字符串新方法

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
var s = 'zfpx';
s.startsWith('z') // true
s.endsWith('x') // true
s.includes('p') // true
  • repeat:repeat方法返回一个新字符串,表示将原字符串重复n次。
'x'.repeat(3);
'x'.repeat(0);

数值的新方法

  • Number.isNaN()用来检查一个值是否为NaN。
Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true
  • Number.isInteger()用来判断一个数值是否为整数。
Number.isInteger(25) // true
Number.isInteger(25.1) // false

数组的新方法

  • from:方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
    https://www.cnblogs.com/jf-67/p/8440758.html
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
  • of:是为了将一组数值,转换为数组(弥补Array方法的不足)
let arr1=Array.of(2,7,9);  //输出[ 2, 7, 9 ]
  • find和findIndex:查到对应的元素和索引
let arr = [1, 2 ,3, 3, 4, 5];
    let find = arr.find((item, index, arr) => {
        return item === 3;
    });
    let findIndex = arr.findIndex((item, index, arr) => {
        return item === 3;
    });

    console.log(find, findIndex);
  • fill :就是填充数组的意思 会更改原数组 Array.prototype.fill(value, start, end = this.length);
let arr = [1, 2, 3, 4, 5, 6];
 arr.fill('a', 1, 2);
 console.log(arr);

+数组实例方法entries(),keys() 和 values()
ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

对象新方法

  • Object.is对比两个值是否相等
为什么会有这个方法?
相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。
console.log(Object.is(NaN,NaN));
这个方法与'==='的行为基本一致
  • Object.assign把多个对象的属性复制到一个对象中,第一个参数是复制的对象,从第二个参数开始往后,都是复制的源对象
var nameObj = {name:'zfpx'};
var ageObj = {age:8};
var obj = {};
Object.assign(obj,nameObj,ageObj);
console.log(obj);

//克隆对象
function clone (obj) {
  return Object.assign({}, obj);
}
  • Object.setPrototypeOf将一个指定的对象的原型设置为另一个对象或者null
var obj1  = {name:'zfpx1'};
var obj2 =  {name:'zfpx2'};
var obj = {};
Object.setPrototypeOf(obj,obj1);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));
Object.setPrototypeOf(obj,obj2);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));
  • proto 直接在对象表达式中设置prototype
var obj1  = {name:'zfpx1'};
var obj3 = {
    __proto__:obj1
}
console.log(obj3.name);
console.log(Object.getPrototypeOf(obj3));
  • super 通过super可以调用prototype上的属性或方法
let person ={
    eat(){
        return 'milk';
    }
}
let student = {
    __proto__:person,
    eat(){
        return super.eat()+' bread'
    }
}
console.log(student.eat());
  • Object.keys(),Object.values(),Object.entries()

Object.keys()
ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

ES2017 引入了跟Object.keys配套的Object.valuesObject.entries,作为遍历一个对象的补充手段,供for...of循环使用。

Object.entries会把对象转化为二维数组

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}


  • class
    使用class这个关键词定义一个类,基于这个类创建实例以后会自动执行constructor方法,此方法可以用来初始化
class Person {
    constructor(name){
        this.name = name;
    }
    getName(){
        console.log(this.name);
    }
}
let person = new Person('zfpx');
person.getName();
  • get与set
    getter可以用来得获取属性,setter可以去设置属性
class Person {
    constructor(){
        this.hobbies = [];
    }
    set hobby(hobby){
        this.hobbies.push(hobby);
    }
    get hobby(){
        return this.hobbies;
    }
}
let person = new Person();
person.hobby = 'basketball';
person.hobby = 'football';
console.log(person.hobby);
  • 静态方法-static
    在类里面添加静态的方法可以使用static这个关键词,静态方法就是不需要实例化类就能使用的方法
class Person {
   static add(a,b){
       return a+b;
   }
}
console.log(Person.add(1,2));
  • 继承extends
    一个类可以去继承其它的类里的东西
class Person {
   constructor(name){
     this.name = name;
   }
}
class Teacher extends Person{
    constructor(name,age){
        super(name);
        this.age = age;
    }
}
var teacher = new Teacher('zfpx',8);
console.log(teacher.name,teacher.age);

生成器(Generator)与迭代器(Iterator)

Generator是一个特殊的函数,执行它会返回一个Iterator对象。 通过遍历迭代器, Generator函数运行后会返回一个遍历器对象,而不是普通函数的返回值。

  • Iterators模拟
    迭代器有一个next方法,每次执行的时候会返回一个对象 对象里面有两个属性,一个是value表示返回的值,还有就是布尔值done,表示是否迭代完成
function buy(books) {
    let i = 0;
    return {
        next(){
            let done = i == books.length;
            let value = !done ? books[i++] : undefined;
            return {
                value: value,
                done: done
            }
        }
    }
}

let iterators = buy(['js', 'html']);
var curr;
do {
    curr = iterators.next();
    console.log(curr);
} while (!curr.done);
  • Generators生成器用于创建迭代器
function* buy(books){
    for(var i=0;i<books.length;i++){
        yield books[i];
    }
}
let buying = buy(['js','html']);
var curr;
do {
    curr = buying.next();
    console.log(curr);
} while (!curr.done);

集合

  • Set一个Set是一堆东西的集合,Set有点像数组,不过跟数组不一样的是,Set里面不能有重复的内容
var books = new Set();
books.add('js');
books.add('js');//添加重复元素集合的元素个数不会改变
books.add('html');
books.forEach(function(book){//循环集合
    console.log(book);
})
console.log(books.size);//集合中元数的个数
console.log(books.has('js'));//判断集合中是否有此元素
books.delete('js');//从集合中删除此元素
console.log(books.size);
console.log(books.has('js'));
books.clear();//清空 set
console.log(books.size);

参考https://www.cnblogs.com/wy120/p/10366025.html

  • Map可以使用 Map 来组织这种名值对的数据
var books = new Map();
books.set('js',{name:'js'});//向map中添加元素
books.set('html',{name:'html'});
console.log(books.size);//查看集合中的元素
console.log(books.get('js'));//通过key获取值
books.delete('js');//执照key删除元素
console.log(books.has('js'));//判断map中有没有key
books.forEach((value, key) => { //forEach可以迭代map
    console.log( key + ' = ' + value);
});
books.clear();//清空map

参考http://es6.ruanyifeng.com/#docs/reflect

相关文章

  • Array方法属性

    ECMAScript 5 Array新增方法 明天再抽时间补充ES6 Array新增方法~~~

  • ECMAScript6 - 学习笔记 整理 - 3

    对象新增方法 数组去重 ES6 新构造函数方法

  • js两个变量交换值

    需求:A和B交换值 方法一: 方法二: 方法三:解构赋值(ES6新增)

  • js常用数组处理方法

    Array常用方法: 1、改变原数组 2、不改变原数组 3、Es5新增 4、Es6新增方法7个

  • 字符串

    1. 字符串方法。 2. ES6新增加的字符串方法。

  • ES6常见面试题 2019-06-14

    1.es6熟悉吗,说几个es6的新增方法 (1)新增声明命令let和const 在es6中通常用 let 和 co...

  • ES6的字符串

    ES6 之前判断字符串是否包含子串,用 indexOf 方法,ES6 新增了子串的识别方法。1.includes(...

  • 新增的数组方法

    ES6新增的数组方法 关于数组中forEach() 、map()、filter()、reduce()、some()...

  • ES6 数组扩展 JavaScript

    [JavaScript数组]一篇中介绍了ES6之前的数组方法。本篇介绍一下ES6里新增的数组方法。 keys,va...

  • JavaScript数组(ES6)

    JavaScript数组一篇中介绍了ES6之前的数组方法。本篇介绍一下ES6里新增的数组方法。 find,find...

网友评论

      本文标题:es6新增方法

      本文链接:https://www.haomeiwen.com/subject/xqmlcqtx.html