前端基础------JS
JS中的语句要以分号 ; 为结束符.
JS语言基础:
1, JS 的变量名可以使用 下划线, 数字, 字母, $ 组成. 不可以是数字开头
2, 声明变量使用var 变量名. 的格式来进行声明.
var name = "Alex";
var age = 18;
注意:
变量名是区分大小写的.
推荐使用驼峰式命名规则.
保留字不能用做变量名.
补充:
ES6新增了let命令, 用于声明变量, 其用法类似于var, 但是所声明的变量只在le't命令所在的代码块内
有效, 例如: for循环的计数器就很适合使用let 命令.
for (let i = 0; i < arr.length;i++){...}
ES6新增const用来声明常量, 一旦声明, 其值就不能改变.
const PI = 3.1415;
PT // 3.1415 PI = 3
//TypeError: "PI" is read-only
JS的数据类型:
JS拥有动态类型:
var x; // 此时x是undefined
var x=1; //此时x是数字
var x="Alex" // 此时x是字符串
数值(Number)
JS不区分整型和浮点型, 就只有一种数字类型.
var a=12.34;
var b=20;
var c=123e5; //
var d = 123e-5; // 0.00123
还有一种NaN, 表示不是一个数字(Not a Number).
数值常用方法:
parseInt("123") // 返回123
parsenInt("ABC") // 返回NaN, NaN属性是代表非数字的特殊值, 是指某个值不是数字.
parsenInt("123.456") // 返回123.456
字符串(string)
var a = "Hello";
var b = "world";
var c = a+b;
console.log(c); // 得到Helloworld
| 方法 | 说明 |
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value,...) | 拼接 |
| .indexOf(substring,start) | 子序列位置 |
| .substring(from,to) | 根据索引获取子序列 |
| .slice(start,end) | 切片 |
| .toLowerCase() | 小写 |
| toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
.length lɛŋθ/ 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight()trim/trɪm/ 移除右边空白 和.trimLeft() 两者一起使用, 只会返回最后一个的操作.
.charAt() char/tʃɑr/ 返回第n个字符
.concat(value,...)/kɑn/ 拼接 可以拼接本身, 也可以拼接多个其他字符串.
.indexof(substring, start) 子序列位置 ===> b.indexOf("a",2);
表示从字符串b的第3个索引位置开始查找"a", 返回第一个被找到的索引.
.substrung(from, to) 根据索引获取子序列 # 第一个是起始位置, 第二个是结束位置 ,
如果第二个数值小于第一个位置的时候, 两个数值会反转后再去取值(左闭右开)
.slice(start, end) 切片 # 根据索引位置, 其中可以设置第三个数字, 带三个数字可以代表步长,
和取值方向. 如果第二个参数大于第一个, 返回一个空字符串.(左闭右开)
.toLowerCase() 小写 # 将字符串的所有字母转换成小写
.toUpperCase() 大写 # 将字符串中的所有字母转换成大写
.split(delimiter, limit)分割
补充:
ES6中引入了模板字符串。模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`这是普通字符串!`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`
注意:
如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义。
JSHint启用ES6语法支持:/* jshint esversion: 6 */
布尔值(Boolean)
区别于python, true和false 都是小写.
var a = ture;
var b = false;
" " , (空字符串) , 0 , null , undefined, NaN 都是false.
null和 undefined
- null 表示为空, 一般在需要制定或清空一个变量时, 才会使用. 如 name=null;
- undefined 表示当生命一个变量但未初始化时, 该变量的默认值是undefined.还有就是函数无明确的返回值, 返回的也是undefined.
null表示变量的值是空, undefined则表示只声明了变量, 但还没有赋值.
对象(Object)
JS 中的所有事物都是对象, 字符串, 数值, 数组, 函数, 此外, JS允许自定义对象.
JS 提供了多个内建对象, 比如String, Dare, Array等等.
对象 只是带有属性和方法的特殊数据类型.
数组:
数组对象的作用是: 使用单独的变量名来存储一些列的值, 类似于python中的列表.
var a = {"ABC", 123};
console.log(a[1]); //输出"ABC"
数组中的常用方法:
| 方法 | 说明 |
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头插入元素 |
| .shift() | 头部移除元素 |
| .slice(start,end) | 切片 |
| .reverse() | 反转 |
| .concat(val,...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递个回调函数 |
| .splice() | 删除元素, 并向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
var a = [123,23,234,3423,423,42]
undefined
a.length
6

关于sort()需要注意:
如果调用该方法时没有使用参数, 将按字母顺序对数组中的元素进行排序,
就是按照字符编码顺序进行排序, 要实现这一点, 首先把数组的元素都转换成字符串(需要的话), 便可以进行比较.
如果想按照其他标准进行排序, 就需要提供比较函数, 该函数要比较两个值么然后返回一个用于说明两个之顺序的数字.比较函数应该具有两个参数a 和b. 其返回值如下:
若 a小于b 在排序后, 的数组中, a 应该出现在b 之前, 则返回一个小于0的值.
若a 小于b, 则返回0.
若a 等于b, 则返回0
若a 大于 b, 则返回一个大于0的值.
示例:
function sortNumber(a,b){
return a - b
}
var arrl = [11, 100, 22, 55, 33, 44]
arrl.sort(sortNumber)
关于遍历数据中的元素, 可以使用下面的方式:
var a = [10, 20, 30, 40];
for (var i = 0; i<a.length;i++) {
console.log(a[i])
}
forEach()
语法:
forEach(function(currentValue,))
参数:
前端基础------JS的更多相关文章
- 前端基础——js数据类型及判断方法
一.数据类型 我们通常熟知的数据类型有六种,包括5种基本数据类型(Number, String, Boolean, Undefined, Null)和一种引用数据类型(Object).ES6又新增了一 ...
- 前端基础js(四)
一. js [1] html:用于显示页面 [2] css:用于描述页面的样式 [3] javaScript:用于描述页面的行为 二.js中三大部分内容 [1] 基本语法:函数.对象.事件类型(变量, ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- 前端基础面试题(js部分)
前端基础面试题(JS部分) 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...
- 前端05 /js基础
前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
随机推荐
- C# 中 in,out,ref 的作用与区别
In:过程不会改写In的内容 Out和out:传入的值不会被过程所读取,但过程可以写 ref:传入的值,过程会读,也会写 就象你把布料送到裁缝的一个收料箱(裁缝用这个区别是哪家客户) IN:这块布料, ...
- Jacoco覆盖率工具使用之maven篇
说明 之前的文章已经介绍过如何使用apacheant 执行jacoco工具,下面开始介绍如何使用maven使用jacoco工具. 1.首先新建一个maven项目 如图所示: ...
- Python程序员的10个常见错误
关于Python Python是一门解释性的,面向对象的,并具有动态语义的高级编程语言.它高级的内置数据结构,结合其动态类型和动态绑定的特性,使得它在快速应用程序开发(Rapid Applicatio ...
- 2D游戏平滑的迷雾战争效果
近期刚好有做2D游戏的点光源效果,然后就扩展一下.研究了一下战争迷雾的效果.主要是想实现相似魔兽争霸那种人物走动,然后黑色的战争迷雾随着人物的移动渐渐打开的效果.使用具有渐变透明图片作为光源来使得战争 ...
- 什么是Pro*C/C++,嵌入式SQL,第一个pro*c程序,pro*c++,Makefile,Proc增删改查
1 什么是Pro*C/C++ 1.通过在过程编程语言C/C++中嵌入SQL语句而开发出的应用程序 2.什么是嵌入式SQL 1.在通用编程语言中使用的SQL称为嵌入式SQL 2.在SQL标准中定义 ...
- 【Java】Java_13 分支结构
Java中常见的两种分支结构: <1>If语句:使用布尔表达式或者布尔类型值作为分支条件来进行分支控制. <2>switch语句:对多个整形值进行匹配,从而实现分支控制. 1. ...
- 【C#系列】你应该知道的委托和事件
[C#系列]你应该知道的委托和事件 本篇文章更适合具有一定开发经验,一定功底,且对底层代码有所研究的朋友!!! 本篇文章主要采用理论和代码实例相结合方式来论述委托和事件,涉及到一些边界技术,如软件 ...
- 工作总结 "2017年8月11日" 转换为datatime
string strr = "2017年8月11日"; Console.WriteLine((Convert.ToDateTime(strr)).ToString("yy ...
- 有关IM即时通讯原理
在网上搜索了一些资料,谈谈自己对IM即时通讯的理解 IM全称为Instant Messaging,即时通讯,如qq那种的. 现在有两个用户UserA, UserB, 俩人是一个IM通讯软件的好友,Us ...
- 详解TCP建立连接全过程
TCP是因特网中的传输层协议,使用三次握手协议建立连接,下面是TCP建立连接的全过程. 上图画出了TCP建立连接的过程.假定主机A是TCP客户端,B是服务端.最初两端的TCP进程都处于CLOSED状态 ...