es6中内置对象的扩展(字符串扩展、数组扩展、对象扩展)

责编:menVScode 2018-02-24 20:19 阅读(256)

        1、字符串的扩展

        【1】字符串模板:反引号 ``,${}

let flag = true;
let html = `<ul>
              <li>
                <span>${'首页'}</span>
                <span></span>
                <span></span>
                <span class="${flag ? 'show' : 'hide'}"></span>
                <span></span>
              </li>
            </ul>`;
            
console.log(html);

        【2】新增的字符串方法:repeat;includes、startsWith()、endsWith();

        repeat:对字符串做一个重复的操作

let str1 = 'w';
let str2 = str1.repeat(3);
console.log(str2); // www

        includes():查找字符串中是否包含某个字符,返回布尔值;

        startsWith():查找字符串开头是否包含 某个字符,返回布尔值;

        endsWith():查找字符串结尾是否包含 某个字符,返回布尔值;

let str = 'menvscode';
console.log(str.includes('vs')); // true
console.log(str.includes('vos')); // false

console.log(str.startsWith('me')); // true
console.log(str.startsWith('em')); // false


        2、数组的扩展

        【1】Array.from():把一组类数组对象转换成真正的数组

let lis = document.querySelectorAll('li'); //得到li集合,是一个类数组
console.log(Array.isArray(lis)); // false 判断是不是一个数组
let newLis = Array.from(lis);
console.log(Array.isArray(newLis));

        【2】Array.of():创建一个数组

let arr = Array.of(1,'b',2);
console.log(arr); // [1, "b", 2]

       【3】find():查找数组中符合某条件的元素,并返回第一个符合条件的元素,都不符合则返回undefined;findIndex():返回符合条件元素的下标,都不符合则返回-1。

// find()
let arr = [1,2,3,4];
let res = arr.find(function(el){ // el:代表元素的每一项
    return el>2
})
console.log(res); // 3

// findIndex()
let resIndex = arr.findIndex(function(el){ // el:代表元素的每一项
    return el>2
})
console.log(resIndex); // 2

        【4】fill():给定一个值,对数组进行替换。

// 一个参数:全部替换
let arr = [1,2,3,4];
arr.fill('mvc');
console.log(arr); // ["mvc", "mvc", "mvc", "mvc"] 全部替换成mvc

// 三个参数:增加起、止位置,指定位置替换
let arr = [1,2,3,4];
arr.fill('mvc',2,3);
console.log(arr); // [1, 2, "mvc", 4]


        3、对象的扩展

        【1】对象的简介表示法:es6规定如果属性名和值变量是相同的话,可以直接简写一个。

let a = 1;
let obj = {
    a:a
}
console.log(obj); // {a: 1}

// 简写方式
let obj = {
    a
}

        对象中方法简写

// es5
let obj = {
    mvc: function(){}
}

// es6简写方式
let obj = {
    mvc(){ }
}

        【2】Object.is():用来判断两个数据是否一样,长的是否一样,返回布尔值。

console.log(NaN===NaN) // false
console.log(Object.is(NaN,NaN)) // true

console.log(Object.is(+0,-0)) // false 

        【3】Object.assign():用于将多个对象的合并,将源对象的所有可枚举型,复制到目标对象。

let obj1 = {a:1}
let obj2 = {a:11,b:2}
let obj3 = {c:3}
// 要把obj2和obj3可枚举型的属性合并到obj1当中。
// Object.assign(目标对象,源对象1,源对象2,...)
Object.assign(obj1,obj2,obj3)
console.log(obj1) // {a: 11, b: 2, c: 3}

        如果目标对象属性和源对象的属性一样,则会被源对象给替换。

标签: es6
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码