速通JS基础语法+课堂笔记|青训营笔记

圆周率pi
83 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

总结了一下js的基础语法，最后根据老师的课写了点总结。

课程知识点

graph TD
JS基础 --> 语法基础
JS基础 --> 编码原则

详细知识点（js语法）

浏览器与JS

浏览器分成两部分：==渲染引擎和JS引擎==

  • 渲染引擎：用来解析HTML与CSS ，俗称内核，比如chrome浏览器的blink ，老版本的webkit
  • JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

JS的组成

  • ECMAScript

ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

  • DOM（文档对象模型）

可扩展标记语言(XML)的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作。就是对网页内容操作。

  • BOM（浏览器对象模型）

提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。比如弹出框、应用跳转。

前端写入JS的方法

  1. 行内
<input type="button" value="click" onclick="alert('Hello, world!')">
  1. 内嵌
<script>
alert("Hello world!");
</script>
  1. 外部引用
<script src="newFile.js"></script>

引用外部JS文件的script标签中间不可写代码

变量

//JS是弱类型语言
let name1; //变量声明方法1
var name2 = 1,name3 = 'sdsdsds',name4; //变量声明方法2
const name5 = 3.14;//常量声明
简单数据类型说明默认值
Number数字型，包含整值和浮点值，如21、0.210
Boolean布尔值类型，如true、 false，等价于1和0false
String字符串类型，如“张三”注意js 里面，字符串都带引号""
Undefinedvar a; 声明了变量a但是没有给值，此时a =undefinedNullundefined
Nullvar a = null; 声明了变量a为空值null

局部变量与全局变量（作用域）

  • 全局变量：在函数外部定义的变量。在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
  • 局部变量：在函数内部定义的变量。只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

声明提升

var和function定义的变量和函数会自动提升到程序最上方（所有作用域前），之后浏览器再逐行执行，这就是为什么可以先使用后声明函数。但是，赋值操作不会提升！

数组

  • JS 数组都是动态创建的，可以自由增加数组长度，这点不同于 C/C++

  • 一个 JS 数组内可以存放不同类型的元素，比如['abc', 1, true, undefined]

//数组的创立---------------------------
let arr = []; //创建空数组
let arr1 = new Array(1,2,3);//创建数组[1,2,3]
let arr1 = new Array(2);//创建有两个空元素的数组
//数组的相关操作------------------------
let e = arr[index];//元素访问
let len = arr.length;//数组长度
function isArray(test) {
    if (test instanceof Array) return true;
    return false;
}//检测一个值是否为数组
arr.push(arg1,...) //末尾添加一个或多个元素,返回新的长度
arr.pop() //删除数组最后一个元素,返回所删除元素的值
arr.unshift(arg1,...) //向数组的开头添加一个或多个元素,返回新的长度
arr.shift() //删除数组的第一个元素,返回第一个元素的值
arr.reverse() //颠倒数组中元素顺序
arr.sort()//对数组的元素进行排序,可以传入比较函数
//索引查找
let arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.indexOf('blue')); // 2,从前往后找
console.log(arr.lastIndexOf('blue')); // 4，从后往前找
console.log(arr.indexOf('yellow')); // -1，找不到
//数组转换为string
let a = ['a', 'b', 'c', 'd', 'e'];
console.log(a.toString());  // a,b,c,d,e
console.log(a.join('')); // abcde ,参数即分割符
console.log(a.join('-')); // a-b-c-d-e
console.log(a); // [ 'a', 'b', 'c', 'd', 'e' ]
//字符串转换为数组
let str = 'blue-green-pink-red';
let res = str.split('-'); // [ 'blue', 'green', 'pink', 'red' ]

结构控制

  • if-else
  • if-else if-else
  • switch-cas
  • for
  • while
  • do...while

函数

声明式

function Name(params) {
    // function statements
}

表达式

var funcName = function(params) {
    // function statements
}

箭头式

let sum = (a, b) => {
	// function statements
};//如果就一行代码，可以不return也不写{}

对象

JS中有各种各样的变量，同时，函数也可以看成一种变量。而把他们汇聚到一起就构成了对象。即一组相关属性和方法的集合。

创建对象

//字面量创建
const objname = {
    name: 'asariel',
    age: 18,
    funcname: function () {
        console.log('Hi!');
    }
}
//new创建
let objname = new Object();
obj.name = 'asriel';
obj.age = 18;
obj.fucname = function() {
    console.log('Hi!');
}
//构造函数创建
function Star(uname, age, sex) { //构造函数即空对象
    this.name = uname;  //this 指向这个空对象
    this.age = age;
    this.sex = sex;
}
let ldh = new Star('刘德华', 18, '男');
let zxy = new Star('张学友', 19, '男');

使用对象

objname.attrname//调用属性值
objname['attrname']//调用属性值
objname.funcname //调用函数方法

遍历对象

for (const key in obj) {
    console.log(key); // 遍历属性名
    console.log(obj[key]); // 遍历属性值
}

编码原则

各司其责

HTML负责结构，css负责表现，JS负责行为。举例子，切换暗黑模式时，不要js直接操作样式，而是更改class名，css中写入对应class的样式。

组件封装

为了提高代码复用性，可以将一个功能拆分成多个组件。

过程抽象

同时，还可以将组件的模型抽象出来，这样多个组件还可以继承和复用模型

总结

JS编码原则，审慎操作dom，不要抢HTML和css的活。同时提高代码复用率，尝试抽象组件、使用高阶函数、声明式编程。

avatar
文章
阅读
粉丝