JS进阶笔记2

简介: JS进阶笔记2

2.3 数据结构


image.png


typeof 操作符


  • typeof 操作符返回一个字符串,表示未经计算的操作数的类型


image.png


  • 数字类型


  • 包括整型数字和浮点型数字
  • 整型:十进制、十六进制(0X或0x开头)、八进制(ECMAScript标准不支持,严格模式下不支持)
  • 浮点型:3.1   .666    1.23e11 // 1.23 * 1011       2.321E-12  // 2.321 * 10-12
let a = 10;
let b = 1.2;
let c = 2.1E-2;
console.log(typeof a);  // number
console.log(typeof b);  // number
console.log(typeof c);  // number


  • 字符串类型


  • 由单引号或双引号括起来的一组16位Unicode字符组成的字符序列
  • 转义字符:\n   \r   \"   等
  • 查阅String文档


  • 字符串模板


  • 允许嵌入表达式的字符串字面量
  • 使用反引号 (``键盘数字1左边) 来代替普通字符串中的用双引号和单引号
  • 字符串模板保留其中的换行,可以包含特定语法(${expression})的占位符
var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."


  • 布尔类型


  • true false a==1
  • 进行算术操作时,true转换为1,false转换为0
var b = true;
console.log(typeof b);    // boolean
console.log(true * true); // 1 * 1 = 1


  • null与undefined


  • null表示空或不存在的引用,参与算术运算时自动转换为0,布尔运算时转换为false
  • undefined表示变量已声明但没有赋值,布尔运算时转换为false,出现的典型情况:
  • 变量声明后没有赋值
  • 调用函数时,应提供的参数未提供
  • 对象的属性没有赋值时
  • 数组定义后没有给元素赋值,元素的值
  • 函数没有返回值,默认返回值


  • 对象类型


  • 类似与Java语言中的对象,数据+处理数据的函数,数据称为对象的属性,函数称为对象的方法
  • 内置对象:window document  Date Math等等
  • 自定义对象
  • 数组(Array)是一种内置对象
  • typeof 返回值都是object


  • 函数类型


  • 有名函数,函数名称为函数变量;匿名函数赋值于某变量后,该变量为函数变量
  • 函数变量的值为整个函数定义语句
let fn1 = function() { console.log('调用fn1'); }
let fn2 = () => { console.log('调用fn2'); }
function fn3() { console.log('调用fn3'); }
console.log(typeof fn1);  // function
console.log(typeof fn2);  // function
console.log(typeof fn3);  // function
console.log(fn1);      // function() { console.log('调用fn1'); }
console.log(fn2);      // () => { console.log('调用fn2'); }
console.log(fn3);      // function fn3() ... ...


  • 数据类型转换 ——加号(+)


  • 加号(+)两边存在字符串或引用类型时,加号为字符串连接符,非字符串操作数自动转换为字符串,引用类型调用其toString()方法转换为字符串。
console.log("我是" + 2019 + "级学生"); // "我是2019级学生"
console.log("15" + 5);    // 155
console.log("abc" + true + 1);  // abctrue1
console.log("abc" + null + 2);  // abcnull2
console.log(true + 1 + "abc");  // 2abc
console.log(null + 2 + "abc");  // 2abc
console.log("abc" + function() {console.log('a')}); 
// abcfunction(){console … …
console.log({name: '张三'} + 1); // [object Object]1
console.log({name: '张三', toString: function(){return '人员' + this.name}} + 1); 
// 人员张三1
console.log(1 + function() {console.log('a')}); 
// function() {console.log('a')} 
  • 加号(+)两边为数值、布尔、null或undefined类型时,加号为加法算术操作符,此时非数值操作数自动转换为数值型,若存在不能转换为数值的操作数(仅有undefined),结果为NaN。
console.log(true + 1);    // 2, 1 + 1
console.log(undefined + 1);   // NaN
console.log(null + 2);    // 2, 0 + 2
console.log(true + 1 + “abc”);  
// 2abc,true与1间的加号为算术加法,其结果(2)与“abc”间连接字符串
console.log("abc" + 2 + null);  // abc2null


  • 数据类型转换 ——其它操作符


  • 减(-)、乘(*)、除(/)、取余(%)两边存在字符串时,字符串自动转换为数字(如有无法转换操作数,则结果为NaN)
  • ++和--,字符串自动转换为数字,无法转换的结果为NaN
console.log("20" / 2);    // 10
console.log("20" / "2");  // 10
console.log("20" - "a");  // NaN
let n = "6";
let s = "a";
console.log(++n);   // 7
console.log(++s);   // NaN
let a = true;
console.log(++a);    // 2
  • >、<、==、<=、>=:表达式包含数字和字符串时,字符串自动转换为数字,不能转换成数字的字符串或其它类型值,表达式均返回false
  • 当比较两个字符串的大小时,按ASCII码比较,比较true false null 的大小时,按值比较( true=1, false=null=0)
console.log("10" > 9);  // true
console.log("a" > 0);   // false
console.log("a" <= 0);  // false
console.log(true > 0);  // true
console.log(null < 1);  // true
console.log(undefined < 1); // false


  • 相等与严格相等


  • ==  左右两边的值相等即返回true,数据类型可不相同
  • === 左右两边的值相等,且数据类型相同,返回true
  • != 和 !== 与以上类似,其区别在数据类型是否相同
console.log('15' == 15);  // true
console.log('15' === 15); // false
console.log(true == 1);   // true
console.log(false == 0);  // true
console.log(true === 1);  // false


  • 显式类型转换


  • Number(value) 全局函数,对value进行整体转换,value中包含无法转换为数字的部分时,转换失败,返回NaN
  • parseInt(stringNum, [radix])全局函数,将stringNum转换为整数,radix为2-36之间的数字,指定转换时进制,进制为10时可省略
  • parseFloat(stringNum)全局函数,将stringNum转换为浮点数


  • ... 扩展运算符(对象展开符)


  • 扩展运算符( spread )是三个点(...),其作用是将一个数组转为用逗号分隔的参数序列
  • 常用于函数调用时传递参数


image.png


扩展运算符提供了数组合并的新写法。注:Array.concat()方法用于连接两个数组


image.png

相关文章
|
6天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
6天前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
31 0
|
6天前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
6天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
6天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
6天前
|
JavaScript 前端开发
JavaScript 中运算符优先级:理解规则、实战应用与进阶技巧
【4月更文挑战第6天】了解 JavaScript 运算符优先级是编写清晰无误代码的关键。优先级规则决定了运算的顺序,从高到低包括一元、乘性、加性、关系、相等性等运算符。掌握优先级能避免逻辑错误,例如在表达式 `a * b + c` 中,乘法先于加法执行。实际应用中,使用括号可以明确运算顺序,提高代码可读性。注意避免混淆优先级,如赋值与比较操作。利用优先级简化逻辑判断,遵循编码规范,提升编程技能。通过不断学习和实践,加深对运算符优先级的理解,优化代码质量。
21 0
|
6天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
75 0
|
6天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(一)
JavaScript高级笔记-coderwhy版本
35 0
JavaScript高级笔记-coderwhy版本(一)
|
6天前
|
存储 JSON JavaScript
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(三)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
40 1
|
6天前
|
JavaScript 前端开发 算法
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(二)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
30 0