ES6 的知识点学习笔记(3) - 字符串, 数组, 对象, 函

2019-09-18 本文已影响0人无故下架内容so账号已弃用

一、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 ]

ES6 的知识点学习笔记(3) - 字符串, 数组, 对象, 函

一、ES6 字符串新增方法及特性

二、ES6 数组新增方法

三、ES6 对象新增方法和特性

四、ES6 函数的新特性

猜你喜欢

热点阅读