JS基础

console.log() 控制台输出

alert() 对话框

confirm() 确认框

prompt("文本",“默认输入文本”) 输入框

parseFloat() 将字符串转换为浮点型

parseInt() 将字符串转换为整型

自定义函数 function 函数名(params) {}

调用函数 事件名=“函数名()”

匿名函数 function(){}

数据类型

• 基本数据类型：字符串（string）、数字（number）、布尔（boolean）、空（null）、未定义（undefined）。
• 引用数据类型：Array、Object、Date、RegExp。

全等（===） 当全等号左右两边的操作数相等且类型相同时，返回 true。

字符串 repeat() 构造并返回一个新字符串

str.repeat(count)

判断对象为空

function isEmptyObject(obj) {
for (let o in obj) {
   return false;
}
return true;
}

• keys() 返回 Map 对象中键的数组。
• values() 返回 Map 对象中值的数组。

对象转换为数组 Object.keys()

function isEmptyObject(obj) {
	return Object.keys(obj).length === 0;
}
//但是如果传入null或undefined会出问题
isEmptyObject(null); // Uncaught TypeError: Cannot convert undefined or null to object
isEmptyObject(undefined); // Uncaught TypeError: Cannot convert undefined or null to object
//在实际项目中，如下方式使用
function isEmptyObject(obj) {
return Object.keys(obj || []).length === 0;
}

对象转为 JSON 字符串 JSON.stringify()

function isEmptyObject(obj) {
   return JSON.stringify(obj) === "{}";
}

运算符与表达式

• 算术运算符：+、-、*、/、%、++、--
• 比较运算符：>、<、>=、<=、、!=、=、!==
• 赋值运算符：=、+=、-=、*=、/=
• 逻辑运算符：&&、||、!
• 条件运算符：条件表达式 ? 表达式 1 : 表达式 2

DOM文档对象模型

Document Object Model（文档对象模型），它是浏览器为每个窗口内的 HTML 页面创建的一个 document 对象来对页面的元素进行操作。

DOM获取元素对象

document.getElementById()

document.getElementsByTagName()

document.getElementsByClassName()

选第一个 document.getElementsByClassName('xxx')[0]

document.getElementsByName()

document.querySelector()

document.querySelectorAll()

获取到的是一个类数组对象NodeList ，并非数组，所以无法使用indexOf()之类的方法。

[...document.querySelectorAll(".tabs>div")]
将其转换为数组进行处理

document.write()

DOM事件 ! ! !

HTML DOM 事件对象 | 菜鸟教程 (runoob.com)

事件监听与移除

.addEventListener("click",function(){});
.removeEventListener()

鼠标事件

onclick	鼠标点击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

键盘事件

onkeydown 键盘按下会触发的事件
onkeyup 键盘松开会触发的事件

表单事件

onfocus	表单元素聚焦时触发
onblur	表单元素失焦时触发

DOM元素对象属性和方法

元素的新增，删除

.createTextNode();   创建文本的节点
.createElement("tr");   创建元素<tr>
.appendChild()  添加节点
.removeChild()  删除节点

    <div id="box">
        <input type="text" id="txt">
        <button onclick="add()">添加</button>
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>
    <script>
        function add() {
            var txtName = document.getElementById("txt").value;
            let txt = document.createTextNode(txtName);
            var para = document.createElement("p");
            para.appendChild(txt);
            var box = document.getElementById("box");
            box.appendChild(para);
        }
        var parent = document.getElementById("box");
        var child = document.getElementById("p1");
        parent.removeChild(child); //删除父元素中的子元素
    </script>

操作元素内容

.innerHTML  会覆盖掉之前的
.innerText

以上两个以及document.write()的差别

document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

操作元素内容属性

.src
.href
.getAttribute()

操作表单属性

.value	更换表单内容
.disabled	表单是否可用，默认false

操作样式属性

.className
.classList.add("样式名")
.classList.remove("样式名")
.style.样式

内置对象

RegExp

// g 全局模式
// i 不区分大小写
// m 多行模式？
//字面量形：由斜杠 (/) 包围
let reg1 = /[bc]at/i;       
// 匹配第一个"bat"或"cat"，不区分大小写，这里的元字符是有特殊含义，表示其中可以匹配其中任意的字符
let reg2 = /\[bc\]at/i;     // 匹配第一个" [bc]at"，不区分大小写
let reg3 = /.at/gi;         // 匹配所有以"at"结尾的 3 个字符的组合，不区分大小写
let reg4 = /\.at/gi;        // 匹配所有".at"，不区分大小写

//构造函数
let reg2 = new RegExp("[bc]at", "i");  

//test()方法
let reg = new RegExp("e");
reg.test("The best things in life are free");//true

//exec() 方法
var text = "cat, bat, sat, fat";
var pattern2 = /.at/g;
var matches = pattern2.exec(text);   
// 返回数组 ["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined]
alert(matches.index);                // 0
alert(matches[0]);                   // cat
alert(pattern2.lastIndex);           // 3

var text = "this has been a short summer";
var pattern = /(..)or(.)/g;
if (pattern.test(text)){
    alert(RegExp.$1);           // sh
    alert(RegExp.$2);           // t
}

数组对象Array

var 数组名 = new Array(元素1, 元素2,...,元素n);
var 数组名 = [元素1, 元素2,...,元素n];

.length 获取数组长度

new Array(word.length)生成word.length长度的数组，再fill('*')代表将数组内的元素全部设置为symbol的值，再调用join转换为字符串

new Array(长度为五).fill('*').join('')  //*****

常用方法：

• slice(x,y) 数组切片下标

  • 将数组按照置顶个数分割

      const splitArray = (oldArr, num) => {
        oldArr.sort((x, y) => x - y);
        let res = [];
        for (let i = 0; i < oldArr.length; i += num) {
          console.log(i);
          console.log(i + num);
          res.push(oldArr.slice(i, num + i));
        }
        return res;
      };
      console.log(splitArray([22, 45, 13, 25, 6, 5, 10, 76, 15, 34, 66, 1], 5));
    

• unshift() 数组头部增加新元素

• shift() 删除数组首元素

• sort() 对元素排序

  • 是按照ASCII码顺序排序，适用于字母，但不适用于数字，所以不直接使用sort()进行排序

    arr1.sort([22, 45, 13, 25, 6, 5, 10, 76, 15, 34, 66, 1]) 会发现从小到大排序错误

    reverse() 逆序排列

    对数值进行排序

    oldArr.sort((x, y) => x - y); 正序排序

    oldArr.sort((x, y) => y - x); 倒序排序

• pop() 删除并返回数组的最后一个元素

• push() 像数组末尾添加一个元素，并返回新的长度

• indexOf() 查找元素的下标值

• splice() 置顶下标位置添加或删除元素

  • splice(index) 从index的位置开始，删除之后的所有元素(包括第index个)

  • splice(index,个数) 删除从index位置开始的数

  • 参数大于三个...

    splice(元素下标, 删除元素个数(可以为0), 要添加的元素(可以不写))
    

• concat() 合并多个数组，返回新数组

• join() 把数组的所有元素放入一个字符串并返回该字符串。可以指定间隔符

• includes(元素) 判断该数组中是否包含某个元素

• 数组名.toString() 数组转换为字符串并返回结构

var a = new Array();
var b = new Array();
a = [2,9,6]
b = [3,8]
console.log(a)
console.log(a.concat(b))
console.log(a.join("-"))
console.log(a.pop())
console.log(a.push(3))
console.log(a.reverse())
console.log(a.sort())
console.log(a.toString())

array.map()方法

array.map(function(item,index,arr), thisValue)

返回一个新数组，不会改变原有数组

• item:数组每一项 (必须)
• index:每项索引 (可选)
• arr：数组本身 (可选)
• thisValue：修改循环时的this指向，默认全局对象 (可选)

  //值   索引   数组本身
  let newArr = arr.map((val, index, array) => {
    console.log(val);
    console.log(index);
    console.log(array);
  });

结合Array.from使用

定义数组长度,然后自增,就能指定自增或自减

console.log(Array.from({ length: 4 }).map((item, i) => i + 1)); //[1, 2, 3, 4]
console.log(Array.from({ length: 4 }).map((item, i) => 4 - i)); // [4, 3, 2, 1]

遍历该数组，并处理数据

需要返回新数组时使用，否则请用请用forEach或者forof替代

  let list = [
    { name: "张三", age: 18 },
    { name: "李四", age: 19 },
    { name: "王五", age: 20 },
    { name: "老六", age: 66 },
  ];
  newArr = list.map((obj) => obj.name).join(",");
  console.log(newArr);

array.filter() 方法

array.filter(function(currentValue,index,arr), thisValue)

array.reduce()方法

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

计算数组中元素出现个数

  let names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
  let countedNames = names.reduce(function (allNames, name) {
    if (name in allNames) {
      allNames[name]++;
    } else {
      allNames[name] = 1;
    }
    return allNames;
  }, {});
  console.log(countedNames);

根据属性对Obj进行分类

  let people = [
    { name: "Alice", age: 21 },
    { name: "Max", age: 20 },
    { name: "Jane", age: 20 },
  ];
  function groupBy(objectArray, property) {
    return objectArray.reduce(function (acc, obj) {
      let key = obj[property];
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(obj);
      return acc;
    }, {});
  }
  let groupedPeople = groupBy(people, "age");

JSON对象

JSON.stringify()

JSON.parse()

  let data = [
    {
      id: 1001,
      title: "让我们一起写一个前端监控系统吧！",
      replayCount: 14,
      clickCount: 3612,
    },
    {
      id: 1002,
      title: "花了一天的时间，地板式扫盲了vue3所有API盲点",
      replayCount: 21,
      clickCount: 9812,
    },
    {
      id: 1003,
      title: "我被骂了，但我学会了如何构造高性能的树状结构

标签：console,log,基础,JS,数组,var,document,请求	

From： https://www.cnblogs.com/naitiam/p/17282967.html