9、字符串、数组、对象等内置对象的拓展—ES6学习笔记

来源：互联网发布：长城交易软件下载编辑：程序博客网时间：2024/06/09 13:42

1、字符串的扩展
我们回想一下原先我们是如何写字符串的，写一串html代码片段，如果直接用双引号或单引号括起来就会报错,我们通常会做一个字符串的拼接，把每一个都用单引号或者双引号括起来，用加号连起来，这样比较麻烦。

所以ES6中就增加了模板字符串的概念，模板字符串是用反引号括起来的。我们测试一下。反引号就是tab键上面的键。

let flag = true;let html = `<ul>              <li>                <span>${'首页'}</span>                <span></span>                <span></span>                <span class="${flag ? 'show' : 'hide'}"></span>                <span></span>              </li>            </ul>`;console.log(html); //可见字符串已经被打印出来了。

字符串拼接
class可以使用三元表达式的方式。

1 repeat，主要是对字符串做一个重复的操作
2 includes() startsWith() endsWith()

首先我们看repeat方法

let str1 = 'a';let str2 = str1.repeat(3);console.log(str2); // aaa

在看includes() startsWith() endsWith()，它们和此前的indexOf()方法非常类似,只不过indexOf()查找的是某个字符串的下标，如果找不到就是一个-1;

这几个方法也是用来查找字符串中是否包含某个字符串的，但是找到了就是true，否则就是false。

let str = 'zhang';console.log(str.includes('an'));  // trueconsole.log(str.includes('asd'));  // false//查找开头是否包含某个字符串console.log(str.startsWith('z')); // trueconsole.log(str.startsWith('n')); // false//查找结尾是否包含某个字符串console.log(str.endsWith('ng')); // trueconsole.log(str.endsWith('m')); // false

2、数组的扩展
1.Array.from() 将一个类数组对象转化成真正的数组。
如我们现在html里面写一组li

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title></title></head><body>  <ul>    <li></li>    <li></li>    <li></li>    <li></li>  </ul>  <script src="js/str.js"></script>  <script src="js/arr.js"></script>  <script src="js/obj.js"></script></body></html>

//然后获取这一组li，就是一个类数组var lis = document.querySelectorAll('li');// console.log(Array.isArray(lis)); //false 证明它不是真正的数组，而是一个类数组var lis2 = Array.from(lis);console.log(lis2);//console.log(Array.isArray(lis2));//true 打印出的是数组,证明已经将类数组转化成真正的数组了

2.Array.of()创建一个数组，和[]是一模一样的。如下：

const arr = Array.of(1);console.log(arr); //[1]

find() findIndex()两个方法是对数组进行筛选的
find()用来查找数组中符合某个条件的元素，并且返回第一个符合条件的元素。如果都不符合就返回undefined;
findIndex()返回符合条件元素的下标，如果都不符合就返回-1；

const arr = [1, 2, 3, 4];let res = arr.find(function (a){  return a < 2;});console.log(res);// 1

let res = arr.findIndex(function (a){  return a < 2;});console.log(res);//0 返回的是元素的下标

没有符合条件的元素

const arr = [1, 2, 3, 4];let res = arr.find(function (a){  return a < -100;});console.log(res);// undefined

let res = arr.findIndex(function (a){  return a < -200;});console.log(res);//-1 由于数组里面没有小于负200的，所以返回-1

3.fill()给定一个值，对数组进行填充的

const arr = [1, 2, 3, 4];console.log(arr); //["abc","abc","abc","abc"];

还可以选择从哪填充到哪,比如我们想把2和3换成abc

const arr = [1, 2, 3, 4];arr.fill('abc', 1, 3);console.log(arr);//[1,"abc","abc",4] 我们发现只有2和3被替换了

3、对象的扩展
对象的简洁表示法，如

let a = 1;const obj = {  a: a};const obj = {a}console.log(obj); // {a:1}

ES 6这种写法会简洁很多

const obj = {  fn: function (){    console.log(1); //1  },  fn2(){    console.log(2); //2  }}obj.fn();obj.fn2();

4、Object.is() 判断两个数据是否一样
长得一样就是一样

console.log(Object.is(NaN, NaN)); trueconsole.log(Object.is(+0, -0));  //false

5、Object.assign()
用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。

let obj1 = {a: 1};let obj2 = {a: 2, b: 3};let obj3 = {c: 'abc'};Object.assign(obj1, obj2, obj3);console.log(obj1); // {a:2,b:3,c:"abc"}

阅读全文

0 0