一. 扩展运算符
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
该运算符将一个数组，变为参数序列。
1. 扩展运算符的使用
1.1 替代了apply方法
// ES5 的写法
function fn(a, b, c) {
console.log(a, b, c)
}
let arr = [1, 2, 3]
fn.apply(null, arr)
// ES6的写法
function fn(a, b, c) {
console.log(a, b, c)
}
let arr = [1, 2, 3]
fn(...arr)
1.2 可以快速取出数组中的最大值
//es5
Math.max.apply(null,[1,5,2,8]) // 8
//es6
Math.max(...[1,5,2,8])//8
//上面两种方法等同于
Math.max(1,5,2,8)
2. 扩展运算符的应用
2.1 复制数组
//es5 合并一个空数组
const a1 = [1, 2];
const a2 = a1.concat();
//
Array.from(arr)
扩展运算符提供了复制数组的简便写法。
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
2.2 合并数组
扩展运算符提供了数组合并的新写法。
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
3. 与解构组合使用
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
// 扩展运算符只能放在最后
const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错
4. 类数组转数组
扩展运算符还可以将字符串转为真正的数组。
[...'hello']
// [ "h", "e", "l", "l", "o" ]
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
二. 数组循环
1 . 常用循环
for(var i = 0; i < arr.length; i++){
}
while(){
}
2. ES 5 新增的循环方法
新增的循环都是数组身上的方法
- arr.forEach()
- arr.map()
- arr.filter()
- arr.some()
- arr.every()
以上这些方法接收的参数一模一样,接受两个参数
第一个: 就是循环的回调函数
第二个: this指向
2.1 普通for循环
var arr = ["a","b","c","d"]
for(let i = 0; i < arr.length; i++){
console.log(arr[i])
}
2.2 forEach用法
用来代替for循环
let arr = [1, 2, 3, 4, 5]
// 三个参数（当前值，当前索引，数组）
arr.forEach((item, index, arr) => {
console.log(item, index, arr)
})
forEach的this 指向window
var arr = ["a","b","c","d"]
arr.forEach(function(value,index,arr){
console.log(this); // 此时this是window
console.log(value,index,arr);
})
// 如果传了第二个参数
var arr = ["a","b","c","d"]
arr.forEach(function(value,index,arr){
console.log(this); // 此时this就是#document
console.log(value,index,arr);
},document)
如果使用箭头函数,那么this就会发生变化
箭头函数没有自己的this，会查找父作用域的this
var arr = ["a","b","c","d"]
arr.forEach((value,index,arr) => {
console.log(this); // 此时this就是window
console.log(value,index,arr);
})
// 添加第二个参数
var arr = ["a","b","c","d"]
arr.forEach((value,index,arr) => {
console.log(this); // 此时this还是window
console.log(value,index,arr);
},document)
// 将代码放到一个对象中
var obj= {
name: function(){
var arr = ["a","b","c","d"]
arr.forEach((value,index,arr) => {
console.log(this); // 此时this还是obj
console.log(value,index,arr);
},document)
}
}
// 此时obj.name() this指向obj
2.3 map的用法
对原有数据进行修改， 返回一个新数组
多用于数据交互修改
正常情况下,需要配合return使用,返回新数组,如果没有return,这个就相当于forEach
forEach 返回undefined
map如果没有return 则返回元素项数个undefined组成的新数组
// arr.map()
let arr= [
{title: "aa",read: 100},
{title: "aa",read: 100},
{title: "aa",read: 100}
]
let newArr = arr.map((item,index,arr) => {
console.log(item,index,arr);
return item; // item当前对象
})
map 可以重新整理我们的数据结构
// arr.map() 整理后台传过来的数据
let arr= [
{title: "aa",read: 100},
{title: "bb",read: 20},
{title: "cc",read: 50}
]
let newArr = arr.map((item,index,arr) => {
let json = {};
json.shop = `*${item.title}--`;
json.price = `￥${item.read}元`
return json;
})
console.log(arr);
console.log(newArr);
2.4 filter
过滤,过滤一些不合格的元素,如果回调函数返回true,就留下来,添加到返回的新数组中,为false就过滤
// arr.filter() 过滤
let arr= [
{title: "aa",read: 100},
{title: "bb",read: 20},
{title: "cc",read: 50}
]
let newArr = arr.filter((item,index,arr) => {
return item.read > 50;
})
console.log(arr);
console.log(newArr);
filte方法去重
let arr = [2,1,3,5,2,3,1];
let newArr = arr.filter((val,index,arr)=>{
return arr.indexOf(val) == index;
})
console.log(newArr); // [2, 1, 3, 5]
2.5 some every
这个方法感觉像查找比对的意思,返回的结果是布尔值
let arr = ["a","b","c","d"]
let b = arr.some((item,index,arr) => {
return item == "c";
})
console.log(b); // true
只要在回调中返回一个true 那么整个结果就是true,
感觉像查询,数组中只要有一项符合条件,那么就返回true,如果都是false 那结果就是false
// every 判断数组里面是不是都是奇数
let arr = [1,3,7,9,5]
let b = arr.every((item,index,arr) => {
return item % 2 == 1;
})
console.log(b); // true
而every则刚好相反,every是数组中每一项都为true,才返回true ,只要有一项不符合条件都是false
3. ES 5 新增的不一样方法
2.6 reduce reduceRight
reduce
从左往右计算
reduceRight
是从右往左计算
let arr = [1,2,3,4,5,6,7,8,9,10]
let res = arr.reduce((total, current) => {
return total + current
}, 0);
console.log(res); //55
三. ES 6 新增的循环
es6引入的作为遍历所有数据结构的统一的方法。
一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。
1. for … of 循环
arr.keys() 数组下标集合
arr.values() 数组集合
arr.entries() 数组的每一项的集合
entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
let arr = ["apple","banana","orange"];
for(let val of arr){
console.log(val);
}
// 和for循环很像
// 这个只是循环值,如果循环索引怎么办
for(let index of arr.keys()){
console.log(index);
}
// arr.keys() 就是arr数组索引的集合
// 如果想索引和值一起循环
for(let item of arr.entries()){
console.log(item); // item 是有数组的下标和值组成的数组如[0,"apple"]
}
// 也可以像下面这样写
for(let [key, val] of arr.entries()){
console.log(key, val); // 打印索引和值 0 "apple"
}
四.ES 6新增方法
1. Array.from()
作用: 把类数组(获取一组元素,arguments)对象转成数组
1.1 拷贝数组
// ES5的方法
var arr2 = [].slice.call(arr);
var arr2 = Array.prototype.slice.call(arr);
// ES6的方法
let arr = [1,2,3];
let arr2 = [...arr];
// 第二种就是
let arr3 = Array.from(arr);
1.2 Array.from()
参数：
- 第一个参数：一个类数组对象，用于转为真正的数组
- 第二个参数：类似于数组的
map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。- 第三个参数：如果
map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。
// 将arguments转数组
function haha(){
console.log(arguments); // 类数组
console.log(Array.from(arguments)); // 数组
}
haha(1,2,3,4)
什么是类数组.有length就靠谱
var str = "wuwei";
var arr = Array.from(str);
console.log(arr); // 此时arr就是一个数组了
var obj = {
0: "a",
1: "b",
2: "c",
length: 3
}
var arr = Array.from(obj); // ["a", "b", "c"]
2. Array.of()
把一组值转成数组
var arr = Array.of("a","b","c","d");
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
//Array
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
3. arr.find()
查找第一个符合要求的数组成员,返回值,如果没找到,则返回undefined
const arr = [1,2,3,4,5];
const result = arr.find(number=>number>3);
console.log(result); // 4
4. arr.findIndex()
和find()很像,这是这里找的是位置,返回条件为真时的索引;没找到返回-1
var arr = [50,10,201,103,62,81];
var res = arr.findIndex((val , index ,arr) => {
return val > 100;
})
console.log(res); // 2
5.arr.fill()
arr.fill(需要填充的值, 填充开始位置,填充结束位置);
填充内容不包括结束的位置
var arr = new Array(3);
arr.fill("默认值");
console.log(arr); //["默认值", "默认值", "默认值"]
// 完整用法
var arr = new Array(10);
arr.fill("默认值",1,3);
console.log(arr); // [empty, "默认值", "默认值", empty × 7]
五. ES2016里面新增
1. arr.includes()
查看数组中是否包含参数的值,返回布尔值
var arr = ["apple" , "origan","banana"];
var a = arr.includes("apple");
console.log(a); // true
var b = arr.includes("apple2");
console.log(b); // false
以前我们判断是使用indexOf 判断,结果为-1就是不包含
没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。
indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
六.关于数组的空位
数组的空位指，数组的某一个位置没有任何值。
注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。
// in 索引是否在数组里
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。
forEach(),filter(),reduce(),every()和some()都会跳过空位。map()会跳过空位，但会保留这个值join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
ES6 则是明确将空位转为undefined。
Array.from方法会将数组的空位，转为undefined，也就是说，这个方法不会忽略空位。
Array.from方法会将数组的空位，转为undefined，也就是说，这个方法不会忽略空位。
Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
扩展运算符（...）也会将空位转为undefined。
[...['a',,'b']]
// [ "a", undefined, "b" ]
fill()会将空位视为正常的数组位置。
new Array(3).fill('a') // ["a","a","a"]
for...of循环也会遍历空位。
let arr = [, ,];
for (let i of arr) {
console.log(1);
}
// 1
// 1
上面代码中，数组arr有两个空位，for...of并没有忽略它们。如果改成map方法遍历，空位是会跳过的。
entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0
由于空位的处理规则非常不统一，所以建议避免出现空位。
3789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
