JS事件冒泡；常用字符串、数组函数

JS 运行机制

• 捕获:外向内
• 冒泡:内向外,向上级元素传递,常用=>简化代码:只在父级元素绑定事件
• event.target: 事件绑定元素
• event.currentTarget: 事件触发元素
• event.stopPropagation: 阻止事件冒泡
• event.preventDefault: 禁用表单按钮提交行为

STT	事件	说明
1	submit:	提交时触发
2	focus:	获取焦点时触发
3	blur:	失去焦点时触发
4	change:	值发生改变且失去焦点时触发
5	input:	值发生改变就会触发,不必等失去焦点,与 change 不同

<div class="login-input">
  <span class="iconfont icon-yonghuming"></span>
  <input
    class="text"
    type="text"
    name="username"
    placeholder="Username"
    required=""
    onblur="dologin(this)"
  />
</div>
<div class="login-input">
  <span class="iconfont icon-mima"></span>
  <input
    class="text"
    type="password"
    name="password"
    placeholder="Password"
    required=""
    onblur="dologin(this)"
  />
</div>

<script>
  function dologin(ele) {
    // 1. 防止默认的提交行为, 用户自定义
    event.preventDefault();
    // 2. 防止冒泡
    event.stopPropagation();
    // 3. 非空验证
    // 每一个控件input,button 都有一个属性form ,和当前表单绑定
    console.log(ele.form);
    let username = ele.form.username;
    let password = ele.form.password;

    if (username.value.length === 0) {
      alert("邮箱不能为空");
      username.focus();
      return false;
    }
    if (password.value.length === 0) {
      alert("密码不能为空");
      password.focus();
      return false;
    }

    alert("验证通过");
  }
</script>

字符串常用函数实例

let str = "Help_10086";

// 1. length 长度
console.log(str.length);

// 2. charAt: 索引->元素
console.log(str.charAt(3));
// 一般直接用[]读取
console.log(str[3]);

// 3. indexOf: 根据字符获取索引
console.log(str.indexOf("中"));

// 4. search: indexOf一样,但支持正则等
console.log(str.search("文"));

// 5. concat: 字符串拼装
console.log(str.concat("(", "一路帮", ")"));
// 直接用"+", 或者`模板字面量` 更方便

// 6. replace: 替换
console.log(str.replace("Help", "一路帮"));
//   str = "php";
console.log(str);

// 7. slice: 子串, 忽略结束索引的值
console.log(str.slice(0, 3));

// 8. substr: 子串, 只需要知道取多少个
console.log(str.substr(0, 3));
console.log(str.substr(3, 3));
//   -1最后一个, -2向前一个
console.log(str.substr(-3, 3)); // 中文网

// 9. split: str->array
console.log(str.split(""));
console.log(str.split("", 3));

// 10. toLowerCase, toUpperCase 大小写转换
console.log(str.toLowerCase());
console.log(str.toUpperCase());

// 11. 与html相关
console.log(`<a href="https://help10086.cn">${str}</a>`);

console.log(str.link("https://help10086.cn"));

console.log(str.bold());
console.log(str.big());
console.log(str.anchor("url"));

数组常用函数实例

字面量

// 字面量
let arr = [12, 22, "a", "b", true, { x: 10, y: 20 }, [11, 21, 31], function () {}];
console.log(arr);

// ...rest 展开数组
arr = [42, 52, 62];
let arr1 = [...arr];
console.log(arr1);
arr = [1, 2, 3, ...arr, 7, 8, 9];
console.log(arr);

// Array.of
// 原始数据有可能来自一个外部请求api或文件,而这个原始数据就是数组
let a = [1, 2, 3, 4, 5, 6];
// 经过一些其它操作,例如过滤,再重新生成
arr = Array.of(...a);
console.log(arr);

// Array.from 类数组转数组
const likeArr = {
  0: "thinkbook",
  1: "macbookpro",
  2: "thinkpad",
  length: 3,
};
console.log(likeArr);
console.log(Array.from(likeArr));

增删数组

// push,pop, unshift,shift,delete

let arr = [];
// 1. 尾部增删，返回数组长度
console.log(arr.push('help'));
// 从左到右进入
console.log(arr.push(10086, '.cn'));
console.log(arr);
// 尾部删除,返回被删除元素
console.log(arr.pop());
console.log(arr);
console.log(arr.pop());
console.log(arr.pop());

// 2. 头部增删
console.log(arr.unshift('一路帮'));
// 从右到左进入
console.log(arr.unshift('help', '10086'));
console.log(arr);
console.log(arr.shift());
console.log(arr.shift());
console.log(arr.shift());
console.log(arr);

// 删除任意元素
arr = [1, 2, 3, 4, 5];
delete arr[1];
console.log(arr);
console.log(arr.length);

arr.length = 4;
console.log(arr);

遍历数组

// 迭代方法, 遍历元素
// 1. forEach,map
// 2. every, some
// 3. filter, find, findIndex
// 4. reduce

// 1. forEach((item,index,arr)=>{...}), 每个元素逐个调用回调处理

let arr = ['help', '10086', '.cn'];

let res = arr.forEach(function (item, index, arr) {
  // 三个参数中, 只有第一个 item是必须的
  console.log(item, index, arr);
  // 常用于dom操作
  console.log(item)
});
// 没有返回值
console.log(res);

// 2. map: 参数与功能 与forEach一样,只不过有返回值
res = arr.map(item => item + ' - zgb');
console.log(res);

// 3. every, some: 断言函数,返回true,false
//   every: 数组成员全部满足条件,则返回 true , 否则 false 与
console.log(arr.every(item => item >= 0));
console.log(arr.every(item => item >= 3));
// some: 数组成员中只要有一个满足条件,就返回 true, 否则 false, 或
console.log(arr.some(item => item >= 3));
console.log(arr.some(item => item >= 10));

// 4. filter: 返回数组中的满足条件的元素组成的新数组
console.log(arr.filter(item => item >= 3)); // [3,4,5]

//   arr.filter(item => item >= 3)[0] -> find
console.log(arr.find(item => item >= 3));
console.log(arr.findIndex(item => item >= 3));

// 5. reduce: 归并
res = arr.reduce(function (acc, cur, index, arr) {
  // 查看reduce的执行过程
  console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
  // 最终结果用 acc 返回, acc累加器
  return acc + cur;
}, 5);
console.log(res);

操作数组

// 1. sort
let arr = ['help', '10086', '.cn'];
console.log(arr.sort());
// asc
console.log(arr.sort((a, b) => a - b));
// desc
console.log(arr.sort((a, b) => b - a));

// 2. join:  array -> string

//   string.split string -> array
arr = ["thinkbook", "macbookpro", "thinkpad"]
console.log(arr.join());
console.log(arr.join("-"));

// 3. slice: 子元素
arr = ['help', '10086', '.cn',"thinkbook", "macbookpro", "thinkpad"]
console.log(arr.slice(2, 5));
console.log(arr.slice(2));
console.log(arr.slice(-6, -3));

// 4. splce: 删除, 新增, 替换
// delete
console.log(arr);
console.log(arr.splice(1, 2));
console.log(arr);

// update
console.log(arr.splice(1, 2, "a", "b"));
console.log(arr);

// insert
console.log(arr.splice(1, 0, "red", "green"));
console.log(arr);

let data = ["red", "green", "blue"];
console.log(arr.splice(1, 0, ...data));
console.log(arr);

// 数组反转, 数组拼装, 拉平与一维数组... mdn