es6 中新增的扩展方法

es6 中新增的扩展方法

Array 的扩展方法

Array.from(参数 1[,参数 2])

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

第一个参数是类数组或可遍历的对象，第二个参数是对数组中的元素处理的函数

let arrayLike = { 0: 10, 1: 3, 2: 6, length: 3 };
let arr1 = Array.from(arrayLike, (item) => item * 2);
console.log(arr1); //[ 10, 3, 6 ]
console.log(arr1 instanceof Array); //true

let arr2 = Array.from(arrayLike, (item) => item * 2);
console.log(arr2); //[ 20, 6, 12 ]

Array.find()

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

let ary = [
  {
    id: 1,
    name: "张三",
  },
  {
    id: 2,
    name: "李四",
  },
];
let target = ary.find((item, index) => item.id == 2); //返回id是2的item
console.log(target); //{ id: 2, name: '李四' }

Array.findIndex()

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

let arr3 = [1, 5, 10, 15];
let index = arr3.findIndex((value) => value > 9);
console.log(index); //2

Array.includes(value)

查找数组中是否有 value 这个值，有则返回 true，没有就返回 false

let arr4 = [1, 2, 3, 4];
console.log(arr4.includes(4)); //true
console.log(arr4.includes(5)); //false

String 的扩展方法

模板字符串

用 ` `来定义

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

• 模板字符串中可以使用${变量名}直接解析变量。

let name = "张三";
let sayHello = `hello,my name is ${name} `; // hello,my name is 张三

• 模板字符串可以换行、可以保留缩进

let result = {
  name: "zhangsan ",
  age: 20,
  sex: "男",
};

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

const sayHello = () => "哈哈哈哈哈";
console.log(`${sayHello()}拜拜`); //哈哈哈哈哈拜拜

startsWith() endsWith()

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

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

let str = "Hello world!";
console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("!")); // true

repeat()

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

console.log("x".repeat(3)); //"xxx"
console.log("hello".repeat(2)); // "hellohello"

Set 数据结构

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

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

const s = new set();
// Set函数可以接受一个数组作为参数，用来初始化。
const set = new set([1, 2, 3, 4, 4]);

利用 Set 结构数组去重

let arr = ["a", "a", "b", "b"];
const s2 = new Set(arr);
console.log(s2); //Set(2) { 'a', 'b' }
arr = [...s2];
console.log(arr); //[ 'a', 'b' ]

Set 的实例方法

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

const s = new Set();
console.log(s.add(1).add(2).add(3)); //Set(3) { 1, 2, 3 }向 set 结构中添加值,返回新的s
console.log(s.delete(2)); //true 删除 set 结构中的 值为2的元素,返回是否删除成功的布尔值
console.log(s); //Set(2) { 1, 3 }
s.has(1); //表示 set 结构中是否有 1 这个值返回布尔值

s.clear(); //清空Set的实例，返回值是undefined

Set 的遍历

与数组一样，Set 的实例也有 forEach 方法，用于对每个成员进行操作，没有返回值

s.forEach((value) => console.log(value)); // 1 2