① 《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结
（1）字符串就是零个或多个排在一起的字符。
（2）放在单引号或双引号之中。 'abc' "abc"。
（3）单引号字符串的内部，可以使用双引号。
（4）双引号字符串的内部，可以使用单引号。
（5）反引号`` ：反引号允许跨行。
反引号允许字符串跨越多行并可以使用
${…} 在字符串中嵌入表达式。
（1）charAt 方法返回指定位置的字符，参数是从0开始编号的位置。
找一个字符串中的某个位置是那个字符串。
charCodeAt：返回字符串指定位置的 Unicode 码点（十进制表示）
（2）[]
字符串可以被视为字符串数组，因此可以用数组的方括号运算符，用来返回某个位置的字符
但是字符串只是数组的相似性而已实际上、没办法改变字符串中的某个字符
length 只是返回了字符串的长度，该属性没办法改变
字符串使用Unicode字符集，js内部所有的都是Unicode表示的。
JavaScript中的字符串使用的是 UTF-16 编码。
toLowerCase() 和 toUpperCase()方法可以改变大小写。
String对象是js原生提供的三个包装对象之一。用来生成字符串对象。
（1）构造函数
字符串对象是一个类数组对象，很像数组，但不是真正的数组。
（2）将任意的值转成字符
用于连接两个字符串，返回一个新字符串，不改变原字符串。
从原字符串取出子字符串并返回，不改变原字符串。
它的第一个参数是子字符串的开始位置，
第二个参数是子字符串的结束位置（不含该位置）。
如果省略第二个参数，则表示子字符串一直到原字符串结束。
用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。
它的第一个参数表示子字符串的开始位置，
第二个位置表示结束位置（返回结果不含该位置）
如果省略第二个参数，则表示子字符串一直到原字符串结束。
区别：slice 和 substring的区别？
slice：
如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。
如果第一个参数大于第二个参数（正数情况下），slice()方法返回一个空字符串。
substring：
如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置。
如果参数是负数，substring方法会自动将负数转为0。
由于这些规则违反直觉，因此不建议使用substring方法，应该优先使用slice。
总结：获取子字符串，使用 slice 或 substring。
用于确定一个字符串在另一个字符串中第一次出现的位置，
返回结果是匹配开始的位置。如果返回-1，就表示不匹配。
indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。
lastIndexOf
lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。
总结：查找子字符串时，使用 indexOf 或 includes/startsWith/endsWith 进行简单检查。
endsWith 用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。
用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。
toLowerCase方法用于将一个字符串全部转为小写，
toUpperCase则是全部转为大写。
它们都返回一个新字符串，不改变原字符串
split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
如果省略参数，则返回数组的唯一成员就是原字符串。
split方法还可以接受第二个参数，限定返回数组的最大成员数。
返回一个新字符串，表示将原字符串重复n次。
字符串补全长度的功能。如果某个字符串不够指定长度，
会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
trimStart()消除字符串头部的空格，
trimEnd()消除尾部的空格。
返回一个由替换值（replacement）替换部分或
所有的模式（pattern）匹配项后的新字符串。
模式可以是一个字符串或者一个正则表达式，
替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。
如果pattern是字符串，则仅替换第一个匹配项.
web前端笔记4-有讲 如果感兴趣、请参考之前文章
② 前端开发的基本方法
CSS部分
盒子边倾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止点击事件/鼠标事件“穿透”
div * { pointer-events: none; /*链接啊，点击事件啊，都没有效果了*/ }
用来控制元素在移动设备上使用滚动回弹效果
.main{
-webkit-overflow-scrolling: touch;
}
可解决在IOS中使用overflow:auto 形成的滚动条，滚动不流畅的情况
文字渐变效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
实现圆弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中检测数组的方法
(1)、typeof操作符
这种方法对一些常用的类型检查没有问题，但对array和null 都判断为object
(2)、instanceof操作符
这个操作符是检测对象的原型链是否指向构造函数的prototype对象的
(3)、对象的constructor属性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字符串操作
字符串转化toString()
字符串分隔split()
字符串替换replace()
获取长度length
查询子字符串 indexOf
返回指定位置的字符串或字符串编码 charAt charCodeAt
字符串匹配 match
字符串拼接concat
字符串的切割或提取slice() substring() substr()
字符串大小写转化 toLowerCase toUpperCase
字符串去空格 trim() 用来删除字符串前后的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳过第一个索引。如果提供initialValue，从索引0开始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //该属性是否可枚举})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加参数
- * @function stringifyUrlArgs
- * @param {string} url - URL路径
- * @param {object} params - 参数对象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL参数
- * @function parseUrlArgs
- * @param {string} url - 字符串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的区别如下：
（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置
（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串
（3）substr()， 参数可以是负数，第一个参数是开始位置，第二个参数为切割的长度
字符串去重
常用的数组操作
1、Array.map()
此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
2、Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分
3、Array.filter()
此方法是将满足条件的元素作为一个新数组返回
4、Array.every()
此方法将数组所有元素进行判断返回一个布尔值，如果所有元素都符合判断条件，则返回true，否则返回false
5、Array.some()
此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件，则返回true，所有元素都不满足则返回false
6、Array.rece()
此方法为所有元素调用返回函数
7、Array.push()
在数组最后面添加新元素
8、Array.shift()
删除数组第一个元素
9、Array.pop()
删除数组最后一个元素
10、Array.unshift()
在数组最前面增加元素
11、Array.isArray()
判断是否为一个数组
12、Array.concat()
数组拼接
13、Array.toString()
数组转化为字符串
14、Array.join()
数组转化为字符串，并用第一个参数作为连接符
15、Array.splice(开始位置，删除个数，元素)
其中rece使用方法为：
callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 rece 的数组） initialValue （作为第一次调用 callback 的第一个参数。）
如果没有提供initialValue，rece 会从索引1的地方开始执行 callback 方法，
数组去重：
常用对象方法
1、Object.assign()
用于克隆，两个参数，将第二个对象分配到第一个中
2、Object.is()
用于判断两个值是否相同
//注意，该函数与==运算符不同，不会强制转换任何类型， 应该更加类似于===，但值得注意的是它会将+0和-0视作不同值
3、Object.keys()
用于返回对象可枚举的属性和方法的名称，返回一个属性或方法名称的字符串数组。
4、Object.defineProperty()
劫持变量的set和get方法,将属性添加到对象，或修改现有属性的特性
5、Object.defineProperties()
可添加多个属性,与Object.defineProperty()对应,
6、isPrototypeOf
安卓监听可视区域变化，让输入框移动至可视区域
vue中平滑滚动到某个位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加参数
解析URL参数
好用的JavaSrcipt库与模块（包）
日期时间处理库
1、monent.js
2、day.js
day相对于monent要轻量许多
高精度数学运算
number-precision
实用工具库
Lodash
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、 数字、对象、字符串等