前端开发工程师需要学什么专业（前端开发：4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法）
前端开发之JavaScript
一 、JavaScript简介
Javascript（简称‘JS’）,是一门解释型编程语言 ，主要用于Web 、和浏览器中网页中的动态渲染
是一门前端工程师的编程语言 ，相比于python它的逻辑并不是那么严谨
二 、JS基础
语法注释
单行注释 //注释内容 多行注释（与css注释相同） /*注释内容*/引入JS的多种方式
1 、<head>标签内<script>标签内编写 2 、<haed>标签内<script>标签src属性引入外部JS资源 3 、<body>标签内最底部通过<script>标签src属性引入外部JS资源（最常用） 网页的加载顺序是由上至下 ，所以操作标签的JS代码一定要等待标签加载结束后运行结束符
分号 ; JavaScript中的语句要以分号（;）为结束符 。编写JS代码的方式
1 、浏览器 （零时使用） 打开浏览器 ，右键检查 ，在console内部编写 2 、pycharm创建JS文件或者HTML文件 适合编写较为复杂的JS代码（便于长久保存）三 、变量与常量
变量
变量的声明：
在JS中声明变量需要用到关键字var或let（let 是ECMA6新语法） JavaScript的变量名可以使用_ ，数字 ，字母 ，$组成 ，不能以数字开头 。变量名的命名规范：
推荐使用小驼峰var 与 let 区别：
var：定义在全局 ，可在局部名称空间种被修改 let： 定义在局部名称空间种不会影响到全局名称空间的变量名 var var 变量名 = 值; let let 变量名 = 值;常量
JS中支持定义常量（定义后无法被修改）
关键字：const const 常量名 = 值;四 、基本数据类型
查看数据类型的方法:
关键字：typeof typeof(绑定数据的变量名);1 、数值类型
Number（数值类型）
区别于Python ，JS中整型和浮点型都叫做：Number
NaN也属于数值类型：不是一个数字（Not A Number）
2 、字符类型
String（字符类型）
定义字符类型可使用单 、双引号
模板字符串使用：``
var 变量名 = 值; var 变量名 = "值"; var 变量名 = `我是第一列 我是第二列 我是第三列`内置方法
序号 关键字 说明 1 .length 返回长度 2 .trim() 移除空白 3 .trimLeft() 移除左边的空白 4 .trimRight() 移除右边的空白 5 .charAt(n) 返回第n个字符 6 .concat(value, ...) 拼接 7 .indexOf(substring, start) 子序列位置 8 .substring(from, to) 根据索引获取子序列 9 .slice(start, end) 切片 10 .toLowerCase() 小写 11 .toUpperCase() 大写 12 .split(delimiter, limit) 分割 var name = kang kang var gender = male 1.name.length // 13 返回字符长度 2.name.trim() // kang kang 去除字符串左右两边空格（区别于Python ，JS只能去除空格） 3 、name.trimLeft() // kang kang 去除字符串左边空格 4 、name.trimRight() // kang kang 去除字符串右边空格 5 、name.charAt(5) // g 类似于Python的索引取值 6 、name.concat(gender) // kang kang male 拼接 ，针对字符的拼接还可以用‘+’号 7 、name.indexOf(ng) // 4 根据输入的字符获取字符对应索引的位置 8 、name.substring(1,5) // kan 类似于Pyhon的切片操作 9 、name.slice(1,5) // kan 类似于Pyhon的切片操作 10 、name.toUpperCase() // KANG KANG 将字符串所有英文字母转大写 11 、name.toUpperCase() // kang kang 将字符串所有英文字母转小写 13 、name.split() //(6)[, , kang, kang, , ] 按指定字符·分割字符串 ， 第二个参数可控制获取分割后的字符串的个数 /* string.slice(start, stop)和string.substring(start, stop)： 两者的相同点： 如果start等于end ，返回空字符串 如果stop参数省略 ，则取到字符串末 如果某个参数超过string的长度 ，这个参数会被替换为string的长度 substirng()的特点： 如果 start > stop ，start和stop将被交换 如果参数是负数或者不是数字 ，将会被0替换 silce()的特点： 如果 start > stop 不会交换两者 如果start小于0 ，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0 ，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符) */3 、布尔类型
boolean（布尔值）
区别于Python ，JS的布尔值首字母不用大写
JS布尔值纯小写
var a = true; var b = false;（空字符串） 、0 、null 、undefined 、NaN都是False
五 、特殊数据类型
null和undefined
1 、null
表示值是空 ，一般在需要指定或清空一个变量时才会使用
表示曾经有过 ，但是现在没有了
eg：name= null
2 、undefined
表示当声明一个变量但未初始化时 ，该变量的默认值是undefined 表示一直就没有拥有过 函数无明确的返回值时 ，返回的值也是undefined null表示变量的值是空(null可以手动清空一个变量的值 ，使得该变量变为object类型 ，值为null) ，undefined则表示只声明了变量 ，但还没有赋值 。
六 、引用数据类型
1 、对象（Object）
JaveScript中所有的事务都是对象：字符串 、数值 、数组 、函数...此外JavaScript允许用户自定义对象
JaveScript提供多个内建对象 ，比如String 、Date 、Array等
对象是带有属性和方法的特殊数据类型
2 、数组(Array)
数组类似于Python中的列表
使用单独的变量名来存储一系列的值
创建数组的方法
let a = [1,2,3,4,5];常用方法
序号 方法 说明 1 .length 数组的大小 2 .push(ele) 尾部追加元素 3 .pop() 获取尾部的元素 4 .unshift(ele) 头部插入元素 5 .shift() 头部移除元素 6 .slice(start, end) 切片 7 .reverse() 反转 8 .join(seq) 将数组元素连接成字符串 9 .concat(val, ...) 连接数组 10 .sort() 排序 11 .forEach() 将数组的每个元素传递给回调函数 12 .splice() 删除元素 ，并向数组添加新元素 。 13 .map() 返回一个数组元素调用函数处理后的值的新数组 let a = [1,2,3] let b = [ABC,DEF] 1 、a.length // 3 返回数组内部数据的数量 2 、a.push(4) // 在数组尾部添加值 3 、a.pop() // 弹出数值尾部的值 4 、a.unshift(1) // 在数值头部插入数值 ，可一次插入多个 5 、a.shift // 移出数组头部数据 ，一次只能移除一个 6 、a.slice(1,3) // 数组切片取值 ，设置起始和结束位置的索引 7 、a.reverse() // 反转元组内数据 8 、a.join() // 3,2,1,1,5 将数组内数据转成字符类型 9 、a.concat(b) //(7)[3, 2, 1, 1, 5, ABC, DEF] 拼接数组 10 、a.sort() // 将数组内数值由小到大排序 11 、 var obj = { 1 : abc, 3 : 100, 5 : hello } var arr = [1, 3, 5]; arr.forEach(function(item){ // console.log(item); },obj);//返回值： 1 3 5 12 、a.splice(a,b,c) //删除数组内现有数据 ，添加新的数据 13 、et array = [1, 2, 3, 4, 5]; let newArray = array.map((item) => { return item * item; }) console.log(newArray) // [1, 4, 9, 16, 25]3 、字典（Dictionary）
字典同于Python中的字典
字典是一种以键-值对形式存储数据的数据结构 ，比如：名字-电话号码 ，通过名字就能找到对应的电话号码 ，名字就是键(key) ，电话号就是值(value)；
创建字典的方法
1 、方式一: 创建字典的同时直接添加键值对 let 字典名 = {键1：值1 ， 键2：值2 } 2 、方式二： 创建一个空字典 ，然后再添加键值对 let 字典名 = new Object();字典的基本用法
let d1 = {name: kangkang, age: 18, hobby: read} 1 、索引取值 d1.name // kangkang d1[name] // kangkang 2 、添加键值对 d1.键名 = 值 d1[键名] = 值七 、运算符
1 、算数运算符
符号 描述 + 加 - 减 * 乘 / 除 % 取余 ++ 自增1 -- 自减1 var x=10; var res1 = x ++; 加号在后面 先赋值后自增 var res2 = ++ x; 加号在前面 先自增后赋值2 、比较运算符
弱： 不同类型的类型解释器会自动转换为相同类型的数据进行比较 ‘1’== 1；// true 强： 不同类型数据不会自动转换类型 ‘1’== 1；// false 符号 描述 ！= 不等于（弱） == 等于（弱） === 等于（强） ！=== 不等于（强）3 、逻辑运算符
符号 描述 && 与 || 或 ！ 非八 、流程控制
1.单if分支 if (条件){ 条件成立执行的代码 } 2.if...else分支 if(条件){ 条件成立执行的代码 }else{ 条件不成立执行的代码 } 3.if...else if...else分支 if(条件1){ 条件1成立执行的代码 }else if(条件2){ 条件1不成立条件2执行的代码 } else{ 条件1和2都不成立执行的代码 } 4.如果分支结构中else if很多还可以考虑使用switch语法 switch(条件){ case 条件1: 条件1成立执行的代码; break; 如果没有break会基于某个case一直执行下去 case 条件2: 条件2成立执行的代码; break; case 条件3: 条件3成立执行的代码; break; case 条件4: 条件4成立执行的代码; break; default: 条件都不满足执行的代码 } """ 三元运算 python中: 值1 if 条件 else 值2 JS中: 条件?值1:值2 """九 、循环结构
1 、for循环
for循环 for(起始条件;循环条件;条件处理){ 循环体代码 } for(let i=0;i<10;i++){ console.log(i) } let dd = {name:jason,age:18} for(let k in dd){ console.log(k) }2 、while循环
while循环 while(循环条件){ 循环体代码 }十 、函数
1.JS中函数的形参与实参个数可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体1 、普通函数
function 函数名(形参){ // 函数注释 函数体代码 return 返回值 }2 、匿名函数
# 匿名函数 var s1 = function(a, b){ return a + b; }3 、箭头函数
# 箭头函数 var f = v => v; var f = function(v){ return v; } var f = () => 5; var f = function(){return 5}; var sum = (num1, num2) => num1 + num2; var sum = function(num1, num2){ return num1 + num2; }十一 、内置对象
1 、时间相关
var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月（0-11） //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)2 、json序列化
let dd = {name: jason, age: 18} JSON.stringify(dd) 序列化 JSON.parse(ss) 反序列化3 、正则
定义正则两种方式 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; 1.全局模式的规律 lastIndex 2.test匹配数据不传默认传undefined创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！