尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 305
已运行时间: 1063
目录
  1. String
    1. 反引号
    2. 正则表达式
      1. js匹配string中的img标签,并且获取其src图片链接地址
  2. Array
    1. 类数组与数组的区别与转换
    2. 扩展运算符(展开语法)
    3. Array构造函数
    4. from
    5. find
    6. findIndex
  3. Set
    1. 构造函数
    2. 实例方法
    3. 遍历
  4. Map
  5. 其他
    1. 解构赋值
    2. 剩余参数

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 305
已运行时间: 1063

前言:

【全文内容是基于以下文档内容所作的补充】

补充:数组、字符串两中对象,都是打印原始值:

  • toString
  • valueOf


String

类型

API

增、删、改

  • replace():修改指定字符串为新字符串
  • replaceAll():所有的
  • slice():和数组api一样
  • substr():给起始索引截取指定个数
  • substring():[起始索引,结束索引)
  • trim():清楚两边空白
  • toLowerCase():字符串转换为小写
  • toUpperCase():字符串转换为大写
  • toLocaleLowerCase():根据本地主机的语言环境把字符串转换为小写
  • toLocaleUpperCase():根据本地主机的语言环境把字符串转换为大写

  • charAt:根据索引得到指定位置值
  • charCodeAt:根据索引得到指定位置值Unicode码
  • indexOf():查找子字符串的初次索引
  • lastIndexOf():从右往左
  • includes():是否包含子字符串
  • match():查找正则规则子字符串
  • search():查找指定字符串/正则的索引

和数组联系

  • split:根据指定字符切割数组

拷贝和拼接

  • concat:和数组一样

其他

  • startsWith():是否已子字符串开头
  • endsWith:是否以子字符串结尾
  • fromCharCode():Unicode码转换为字符
  • repeat:将字符串复制指定次数并返回,参数是次数

'hello'.repeat(2) // "hellohello"

反引号

ES6新增的创建字符串的方式,使用反引号定义

let name = `zhangsan`;
  • 模板字符串中可以解析变量
let name = '张三';

let sayHello = `hello,my name is ${name}`; // hello,my name is 张三
  • 模板字符串中可以换行
let result = {
name: 'zhangsan',
age: 20,
sex: '男'
}
let html = ` <div>
<span>${result.name}</span>
     <span>${result.age}</span>
<span>${result.sex}</span>

 </div> `;
  • 在模板字符串中可以调用函数
const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${sayHello()} 哈哈哈哈`;
 console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

正则表达式

js匹配string中的img标签,并且获取其src图片链接地址

<script>
  window.onload = function () {
    var content = '<P><img src="http://bbs.cn.yimg.com/user_img/200701/31/jisuanji986_117025184198149.jpg" mce_src="http://bbs.cn.yimg.com/user_img/200701/31/jisuanji986_117025184198149.jpg"></P>'
    let imgReg = /<img.*?(?:>|\/>)/gi //匹配图片中的img标签
    let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
    let arr = content.match(imgReg)  //筛选出所有的img
    console.log(arr)
    let srcArr = []
    for (let i = 0; i < arr.length; i++) {
      let src = arr[i].match(srcReg)
      // 获取图片地址
      srcArr.push(src[1])
    }
    console.log(srcArr)
  }
</script>

Array

类型

API

增、删、改

  • slice:操作完然后复制结果为一个新数组
  • splice:会改变原始数组,返回的删除元素数组

  • includes:根据数组元素值查
  • indexOf:根据索引查
  • lastIndexOf:根据索引查

充当栈、队列

  • push:末尾添加元素,返回新长度
  • pop:删除最后一个元素并且返回该值
  • shift:删除第一个元素并且返回该值
  • unshift:开头添加元素,返回新长度

和字符串联系

  • join:通过指定字符串拼接,空参数则为逗号(类似valueOf和toString)

迭代遍历有关

every、some、entries、filter、find、findIndex、forEach、keys

  • find:可以传入参数来查找
  • map:相当于将y = x 变成y = x2,不改变原数组
  • reduce:把结果继续和序列的下一个元素做累积计算
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x * 10 + y;
}); // 13579
  • reduceRight

拷贝和拼接

  • concat:不改变原数组,arr1.concat(arr2, arr3)
  • 扩展运算符
// 方法一 
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 // 方法二 
 ary1.push(...ary2);
  • copyWithin:从数组的指定位置拷贝元素到数组的另一个指定位置中

排序

  • sort:数字升序(sort((a,b)=>{return a-b}))
  • reserve:逆置

其他

  • fill:使用一个值来填充/替换数组元素,可以指定索引,通常用在DP问题的填充0
  • from:构造函数方法,将伪数组或可遍历对象转换为真正的数组(类数组转换为数组)

伪数组、可遍历对象、Set

  • isArray

类数组与数组的区别与转换

https://blog.csdn.net/qq_37635012/article/details/106195211

扩展运算符(展开语法)

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
 ...ary  // 1, 2, 3
 console.log(...ary);    // 1 2 3,相当于下面的代码
 console.log(1,2,3);

扩展运算符可以应用于合并数组

// 方法一 
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 // 方法二 
 ary1.push(...ary2);

将类数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div'); 
oDivs = [...oDivs];

Array构造函数

from

构造函数方法:Array.from()

将伪数组或可遍历对象转换为真正的数组

//定义一个集合
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}; 
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组

let arrayLike = { 
     "0": 1,
     "1": 2,
     "length": 2
 }
 let newAry = Array.from(arrayLike, item => item *2)//[2,4]

注意:如果是对象,那么属性需要写对应的索引

find

用于找出第一个符合条件的数组成员,如果没有找到返回undefined

let ary = [{
     id: 1,
     name: '张三'
 }, { 
     id: 2,
     name: '李四'
 }]; 
//找数组里面符合条件的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个
 let target = ary.find((item, index) => item.id == 2);

findIndex

用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

Set

https://www.runoob.com/w3cnote/es6-map-set.html

构造函数

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成 Set 数据结构

const s = new Set();

Set函数可以接受一个数组作为参数,用来初始化。

const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

实例方法

  • add(value):添加某个值,返回 Set 结构本身
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功
  • has(value):返回一个布尔值,表示该值是否为 Set 的成员
  • clear():清除所有成员,没有返回值
const s = new Set();
 s.add(1).add(2).add(3); // 向 set 结构中添加值 
 s.delete(2)             // 删除 set 结构中的2值   
 s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear()               // 清除 set 结构中的所有值
 //注意:删除的是元素的值,不是代表的索引

遍历

Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。

s.forEach(value => console.log(value))

Map

https://www.runoob.com/w3cnote/es6-map-set.html

其他

解构赋值

剩余参数

  • 剩余参数是以数组的形式存在的
function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

评论区

Twikoo giscus