es5/es6中新增的方法
ES5中的新增方法
ES5 中给咱们新增了一些方法，能够很方便的操做数组或者字符串，这些方法主要包括：html
- 数组方法
- 字符串方法
- 对象方法
1.1 数组方法
迭代(遍历)方法：forEach()、map()、filter()、some()、every()；ios
array.forEach(function(currentValue, index, arr))
- 让数组中每一个元素都执行一次 fn，至关于 for 循环
- 不会占用全局变量，结合箭头函数贼舒服
- currentValue：当前项的值
- index：当前项的索引
- arr：当前数组对象自己
array.map(function(currentValue, index, arr))
- map() 方法会获得一个新数组， 新数组中包含每次函数调用返回的结果
- 它返回的是一个新数组
array.filter(function(currentValue, index, arr))
- filter() 方法建立一个新的数组，新数组中的元素是经过检查指定数组中符合条件的全部元素，主要用于筛选数组
- 注意它直接返回一个新数组
- currentValue: 当前项的值
- index：当前项的索引
- arr：当前数组对象自己
array.some(function(currentValue, index, arr))
- some() 方法用于检测数组中的元素是否知足指定条件，即查找数组中是否有知足条件的元素。
- 它的返回值是布尔值，若是查找到这个元素，就返回true , 若是查找不到就返回false。
- 若是找到第一个知足条件的元素，则终止循环，再也不继续查找。
- currentValue: 当前项的值
- index：当前项的索引
- arr：当前数组对象自己
array.every(function(currentValue, index, arr))
- every() 方法检测数组中的全部元素是否知足指定条件。
- 全部的元素都返回true，结果才是true
1.2 字符串方法
- trim() 方法会从一个字符串的两端删除空白字符。
-
trim() 方法不影响原字符串自己，它返回的是一个新的字符串es6
str.trim()
1.3 对象方法
-
Object.keys() 用于获取对象自身全部的属性面试
Object.keys(obj)
- 效果相似 for…in
返回一个由属性名组成的数组axios
-
Object.defineProperty() 定义对象中新属性或修改原有的属性。数组
Object.defineProperty(obj, prop, descriptor)
- obj：必需。目标对象
- prop：必需。需定义或修改的属性的名字
-
descriptor：必需。目标属性所拥有的特性，以对象形式 { } 书写promise
- value: 设置属性的值 默认为undefined
- writable: 值是否能够重写。true | false 默认为false
- enumerable: 目标属性是否能够被枚举。true | false 默认为 false
configurable: 目标属性是否能够被删除或是否能够再次修改特性 true | false 默认为false数据结构
ES6的新增语法
1. let
ES6中新增的用于声明变量的关键字。并发
-
let声明的变量只在所处于的块级有效。异步
if (true) { let a = 10; } console.log(a) // a is not defined注意：使用 var 声明的变量不具有块级做用域特性，使用 let 关键字声明的变量具备块级做用域，能够防止循环变量变成全局变量。
-
不存在变量提高
console.log(a); // a is not defined let a = 20;
-
暂时性死区
var num = 10; if(true) { console.log(num); // num is not defined let num = 20; } // 在if的{}中不会向上一级查找num，由于在这个块级做用域中用了let关键字声明了num，变量num就和{}这个块级进行了总体绑定，因此在声明以前使用它会报错 -
经典面试题
// 题1 var arr = []; for(var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0](); // 2 arr[1](); // 2 // 解析：变量 i 是全局的，函数执行时输出的都是全局做用域下的 i 值。 // 题2 let arr = []; for(let i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0](); // 0 arr[1](); // 1 // 解析：每次循环都会产生一个块级做用域，每一个块级做用域中的变量都是不一样的，函数执行时输出的是本身上一级(循环产生的块级做用域)做用域下的值。
2. const
const 用于声明常量，常量就是值（内存地址）不能变化的量。
-
具备块级做用域
if (true) { const a = 10; } console.log(a) // a is not defined -
声明常量时必须赋值
const PI; // Missing initializer in const declaration
-
常量赋值后，值不能修改。
const PI = 3.14; PI = 100; // Assignment to constant variable.
const ary = [100, 200]; ary[0] = 'a'; ary[1] = 'b'; console.log(ary); // ['a', 'b']; ary = ['a', 'b']; // Assignment to constant variable.
let、const、var 的区别
- 使用var声明的变量，其做用域为该语句所在的函数内，且存在变量提高现象。
- 使用let声明的变量，其做用域为该语句所在的代码块内，不存在变量提高。
- 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。
| var | let | const |
|---|---|---|
| 函数级做用域 | 块级做用域 | 块级做用域 |
| 变量提高 | 不存在变量提高 | 不存在变量提高 |
| 值可更改 | 值可更改 | 值不可更改 |
3. 解构赋值
ES6中容许从数组中提取值，按照对应位置，对变量赋值。对象也能够实现解构。
按照必定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量。
3.1 数组解构
-
若是解构不成功，变量的值为undefined。
let [a, b, c] = ['pink', 'yellow', 'blue']; //正常解构赋值 console.log(a, b, c);
let [foo] = []; let [bar, foo] = [1]; let [, c] = ['red', 'yellow']; //选择性解构赋值
3.2 对象解构
-
使用变量的名字匹配对象的属性，匹配成功，将对象属性的值赋值给变量。
let {name, age} = {name: 'andy', age: 18}; // 正常解构赋值 console.log(name, age); // andy 18 let {name: myName, age: myAge} = {name: 'andy', age: 18}; //myName myAge 属于别名 let {name = 'lily', age } = {name: 'andy', age: 18}; //给name设置了默认值'lily'
4. 箭头函数
-
ES6中新增的定义函数的方式。
// 语法：() => {} const fn = () => {} fn(); -
函数体中只有一句代码，且代码的执行结果就是返回值，能够省略大括号
function sum(a, b) { return a + b; } const sum = (a, b) => a + b; sum(10, 20); -
若是形参只有一个，能够省略小括号
function fn (v) { return v; } const fn = v => v; -
箭头函数不绑定 this 关键字，它的 this 值是继承自它的父做用域的，因此箭头函数不能做为构造函数。
箭头函数的 this 值是词法做用域，也就是说它在定义的时候就被指定了的，并且也不会随着它调用方法的改变而改变。因此箭头函数中的this，指向的是函数定义位置的上下文this。
const obj = {name: 'andy'}; function fn() { console.log(this); // obj return () => { console.log(this); // obj } } const resFn = fn.call(obj); resFn(); -
面试题解析：
var obj = { age: 20, say: () => { console.log(this.age) } } obj.say(); // undefined // 解析：箭头函数中没有本身的this，它的this指向箭头函数定义区域的this。此例中的箭头函数定义在了obj这个对象中，它是一个对象，不能产生做用域，因此这个箭头函数被定义在了全局做用域下，因此在调用这个方法的时候this指向window
5. 剩余参数
-
剩余参数语法容许咱们将一个不定数量的参数表示为一个数组。
const sum = (...args) => { let total = 0; args.forEach(item => total += item); return total; } console.log(sum(10, 20)); // 30 console.log(sum(1, 2, 3, 4)); // 10 -
剩余参数和解构配合使用
let students = ['andy', 'jack', 'lily']; let [s1, ...s2] = students; console.log(s1, s2); // 'andy', ['jack', 'lily']
6. ES6的内置对象扩展
6.1 扩展运算符（展开语法）
-
扩展运算符能够将数组或者对象转为用逗号分隔的参数序列。
let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3
-
扩展运算符能够应用于合并数组。
// 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; // 方法二 ary1.push(...ary2);
-
将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div'); oDivs = [...oDivs];
6.2 构造函数方法：Array.from()
-
将类数组或可遍历对象转换为真正的数组
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] -
方法还能够接受第二个参数，做用相似于数组的map方法，用来对每一个元素进行处理，将处理后的值放入返回的数组。
let arrayLike = { "0": 1, "1": 2, "length": 2 } let newAry = Array.from(aryLike, item => item *2)
6.3 实例方法：find()
-
用于找出第一个符合条件的数组成员，若是没有找到返回undefined
let ary = [ { id: 1, name: 'andy' }, { id: 2, name: 'lily' } ] let target = ary.find(item => item.id === 2);
6.4 实例方法：findIndex()
-
用于找出第一个符合条件的数组成员的位置，若是没有找到返回-1
let ary = [1, 5, 10, 15]; let index = ary.findIndex((value, index) => value > 9); console.log(index); // 2
6.5 实例方法：includes()
- 判断字符串是否包含另外一个字符串，传统的 js 方法： indexOf 返回值是否等于 -1 ，若是等于 -1说明不包含
-
es6 中提供了方法 includes() 返回布尔值，表示是否包含给定的值。
[1, 2, 3].includes(2) // true 1, 2, 3].includes(4) // false let s = 'hello world' s.includes('hello', 6) // false 第一个参数是须要匹配的数据，第二个参数是从第几个开始
7. 模板字符串
- ES6新增的建立字符串的方式，使用反引号定义 ``。
-
模板字符串中能够解析变量。
let name = '张三'; let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan -
模板字符串中能够保留空格和换行
let result = { name: 'zhangsan', age: 20, sex: '男' } let html = ` <div> <span>${result.name}</span> <span>${result.age}</span> <span>${result.sex}</span> </div> `; -
在模板字符串中能够调用函数。
const sayHello = function () { return '哈哈哈哈 追不到我吧 我就是这么强大'; }; let greet = `${sayHello()} 哈哈哈哈`; console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
8. String的扩展方法
8.1 实例方法：startsWith()和endsWith()
- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
-
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
let str = 'Hello world!'; str.startsWith('Hello') // true str.endsWith('!') // true
8.2 实例方法：repeat()
-
repeat() 方法表示将原字符串重复n次，返回一个新字符串。
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello"
9.Set数据结构
ES6 提供了新的数据结构 Set。它相似于数组，可是成员的值都是惟一的，没有重复的值。
-
Set自己是一个构造函数，用来生成 Set 数据结构。
const s = new Set();
-
Set函数能够接受一个数组做为参数，用来初始化。
const set = new Set([1, 2, 3, 4, 4]);
-
例如：利用set去重，获得一个新数组
let set = new Set([1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1]) console.log(set) console.log([...set])
注：set 去重以后获得的 set 类型的数据，因此还得把这个 set 数据类型转换成数组类型，这个时候又能够用到展开符这个好东西了
实例方法
- add(value)：添加某个值，返回 Set 结构自己
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
- has(value)：返回一个布尔值，表示该值是否为 Set 的成员
- clear()：清除全部成员，没有返回值
const s = new Set(); s.add(1).add(2).add(3); // 向 set 结构中添加值 s.delete(2) // 删除 set 结构中的2值 s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值 s.clear() // 清除 set 结构中的全部值
-
Set 结构的实例与数组同样，也拥有 forEach 方法，用于对每一个成员执行某种操做，没有返回值。
s.forEach(value => console.log(value))
10. Promise
promise 用于更优雅的处理异步请求，其实就是对于回调函数的另外一种写法，能够帮助咱们避免回调地狱。
回调地狱：好比第二个请求依赖第一个请求的结果进行请求，第三个请求依赖第二个，这样一层一层嵌套，。。。为了解决回调顺序的不肯定性以及地狱，就有了 promise 机制。
- Promise 通常来说是一个对象， .then方法其实就是 promise 对象的一个
- Promise 构造函数接受一个函数做为参数，在这个函数中，能够进行异步的操做的代码
- 在这个函数中执行完成异步操做以前，并非要调用用户提供的回调函数（不关心回调究竟是什么），而是在这个函数中，异步完成以后，只须要去修改当前的promise 的状态
-
Promise的状态：
- pendding ：挂起，当前 promise 执行的任务，正在执行中
- fullfilled： 完成，当前 promise 对象执行的任务，已经完成，而且是成功状态
- rejected： 完成，当前 promise 对象执行的任务，已经完成，而且是失败的状态
- Promise 对象的 .then 方法中接收到的成功的回调函数，会在当前的 promise 对象处于成功（fullfilled）状态的时候自动执行；Promise对象的 .then 方法中接收到的失败的回调函数，会在当前的 promise 对象处于失败（rejected）状态的时候自动执行.
-
resolve 是一个函数，调用这个函数，就能够把当前 promise 对象标记成功reject 也是一个函数，调用这个函数，能够把当前 promise 对象标记失败
var p = new Promise(function(resolve, reject) { resolve() // 成功时调用 reject() // 失败时调用 }); p.then(function(res) { // 从resolve获得正常结果 }, function(res) { // 从reject获得错误信息 })resolve 和 reject在调用的时候，能够传递数据，这个数据会最终被传递到成功或者失败的回调函数中。
// 封装一个支持Promise APi的延时函数 function timeOut(time){ return new Promise(function(resolve, reject){ setTimeout(function(){ // 这个回调函数中，不须要涉及任何具体的业务操做 // resolve(123); // 可传递数据，这个数据会最终被传递到成功回调函数中 reject(); }, time); }); } -
在 then 方法中，咱们能够直接return 数据而不是 Promise 对象，在后面的 then 中就能够接收到数据了。
then 参数中的函数返回值：
1. 返回 Promise 实例对象：返回的该实例对象会调用下一个 then2. 返回普通值：返回的普通值会直接传递给下一个 then，经过 then 参数中函数的参数接受该值
timeOut(1000) .then(num => { console.log(num + '这是1s后打印的内容') return timeOut(1000) }) .then(num => { console.log(num + '这是2s后打印的内容') return timeOut(1000) }) .then(num => { console.log(num + '这是3s后打印的内容') return timeOut(1000) }) - 语法
-
语法一：
promise.then( function() { console.log('成功的回调') }, function() { console.log('失败的回调') } ) -
语法二：
Promise .then(function() { console.log('成功的回调') }) .catch(function() { consloe.log('失败的回调') })语法二和语法一的效果同样。不过它还有另一个做用：在执行 resolve 的回调（也就是上面then中的参数）时，若是抛出异常了（代码出错了），那么并不会报错卡死，而是会进到这个catch方法中。
9. promise 的其余用法
-
Promise.all: 只有当传入的全部 promise 的结果为 reslove，才会执行这个 all 的回调函数（即触发 then 方法执行里面的代码），不然只要有一个是 reject，就会执行 catch 方法。
Promise .all([t1, t2, t3, t4, t5]) .then(function(){ console.log("全部异步操做完成了"); } .catch(function() { console.log("嗷嗷~~~有操做出错了"); }) ) -
Promise.race：由第一个 promise 返回的状态决定，若是第一个 promise 返回的结果为 reslove 就会执行这个race的回调
Promise.race([t1, t2, t3, t4, t5]).then(function(){ console.log("有一个异步率先完成了"); })
经常使用API：
- .then() 获得异步任务的成功信息
- .catch() 获取异常信息
- .finally() 成功与否都会执行(还不是正式标准)
- Promise.all() 并发处理多个异步任务，全部任务都执行完成才能获得结果
-
Promise.race() 只要有一个任务完成就能获得结果
Promise.all([p1, p2, p3]).then(res => { console.log(res); //三个结果的数组 }) Promise.race([p1, p2, p3]).then(res => { console.log(res); }) -
示例：基于Promise处理Ajax请求：
function queryData(url) { return new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readystate !== 4) return; if(xhr.readystate === 4 && xhr.status === 200){ resolve(xhr.responseText); }else{ reject('出错了'); } } xhr.open('get', url); xhr.send(null); }) } queryData('http://localhost:3000/data') .then(function(res){ console.log(res); }, function(err){ console.log(err) }) //发送屡次请求 queryData('url1') .then(function(data){ return queryData('url2'); }) .then(function(data){ return queryData('url3'); }) .then(function(data){ console.log(data); })
这里顺便叨叨一下 Promise 的语法糖：async/await 的基本用法
- async 关键字用于函数上（async 函数的返回值是 Promise 实例对象）
-
await 关键字用于 async 函数中（await 能够获得异步的结果）
async function queryData(id){ const ret = await axios.get('/data'); return ret; } queryData.then(ret => { console.log(ret); })使用async后，代码变得更简洁，代码的逻辑和数据流都变得更加清晰。因为 async 的原理仍是以 Promise 为基础，因此部分时候，async 是要和 Promise 配合使用的，它并不能彻底脱离 Promise 独立运行；await 必须在 async 函数里使用，不能单独使用。
-
多个异步请求的场景
async function queryData(id){ const info = await axios.get('/async1'); const ret = await axios.get(`/async2?info=`+info.data); return ret; } queryData.then(ret => { console.log(ret); })
11. 模块化
模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，可是能够经过特定的接口公开内部成员，也能够依赖别的模块。
模块化开发的好处：方便代码的重用，从而提高开发效率，而且方便后期的维护。
ES6默认导出与默认导入
- 默认处处语法 export default 默认导出的成员
-
默认导入语法 import 接收名称 from ‘模块标识符’
//当前文件模块为 m1.js//定义私有成员a和c let a = 10; let c = 20; let d = 30; function show(){} //将本模块中的私有成员暴露出去，供其余模块使用 export default { a, c, show } //导入模块成员 import m1 from './m1.js' console.log(m1) //打印输出的结果为{a: 10, b: 20, show: [function: show]} //外界访问不到d，由于它没有被暴露出去
注意：每一个模块中，只容许使用惟一的一次 export default，不然会报错
按需导出与按需导入
- 默认导出语法export let s1 = 10
-
默认导入语法import { s1 } from '模块标识符'
//当前文件模块为 m1.js export let s1 = 'aaa' export let s2 = 'bbb' export function say = function(){} //导入模块成员 import {s1, s2 as ss2, say} from './m1.js' console.log(s1); // aaa console.log(ss2); // bbb console.log(say); // [function: say]
注意：每一个模块中，可使用屡次按需导出
直接导入并执行模块代码
-
只执行模块中的代码，并不须要获得模块中向外暴露的成员，此时能够直接导入并执行模块代码。
//当前文件模块为 m2.js //在当前模块中执行一个 for 循环操做 for(let i = 0; i < 3; i++) { console.log(i); } //直接导入并执行模块代码 import './m2.js'
- 1. 新增的方法
- 2. ES6中对象新增的方法
- 3. HTML5新增的API方法
- 4. Linq的新增方法
- 5. ES6新增方法
- 6. H5新增方法
- 7. history新增方法
- 8. ES5新增方法
- 9. Java 8 Map新增方法
- 10. ECMAScript5 Array新增方法
- 更多相关文章...
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • Redis哨兵（Sentinel）模式的配置方法及其在Java中的用法 - Redis教程
- • C# 中 foreach 遍历的用法
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 新增的方法
- 2. ES6中对象新增的方法
- 3. HTML5新增的API方法
- 4. Linq的新增方法
- 5. ES6新增方法
- 6. H5新增方法
- 7. history新增方法
- 8. ES5新增方法
- 9. Java 8 Map新增方法
- 10. ECMAScript5 Array新增方法