js 知识点整理

1.js借鉴了c及c语言,

2.区分大小写,    结尾 ';' 需加上,虽不是必须的,但在压缩会报错,增进性能

3.变量命名

   (采用驼峰命名,userName)  开头(字母  $  _) 中间部分(字母,数字  $  _)

4.注释

//  单行注释

/*

* 多行注释

*

*/

5.严格模式

function(){

    "user strict"    // 告诉js引擎切换到严格模式

    // 函数体

}

6.js变量  (是松散类型的,可以保存任何类型的数据)

使用typeof 可识别数据类型     typeof '123'  // string

基本数据类型值

基本数据类型

undefined        // 未申明定义    派生自null

null                   // 未定义的对象  表示空对象指针,用来初始空对象

string               // 字符串    转字符串  '123'.toString() [正常使用这个,性能考虑]   123+'' 常用方法链接

number            // 数字   NaN   非数值但为number类型    1+'ab' = NaN 判断是否为数字 isNan(123) // false 

字面量格式:八进制  070  // 56    十进制    十六进制

浮点数和整数   0.3      3e-2 / 0.03       3e5 / 300000    3*10*5

数值范围    5e-324      1.79769313482623157e+308       

 常使用 转换     parseInt('123')      (不常用 :Number() 可转换任何类型数据   parseFloat() 浮点数转换)boolean           // 布尔    true/false  逻辑判断时   1 '123'  为true ,   0  ''  undefined  null  为false

复杂数据类型

object

引用数据类型值 (对象  数组  函数)

A 对象

let obj = {name:'张三', age:18,01:21};

let name = obj.name; // 张三

let ages = 'age'

let age  = obj[ages];  // 18  如果为变量 则使用 [变量]

let a01 = obj[01]; //21. obj.21 会报错,对象中可用数字作为属性,取值[]

正常情况 使用 '.属性'(建议使用),如果需要使用变量 则使用  ['属性']

obj.age = 20; // 重新赋值age

if(typeof obj.age){} // typeof 用来判断是否存某个属性

B 数组   方法链接

let arry = ['张三',123,true,{age:10},undefined]; // 数组下标是从0开始

let name = arry[0];     // 获取数组值,通过[]张三

arry[3] = {age:200};    // 数组重新赋值之后  ['张三',123,true,{age:200},undefined]

数组常用方法  


C 函数

function demoWay(a,b){

        //  demoWay 实参

        // arguments  实数

        console.log('这里是进行打印');

}

命名函数   var a = function b (){}

匿名函数(一般常用)  var a = function(){}

8.获取元素的常用方法

document.getElementsById('wrap');    // <div id='wrap'></div>

getElementsByClassName('info');    // 不兼容ie8以下  <div class='info'></div>

 getElementsByTagName('p');        // <p></p>

getElementsByName('main');        // <div name='main'></div>

9. 操作各种样式

内部样式

<style id='sty'></style>

let osty = document.getElementsById('sty');

osty.innerHTML = "#wrap{height:200px; width:200px; background:red}";// style也属于html标签(很少使用)

行内样式

<style>

    #wrap.main{background:yellow; font-weight:600};

</style>

<div id = 'wrap' myname='alia'></div>

let owrap = document.getElementsById('wrap');

改变属性值 owrap.属性值(应为合法的属性才有效,例 title  id    className   与保留值class类似) 

owrap.id = 'one-wrap'; // 改变了id值, 对象是不变的,owrap 还有效

改变自定义标签属性值

setAttribute('myname','alia2'); // 单个   setAttribute({'name1':'n1','name2':'n2'});

getAttribute('myname');   removeAttribute('myname');

改变样式

owrap.style.height='100px'; // 单个行内样式;

owrap.style.cssText += "height:200px; color:blue"; // += 样式不会被覆盖

owrap.className = 'main'; // 通常写好样式,改变calss名称进行改变样式,样式不会出现不兼容问题

10 获取标签值,改变标签值

owrap.innerHTML = '<strong>这里是内容</strong><i>附加内容</i> \t哈哈哈';

// 可识别标签  这里是内容 哈哈哈    \ 作为转义符(一般用于特殊符号) 

owrap.innerText = '<strong>这里是内容</strong><i>附加内容</i> \t哈哈哈';

//   <strong>这里是内容</strong>  不能识别标签

<input value='我是好人' class='user-name' />

document.getElementsByClassName('user-name').value('我不是好人'); // 赋值   取值直接value()

11 运算符与拼接  +  -   *   /  %

10/3    // 3.13333

10%3  // 1   % 模 相当于余数

隐式类型转换 

1+2+'8'; // 38

1+2+'8'+1+2 // 3812   字符串后有数字 会先把数组转为字符串进行累加

1+true  // 2      与布尔类型累加,会先转数字类型再进行累加, true 1  false 0

-  *   /  %   会把字符串先 Number() 转之后再进行运算

'20'-'5' = 15;

'20p' - '5' = NaN;

11 自增 自减

a++    先执行后自加   ++a 先自加再执行   let a = 10; let b = a++; // b: 10  let b = ++a; // b: 11

a--    先执行后自减   --a 先自减再执行   let a = 10; let b = a--; // b: 10  let b = --a; // b: 9

12 运算符

if ( true && false)      //  false, 只要有一个假为假

if(true || false)     //    true 只要有一个真为真

if( ! true)                // false 取反

let a = 1 && 0 &&  2  // 0   一直向后取值,当遇到假停止,并取当前值,如若没有假值则取最后一位

let a = 1 || 0 || 2 // 1  一直向后取值,当遇到真停止,并取当前值,如若没有真值则取最后一位

let a = !0    // true    去数据相对应的布尔值  (相对应的false值:   undefind  null   0  ''  Nan   false )

13 运算符优先

.  []   ()            // 一般用于取值 数组对象

++  --   !   typeOf()

*   /   %

+  -  

>=   <=   >    <

&&

|| 

,            // let a = (1,2,3,4);  结果为4   ‘,’取最后一位

例子:

let b = 4

let   a =  10 ||  8 && (b=5); // a10, b 4    先进行计算 && ,取false,无false值,取b=5,   10|| (b=5), || 取 true值,10,不进行执行b=5;

let c = !b + 5;  // 5   !b = false -> false+5 ->  0+5 = 5;

let d3 = (2,10 && 0 || 8 && !5); // false   ->(2, 0 || !5) ->(2,!5) -> (2,false) -> false


12 es 6  拼接  反义符

let a = 'zhang';

'<p>

    <a>点击${name}</a>

</p>


7.判断

var age = 19;

// 三元运算(三目运算)

age>18 ? (a='成年人',b='18岁以上') : (a='未成年人',b='18岁以下'); 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,382评论 0 13
  • 一、Python简介和环境搭建以及pip的安装 4课时实验课主要内容 【Python简介】: Python 是一个...
    _小老虎_阅读 5,611评论 0 10
  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile丽语阅读 3,798评论 0 6
  • 这是我前段时间学习js的知识点的整理,我把它写成了一个文件,简书上不知道怎么上传唉。。。 然后就放在了githup...
    往前走莫回头_2cd6阅读 204评论 0 0
  • 在我听完第二期“关系之道”嘉宾的分享,作为一位哺乳期的妈妈,我心动了,她经历过的那些困惑和不安和我心底的困惑好类似...
    小花的星辰大海阅读 524评论 2 3