循环:
es5新增的一些东西:
循环:
1.for
for(let i=0;i<arr.length;i++){}
2.while
whilearr.forEach()
arr.map()
arr.filter()
arr.some()
arr.every()
arr.reduce()
arr.reduceRight()
forEach()函数:
//forEach()是用来代替for的
// 以下几个使用方法一样
// arr.forEach()
// arr.map()
// arr.filter()
// arr.some()
// arr.every()//接收两个参数:
//forEach(回调函数,this)
// 此时this是指定forEach()中的this,例如:
<script >
let arr = ['apple', 'banana', 'orange', 'tomato'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log("------------");
//此处的forEach()接收三个参数:
//val:数组当前遍历的元素,默认从左往右依次获取数组元素
//index:数组当前元素的索引,第一个元素索引为0,依次类推
//arr:当前遍历的数组
//this:回调函数中this指向
arr.forEach(function (val, index, arr) {
console.log(val, index, arr);
},this);
</script>forEach()中可以指定this对象:
如:
<script >
let arr = ['apple', 'banana', 'orange', 'tomato'];
//此时没有指定this:
{
arr.forEach(function (val, index, arr) {
console.log(this, val, index, arr);
});
}
///指定this后输出
{
arr.forEach(function (val, index, arr) {
console.log(this, val, index, arr);
}, 123);
}
</script>使用forEach()循环输出数组,如:
<script >
let arr = ['apple', 'banana', 'orange', 'tomato'];
//要依次输出数组中全部对象时
{
arr.forEach(function (val, index, arr) {
console.log(arr[index]);
})
}
</script>在forEach()中使用箭头函数无法指定this对象,如:
<script >
let arr = ['apple', 'banana', 'orange', 'tomato'];
//使用箭头函数时:
{
arr.forEach((val, index, arr) => {
console.log(arr[index]);
});
}
console.log("-----------------");
//但是此时在箭头函数中输出this时,指定的是此时的window对象(此时无法指定this):
{
arr.forEach((val, index, arr) => {
console.log(this, val, index, arr);
},123)
}
</script>map()函数:
arr.map()非常有用,用以做数据 映射,正常情况下,需要配合return,如:
<script >
let arr=[
{title:'aaa',read:100,hot:true},
{title:'bbb',read:100,hot:true},
{title:'ccc',read:100,hot:true},
{title:'ddd',read:100,hot:true}
]
let newArr = arr.map((item, index, arr) => {
console.log(item, index, arr);
return 1;
})
console.log(newArr);
</script>如果没有return,那么功能相当于forEach()
注意:使用map()了,就一定要用return,要不然还不如用forEach()map()可以用来重新整理数据结构,如:
<script >
let arr = [
{title: 'aaa', read: 100, hot: true},
{title: 'bbb', read: 100, hot: true},
{title: 'ccc', read: 100, hot: true},
{title: 'ddd', read: 100, hot: true}
]
let newArr = arr.map((item, index, arr) => {
let json = {}
json.t = `^_^{item.title}----------`;
json.r = item.read + 200;
json.hot = item.hot == true && "真棒!!!";
return json;
});
console.log(newArr);
</script>filter()函数:
过滤,过滤掉一些不合格的元素,如果回调函数返回true,就留下来,如:
<script >
let arr = [
{title: 'aaa', read: 100, hot: true},
{title: 'bbb', read: 100, hot: false},
{title: 'ccc', read: 100, hot: true},
{title: 'ddd', read: 100, hot: true}
]
let newArr = arr.filter((item, index, arr) => {
// return item.hot == true;
return item.hot;
})
console.log(newArr);
</script>some()函数:
类似查找,数组里面某一个元素符合条件就返回true,如:
<script >
let arr = ['apple', 'banana', 'orange'];
let b = arr.some((val, index, arr) => {
return val == 'banana';
})
console.log(b);
</script>- 关于some()的应用:
<script >
{
// 实现查找某一元素是否属于该数组
let arr = ['apple', 'banana', 'orange'];
function findInArray(arr, item) {
return arr.some((val, index, arr) => {
return val == item;
});
}
console.log(findInArray(arr, 'orange'));
}
</script>every()函数:
数组里面所有的元素符合条件才返回true,如:
<script >
let arr = [1, 3, 5, 7, 9]
var b = arr.every((val, index, arr) => {
return val % 2 == 1;
});
console.log(b);
</script>reduce()函数:
用于求数组的和 / 阶乘,并接收四个参数
<script >
// 求和:
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
/*
prev:前一个元素
cur:当前循环的元素
index:当前循环索引
arr:整个循环的数组
* */
let res = arr.reduce((prev, cur, index, arr) => {
return prev + cur;
})
console.log(res);
</script><script >
// 求阶乘
let arr = [2, 2, 3];
let res = arr.reduce((prev, cur, index, arr) => {
//Math.pow(a,b) ,a的b次方
// return Math.pow(prev, cur);
// 或者:
return prev ** cur;
});
console.log(res);
</script>reduceRight()函数:
就是reduce从右到左开始的序列,如:
<script >
let arr = [2, 2, 3];
let res = arr.reduceRight((prev, cur, index, arr) => {
return prev ** cur;
});
console.log(res);
</script>for…of…循环:
for…of…中,数组多了几个对象:
arr.keys() 数组下标
arr.entries() 数组某一项
<script >
let arr = ['apple', 'banana', 'orange']
for (let val of arr) {
console.log(val);
}
console.log("--------");
// 循环索引:
for (let index of arr.keys()) {
console.log(index);
}
console.log("--------");
// 循环值和index
for (let item of arr.entries()) {
console.log(item);
}
console.log("或者");
//或者:
for ([key, value] of arr.entries()) {
console.log([key, value]);
}
</script>补充:
- ES2017新增一个运算符: ** 幂
如: 2**3 相当于 Math.pow(2,3)
数组新增的东西:
Array.from():
作用:把类数组(获取的一组元素,arguments…)对象转成数组,如:
<body>
<script>
window.onload = function () {
let aLi = document.querySelectorAll("ul li");
//ES5之前使用:
// let arrLi = [].slice.call(aLi);
// 快速转为数组,方便操作
let arrLi = Array.from(aLi);
arrLi.pop();
arrLi.push('items');
console.log(arrLi);
}
</script>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
</body>将类数组转为数组,如:
一般具备length这个属性就靠谱
<script >
// 不使用Array.from(),并且此时不是数组,无法使用push等:
function show() {
console.log(arguments);
}
show(1,2,3,4,5)
</script><script>
// 使用Array.from(),此时是数组,可以使用push:
function show() {
// console.log(arguments);
let arr = Array.from(arguments);
arr.push('6')
console.log(arr);
}
show(1, 2, 3, 4, 5)
</script>fill()函数:
arr.fill() 用以填充,
参数: arr.fill(填充的东西,开始的位置,结束的位置),如:
<script >
let arr = new Array(10);
arr.fill("默认值",1,3)
console.log(arr);
</script>includes()函数:
为es2016新增
<script >
let arr=['apple','banana','orange','peach']
console.log(arr.includes('orange'));
</script>Object.is()函数与 == 和 ===:
Object.is():比较两个东西是否相等
<script >
// console.log(NaN == NaN);
// console.log(Number.isNaN(NaN));
let b = Object.is(NaN, NaN);
console.log(b);
</script>- == ：等于，两边值类型不同的时候，先进行类型转换，再比较；
- === ：严格等于，只有当类型和值都相等时，才相等；
- Object.is() ：与 === 的作用基本一样，但有些许不同。
对于严格相等，有以下规则，如果 x === y，那么：
a、如果x的类型和y的类型不一样，返回false；
b、如果x的类型是数字，那么：
(1)：如果x是NaN，返回false；
(2)：如果y是NaN，返回false；
(3)：如果x和y是同一个数字值，返回true；
(4)：如果x是+0，y是-0，返回true；
(5)：如果x是-0，y是+0，返回true；
(6)：其余返回false。
c、如果x和y的类型都为undefined或者null，返回true；
d、如果x和y的类型都为字符串类型，那么如果x和y是完全相同的字符编码序列，返回true，否则返回false；
e、如果x和y的类型都为布尔类型，那么如果x和y同为true或者false，返回true，否则返回false；
f、如果x和y是同一个对象值，返回true，否则返回false
=== 和 Object.is() 的区别
Object.is() 的行为与 === 基本一致，但有两处不同：
a、+0 不等于 -0；
b、NaN 等于自身
详细的可以对照下表
