创建数组的几种方式?

一省:HTML

17. BOM和DOM是什么?

  1. BOM:浏览器对象模型(Browers Object Model)允许JavaScript与浏览器对话。通过BOM的对象和方法可以完成对浏览器窗口的操作,如控制窗口及弹窗、通过location对象可以获取页面信息、通过navigator对象了解浏览器、通过history对象操作浏览器历史等。BOM的核心是window对象。
window.close();//关闭浏览器
window.alert("notice!");//弹窗提示
console.log(window.location);//当前网页的信息
window.location.href = "http://123.cm" //跳转网页
console.log(window.navigator);//当前浏览器的信息
console.log(window.innerHeight);//浏览器窗口的内高度
console.log(window.innerWidth);//浏览器窗口的内宽度
window.history.go(-1);//倒退一页
...
  1. DOM: 文档对象模型(Document Object Model),通过DOM的对象和方法可以完成对网页中元素的增删改,让网页产生动态效果。DOM的核心是document对象,document属于window,所以BOM是包含DOM的。
//查找元素
let element = document.getElementById("app");//获取id为app的元素

// 改变元素
element.innerHTML = `<p>改变的内容</p>`

// 创建和删除元素
document.createElement(element)
document.removeChild(element)

// 添加事件
element.onclick = function(){ code }

这些都是操作DOM元素。

二省: CSS

17. css3弹性盒子

  1. 弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
  2. 常用属性
属性描述
display指定 HTML 元素盒子类型,属性的值为 flex 或 inline-flex将其定义为弹性容器
flex-direction指定了弹性容器中子元素的排列方式
justify-content设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
flex-wrap设置弹性盒子的子元素超出父容器时是否换行。
align-content修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
flex-flowflex-direction 和 flex-wrap 的简写
order设置弹性盒子的子元素排列顺序。
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
flex设置弹性盒子的子元素如何分配空间。

三省:JavaScript

17. 创建数组的几种方式?

1. 构造函数创建

let arr = new Array()

利用构造函数创建数组时,可以传参数。如果传一个参数并且是数值类型的话,那么就会创建一个length等于这个数字的数组。

let arr = new Array(20)
console.log(arr);//[空属性 × 20]

如果传了一个或多个其他类型的参数,就会创建一个包含这些参数的数组。

let arr = new Array("a")
console.log(arr);//['a']
//new 可省略
let arr1 = Array(100,"str", null, undefined, {})
console.log(arr1);//[100, 'str', null, undefined, {}}]

2. 数组字面量创建

// 字面量创建
let arr = [1, "2", [null, undefined]]
console.log(arr);//[1, '2', [null, undefined]]

3. ES6转化数组方法

  • Array.from()
    是把类数组或有length属性的元素转换成数组
    // 把字符串拆分成数组
    let arr = Array.from("Str")
    console.log(arr);//['S', 't', 'r']
    
    // 把arguments对象转化成数组
    function args() {
     console.log(arguments);//Arguments(3) [1, '2', null, callee: ƒ, Symbol(Symbol.iterator): ƒ]
     console.log(Array.from(arguments));//[1, '2', null]
    }
    args(1, "2", null)
    
    // 可以转化带有必要属性的自定义对象,对象以下标为键名
    let arr1 = Array.from({
     0: "Jason",
     1: "Marry",
     2: "Bob",
     length: 3
    })
    console.log(arr1);
    
  • Array.of() 可以把一组参数转化成数组。
    // Array.of()
     let arr = Array.of(1, 2, 3)
     let arr1 = Array.of(null)
     let arr2 = Array.of(undefined)
     console.log(arr, arr1, arr2);//[1, 2, 3] [null] [undefined]
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端每日三省

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值