JS语言简介代码示例类型转换遍历数组 - WEB前端

一、JS语言简介

1、JS语言由三部分组成：ECMAScript、DOM文档对象模型、BOM浏览器对象模型；

2、JS语言标准是ECMAScript，目前主要是5版本和6版本，5版本浏览器兼容性更好；

3、Babel是一个JS编译器，转换高版本JS到低版本JS，polyfill转换高版本API到低版本API；

4、WebAssembly是Web字节码标准，将高级语言编译成字节码wasm，解决JS执行效率问题；

5、wasm文件生成过程，首先高级语言代码编译成LLVM IR，然后LLVM IR编译成wasm；

6、<script></script>标记代码块，老式浏览器要求type="text/javascript"，现在已经不必；

7、代码可以位于head、可以位于body、可以位于外部，最好放在head或外部便于维护；

8、申明文档类型：<!DOCTYPE html>，告诉浏览器文档满足HTML5规范；

基本语法：

1、官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

2、语法文档：https://www.runoob.com/js/js-tutorial.html

3、对象文档：https://www.runoob.com/jsref/jsref-tutorial.html

4、运行时确定变量类型，不同类型之间隐式转换；

5、数字类型只有一种，可以带小数，可以不带；

6、字符串连接：str+str，str+num，num+str

7、undefined变量未定义，null变量未赋值；

8、单行注释//，多行注释/**/

var和let：

1、var是函数作用域，let是块级作用域；

2、var允许重复申明，let不允许重复申明；

3、var存在即提升，初始化变量为undefined；

4、let存在即提升，但引入变量执行就会报错；

5、for循环申明var变量，作用域大于for循环；

6、for循环申明let变量，作用域在for循环内部；

常用函数：

1、消息弹窗：window.alert(message)

2、页面重定向：window.location.href = url

3、内容输出：document.write(exp1,exp2,exp3,...)

4、内容修改：document.getElementById('id').innerHTML = 'content'

项目结构：

1、lib，js

2、static，html、css、jpg

3、WEB-INF，动态内容

4、index.html，主页

加载文件优化：

1、RequreJS官方网站：https://requirejs.org/docs/start.html

2、RequreJS简化加载JS文件，优化加载文件大小，防止加载文件阻塞页面渲染；

3、min.css和min.js是压缩后的文件，css.map和js.map是压缩用的名称映射文件；

二、代码示例：

任意文件读取检查：

let regex = /^\/|\.\.|:/ig;
regex.test(filename);

弹框代码：

改变样式：

x=document.getElementById('demo')
x.style.color='#ff0000';

显示时间：

function displayDate() {
document.getElementById('demo').innerHTML = Date();
}

<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>

三、类型转换

字符串转int：

let str = '1250';
console.log(Number(str));
console.log(parseInt(str));
let str1 = '00100';
console.log(Number(str1));
console.log(parseInt(str1));

let str2 = 'abc';
console.log(Number(str2));
console.log(parseInt(str2));

let str3 = '12abc';
console.log(Number(str3));
console.log(parseInt(str3));
输出：

1250

100

NaN

int转字符串：

let num = 99;
console.log(typeof num.toString());
console.log(typeof (num + ''));

输出：

string

四、遍历数组