ECMAScript 5 特性

Posted 2020-12-18 luoxuemei

这些是 2009 年发布的新特性：

参考页面：https://www.w3school.com.cn/js/js_es5.asp

ECMAScript 5 特性

• "use strict" 指令
• String.trim()
• Array.isArray()
• Array.forEach()
• Array.map()
• Array.filter()
• Array.reduce()
• Array.reduceRight()
• Array.every()
• Array.some()
• Array.indexOf()
• Array.lastIndexOf()
• -----------------------------------------
• JSON.parse()
• JSON.stringify()
• Date.now()
• 属性 Getter 和 Setter
• 新的对象属性和方法

 

ECMAScript 5 语法更改

• 对字符串的属性访问 [ ]
• 数组和对象字面量中的尾随逗号
• 多行字符串字面量
• 作为属性名称的保留字

 

String.trim()

　　String.trim() 删除字符串两端的空白字符。　　

var str = "       Hello World!        ";
console.log(str.trim());
// 输出："Hello World!"

Array.isArray()

　　isArray() 方法检查对象是否为数组。　　

var fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits)
// 输出：true　　

Array.forEach()

　　forEach() 方法为每个数组元素调用一次函数。

let count = 0;
[1, 2, 3, 4, 5].forEach(item =>{
    count += item
})
console.log(count)
// 输出：15

Array.map()　

　　map() 方法通过对每个数组元素执行函数来创建新数组。

　　map() 方法不会对没有值的数组元素执行函数。

　　map() 方法不会更改原始数组。　

　　map（value, index, array）三个参数分别为：项目值，项目索引，数组本身

[45, 4, 9, 16, 25].map((value, index, array) =>{return value*2})
// 输出：[90, 8, 18, 32, 50]

forEach与map的区别与用法

相同点：

1.都是循环遍历数组中的每一项

2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）

3.匿名函数中的this都是指向window

4.只能遍历数组

不同点：

1.map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

2.forEach()允许callback更改原始数组的元素。map()返回新的数组。

 

forEach()针对每一个元素执行提供的函数，对数据的操作会改变原数组。

　　使用场景：并不打算改变数据的时候，而只是想用数据做一些事情 ，比如存入数据库或则打印出来。　

var arr1 = [0,2,4,6,8];
var newArr1 = arr1.forEach(function(item,index,arr1){
  console.log(this);
  console.log(arr1);
   arr1[index] = item/2; 
},this);
console.log(arr1);
console.log(newArr1);

map()不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值。

　　使用场景：map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。 

var arr = [0,2,4,6,8];
 var newArr = arr.map(function(item,index,arr){
            console.log(this);
            console.log(arr);
            return item/2;
 },this);
 console.log(newArr);

Array.filter()

 　　filter() 方法创建一个包含通过测试的数组元素的新数组。

[45, 4, 9, 16, 25].filter((value, index, array) =>{return value>18})
// 输出：[45, 25]

Array.reduce()

 arr.reduce(function(prev,cur,index,arr){
...
}, init);

主要是用init或者上一次返回的值 和 当前遍历项进行操作，返回结果。

其中，
　　arr 表示原数组；
　　prev 表示上一次调用回调时的返回值，或者初始值 init;
　　cur 表示当前正在处理的数组元素；
　　index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
　　init 表示初始值。

 

reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的

var arr = [3,9,4,3,6,0,9]
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

// 输入结果是：34

　　

Array.reduceRight()

 该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

 

Array.every()

every() 方法检查所有数组值是否通过测试。类似于判断的：且（&&）。全部通过才true，否则为false

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

如果回调函数仅使用第一个参数（值）时，可以省略其他参数：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

// muFunction的返回结果是：false

　　

Array.some()

some() 方法检查某些数组值是否通过了测试。类似于判断的：或（||）。只要有一个通过，就true，全部不通过才false

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
// 返回结果是true

　　

Array.indexOf()

array.indexOf(item, start);　　
　　item必需,要检索的项目;
　　start可选,从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。
如果项目多次出现，则返回第一次出现的位置。如果未找到项目，Array.indexOf() 返回 -1。
indexOf() 方法在数组中搜索元素值并返回其位置。
注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。  

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。 

Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。