频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
字符串、数组、对象等内置对象的拓展
2017-09-13 09:34:00      个评论    来源:xyphf的博客  
收藏   我要投稿

1、字符串的扩展

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

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

let flag = true;

let html = `
  • ${'首页'}
`; 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






  •  
  •  
  •  
  •  
<script src="js/str.js"></script><script src="js/arr.js"></script><script src="js/obj.js"></script>
//然后获取这一组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"}
点击复制链接 与好友分享!回本站首页
上一篇:elementui的树形组件上手
下一篇:git如何配置ssh
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训

版权所有: 红黑联盟--致力于做实用的IT技术学习网站