一、ES6 字符串新增方法及特性
// 下面会用到的字符串
var str = 'guoyou.li'
- 1. 判断 'li' 在字符串 str 中是否存在
includes
// es5 的方法
console.log(str.indexOf('li') > -1) // true
// es6 的方法, 直接返回 Boolean
console.log(str.includes('li')) // true
- 2. 判断字符串 str 的开头
startsWith或结尾endsWith是不是 'li'
console.log(str.startsWith('li')) // false
console.log(str.endsWith('li')) // true
- 3. 将 str 重复多次, 不会改变原字符串
repeat
console.log(str.repeat(3)) // 输出: guoyou.liguoyou.liguoyou.li
console.log(str) // 输出: guoyou.li
- 4. 字符串拼接. 超级字符串 ` (esc 键下方的符号) 以及变量输出
${}
var name = 'guoyou'
// es5 写法
var api = '/api/userinfo/' + name
console.log(api) // 输出: /api/userinfo/guoyou
// es6 写法
var _api = `/api/userinfo/${name}`
console.log(_api) // 输出: /api/userinfo/guoyou
var decide = `guoyou${name === 'guoyou' ? '-' : '.'}li`
console.log(decide) // 输出: guoyou-li
字符串新增运行截图
二、ES6 数组新增方法
- 创建一个数组的不同
Array.of
const es5Arr1 = new Array(10, 20, 30, 40)
const es5Arr2 = new Array(10)
console.log(es5Arr1) // [ 10, 20, 30, 40 ]
console.log(es5Arr2) // [ <10 empty items> ], 输入一个包含 10 个空元素的数组
const es6Arr1 = Array.of(11, 22, 33, 44, 55)
const es6Arr2 = Array.of(10)
console.log(es6Arr1) // 输出: [ 11, 22, 33, 44, 55 ]
console.log(es6Arr2) // 输出: [10]
- 判断一个变量是否是数组
isArray
console.log(Array.isArray(es6Arr1)) // true
- 用于找出第一个符合条件的数组成员
find,findIndex返回的是第一个符合条件的 索引
var arr = [10, 11, 12, 13, 14, 15]
const res = arr.find(function(item) {
return item > 12
})
console.log(res) // 输出: 13
- 复习下es5 的
filter, 不改变原数组, 返回一个新的数组
const arrs = [12, 23, 34, 54, 67, -34, -45, 0, 3, -4]
const filterResult = arrs.filter(function(item, index, arr) {
console.log(item, index, arr)
return item < 0
})
console.log('arrs: ' + arrs) // [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
console.log('filterResult: ' + filterResult)
// 结果:
// 12 0 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// 23 1 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// 34 2 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// 54 3 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// 67 4 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// -34 5 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// -45 6 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// 0 7 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// 3 8 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// -4 9 [ 12, 23, 34, 54, 67, -34, -45, 0, 3, -4 ]
// arrs: 12,23,34,54,67,-34,-45,0,3,-4
// filterResult: -34,-45,-4
运行结果
三、ES6 对象新增方法和特性
- 当键名和键值相同的时候, 可以简写
var name = 'GY'
var o1 = { name: name }
console.log(o1) // 输出: { name: 'GY' }
var o2 = { name }
console.log(o2) // 输出: { name: 'GY' }
- ES6 函数的简写
var o3 = {
name,
es5Fn: function() {
console.log('es5Fn')
},
es6Fn() {
console.log('es6Fn')
}
}
o3.es5Fn() // 输出: es5Fn
o3.es6Fn() // 输出: es6Fn
- 变量作为键名的写法
var attr = 'width'
var attrO = {}
var attrFn = 'FN'
var o4 = {
[attr]: '233px',
[attrO]: '对象',
[attrFn]() {
console.log('attrFn')
}
}
console.log(o4) // 输出: { width: '233px', '[object Object]': '对象', FN: [Function: FN] }
o4[attrFn]() // 输出: attrFn
o4.FN() // 输出: attrFn
Object.is()的用法, 判断对象是否全等
console.log(NaN === NaN) // 输出: false
console.log(Object.is(NaN, NaN)) // 输出: true
var o5 = {}
console.log(Object.is(o5, {})) // 输出: false
console.log(Object.is(o5, o5)) // 输出: true
-Object.assign() 自动合并对象, 原数据不会被修改
function setInfo(o6) {
var oDefault = {
name: 'admin',
age: 0,
sex: '男'
}
var info = {}
Object.assign(info, oDefault, o6)
// 自动合并对象, name age 被 o6 覆盖, sex 还是默认值
console.log(info) // { name: 'guoyou', age: 24, sex: '男' }
// 原数据不会被修改
console.log(oDefault, o6)
// { name: 'admin', age: 0, sex: '男' } { name: 'guoyou', age: 24 }
}
setInfo({
name: 'guoyou',
age: 24
})
Object.keys()返回对象的键名集合
var o7 = {
name: 'gg',
role: 1,
tel: '13455554444'
}
console.log(Object.keys(o7)) // 输出: [ 'name', 'role', 'tel' ]
Object.values()返回对象的键值集合
console.log(Object.values(o7)) // 输出: [ 'gg', 1, '13455554444' ]
Object.entries()把对象的键值以数组的形式遍历出来
console.log(Object.entries(o7))
// 输出
// [
// [ 'name', 'gg' ],
// [ 'role', 1 ],
// [ 'tel', '13455554444' ]
// ]
可以这么去使用: 遍历二维数组, 得到的一维数组解构赋值给 k 和 val**
for (let [k, val] of Object.entries(o7)) {
console.log(k, val)
}
// 输出:
// name gg
// role 1
// tel 13455554444
- 对象的解构赋值
var o8 = {
name: 'you',
age: 24
}
var o9 = {
...o8,
sex: '女'
}
console.log(o9) // 输出: { name: 'you', age: 24, sex: '女' }
应用场景: 从一个数组中 取出最大的数
var arr1 = [12, 4, 34, 434, 43]
// ...arr1 => 12, 4, 34, 434, 43
console.log(Math.max(...arr1)) // 输出: 434
四、ES6 函数的新特性
- 箭头函数
箭头函数的不同写法
var fn1 = () => 'guoyou.li'
console.log(fn1()) // 输出: guoyou.li
var fn2 = num => num++
console.log(fn2(22)) // 输出: 22
var fn3 = (num1, num2) => ({ value: num1 + num2 })
console.log(fn3(1, 34)) // 输出: { value: 35 }
var fn4 = (num1, num2) => {
return num1 + num2
}
console.log(fn4(12, 22)) // 输出: 34
- 箭头函数中的 this 绑定的是所定义的作用域中的 this
setTimeout 不使用箭头函数时
// 看例子体会上面的话 箭头函数中的 this 绑定的是所定义的作用域中的 this
document.onclick = function() {
setTimeout(function() {
console.log(this) // 这里的 this 指向 window
}, 1000)
}
setTimeout 使用箭头函数
// 看例子体会上面的话 箭头函数中的 this 绑定的是所定义的作用域中的 this
document.onclick = function() {
setTimeout(() => {
console.log(this) // 这里的 this 指向 document
}, 1000)
}
setTimeout 使用箭头函数, 这里的双层都是箭头函数
// 看例子体会上面的话 箭头函数中的 this 绑定的是所定义的作用域中的 this
document.onclick = () => {
setTimeout(() => {
console.log(this) // 这里的 this 指向 window
}, 1000)
}
- 函数的扩展:
参数的默认值
// 旧的处理方式,
var fn5 = num => {
num = num || 1000 // 在 num 为 false 的情况还需要做判断处理, 否则取了 1000 的值
console.log(num)
}
fn5(0) // 1000
fn5(1) // 1
// 新的处理方式
var fn6 = (num = 1000) => {
console.log(num)
}
fn6(0) // 0
- rest 参数, 箭头函数中不存在 arguments
rest 参数可以把实参放到数组中
var fn7 = (num, ...arr) => {
console.log(num, arr)
}
fn7(12, 33, 43, 43, 23, 234, 23, 0, 1) // 输出 12 [ 33, 43, 43, 23, 234, 23, 0, 1 ]
网友评论