首页 > 其他分享 >js红宝书学习笔记(一)引用类型

js红宝书学习笔记(一)引用类型

时间:2022-09-26 13:33:37浏览次数:49  
标签:函数 笔记 js colors 红宝书 数组 var alert red

一.引用类型

   ECMAScript中,引用类型是一种数据结构称之为对象定义,,引用对象不同于传统面向对象语言所支持的类和接口等基本结构

  创建Object 实例的两种方式:

new操作符跟Object构造函数

  1. var person = new Object();
  2. person.name ="Nicholas";
  3. person.age=29;

对象字面量表示法

  向函数传递大量可选参数首选方式

  1. var person = {
  2. name :"Nicholas",
  3. age:29
  4. };

例子:

  1. function displayInfo(args){
  2. var output="";
  3. if(typeof args.name=="String"){
  4. output += "Name:" + args.name;
  5. }
  6. if(typeof args.age=="number"){
  7. output += "Age:" + args.age;
  8. }
  9. alert(output);
  10. }
  11. dispalyInfo({
  12. name: "Nicholas",
  13. age: 29
  14. })
  15. displayInfo({
  16. name: "Greg"
  17. });

2.Array类型

      ECMAScript数组与其他语言中的数组都是数据的有序列表,与其他语言不同的是,ECMAScript数组的每一项都可以保存任何类型的数据

创建数组的两种方式:

  • 使用Array构造函数 
  1. var colors = new Array();
  2. var colors = new Array(20);// 创建一个包含 20 项的数组
  3. var colors = new Array("red", "blue", "green"); 创建一个包含 3 项,即字符串""red", "blue", "green"的数组
  • 使用数组字面量表示法
  1. var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
  2. var names = []; // 创建一个空数组
  3. var values = [1,2,]; // 不要这样!这样会创建一个包含 2 或 3 项的数组
  4. var options = [,,,,,]; // 不要这样!这样会创建一个包含 5 或 6 项的数组

数组的项数可以增加--减少

  1. var colors=["red","blue","green"];//定义一个字符串数组
  2. alert(colors[0]);显示第一项
  3. colors[2] ="black"//修改第三项
  4. colors[3] ="brown";// 新增第四项
  5. ----数组就会自动增加到该索引值加 1 的长度
数组length属性特点---不是只读的,设置这个属性,将数组的末尾移除项或者向数组中添加新项
  1. var colors =["red","blue","green"]// 创建一个包含 3 个字符串的数组
  2. colors.length = 2;
  3. alert(colors[2]);

3.判断对象是不是数组的经典问题

  1. if(value instanceof Array){
  2. //对数组执行某些操作
  3. }

存在问题:

    他假定只有一个全局执行环境。如果网页中包含多个框架,实际上存在两个以上不同全局执行环境,从而存在两个不同版本的Array构造函数

解决方案:

  1. if(Array.isArray(Value)){
  2. }
  1. var colors=["red","blue","green"]
  2. alert(colors.toString());// red,blue,green
  3. alert(colors.valueOf()); // red,blue,green
  4. alert(colors); // red,blue,green
  1. var colors=["red","green","blue"];
  2. alert(colors.join(","));//red,green,blue
  3. alert(colors.join("||")); //red||green||blue

二.栈方法

  • 栈是一种LIFO(Last-In-First-Out)后进先出的数据结构,最新添加的项最早被移除
  • 栈中项的插入(推入)和移除只发生在栈的顶部

push方法和pop方法

  1. var colors=new Array();//创建一个数组
  2. var count=colors.push("red","green");//推入两项
  3. alert(count); //2
  4. count = colors.push("black"); // 推入另一项
  5. alert(count); //3
  6. var item = colors.pop(); // 取得最后一项
  7. alert(item); //"black"
  8. alert(colors.length); //2

三.队列方法

  • 栈数据结构----LIFO(后进先出) push方法和pop方法
  • 队列数据结构--FIFO(先进先出)push方法和shift方法
  1. var colors = new Array(); //创建一个数组
  2. var count = colors.push("red", "green"); //推入两项
  3. alert(count); //2
  4. count = colors.push("black"); //推入另一项
  5. alert(count); //3
  6. var item = colors.shift(); //取得第一项
  7. alert(item); //"red"
  8. alert(colors.length); //2
  • unshifit():数组前端添加任意各项并返回新数组长度
  • unshift()和pop方法,可以相反的方向模拟队列,即在数组的前端添加项,在数组的末端移除项

四.迭代方法

  • filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。
  • forEach():对数组中的每一项运行给定函数。这个方法没有返回值。
  • map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
  • some():对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。
  • every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. var everyResult = numbers.every(function(item, index, array){
  3. return (item > 2);
  4. });
  5. alert(everyResult); //false
  6. var someResult = numbers.some(function(item, index, array){
  7. return (item > 2);
  8. });
  9. alert(someResult); //true
  10. var numbers = [1,2,3,4,5,4,3,2,1];
  11. var filterResult = numbers.filter(function(item, index, array){
  12. return (item > 2);
  13. });
  14. alert(filterResult); //[3,4,5,4,3]
  15. var numbers = [1,2,3,4,5,4,3,2,1];
  16. var mapResult = numbers.map(function(item, index, array){
  17. return item * 2;
  18. });
  19. alert(mapResult); //[2,4,6,8,10,8,6,4,2]
  20. var numbers = [1,2,3,4,5,4,3,2,1];
  21. numbers.forEach(function(item, index, array){
  22. //执行某些操作
  23. });

reduce()和reduceRight()函数

  1. var values = [1,2,3,4,5];
  2. var sum = values.reduce(function(prev, cur, index, array){
  3. return prev + cur;
  4. });
  5. alert(sum); //15

五.Function 类型

  • 函数名实际上是一个指向函数对象的指针,不会与某个函数绑定。
  • 函数通常使用函数声明语法定义

函数是对象,函数名是指针

函数定义的两种方式:

  1. function sum (num1, num2) {
  2. return num1 + num2;
  3. }
  4. var sum = function(num1, num2){
  5. return num1 + num2;
  6. };
  7. var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐

六.没有重载

  • 两个同名函数,而结果则是后面的函数覆盖了前面的函数
  • 在创建第二个函数时,实际上覆盖了引用第一个函数的变量

七.基本包装类型

        引用类型与基本包装类型的主要区别是对象的生存期

  • 使用new操作符创建的引用类型实例,会存在内存种直到销毁
  • 自动创建的基本包装类型的对象,只存在于代码执行的瞬间,然后被立即销毁      

八.Boolean类型(建议不要使用Boolean对象)

    

标签:函数,笔记,js,colors,红宝书,数组,var,alert,red
From: https://www.cnblogs.com/DeveloperHan/p/16730556.html

相关文章

  • [RxJS] ShareReplay vs share
    ShareReplayisusingReplaySubject.Itwillreplythemessagestolatersubscribers.Itturnsunicastobservabletomulticaseobservable.shareReplay(1,2000):......
  • [Rxjs] Build a basic application store with Subjects
    Store.jsimport{BehaviorSubject,Subject}from'rxjs';import{map,distinctUntilKeyChanged,scan}from'rxjs/operators';exportclassObservableStore{......
  • JS高级
    1.作用域1.1局部作用域局部作用域分为函数作用域和块作用域({})var是函数作用域const,let是块作用域1.2全局作用域<script>和js文件的最外层是全局作用域1.3作......
  • PADS应用笔记:Logic画原理图时设置图业大小
    问题画原理图时默认的图业太小,想换大点怎么办方法在工具->选项界面进入设置界面,在这个界面下进行设置......
  • 如何以干净的方式在 NextJs 中创建请求中间件
    如何以干净的方式在NextJs中创建请求中间件中间件是每个API的一个重要方面,它们在NextJs项目中也很有用,但官方文档没有教你如何实现它们,幸好你找到了这篇我将教你如......
  • JS promise 原理
    Promise对象有三种状态:pending、fullfilled 和 rejected,分别代表了promise对象处于等待、执行成功和执行失败状态。创建promise对象后处于pending状态,pending状态......
  • delphi cxSplitter学习笔记
     //cxSplitter禁用移动和拖拽,只允许点击箭头按钮触发缩放(展开和收起)procedureTFraModleBase.cxSplitter3CanResize(Sender:TObject;varNewSize:Integer;varAcc......
  • vue 中使用 富文本编辑器;带图片上传时后台报错JSON parse error: Unexpected characte
    使用的是 wangEditorvue安装好后,在components文件夹下创建一个创建一个类<template><divref="editor"></div></template><script>importEfrom'wange......
  • PADS应用笔记:Logic画元件封装时端点无法编辑属性
    现象在画原理图元件封装时,定义的端点无法设置属性原因画逻辑时候只能定义端点,是没办法设置属性的,只有在编辑元件时才能设置属性......
  • PADS应用笔记:Logic画元件封装时端点不见了
    现象画原理图的元件封装时,画好的CAE逻辑明明定义里很多端点但是导入到元件时就都不见了,只剩下个2D线方框原因出现这种原因是因为在元件的电气特性里没有定义对应引......