ES6Array的拓展方法和数组常用api

Array的拓展方法

Array. from()

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

var Persons = {
    '0':'张三',
    '1':'里斯',
    '2':'王武',
    'length':'3'
}
var arr = Array.from(Persons);
console.log(arr);

• 还可以接受第二个参数，作用类似数组的map方法，将处理后的值放入返回的数组

var Persons = {
    '0':'1',
    '1':'2',
    'length':'2'
}
var arr = Array.from(Persons,item => {
    return item * 2
});
console.log(arr);

find()

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

var arr = [
    {
        id:1,name:'张三'
    },{
        id:2,name:'里斯'
    }];
let target = arr.find(item => item.id == 3);
console.log(target);

findindex()

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

let arr = [10,20,22];
let index = arr.findindex(item => {
    return item > 15
});
console.log(index);

includes()

• 查找某个数组是否包含某个给定的值，返回布尔值

let arr = [1,2,3,4];
let result = arr.includes(2);//true
console.log(result);
result = arr.includes(6);//false
console.log(result);

数组常用对象

map()

• 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
• 不会对空数组进行检测
• 不会改变原数组

array.map(function(value,index,arr),thisValue);
//value必须，当前元素的值;index可选，当前元素的索引值;arr可选，当前元素属于的数组对象
var array = [1,4,2,5,7];
const arr = array.map(x => x*2);
console.log(arr);

filter()

• 创建一个新数组数组中的元素是通过检擦指定数组中符合条件的所有元素，主要用于筛选数组
• 直接返回一个新的数组

//filter筛选数组
var arr = [12,66,2,34];
var newArr = arr.filter(function(value,index,array){
    return value >= 20;
});
console.log(newArr);

reduce()

• total， 必须，初始值，第一次循环之后是计算后的返回值；
• currentValue， 必须，当前的元素值；
• currentIndex， 可选，当前元素值的索引；
• array， 可选，原数组；
• initialValue， 可选，传递给函数的初始值，即此值会在第一次循环之前赋值给 total；
• return 经过处理过的 total；

//var result = array.reduce((total, currentValue, currentIndex, array) => { return ... }, initialValue);

//reduce计算数组所有元素的总和
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sum = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);
console.log(sum);
            
//统计字符串中的每个字符出现的次数
const str = '9kFZTQLbUWOjurz9IKRdeg28rYxULHWDUrIHxCY6tnHleoJ';
const obj = {};
Array.from(str).reduce((accumulator,current) => {
    current in accumulator ? accumulator[current]++ : accumulator[current] = 1
    return accumulator;
},obj)
//非reduce的写法
const str = '9kFZTQLbUWOjurz9IKRdeg28rYxULHWDUrIHxCY6tnHleoJ'
const obj = {}
str.split('').forEach(item => {
  obj[item] ? obj[item]++ : obj[item] = 1
})

of()

• 将参数中所有值作为元素形成数组

console.log(Array.of(1,2,3,4));//[1,2,3,4]
//参数值可为不同的类型
console.log(Array.of(1,'2',true));//[1,'2',true]
//参数为空时返回空数组
console.log(Array.of());//[]

fill()

• value
  它定义了要替换数组元素的静态值。
• start（可选）
  它定义了使用静态值填充数组的起始索引。如果未定义此值，则将起始索引视为0。如果start为负，则起始索引为length + start。
• end（可选）
  此参数定义要使用静态值填充数组的最后一个索引。如果未定义此值，则默认情况下，将arr.length - 1的最后一个索引作为结束值。如果结束为负，则将终止索引定义为length + end。

//arr.fill(value,start,end)
//使用fill()填充数组元素
let arr1 = Array(5);
arr1.fill(1);
console.log(arr1);//[1,1,1,1,1]

let arr2 = Array.of(1,2,3,4,5);
arr2.fill(7,2,4);
console.log(arr2);//[1,2,7,7,5]

遍历数组

forEach ()

• 依次遍历元素，执行指定的函数；无返回值

var arr = [1,2,3];
var sum = 0;
arr.forEach(function(value,index,array){
    console.log('每个数组元素'+value);
    console.log('每个数组元素的索引'+index);
    console.log('数组本身'+array);
    sum += value;
})
console.log(sum);

some()

• 用于查找数组中是否有满足条件的元素
• 返回值是布尔值，如果查找到这个元素返回true，查找不到返回false
• 如果找到第一个满足条件的元素，则终止循环，不再继续查找

//some查找数组中是否有满足条件的元素
var arr = [10,23,15,45];
var flag = arr.some(function(value){
    return value >= 20;
});
console.log(flag);

in()

• 判断对象 是否 数组的属性，
• 判断对象 是否 是 对象 的属性。
• 返回布尔值

//数组判断
let person = ['张三','小帅',"王五",4];
console.log(4 in person);//false
console.log(3 in person);// true
//对象判断
let person = {
"name":"张三",
"age":19
}
console.log("age" in person);//true

join()

• 将数组中所有元素通过一个分隔符拼接为一个字符串

['a', 'b', 'c'].join(); //  'a,b,c'
['a', 'b', 'c'].join('-'); // 'a-b-c'

for…of

• for…of循环允许遍历可迭代的对象(数组、集合、映射、字符串等)
• iterable - 一个可迭代对象（数组、集合、字符串等）。
• element - 可迭代的项
• 可以将代码理解为：对于 iterable 中的每个 element，运行循环体

for (element of iterable) {
    // body of for...of
}

//遍历数组
const students = ['John', 'Sara', 'Jack'];
for(let element of students){
    console.log(element);//John,Sara,Jack
}

//遍历字符串的值
const string = 'code';
for (let i of string) {
    console.log(i);//c,o,d,e
}

//for...of循环遍历Set元素
const set = new Set([1, 2, 3]);
for (let i of set) {
    console.log(i);//1,2,3
}

//for…of 循环遍历 Map 元素
let map = new Map();
map.set('name', 'Jack');
map.set('age', '27');
for (let [key, value] of map) {
    console.log(key + '- ' + value);//name- Jack,age- 27
}

//循环遍历迭代器
// creating iterable object
const iterableObj = {

    // iterator method
    [Symbol.iterator]() {
        let step = 0;
        return {
            next() {
                step++;
                if (step === 1) {
                    return { value: '1', done: false};
                 }
                else if (step === 2) {
                    return { value: '2', done: false};
                }
                else if (step === 3) {
                    return { value: '3', done: false};
                }
                return { value: '', done: true };
            }
        }
    }
}

// iterating using for...of
for (const i of iterableObj) {
 console.log(i);//1,2,3
}

//循环遍历生成器
// generator function
function* generatorFunc() {
  
    yield 10;
    yield 20;
    yield 30;
}

const obj = generatorFunc();

// iteration through generator
for (let value of obj) {
    console.log(value);//10,20,30
}

for…in

• 循环遍历对象的所有属性键key
• 循环用于迭代对象并打印其所有属性
• 对象键被指定给变量 key
• student[key] 用于访问的值 key

for (key in object) {
    // body of for...in
}

//遍历对象
const student = {
    name: 'Monica',
    class: 7,
    age: 12
}
for ( let key in student ) {
    console.log(`${key} => ${student[key]}`);
}
//输出
name => Monica
class => 7
age => 12



//更新属性
const salaries= {
    Jack : 24000,
    Paul : 34000,
    Monica : 55000
}
for ( let i in salaries) {
    let salary = "$" + salaries[i];
    console.log(`${i} : ${salary}`);
}
//输出
Jack : $24000,
Paul : $34000,
Monica : $55000

//循环迭代字符串值
const string = 'code';
for (let i in string) {
    console.log(string[i]);//0,1,2,3
}

//循环迭代数组
const arr = [ 'hello', 1, 'JavaScript' ];
for (let x in arr) {
    console.log(arr[x]);//0,1
}

for…in与for…of

• for…of循环用于遍历iterable的值
• for…of循环不能遍历对象
• for…in循环用于遍历对象的键
• for…in不能用于iterable