es6内置对象扩展运算符+Array的扩展方法+String 的扩展方法+ Set数据结构

扩展运算符 (展开语法)

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

let  ary = [ 1, 2, 3 ];

...  ary                   //1 ,2 ,3

扩展运算符可以将数组拆分成逗号分隔的参数序列

let ary = ['a','b','c'];

...ary  // 'a','b','c'

console.log(...ary);

console.log('a','b','c');    // a b c

扩展运算符应用于数组合并

// 扩展运算符应用于数组合并2种方法

// 方法一:
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...ary2]
console.log(ary3);  //[1,2,3,4,5,6]



//方法二:
let ary1 = [1,2,3];
let ary2 = [4,5,6];
ary11.push(...ary2)
console.log(ary1);   //[1,2,3,4,5,6]

Array 的扩展方法

扩展运算符

将类数组或可遍历对象转换为真正的数组

var oo = document.getElementsByTagName('div');
console.log(oo);
var arr = [...oo];
arr.push('a');
console.log(arr);

 构造函数方法:Array.from()

将类数组或可遍历对象转换为真正的数组

​案例一
let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    '3':'d',
    length:4
};
let arr2 = Array.from(arrayLike); // ['a','b','c']

​
​案例二
变成数组:

var  arrayLike = {
    '0':'张山',
    '1':'李四',
    '2':'王五',
    '3':'嘻嘻',
    '4':'哈哈',
    'length': 5
}
var ary = Array.from(arrayLike);
console.log(ary);

​

案例三
var  arrayLike = {
    '0':'1',
    '1':'2',
    'length':2
}

var ary = Array.from(arrayLike, item => item * 2)
console.log(ary);

数组实例方法:find()

用于找出第一个复合条件的数组成员,如果没有找到返回undefined

案例一
let ary = [{
    id:1,
    name:'张三'
},{
    id:2,
    name:'李四'
}]
let target1 = ary.find((item,index) => item.id == 1);  
let target2 = ary.find((item,index) => item.id == 2);  
let target3 = ary.find((item,index) => item.id == 3);  
console.log(target1);    //  1
console.log(target2);   //  2
console.log(target3);  //  undefined

数组实例方法:findlndex()

用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1

用法:查找元素大于几的那个数组的索引

用法:查找元素大于几的数组里面 的元素索引号是几
案例一
let ary = [1,5,10,15];

let index = ary.findIndex((value,index) => value > 9);

console.log(index); //2    因为10的索引号是10



案例二
let ary1 = [10,20,50];

let index1 = ary1.findIndex( item => item > 15);

console.log(index1); // 1    因为20的索引号是1

数组实例方法:includes()

表示某个数组是否包含给定的值,返回值是布尔值

[ 1 , 2 , 3 ] . includes( 2 )  // true

[ 1 , 2 , 3 ] . includes( 5 )  // false

案例一
let arr = ['b','n','s']

let result1 = arr.includes('n')

console.log(result1);    //true

let result2 = arr.includes('k')

console.log(result2);   //false

String 的扩展方法

模板字符串

es6xin增加字符串的方式,使用反引号定义

let  name  = `小小`

let name = `是个模板字符串`
console.log(name);   //是个模板字符串

模板字符串作用:可以解析变量,换行。

案例一
let name = `莹莹`;

let sayHello = `hello ,我的名字叫 ${name}`;

console.log(name);  //莹莹

console.log(sayHello);  //hello ,我的名字叫莹莹

 模板字符串作用:可以换行,让代码更美观。

​
案例一
​
let result = {
    name:'丽丽',
    age:18
};

let html = `
    <div>
        <span>${result.name}</span>
        <span>${result.age}</span>
    </div>
`;
console.log(html);    //<div> <span>丽丽</span>  <span>18</span>  </div>

​

 模板字符串作用:可以调用函数。

案例一
const fn= ()=>{

    return `我是函数`;
}

let html = `我是模板字符串 ${fn()}`;

console.log(html);     //我是模板字符串 我是函数


实例方法:startsWIith() 和 endsWith()

startsWIith( ) : 表示参数字符串是否在原字符串的头部,返回值是布尔值

endsWith( ): 表示参数字符串是否在原字符串的尾部,返回值是布尔值

let str = `hello word`;
str.startsWith('hello') // true
str.endsWith('!') //true

实例方法:repeat ()

repeat方法表示将原字符串重复n次,返回一个新字符串。

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

' hello '.repeat ( 2 )   //'hellohello'

可以将字符串重复多次,具体重复多少次看你repeat()多少个

console.log('b12'.repeat(3));    //b12b12b12

Set数据结构

es6 提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。

哈希set    set一般用于搜索比较多

Set本身是一个构造函数,用来生成set数据结构。

const  dd  =  new Set ( );

Set函数可以接受一个数组作为参数,用来初始化

const  dd  =  new Set ( [1,2,3,4,5,6] );
​
案例一
const s1 = new Set();
console.log(s1.size);   // 0

const s2 = new Set(['a','b','c'])
console.log(s2.size);   // 3

​

Set数据结构做数组去重

const  s3 = new Set(['a','a','c','c','c'])

console.log(s3.size);   //2


const arr = [...s3];   
console.log(arr)        //变成数组 ["a", "c"]

Set 数据结构实例方法

  • add(value):       添加某个值,返回值是Set结构本身
  • delete(value):   删除某个值,返回一个布尔值,表示删除是否成功
  • has(value):        返回一个布尔值,表示该值是否为Set的成员
  • clear():               清除所有成员,没有返回值
const s = new Set();

s.add(1).add(2).add(3);   //向set结构中添加值

s.delete(2);              //删除set结构中的2值

s.has(1);                 //表示 set结构中是否有1这个值,返回布尔值

s.vlear();              //清除set结构中的所有值

//在set中添加a,b 两个值
const s4 = new Set ();
s4.add('a').add('b');
console.log(s4.size);  //2



//在set中删除值,用到的方法是是delete ,如果要删除里面没有,就false
const r1  = s4.delete('c') 
console.log(s4.size);    //2
console.log(r1);         //false




//判断有没有存在d
const r2 = s4.has('d');
console.log(r2);         //false





//清空所有,最后是0
s4.clear();
console.log(s4.size); //0




猜你喜欢

转载自blog.csdn.net/lv_suri/article/details/128021541