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

最新推荐文章于 2023-03-07 09:54:54 发布

xyphf_和派孔明

最新推荐文章于 2023-03-07 09:54:54 发布

阅读量329

点赞数

分类专栏： ECMAScript 6学习笔记

本文链接：https://blog.csdn.net/xyphf/article/details/77923317

版权

ECMAScript 6学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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'));  // true
console.log(str.includes('asd'));  // false

//查找开头是否包含某个字符串
console.log(str.startsWith('z')); // true
console.log(str.startsWith('n')); // false

//查找结尾是否包含某个字符串
console.log(str.endsWith('ng')); // true
console.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)); true
console.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"}

xyphf_和派孔明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9、字符串、数组、对象等内置对象的拓展—ES6学习笔记

1、字符串的扩展我们回想一下原先我们是如何写字符串的，写一串html代码片段，如果直接用双引号或单引号括起来就会报错,我们通常会做一个字符串的拼接，把每一个都用单引号或者双引号括起来，用加号连起来，这样比较麻烦。所以ES6中就增加了模板字符串的概念，模板字符串是用反引号括起来的。我们测试一下。反引号就是tab键上面的键。let flag = true;let html = `<ul>
复制链接

扫一扫