遍历
var arr = [1, 2, 3, 4, 5, 6];
// 第一种 for循环遍历
var newArr = [];
for(var i = 0; i < arr.length; i++){
newArr.push(arr[i])
console.log(newArr)
}
// 第二种 es6语法 arr.forEach()遍历
var newArr = [];
arr.forEach((item) => {
newArr.push(arr[item])
console.log(newArr)
})
// 第三种 Object.keys()遍历
// (个人推荐比较好用：枚举方法) (返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).)
var newArr = [];
Object.keys(arr).forEach((item) => {
newArr.push(arr[item])
console.log(newArr)
})
// 第四种 arr.map(function callback(currentValue[, index[, array]]) 或者这样 array.map(item,index,arr)
// currentValue: callback一系列中正在处理的当前元素 index: callback一系列中正在处理的当前元素的索引。array: map 调用方法的目录
var newArr = []
arr.map((item) => {
newArr.push(arr[item])
console.log(newArr)
})
// 第五种 for...in...遍历
// 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).).
var newArr = []
for(var i in arr ) {
newArr.push(arr[i])
console.log(newArr,'1111111')
}
// 第六种 for-of遍历
//不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象.
//也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历.
var newArr = []
for(var i of arr){
newArr.push(arr[i])
console.log(newArr)
}
// 第七种 Object.getOwnPropertyNames(obj) 遍历
// 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
var newArr = [];
Object.getOwnPropertyNames(arr).forEach((item) => {
newArr.push(arr[item])
console.log(newArr,'!!!!')
})
// 第八种 Reflect.ownKeys(obj)遍历
// 返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
var newArr = [];
Reflect.ownKeys(arr).forEach((item) => {
newArr.push(arr[item])
console.log(newArr)
// 数组可以全部打印出来特别！！！！
})
// -----------------------------------------------------------------
while 循环语法
var i = 1;
while( i <= 5) {
document.write(i+", ");
i++;
}
// 运行结果：1, 2, 3, 4, 5,
// -----------------------------------------------------------------
for 循环语法
for (var i = 1; i <= 10; i++) {
document.write(i + " ");
}
//break 语句
// 使用 break 语句跳出 for 循环
for (var i = 0; i < 10; i++) {
if(i == 5) {
break;
}
document.write("i = " + i + "<br>");
}
document.write("循环之外的代码");
// continue 语句
// continue 语句用来跳过本次循环，执行下次循环。当遇到 continue 语句时，程序会立即重新检测条件表达式，如果表达式结果为真则开始下次循环，如果表达式结果为假则退出循环。
// break 语句用来跳出整个循环，执行循环后面的代码；continue 语句用来跳过当次循环，继续执行下次循环。
for (var i = 0; i < 10; i++) {
if(i % 2 == 0) {
continue;
}
document.write(i + " ");
}
// -----------------------------------------------------------------
for in 循环
// 是一种特殊类型的循环，也是普通 for 循环的变体，主要用来遍历对象，使用它可以将对象中的属性依次循环出来
// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
console.log(prop) // name surname age
console.log(person[prop]) // Clark Kent 36
}
// -----------------------------------------------------------------
forEach 遍历
// forEach方法中的function回调有三个参数：
// 第一个参数是遍历的数组内容，
// 第二个参数是对应的数组索引，
// 第三个参数是数组本身
var arr = [1,2,3,4,5];
arr.forEach((item,index,arr)=>{
//item 为当前数组元素
// index 为当前索引
// arr 为数组名字
console.log(item); // 1 2 3 4 5
})
var arr = [1,2,3,4];
arr.forEach(alert);
// 等价于：
var arr = [1, 2, 3, 4];
for (var k = 0; k < arr.length; k++) {
alert(arr[k]);
}
1遍历数组
var arr = [ 'one ' , 'two' , 'three' l;
for (var arrInKey in arr) {
console.log(arrInKey );
}
// for in会输出索引值，
// for of 会输出数组每一位的值
var arr = ['one ', 'two' , 'three ' ];
for (var arrOfKey of arr) {
console.log(arrOfKey);
}
// 3. forEach 不能使用break continue
// for in和far of是可以使用break continue的
var arr = [ 'one ' , 'two' , 'three' ];
for (var arrOfKey of arr) {
console.log(arrOfKey);
if (arrOfKey == 'two ' )
{break;
}
}
// 1.for in遍历对象 可以遍历到属性名 和原型链上的方法
function Foo() {
this.name = 'kingx' ;
this,age = 20;
}
Foo. prototype . getName = function() K{
return this . name ;
varfoo=newFoo();
for (var inkey in foo) {
console. log(inkey);
}
// 输出 name age getName
// 6，for in不能遍历到Symbol属性
var as = Symbol( 'a ');
var bs = Symbol( 'b ');
var obj = {
[as]: 'as',
[bs]: 'bs' ,
name: 'kingx',
age: 30
};
for (var obj Inkey in obj) {
console.log (objInkey);
} // 输出： name age
var symbolKeys = object . get0wnP rope rtySymbols(obj);
for (var key2 of symbolKeys) {
console. log(key2);
}
//forin主要是遍历对象
// for of遍历具有iterator接口的数据结构
I
4、map：（这个方法用的地方很多）创建一个新的数组并返回，新数组的每一
个元素都由原数组的每一个元素执行提供的函数提供而来，其中原来的数组不会发生变化。
let arr1 = [1,2,3,4]
let arr2 = arr1.map( item => {
//item就是每一个元素 其中这个箭头函数可以有三个参数下面也相似 value index arr
return item + 1 //相当于每个元素都加1
})
console.log(arr2) //map以后新的数组结果为 [2,3,4,5]
console.log(arr1) //原来的数组结果没有变为 [1,2,3,4]
------------------------------------------------------------
5、every：检测数组中所有元素是否都符合指定的条件。只要检测到一个元素不满足就返回false，只有都满足才返回true。
let arr1 = [1,2,3,4]
let test1 = arr1.every( item => {
//item就是每一个元素
return item > 0 //判断条件
})
let test2 = arr1.every( item => {
//item就是每一个元素
return item > 1 //判断条件
})
console.log(test1) //true 所有的item数组元素都满足
console.log(test2) //false 里面有一个item不满足 就是那个1
console.log(arr1) //原来的数组结果没有变为 [1,2,3,4]
------------------------------------------------------------
6、filter：创建一个新的数组，新数组中的元素是那些筛选以后满足条件的元素。
let arr1 = [1,2,3,4]
let arr2 = arr1.filter( item => {
//item就是每一个元素
return item > 1 //筛选条件
})
console.log(arr2) // 筛选以后的数组数据 [2,3,4]
console.log(arr1) //原来的数组结果没有变为 [1,2,3,4]
------------------------------------------------------------
7、forEach：用于调用数组的每一个元素，并将元素传递给回调函数，这个方法返回undefined。
let arr1 = [1,2,3,4]
let res = [] //用来记录数据操作的
arr1.forEach( item => {
//item就是每一个元素
res.push( item * 2 ) //相当于把每一个数组元素都乘以2然后放到res这个数组中
})
console.log(res) // 利用循环遍历进行数据操作后的数组 [2,4,6,8]
console.log(arr1) //原来的数组结果没有变为 [1,2,3,4]
---------------------------------------------------------
JS 5种遍历对象的方式
for in
for in 循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性
// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
bar: 'bar'
})
// foo 为对象自身的属性
obj.foo = 'foo'
for (let key in obj) {
console.log(obj[key]) // foo, bar
}
复制代码
可以看到对象原型上的属性也被循环出来了
在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]) // foo
}
}
复制代码
这时候原型上的 bar 属性就被过滤掉了
Object.keys
Object.keys() 是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性，然后可以通过数组的 forEach() 方法来遍历
Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})
复制代码
for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性
如果需要遍历不可枚举的属性，就要用到 Object.getOwnPropertyNames() 方法了
Object.getOwnPropertyNames
Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的 forEach 方法来遍历
// 创建一个对象并指定其原型，bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
bar: 'bar'
},
{
baz: {
value: 'baz',
enumerable: false
}
})
obj.foo = 'foo'
// 不包括不可枚举的 baz 属性
Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})
// 包括不可枚举的 baz 属性
Object.getOwnPropertyNames(obj).forEach((key) => {
console.log(obj[key]) // baz, foo
})
复制代码
ES2015 (ES6) 新增了 Symbol 数据类型，该类型可以作为对象的键，针对该类型 ES2015 同样新增Object.getOwnPropertySymbols() 方法
Object.getOwnPropertySymbols
Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性
let obj = {
foo: 'foo'
}
Object.getOwnPropertySymbols(obj).forEach((key) => {
// 什么也不输出， 因为该对象还没有 Symbol 属性
console.log(obj[key])
})
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
[Symbol('baz')]: {
value: 'Symbol baz',
enumerable: false
}
})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('bar')] = 'Symbol bar'
Object.getOwnPropertySymbols(obj).forEach((key) => {
console.log(obj[key]) // Symbol baz, Symbol bar
})
复制代码
Reflect.ownKeys
Reflect.ownKeys() 方法是 ES2015 (ES6) 新增的静态方法，该方法返回对象自身所有属性名组成的数组，包括不可枚举的属性和 Symbol 属性
let obj = {
foo: 'foo'
}
Object.getOwnPropertySymbols(obj).forEach((key) => {
// 什么也不输出， 因为该对象还没有 Symbol 属性
console.log(obj[key])
})
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
[Symbol('baz')]: {
value: 'Symbol baz',
enumerable: false
}
})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('bar')] = 'Symbol bar'
Reflect.ownKeys(obj).forEach((key) => {
console.log(obj[key]) // foo, Symbol baz, Symbol foo
})
