总结.md · 木木花花啊/JavaScript课程

### 字符串操作
#### toUpperCase
toUpperCase()把一个字符串全部变为大写
#### toLowerCase
toLowerCase()把一个字符串全部变为小写：
#### indexOf
indexOf()会搜索指定字符串出现的位置：
```
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串，返回-1
```
#### substring
substring()返回指定索引区间的子串：
```
var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
s.substring(7); // 从索引7开始到结束，返回'world'
```
### 数组操作
#### indexOf
与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：
```
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
```
#### slice
slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：
var arr1 = arr.slice() //arr复制的arr1（新数组）
#### push和pop
push()向Array的末尾添加若干元素 （屁股加）
pop()则把Array的最后一个元素删除掉：（屁股删）
#### unshift和shift
如果要往Array的头部添加若干元素，使用unshift()方法，（开头加）
shift()方法则把Array的第一个元素删掉：（开头删）
#### sort
sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序：（只能排字母，不能排数字大小）
#### reverse
reverse()把整个Array的元素给调个个，也就是反转：（数组掉头）
#### splice（万能）
splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：
arr.splice(i,1,item) i是索引，1是删除的长度，item是要添加的元素
#### concat（连接两个数组变成新的）
concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array：
```
var arr = ['A', 'B', 'C'];
 var arr1= [1, 2, 3] 
var added = arr.concat(arr1);
added; // ['A', 'B', 'C', 1, 2, 3]
```
#### join
join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：
```
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
```
如果Array的元素不是字符串，将自动转换为字符串后再连接。
###  map和set
#### map (类似于二维数组)
Map是一组键值对的结构，具有极快的查找速度。
```
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的 key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
```
由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：
```
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
```
#### set 用于过滤
Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：
```
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
```
重复元素在Set中自动被过滤：
```
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
```
### 作用域
var 全局作用域
let 块级作用域
const 定义常数
### 高阶函数
#### map方法 (每一个元素单独进行函数计算)
```
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(function (x) {
    return x * x;
}); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);
```
#### reduce
累积计算，其效果就是：
```
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
```
比方说对一个Array求和，就可以用reduce实现：
```
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25
```
#### filter
例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
```
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
```
### 节点
#### js原生
var menu = document.getElementById('id');(找到那个节点的id)
var drinks = document.getElementsByTagName('ul');(找到那个节点的ul块)
更新插入删除dom上面12里面我备注了

#### jQuery节点
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  引入jquery
* 选择器
>按ID查找
如果某个DOM节点有id属性，利用jQuery查找如下：
```
// 查找<div id="abc">:
var div = $('#abc');
```
>按tag查找
按tag查找只需要写上tag名称就可以了：
```
var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点
```
>按class查找
按class查找注意在class名称前加一个.：
```
var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
```
通常很多节点有多个class，我们可以查找同时包含red和green的节点：
```
var a = $('.red.green'); // 注意没有空格！
// 符合条件的节点：
// <div class="red green">...</div>
// <div class="blue green red">...</div>
```
>按属性查找
一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找：
```
var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">
```
>组合查找
组合查找就是把上述简单选择器组合起来使用。如果我们查找`$('[name=email]')`，很可能把表单外的`<div name="email">`也找出来，但我们只希望查找`<input>`，就可以这么写：
```
var emailInput = $('input[name=email]'); // 不会找出<div name="email">
```
同样的，根据tag和class来组合查找也很常见：
```
var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>
```
* 层级选择器
如果两个DOM元素具有层级关系，就可以用`$('ancestor descendant')`来选择，层级之间用空格隔开。例如：
```

<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>
```
要选出JavaScript，可以用层级选择器：
```
$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
```
>子选择器（Child Selector）
子选择器`$('parent>child')`类似层级选择器，但是限定了层级关系必须是父子关系，就是`<child>`节点必须是`<parent>`节点的直属子节点。还是以上面的例子：
```
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出，因为<div>和<li>不构成父子关系
```

木木花花啊/JavaScript课程

简介

发行版

贡献者

近期动态

木木花花啊/JavaScript课程 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

木木花花啊/JavaScript课程