ES5 array traversal forEach\filter\some\every\map, string trim, object keys\defineProperty new methods
Elasticsearch is a distributed, RESTful-style search and data analysis engine that can solve various emerging use cases. At the heart of the Elastic Stack, it centrally stores your data and helps you discover the expected and unexpected.
1. Array traversal
1.1. forEach()
forEach is equivalent to an enhanced version of the for loop. The callback function has three parameters: the value of each traversed array, the index of each traversed array, and the array itself.
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function (item, index, array) {
console.log("==1:", item, index, array);
sum += item;
})
arr.forEach(function (item, index) {
console.log("==2:", item, index);
sum += item;
})
arr.forEach(function (item) {
console.log("==3:", item);
sum += item;
})
result:
1.2. map()
var arr = [1, 2, 3];
var sum = 0;
arr.map(function (item) {
console.log("map-item:", item);
sum += item;
});
console.log("map-sum:",sum);
result:
1.3. filter()
filter() creates a new array. The elements of the new array are checked for all elements in the specified array that meet the conditions. It is mainly used to filter the array. Return a new array directly. The callback function has three parameters: the value of the current item, the index of the current item, and the array itself.
//得到大于10
var arr = [2, 534, 2, 23, 4, 234];
var newArr = arr.filter(function (item, index, arr) {
return item > 20
});
console.log("大于10:",newArr);
//得到偶数
var newArr = arr.filter(function (item, index, arr) {
return item % 2 === 0;
});
console.log("偶数:",newArr);
result:
1.4. some()
some() determines whether there are elements in the array that meet the conditions. If so, it returns true; if not, it returns false. Can be used to find whether a specific element is present in an array. After finding the first element that meets the conditions, the loop ends and subsequent loops are not executed.
var arr = [10, 20, 30, 40];
var flag = arr.some(function (item, index, array) {
return item > 20;
});
console.log(flag);
var flag = arr.some(function (item, index, array) {
return item < 3;
});
console.log(flag);
var flag = arr.some(function (item, index, array) {
return item === 30;
});
console.log(flag);
result:
1.5. every()
every() runs the given function on each element in the array. If every element in the array can pass the test of the callback function, it will return true. If one element passes the test of the callback function, it will return false. Returns false.
var arr = [10, 20, 30, 40];
var flag = arr.every(function (item, index, array) {
return item > 20;
});
console.log(flag);
var flag = arr.every(function (item, index, array) {
return item < 3;
});
console.log(flag);
var flag = arr.every(function (item, index, array) {
return item === 30;
});
console.log(flag);
result:
1.6. The difference between forEach(), some(), every(), and filter() when encountering return
Return in forEach will not terminate the iteration;
encounter return true in some and every, which means it is more efficient to terminate the traversal iteration;
return in filter will not terminate the iteration;
if you query the only element in the array, the some method is more appropriate.
var arr = ['red', 'green', 'blue', 'pink'];
// 1. forEach迭代 遍历
// arr.forEach(function(value) {
// if (value == 'green') {
// console.log('找到了该元素');
// return true; // 在forEach 里面 return 不会终止迭代
// }
// console.log(11);
// })
// 如果查询数组中唯一的元素, 用some方法更合适,
arr.some(function(value) {
if (value == 'green') {
console.log('找到了该元素');
return true; // 在some 里面 遇到 return true 就是终止遍历 迭代效率更高
}
console.log(11);
});
// arr.filter(function(value) {
// if (value == 'green') {
// console.log('找到了该元素');
// return true; // // filter 里面 return 不会终止迭代
// }
// console.log(11);
// });
2. String
2.1. trim()
trim() removes the whitespace characters at both ends of the string and returns a new string without overwriting the original string.
var str = ' HelloWorld ';
console.log(str);
var str1 = str.trim();
console.log(str1);
result:
3. Object
3.1. Object.keys()
Object.keys() is used to obtain all the properties of the object itself, similar to for in, and the return value is an array composed of all property names.
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '鸿蒙',
price: 1999,
num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(item) {
console.log(item);
})
result:
3.2. Object.defineProperty()
Object.defineProperty() defines new properties or modifies original properties. It has three parameters: the object that needs to be operated, the property that needs to be operated, and the description of the property.
Object.defineProperty(obj, prop, descriptor)
Object.defineProperty() third parameter descriptor description: write
value in object form (): set the value of the property to undefined by default
writable: whether the value can be rewritten. truelfalse defaults to false
&emsp ;enumerable: whether the target attribute can be enumerated. truelfalse Defaults to false
**configurable:** Whether the target attribute can be deleted or whether the attribute can be modified again truelfalse Defaults to false
// Object.defineProperty() 定义新属性或修改原有的属性
var obj = {
id: 1,
pname: '鸿蒙',
price: 1999
};
// 1. 以前的对象添加和修改属性的方式
// obj.num = 1000;
// obj.price = 99;
// console.log(obj);
// 2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj, 'num', {
value: 1000,
enumerable: true
});
console.log(obj);
Object.defineProperty(obj, 'price', {
value: 9.9
});
console.log(obj);
Object.defineProperty(obj, 'id', {
// 如果值为false 不允许修改这个属性值 默认值也是false
writable: false,
});
obj.id = 2;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '华为鸿蒙系统',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: false,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
configurable: false
});
console.log(obj);
console.log(Object.keys(obj));
delete obj.address;
console.log(obj);
delete obj.pname;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '华为鸿蒙系统',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: true,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: true,
// configurable 如果为false 则不允许删除这个属性 默认为false
configurable: true
});
console.log(obj.address);
4. All code
$(function () {
/**
* 数组遍历
*/
//数组遍历-forEach
forEachData();
//数组遍历-map
mapData();
//数组遍历-filter
filterData();
//数组遍历-some
someData();
//数组遍历-every
everyData();
/**
* 字符串-trim
*/
//字符串-trim
trimData();
/**
* 对象
*/
//对象-Object.keys()
keysData();
});
/**
* 数组遍历-forEach
*/
function forEachData() {
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function (item, index, array) {
console.log("==1:", item, index, array);
sum += item;
})
arr.forEach(function (item, index) {
console.log("==2:", item, index);
sum += item;
})
arr.forEach(function (item) {
console.log("==3:", item);
sum += item;
})
}
/**
* 数组遍历-map
*/
function mapData() {
var arr = [1, 2, 3];
var sum = 0;
arr.map(function (item) {
console.log("map-item:", item);
sum += item;
});
console.log("map-sum:", sum);
}
/**
* 数组遍历-filter
*/
function filterData() {
//得到大于10
var arr = [2, 534, 2, 23, 4, 234];
var newArr = arr.filter(function (item, index, arr) {
return item > 20
});
console.log("大于10:", newArr);
//得到偶数
var newArr = arr.filter(function (item, index, arr) {
return item % 2 === 0;
});
console.log("偶数:", newArr);
}
/**
* 数组遍历-some
*/
function someData() {
var arr = [10, 20, 30, 40];
var flag = arr.some(function (item, index, array) {
return item > 20;
});
console.log(flag);
var flag = arr.some(function (item, index, array) {
return item < 3;
});
console.log(flag);
var flag = arr.some(function (item, index, array) {
return item === 30;
});
console.log(flag);
}
/**
* 数组遍历-every
*/
function everyData() {
var arr = [10, 20, 30, 40];
var flag = arr.every(function (item, index, array) {
return item > 20;
});
console.log(flag);
var flag = arr.every(function (item, index, array) {
return item < 3;
});
console.log(flag);
var flag = arr.every(function (item, index, array) {
return item === 30;
});
console.log(flag);
}
/**
* 字符串-trim
*/
function trimData() {
var str = ' HelloWorld ';
console.log(str);
var str1 = str.trim();
console.log(str1);
}
/**
* 对象-Object.keys()
*/
function keysData() {
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '鸿蒙',
price: 1999,
num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function (item) {
console.log(item);
})
}
/**
* 对象-Object.keys()
*/
function keysData() {
// Object.defineProperty() 定义新属性或修改原有的属性
var obj = {
id: 1,
pname: '鸿蒙',
price: 1999
};
// 1. 以前的对象添加和修改属性的方式
// obj.num = 1000;
// obj.price = 99;
// console.log(obj);
// 2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj, 'num', {
value: 1000,
enumerable: true
});
console.log(obj);
Object.defineProperty(obj, 'price', {
value: 9.9
});
console.log(obj);
Object.defineProperty(obj, 'id', {
// 如果值为false 不允许修改这个属性值 默认值也是false
writable: false,
});
obj.id = 2;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '华为鸿蒙系统',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: false,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
configurable: false
});
console.log(obj);
console.log(Object.keys(obj));
delete obj.address;
console.log(obj);
delete obj.pname;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '华为鸿蒙系统',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: true,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: true,
// configurable 如果为false 则不允许删除这个属性 默认为false
configurable: true
});
console.log(obj.address);
}