jsの实际操作2之数组篇

jsの实际操作2之数组篇

系列文章：
第一章 jsの实际操作1

---

---

前言

后盾人学习笔记

---

数组

数组是多个变量值的集合，数组是Array 对象的实例，所以可以像对象一样调用方法。

1. 创建数组

//使用对象方式创建数组

console.log(new Array(1, '后盾人', 'hdcms')); //[1, "后盾人", "hdcms"]

//使用字面量创建是推荐的简单作法

const array = ["hdcms", "houdunren"];

//多维数组定义

const array = [["hdcms"], ["houdunren"]];
console.log(array[1][0]);

//数组是引用类型可以使用const声明并修改它的值

const array = ["hdcms", "houdunren"];
array.push("houdunwang");
console.log(array);		//["hdcms", "houdunren", "houdunwang"]

//使用原型的 length属性可以获取数组元素数量

let hd = ["后盾人", "hdcms"];
console.log(hd.length); //2

//数组可以设置任何值，下面是使用索引添加数组

let hd = ["后盾人"];
hd[1] = "hdcms";

//下面直接设置3号数组，会将1/2索引的数组定义为空值

let hd = ["后盾人"];
hd[3] = "hdcms";
console.log(hd.length); //4

//声明多个空元素的数组

let hd = new Array(3);
console.log(hd.length);
console.log(hd);

2. 类型检测

检测变量是否为数组类型

console.log(Array.isArray([1, "后盾人", "hdcms"])); //true
console.log(Array.isArray(9)); //false

3. 类型转换

数组=>字符串

// 大部分数据类型都可以使用.toString() 函数转换为字符串。
console.log(['a','xiLin','love'].toString())        //a,xiLin,love
// 也可以使用函数 String 转换为字符串。
console.log(String(['a','xiLin','love']))       //a,xiLin,love
// 或使用join连接为字符串
console.log(['a','xiLin','love'].join('-'))     //a-xiLin-love

使用Array.from可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象。

//第一个参数为要转换的数据，第二个参数为类似于map 函数的回调方法
let str = '后盾人';
console.log(Array.from(str)); //["后", "盾", "人"]
//为对象设置length属性后也可以转换为数组，但要下标为数值或数值字符串
let user = {
   
  0: '后盾人',
  '1': 18,
  length: 2
};
console.log(Array.from(user)); //["后盾人", 18]

4. 展开语法

1. 数组合并
   使用展开语法来合并数组相比 concat 要更简单，使用… 可将数组展开为多个值。
2. 函数参数
   使用展示语法可以替代 arguments 来接收任意数量的参数

//数组合并
let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
console.log(...arr1, ...arr2)

//展开语法函数表达方式
 function hd(site, ...args) {
   
   console.log(site, args); //后盾人 (3) [1, 2, 3]
 }
 hd("后盾人", 1, 2, 3);

function sum(...args){
   
  console.log(args)
  return args.reduce((s,v)=>{
   
    return s+=v
  })
}
let sum1 =  sum(1,2,56,89,36)
console.log(sum1)

3. 节点转换
   可以将DOM节点转为数组，下面例子不可以使用 filter 因为是节点列表

//使用展开语法后就可以使用数据方法
 [...divs].map(function(item){
   
            console.log(item)   
            item.addEventListener('click',function(){
   
                this.classList.toggle('hide')
            })
        })

Array.from(divs).map(function (item) {
   
            console.log(item)
            item.addEventListener('click', function () {
   
                this.classList.toggle('hide')
            })
        })

// 使用原型处理
        Array.prototype.map.call(divs,(item) =>{
   
            item.style.color = 'red'
        })

5. 解构赋值

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构

//数组使用
let xl = ['希林','xiLin']
let [a,b] = xl
console.log(a)   //希林

// 解构赋值数组
function lin(){
   
    return ['希林','xiLin']
}
let [a,b] =  lin()
console.log(a)  //希林

let array = [