mirror of
https://github.com/Daotin/Web.git
synced 2024-10-30 04:24:45 +08:00
278 lines
7.4 KiB
Markdown
278 lines
7.4 KiB
Markdown
|
>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
|
|||
|
|
>
|
|||
|
|
> - github：https://github.com/Daotin/Web
|
|||
|
|
> - 微信公众号：[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
|
|||
|
|
> - 博客园：http://www.cnblogs.com/lvonve/
|
|||
|
|
> - CSDN：https://blog.csdn.net/lvonve/
|
|||
|
|
>
|
|||
|
|
> 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 一、字符串的扩展
|
|||
|
|
|
|||
|
|
- `includes(str)` : 判断是否包含指定的字符串
|
|||
|
|
|
|||
|
|
|
|||
|
|
- `startsWith(str) `: 判断是否以指定字符串开头
|
|||
|
|
|
|||
|
|
|
|||
|
|
- `endsWith(str) `: 判断是否以指定字符串结尾
|
|||
|
|
- `repeat(count) `: 重复指定次数
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let str = 'abcdefg';
|
|||
|
|
console.log(str.includes('a')); //true
|
|||
|
|
console.log(str.includes('h')); //false
|
|||
|
|
|
|||
|
|
//startsWith(str) : 判断是否以指定字符串开头
|
|||
|
|
console.log(str.startsWith('ab')); //true
|
|||
|
|
console.log(str.startsWith('ac')); //false
|
|||
|
|
//endsWith(str) : 判断是否以指定字符串结尾
|
|||
|
|
console.log(str.endsWith('fg')); //true
|
|||
|
|
console.log(str.endsWith('d')); //false
|
|||
|
|
//repeat(count) : 重复指定次数a
|
|||
|
|
console.log(str.repeat(3)); // abcdefgabcdefgabcdefg
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 二、数值的扩展
|
|||
|
|
|
|||
|
|
二进制与八进制数值表示法: 二进制用`0b`开头, 八进制用`0o`开头。
|
|||
|
|
|
|||
|
|
- `Number.isFinite(i) `: 判断是否是有限大的数
|
|||
|
|
|
|||
|
|
|
|||
|
|
- `Number.isNaN(i)` : 判断是否是NaN
|
|||
|
|
|
|||
|
|
|
|||
|
|
- `Number.isInteger(i)` : 判断是否是整数
|
|||
|
|
|
|||
|
|
|
|||
|
|
- `Number.parseInt(str) `: 将字符串转换为对应的数值
|
|||
|
|
- `Math.trunc(i) `: 直接去除小数部分
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
console.log(0b1010); //10
|
|||
|
|
console.log(0o56); //46
|
|||
|
|
console.log('--------------------');
|
|||
|
|
//Number.isFinite(i) : 判断是否是有限大的数
|
|||
|
|
console.log(Number.isFinite(NaN)); //false
|
|||
|
|
console.log(Number.isFinite(5)); //true
|
|||
|
|
console.log(Number.isFinite(Infinity)); //false
|
|||
|
|
console.log('--------------------');
|
|||
|
|
//Number.isNaN(i) : 判断是否是NaN
|
|||
|
|
console.log(Number.isNaN(NaN)); //true
|
|||
|
|
console.log(Number.isNaN(5)); //false
|
|||
|
|
console.log(Number.isNaN(undefined)); //false
|
|||
|
|
console.log('--------------------');
|
|||
|
|
|
|||
|
|
//Number.isInteger(i) : 判断是否是整数
|
|||
|
|
console.log(Number.isInteger(5.23)); //false
|
|||
|
|
console.log(Number.isInteger(5.0)); //true
|
|||
|
|
console.log(Number.isInteger(5)); //true
|
|||
|
|
console.log('--------------------');
|
|||
|
|
|
|||
|
|
//Number.parseInt(str) : 将字符串转换为对应的数值
|
|||
|
|
console.log(Number.parseInt('123abc')); //123
|
|||
|
|
console.log(Number.parseInt('a123abc')); //NaN
|
|||
|
|
console.log('--------------------');
|
|||
|
|
|
|||
|
|
// Math.trunc(i) : 直接去除小数部分
|
|||
|
|
console.log(Math.trunc(13.123)); //13
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 三、数组扩展
|
|||
|
|
|
|||
|
|
- `Array.from(v) `: 将伪数组对象或可遍历对象转换为真数组
|
|||
|
|
- `Array.of(v1, v2, v3)` : 将一系列值转换成数组
|
|||
|
|
|
|||
|
|
|
|||
|
|
- `find(function(value, index, arr){return true})` : 找出第一个满足条件返回true的元素
|
|||
|
|
- `findIndex(function(value, index, arr){return true}) `: 找出第一个满足条件返回true的元素下标
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<button>测试1</button>
|
|||
|
|
<br>
|
|||
|
|
<button>测试2</button>
|
|||
|
|
<br>
|
|||
|
|
<button>测试3</button>
|
|||
|
|
<br>
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
|
|||
|
|
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
|
|||
|
|
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
|
|||
|
|
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
|
|||
|
|
-->
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
//Array.from(v) : 将伪数组对象或可遍历对象转换为真数组，返回值即为真数组
|
|||
|
|
// 使用 DOM操纵获取的元素集合是伪数组。
|
|||
|
|
let btns = document.getElementsByTagName('button');
|
|||
|
|
console.log(btns.length); //3
|
|||
|
|
Array.from(btns).forEach(function (item, index) {
|
|||
|
|
console.log(item, index);
|
|||
|
|
});
|
|||
|
|
//Array.of(v1, v2, v3) : 将一系列单独的值转换成数组
|
|||
|
|
let arr = Array.of(1, 'abc', true);
|
|||
|
|
console.log(arr);
|
|||
|
|
//find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
|
|||
|
|
let arr1 = [1, 3, 5, 2, 6, 7, 3];
|
|||
|
|
let result = arr1.find(function (item, index) {
|
|||
|
|
// 查找arr1数组中第一个大于3的元素
|
|||
|
|
return item > 3;
|
|||
|
|
});
|
|||
|
|
console.log(result); //5
|
|||
|
|
//findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
|
|||
|
|
let result1 = arr1.findIndex(function (item, index) {
|
|||
|
|
// 查找arr1数组中第一个大于3的元素下标值
|
|||
|
|
return item > 3;
|
|||
|
|
});
|
|||
|
|
console.log(result1); //2
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 四、对象扩展
|
|||
|
|
|
|||
|
|
- `Object.is(v1, v2)` ：判断2个数据是否完全相等。（内部是的实现原理是**比较字符串**是否完全相等）
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
console.log(Object.is('abc', 'abc'));//true
|
|||
|
|
console.log(NaN == NaN);//false
|
|||
|
|
console.log(Object.is(NaN, NaN));//true
|
|||
|
|
|
|||
|
|
console.log(0 == -0);//true
|
|||
|
|
console.log(Object.is(0, -0));//false
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- `Object.assign(target, source1, source2..)`： 将源对象的属性复制到目标对象上
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let obj = {name : 'Daotin', age : 18, c: {d: 2}};
|
|||
|
|
let obj1 = {};
|
|||
|
|
Object.assign(obj1, obj);
|
|||
|
|
console.log(obj1, obj1.name);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- 直接操作` __proto__ `属性
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let obj3 = {name : 'Daotin', age : 18};
|
|||
|
|
let obj4 = {};
|
|||
|
|
// obj4的隐式原型指向obj3
|
|||
|
|
obj4.__proto__ = obj3;
|
|||
|
|
console.log(obj4, obj4.name, obj4.age);// {name : 'Daotin', age : 18} Daotin 18
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 五、set容器和map容器
|
|||
|
|
|
|||
|
|
**Set容器** : 无序不可重复的多个value的集合体。
|
|||
|
|
|
|||
|
|
Set容器需要通过new 来创建一个Set容器对象，参数即为多个value值。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let set = new Set([1,2,3,4,3,2,1,6]);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
set容器对象的方法和属性：
|
|||
|
|
|
|||
|
|
- `Set() `：set容器的构造函数（不带参数value集合）
|
|||
|
|
- `Set(array)`：set容器的构造函数（带参数value集合）
|
|||
|
|
- `add(value)`：向set容器对象添加值value
|
|||
|
|
- `delete(value)`：删除set容器对象的value值
|
|||
|
|
- `has(value)`：判断set容器是否有value值
|
|||
|
|
- `clear()`：清空set容器
|
|||
|
|
- `size`：相当于数组的length
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**Map容器** : 无序的 key不重复的多个key-value的集合体。
|
|||
|
|
|
|||
|
|
> 注意：Map的参数数组的集合，每一个数组都是key-value的形式。整个数组集合的外面用`[]`包围，而不是`{}`。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let map = new Map([['name', 'Daorin'],['age', 18]]);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- Map()
|
|||
|
|
- Map(array)
|
|||
|
|
|
|||
|
|
|
|||
|
|
- set(key, value) // 类似于set容器的add方法
|
|||
|
|
- get(key)
|
|||
|
|
- delete(key)
|
|||
|
|
- has(key)
|
|||
|
|
- clear()
|
|||
|
|
- size
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**Set和Map的作用：**
|
|||
|
|
|
|||
|
|
1、Set容器可以为数组去重。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let arr = [1, 2, 3, 4, 5, 2, 4, 5];
|
|||
|
|
let set = new Set(arr);
|
|||
|
|
arr = [];
|
|||
|
|
for (let i of set) {
|
|||
|
|
arr.push(i);
|
|||
|
|
}
|
|||
|
|
console.log(arr); // 1,2,3,4,5
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
2、Set和Map容器可以使用`for ..of..` 来遍历。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 六、ES7 方法介绍
|
|||
|
|
|
|||
|
|
1、指数运算符：`**`
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
console.log(3**2); // 9
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2、`Array.prototype.includes(value);` ：判断数组中是否包含指定value。（在ES6中有，`str.includes(str1)` : 判断str中是否包含指定的字符串str1）
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let arr = [1,2,3,4, 'abc'];
|
|||
|
|
console.log(arr.includes(2));//true
|
|||
|
|
console.log(arr.includes('a'));//false
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|