js数组方法返回值和数组的解构
Posted 达不U
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js数组方法返回值和数组的解构相关的知识，希望对你有一定的参考价值。
数组方法
1.foreach()，数组的遍历，一般利用箭头函数，不能用break打断循环
2.map()，数组的遍历并且返回一个新数组，一般转换成字符串后用于页面渲染
3.filter()，数组的筛选，筛选后返回一个新数组，一般用于筛选数组对象中某个属性满足条件后的新数组
4.every()，检测数组是否每一个元素都满足条件，返回true或false，数组为空时返回为true，一般用于全选按钮案例
5.some()，检测数组是否有一个满足条件的元素，返回true或false，数组为空时返回false，工作中最常用
6.find()，找到符合元素的第一个元素，返回找到的那个元素，只返回一个元素,没有则返回undefined
7.findIndex()，找到符合元素的下标，只返回找到那个元素的第一个元素的下标，不满足则返回-1
8.includes()，找到是否包含某个元素的元素并且输出包含元素的元素，不能用于复杂的查找，复杂的查找用find()，没有则返回false
9.indexOf()，判断数组中的所有元素是否包含某个元素，包含则返回数组的下标，不包含则返回-1
10.Array.isArray()，判断是否是数组
11.reduce()方法，讲数组从左到右计算为为一个值，一般用于计算数组的总合、页面的渲染
数组去重的时候进行取反操作，意为当结果不成立时
every()，返回true或false-常用案例（全选）
1.此方法意为是否全部满足条件，全满足为true，不全满足为false
2.此方法为数组的使用方法，如果是伪数组的话是不可以使用的，伪数组可以使用[…伪数组]转为真数组
3.此方法如果数组为空时返回值是true
<script>
const arr = [11, 23, 45]
let yes = arr.every(v => v > 10)
console.log(yes);//true
</script>
全选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*
margin: 0;
padding: 0;
table
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
th
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
td
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
.allCheck
width: 80px;
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
const cks = document.querySelectorAll('.ck');
const checkAll = document.querySelector('#checkAll');
cks.forEach(v =>
v.addEventListener('click', function ()
let selall = [...cks].every(v => v.checked)
if (selall)
checkAll.checked = true
else
checkAll.checked = false
)
)
checkAll.addEventListener('click', function ()
if (checkAll.checked)
cks.forEach(v =>
v.checked = true
)
else
cks.forEach(v =>
v.checked = false
)
)
</script>
</body>
</html>
解构
用变量获取数组里的元素
<script>
const arr = [1, 2, 3, 4, 5]
//声明变量
let [a, b, c, d, e, f] = arr
console.log(a, b, c, d, e, f);//1 2 3 4 5 undefined
<script>
let a = 1;
let b = 2;
[b, a] = [a, b];
let obj =
uname: '姓名',
age: '年龄'
;
let uname, age = obj;
console.log(a, b, uname, obj);
</script>
//输出结果
2 1 '姓名'
Object
age: "年龄"
uname: "姓名"
数组复制（延展运算符的运用）
1.如果将两个数组直接用=连接起来的话，两个数组指向的地址是一样的，所以任意一个数组的值发生了改变的话两个数组的值都会一起改变
2.为了避免这种情况的发生，使用延展运算符进行数组的复制
<script>
let arr = [1, 2, 3, 4];
let newarr = [];
newarr = [...arr];
newarr[0] = 10;
console.log(arr, newarr);
let obj = u: '1', a: 'a' ;
let newobj = ...obj ;
newobj.u = 'u';
console.log(obj, newobj);
</script>
Set对象
永远不会有重复元素的对象
<script>
let arr = [1, 3, 4, 5, 6, 6, 6];
// 将数组转换为set对象（去重）
let set = new Set(arr);
console.log(set);
// 再将对象转换为数组（延展运算符）
arr = [...set];
console.log(arr);
</script>
js——数组方法——函数——解构赋值
《JavaScript权威指南》读后笔记2 ———— 表达式与运算符 ———— 2018-04-23
目录
- 数组方法
- 函数：属性、方法、构造函数
- const 、let、var
- 解构赋值
1. 数组方法
- join()
- reverse()
- sort()
- concat() ：a=[‘‘ant‘,‘cat‘];a.concat(4,3); 结果为：[ant,cat,4 ,3]
- slice(开始位置，结束位置—可选)：索引从0开始；返回本身的值。
- splice()
1 // splice(插入或删除起始位置，删除元素个数—可选) 2 var a=[1,2,3,4,5,6,7,8]; 3 a.splice(4); //返回[5,6,7,8],a是[1,2,3,4] 4 a.splice(1,2); //返回[2,3],a是[1,4] 5 6 // splice()前两参数指定需要删除的数组元素，紧随的任意个数参数指定了需要插入到数组的元素 7 var b=[1,2,3,4,5]; 8 b.splice(2,0,‘a‘,‘b‘); // 返回[],b是[1,2,‘a‘,‘b‘,3,4,5] 9 b.splice(2,2,[1,2],3); //返回[‘a‘,‘b‘],b是[1,2,[1,2],3,3,4,5]
- push() 、pop()
- unshift() 、shift()
- toString() 、toLocaleString()
- ECMAScript 5中的数组方法
1 // forEach()、map()、filter()、every()、some()、reduce()、reduceRight()、indexOf()、lastIndexOf() 2 3 // forEach()从头至尾遍历数组，为每个元素调用指定函数 4 // map()将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值 5 a=[1,2,3]; 6 b=a.map(function(x){return x*x;}); //b是[1,4,9] 7 // filter() 返回的数组元素是调用的数组的一个子集 8 a=[5,4,3,2,1]; 9 small=a.filter(function(x){return x<3;}); //[2,1] 10 // every()、some()是数组的逻辑判定：它们对数组元素应用指定的函数进行判定，返回true或false。 11 a=[1,2,3,4,5]; 12 a.every(function(x){return x<10;}) ;//true:every相当于数学中的“值对所有” 13 a.some(function(x){return x%2===0;}) //true:some相当于数学中的“存在即可”，这里意思是a中含有偶数值即可 14 // reduce()、reduceRight()使用指定的函数将数组元素进行组合，生成单个值（reduceRight按索引从高到低处理数组） 15 var a=[1,2,3,4,5]; 16 var sum=a.reduce(function(x,y){return x+y;},0); //15，数组求和，reduce(执行化简操作的函数，传递给函数的初始值—可选—省略时为数组第一个元素作为初始值) 17 // indexOf()、lastIndexOf()搜索指定值的索引
2. 函数：属性、方法、构造函数
属性：length、prototype
方法：
- call()、apply() ,可以将这两个看做是某个对象的方法，通过调用方法的形式来简介调用函数。
- bind()：ECMAScript 5新增
- toString()
构造函数：Function()
3. 类和模块
4.
- const 常量：不能重复定义，重复定义的话后面重复的定义地方会报错。由于JS中没有块级作用域，常量会被提前至函数定义的顶部。const是保留字。
- let，JS 1.7针对JS缺少块级作用域的短板增加的关键字。let不是保留字。使用时需手动加入版本号<script type="application/javascript; version=1.8">
- 通过let声明的变量只属于就近的花括号括起来的语句块；
- 通过var声明的变量在函数内都是可用的。
5. 解构赋值
- 右侧为数组
let [x,y] = [1,2] ; //等价于let x=1 , y=2 ;
[x,y] = [y,x] ; //交换两个变量的值
- 右侧为对象
参考文章：
本文为自己知识点搜索整理，若有侵权麻烦留言告知，可删除本文章。谢谢(*￣︶￣)
以上是关于js数组方法返回值和数组的解构的主要内容，如果未能解决你的问题，请参考以下文章
03JavaScript程序设计修炼之道 2019-06-04_fe-js-044es6解构赋值之数组解构_2019-06-06_20-10-17 解构赋值数组排序法