静思田园

Appearance

数组类型 ​

Array.from ​

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

类数组对象 ​

javascript
let str = '我爱你';
console.log(Array.from(str)); //["我", "爱", "你"]

为对象设置length属性后也可以转换为数组，但要下标为数值或数值字符串，并且对象键值为数值或数值字符串。

js
let user = {
    "name": 'love',
    '1': 18,
    length: 5
}
console.log(Array.from(user)) //[undefined, 18, undefined, undefined, undefined]

user = {
    1: '1',
    "2": 'love',
    '4': 18,
    length: 5
}

console.log(Array.from(user)) // [undefined, '1', 'love', undefined, 18]

DOM 元素转换为数组后来使用数组函数，第二个参数类似于map 函数的方法，可对数组元素执行函数处理。

html
<body>
    <button message="button1">button</button>
    <button message="button2">button</button>
</body>

<script>
    let btns = document.querySelectorAll('button');
    console.log(btns); //包含length属性
    Array.from(btns, (item) => {
        item.style.background = 'red';
    });
</script>

解构赋值 ​

默认值 ​

为变量设置默认值

javascript
let [name, site = 'v1'] = ['v2'];
console.log(site); //v1

扩展语法 ​

使用fill 填充数组元素

js
  console.dir(Array(4).fill("love"));

指定填充位置

javascript
console.log([1, 2, 3, 4].fill("love", 1, 2)); //[1, "love", 3, 4]

splice ​

删除数组元素第一个参数为从哪开始删除，第二个参数为删除的数量。

通过修改length删除最后一个元素

javascript
let arr = ["love", "you"];
arr.length = arr.length - 1;
console.log(arr) // [love]

copyWithin ​

使用 copyWithin 从数组中复制一部分到同数组中的另外位置。

js
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr.copyWithin(4, 7, 9)) //[1, 2, 3, 4, 8, 9, 7, 8, 9, 10]

查找元素 ​

find ​

find 方法找到后会把值返回出来，参数为函数.

  • 如果找不到返回值为undefined

返回第一次找到的值，不继续查找

js
let arr = ["1", "2", "3"]
console.log(arr.find(item => item == "3")) // 3

使用includes等不能查找引用类型，因为它们的内存地址是不相等的

javascript
const user = [{ name: "1" }, { name: "2" }, { name: "3" }]
console.log(user.includes({ name: "3" })) //false

find 可以方便的查找引用类型

js
const user = [{ name: "1" }, { name: "2" }, { name: "3" }]
console.log(user.find(user => (user.name = "3"))) //{name: '3'}

循环遍历 ​

forEach ​

forEach使函数作用在每个数组元素上，但是没有返回值。

javascript
let lessons = [
  {title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
  {title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

lessons.forEach((item, index, array) => {
    item.title = item.title.substr(0, 5);
});
console.log(lessons);

for/in ​

遍历时的 key 值为数组的索引

for/of ​

与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。尤其用于迭代器方法。

迭代器方法 ​

keys ​

通过迭代对象获取索引

js
const arr = ["a", "b", "c", "d"]

for (const key of arr.keys()) {
    console.log(key)
}

使用 while 遍历，注意死循环控制。

js
let arr = ["I", "love", "you"]
let keys = arr.keys()
let key = keys.next()
while (!key.done) {
    console.log(key.value)
    key = keys.next()
}

values ​

通过迭代对象获取值

entries ​

返回数组所有键值对，下面使用解构语法循环

js
const hd = ["love", "u"]
const iterator = hd.entries()
let { done, value: [k, v] } = iterator.next()
console.log(v);

扩展方法 ​

every ​

every 用于递归的检测元素，要所有元素操作都要返回真结果才为真。

some ​

使用 some 函数可以递归的检测元素，如果有一个返回 true，表达式结果就是真。

reduce ​

使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始。下面通过函数计算课程点击数的和。

第一个参数是执行函数，第二个参数为初始值

  • 传入第二个参数时将所有元素循环一遍
  • 不传第二个参数时从第二个元素开始循环

函数参数说明如下

参数说明
prev上次调用回调函数返回的结果
cur当前的元素值
index当前的索引
array原数组