【ECMAScript 5_6_7】15、ES6——字符串/数值/数组/对象扩展-优快云博客

本文链接：https://blog.youkuaiyun.com/edc3001/article/details/87987644

一、字符串扩展

1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_字符串扩展</title>
</head>
<body>
<script type="text/javascript">
  let str = 'abcdef'

  console.log(str.includes('h'))  // false
  console.log(str.includes('bc'))  // true

  console.log(str.startsWith('bc'))  // false
  console.log(str.startsWith('abc'))  // true

  console.log(str.endsWith('de'))  // false
  console.log(str.endsWith('def'))  // true

  console.log(str.repeat(3))  // abcdefabcdefabcdef
</script>
</body>
</html>

二、数值扩展：

1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_数值扩展</title>
</head>
<body>
<script type="text/javascript">
  console.log(0b1010)  // 2+8=10
  console.log(0o56)  // 6+40=46

  console.log(Number.isFinite(Infinity))  // false
  console.log(Number.isFinite(100000))  // true

  console.log(Number.isNaN(1234))  // false
  console.log(Number.isNaN(NaN))  // true

  console.log(Number.isInteger(123.4))  // false
  console.log(Number.isInteger(123.0))  // true

  console.log(Number.parseInt('123a123a'))  // 123
  console.log(Number.parseInt('a123a123'))  // NaN

  console.log(Math.trunc(123.456))  // 123
</script>
</body>
</html>

三、数组扩展

1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_数组扩展</title>
</head>
<body>
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<script type="text/javascript">
  let btns = document.getElementsByTagName('button')
  console.log(btns.length)
  /*btns.forEach(function (item,index) {  // btns是一个伪数组，不能用数组的forEach方法
    console.log(item,index)
  })*/
  Array.from(btns).forEach(function (item,index) {  // 使用Array.from()将btns伪数组包装成一个数组
    console.log(item,index)
  })

  let arr1 = Array.of(1,3,true,'abc')
  console.log(arr1)  // (4)[1,3,true,'abc']

  let arr2 = [4,8,9,13,10,2,9]
  let x = arr2.find(function (value) {
    return value > 10
  })
  console.log(x)  // 13

  let y = arr2.findIndex(function (value) {
    return value > 10
  })
  console.log(y)  // 3

</script>
</body>

</html>

四、对象扩展

1. Object.is(v1, v2)
* 判断2个数据是否完全相等(底层通过比较字符串实现的)
2. Object.assign(target, source1, source2..)
* 将源对象的属性复制到目标对象上
3. 直接操作 __proto__ 属性
let obj2 = {};
obj2.__proto__ = obj1;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_对象扩展</title>
</head>
<body>
<script type="text/javascript">
  console.log(0 == -0)  // true
  console.log(NaN == NaN)  // false
  console.log(Object.is(0,-0))  // false  Object.is()底层通过比较字符串实现的
  console.log(Object.is(NaN,NaN))  // true

  let obj1 = {}
  let obj2 = {username:'onedean',age:20}
  Object.assign(obj1,obj2)
  console.log(obj1)  // {username: "onedean", age: 20}

  let obj3 = {}
  let obj4 = {money:10000}
  obj3.__proto__ = obj4
  console.log(obj3)  // {__proto__: {money: 10000 __proto__: Object}}
  console.log(obj3.money)  // 10000

</script>
</body>

</html>